HEX, RGB и HSL описывают один цвет тремя способами
HEX записывает красный, зелёный и синий двумя шестнадцатеричными цифрами каждый. #8B5CF6 означает R равно 139, G равно 92 и B равно 246 — в точности значения RGB. Трёхзначная краткая запись #F00 удваивает каждую цифру, поэтому она равна #FF0000.
HSL раскладывает цвет на тон, насыщенность и светлоту. Тон — это угол на цветовом круге, поэтому 0 и 360 градусов дают один и тот же красный; насыщенность — удалённость от серого, а светлота — положение между чёрным и белым. Поэтому HSL удобнее, когда нужен более светлый вариант того же цвета.
Коэффициент контраста сравнивает относительную яркость двух цветов и лежит между 1:1 и 21:1. Каждый канал проходит гамма-коррекцию, взвешивается с весами 0,2126, 0,7152 и 0,0722 и суммируется; затем к более светлому и к более тёмному значению прибавляется 0,05, и одно делится на другое. У зелёного наибольший вес, потому что человеческое зрение к нему чувствительнее всего.
Что упускают при выборе цветов
Сочетание, красиво выглядящее на экране дизайнера, часто нечитаемо. Рекомендации по доступности требуют 4,5:1 для основного текста и 3:1 для крупного или полужирного от 18 пунктов. Бледно-серый шрифт выглядит изысканно в макете и раз за разом не проходит этот порог.
Судить о контрасте по одной лишь яркости — обманываться. У жёлтого на белом контраста почти нет, потому что оба светлые, а у синего на чёрном — потому что оба тёмные. Контраст создаёт не удалённость на цветовом круге, а разница в яркости.
Передача информации одним цветом исключает читателей с нарушением цветового зрения. Красному и зелёному, обозначающим рост и падение, нужны стрелка или знак, да и сами соглашения различаются: на рынках США и Европы рост зелёный, а в Корее, Японии и Китае — красный.