Забудьте про RGB и HEX

  • Tutorial
В CSS существует несколько способов представления цветов. Один из них — система HSL. В этой статье я покажу вам, какие возможности она открывает для верстальщика.

Что такое HSL


Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота или яркость).

Оттенок — это значение цвета на цветовом круге и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.



Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Определяет степень удаленности цвета от серого той же яркости.

Яркость характеризует, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.



Преимущества HSL()


Ключевое преимущество HSL именно в возможности указывать характеристики цвета независимо друг от друга. Это открывает перед вами огромные возможности. Вы можете легко делать цвет ярче, темнее, более насыщенным или обесцвечивать. И при этом сохранять его оттенок. Или наоборот — изменять оттенки, не меняя их насыщенность или яркость. Зачастую для использования таких возможностей используются препроцессоры, но можно и без них.

Несколько примеров


Производные цвета того же оттенка


Одна из самых распространенных задач: сделать компонент, который будет принимать один единственный базовый оттенок, но состоять из нескольких его вариаций. В моём примере, это типичный алерт, у которого цвет текста, фона и обводки имеют один оттенок и насыщенность но разную яркость:

.success {  
  border-color:     hsl(120, 50%, 40%);
  color:            hsl(120, 50%, 20%);
  background-color: hsl(120, 50%, 90%);
}


Видите, как красиво и наглядно? Сразу видно, что это одно «семейство» цветов. В других форматах это выглядело бы как-то так:

/* rgb */
.alert {
  border-color:     rgb(51, 153, 51);
  color:            rgb(25, 77, 25);
  background-color: rgb(217, 242, 217);
}

/* hex */
.alert {
  border-color:     #339933;
  color:            #194d19;
  background-color: #d9f2d9;
}

Не знаю как вам, а мне сложно глядя на такой код сказать связаны ли как-то эти цвета или нет.

Но это мелочи. Настоящая мощь раскрывается при использовании css custom properties.

Как говорится, следите за руками. Если сделать любую составляющую цвета, например оттенок, переменной, тогда мы сможем легко создавать бесконечное количество вариаций нашего компонента изменяя в нем исключительно базовый оттенок. А все производные будут отталкиваться от него.

.alert {
  border-color:     hsl(var(--hue), 50%, 40%);
  color:            hsl(var(--hue), 50%, 20%);
  background-color: hsl(var(--hue), 50%, 90%);
}



Обесцвечивание


В этом примере выключенная кнопка имеет сниженную насыщенность. Она всё ещё имеет едва заметный синий оттенок, но при этом почти серая. А при наведении кнопка сохраняет оттенок и насыщенность, но становится темнее.



Для решения такой задачи достаточно изменять всего один из трех параметров чтобы получить производный, но похожий цвет. Что при использовании rgb или hex сделать не так просто.

Как и в первом примере, вы можете легко подменять оттенок, не затрагивая все остальные характеристики цвета в вашем компоненте.


Наследование цвета


Одна из самых крутых техник: создание одного оттенка, отталкиваясь от другого. Достигается это простым сложением в calc().

:root{
  --hue: 120;
}

header {
  background-color: hsl(var(--hue), 30%, 20%)
}

header button {
  background-color: hsl(calc(var(--hue) + 130), 80%, 50%)
}

В этом примере оттенок кнопки зависит (+130° на цветовом круге) от оттенка контейнера.


Таким вот нехитрым образом вы можете создавать полноценные гибкие цветовые палитры для ваших сайтов, устанавливая всего один базовый оттенок и отталкиваясь от него.

И все ваши компоненты будут сохранять насыщенность и яркость, как это продемонстрировано в предыдущих примерах.



Будущее


В спецификации CSS Color Module Level 4 были описаны новые функции: lab() и lch() для указания цветов в одноименных форматах. LCH имеет такую же гибкость как и hsl, но привносит ряд улучшений, с оглядкой на современные устройства. Подробнее об этом вы можете прочитать в статье «LCH colors in CSS: what, why, and how?».

Итог


На мой взгляд формат hsl имеет просто фантастическую гибкость в сравнении с альтернативами. В комбинации с переменными вы практически привносите все возможности по работе с цветами из препроцессоров в нативный CSS.

P.S. Извините за громкий заголовок :)

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

В каком формате указываете цвета в ваших проектах?

  • 64,4%HEX453
  • 48,4%RGB340
  • 9,4%HSL66
  • 13,5%Ключевые слова95

Комментарии 97

    +2
    Tutorial? Ну это уж слишком!
      0
      Большое спасибо за статью — да, с hex определенно пора уже съезжать, и нет особого резона съезжать на rgb(a).
        +3
        Альфу и в хексе можно указать. #FF000080 — полупрозрачный красный
        И да, браузеры поддерживают.
        +1
        Следующим этапом развития знаний цветовой теории является HSLuv.
          0
          Никакой это не «следующий этап», это частная инициатива одного человека. С нулевыми шансами на принятие её в качестве мирового стандарта.
            0
            А мне показалось, CIELUV принят в 1976.
              0
              Это разные системы. CIE LCh(uv) != HSLuv.

              Это не говоря о том, что CIE LUV сама по себе специфическая система, используемая для очень узких научных целей. На практике используется CIE Lab и соответственно CIE LCh(ab).
                0

                Я вот прям серьезно копал этот вопрос. Lab используют скорее потому что "так сложилось".
                На счёт Luv, ниже выдержка из доклада Ross Ihaka:
                Ihaka et al. (2003): The two perceptually based spaces introduced by the
                CIE in 1976 are the CIELUV and CIELAB spaces. The CIELUV space is
                generally preferred by those who work with emissive colour technologies
                (such as computer displays) and the CIELAB space is preferred by those
                working with dyes and pigments (such as in the printing and textile
                industries),
                see https://www.r-project.org/conferences/DSC-2003/Proceedings/Ihaka.pdf

            0
            Вот кстати, имеет больше смысла приведённый вами вариант. Как раз по тем причинам по которым он создан — восприятие яркости/насыщенности не соответствует цифрам. Несколько статей уже было где на глаз подбирали палитру с учётом дальтоников и проч.
            +3
            IMHO, один маленький минус — если по значениям RGB можно примерно представить, как выглядит цвет, то в HSL придётся держать рядом цветовой круг, как минимум первое время.
              +8

              С RGB вы, наверное, то же не сразу запомнили, что зелёный + синий дадут жёлтый. Особенно, если до этого красками рисовали

                +2
                спорно. олдскулы помнять 16 цветную палитру. там всё очевидно.
                  0

                  16-ти цветные палитры на моей памяти не были фиксированный. Вы про RGB с 4 битами на цвет?

                +6

                Причём в RGB для понимания требуется в уме хотя бы примерно вычислить взаимные пропорции каждого компонента, что как-то не очень и быстро.
                А вот шкалу HUE, как мне кажется, воспринять гораздо проще — достаточно запомнить пару контрольных точек вроде 0, 90, 180 и 270 градусов. Тем более, последовательность цветов совпадает с последовательностью в спектре / радуге, которую я помню и так.
                Пожалуй, попробую перейти на HSL

                  0
                  Тогда логичнее запоминать R/G/B = 0/120/240 или R/Y/G/C/B/M = 0/60/120/180/240/300
                    –1
                    Зачем вы запоминаете? Практически любая среда показывает цвет напротив кода
                    –1
                    Запоминать какой то круг с градусами?
                    Увольте, я лучше 3 (4 с прозрачностью) числами буду оперировать.
                    А конкретные оттенки пусть дизайнеры делают )
                      +2

                      Так разговор-то про разницу между RGB и HSL, а три числа есть и там, и там.

                    +1
                    Только красный + зелёный = жёлтый.

                    На самом деле запомнить очень легко: жёлтый это отсутствие синего. (255, 255, 0) — это просто белый минус синий. Ну и частично в rgb действуют правила обычных красок: например, оранжевый между красным и жёлтым. Между (255, 0, 0) и (255, 255, 0) лежит как раз (255, 100, 0).
                    Но да, для коричневого порой появляется соблазн смешать красный с зелёным).
                      +2

                      Вот, ошибся, хотя больше 25 лет с ргб работаю, но уже больше 20 лет забил на попытки запомнить смысл разных чисел в нём, кроме самых простейших типа только один цвет гораздо больше других, или все цвета одинаковы.

                        +2
                        Как-то неинтенсивно работаете, похоже :)
                        У меня момент просветления наступил когда я вручную подбирал нужные цвета для сайта, редактируя их в ргб.

                        Кстати, в рисовании ргб тоже есть: если свет жёлтый, то тени синие. Если свет синий, тени жёлтые.
                          +1

                          Очень давно не пытаюсь анализировать или синтезировать rgb значения самому. Или тулинг типа IDE/пипетки, или просто именнованные цвета использую типа red, black для всяких демок и прототипов.

                      0

                      Жёлтый и синий дадут зелёный зато.

                        0
                        Белый же по аддитивному смешению: #ffff00 + #0000ff = #ffffff

                        0
                        зелёный + синий дадут жёлтый


                        Вероятно, вы хотели сказать — зеленый + синий дадут голубой?
                          +1

                          Что хотел сказать, то и сказал. Ошибся, что в очередной раз подтверждает, что RGB это ни разу не естественно, а требует изучения и практики.

                            0
                            C одной стороны — да, неочевидно и неинтуитивно, но вполне естественно — ведь у нас рецепторы как раз примерно RGB и мониторы у нас тоже RGB.

                            С другой — нет ничего особо сложного в запоминании сочетаний цветов — мы каждый день запоминаем что-то новое, необходимой для работы или жизнедеятельности: музыканты — ноты и аккорды, врачи — названия препаратов, а дизайнеры вот — цвета)
                              +1
                              Рецепторы у нас совсем не RGB а LMS
                                0
                                Ну вы и зануда) А теперь, если мы вернемся к сути, почему для модели RGB были выбраны именно красный, зеленый и синий, мы увидим, что (внезапно!) это было сделано с опорой именно на физиологию тех самых колбочек, и аддитивная модель RGB прекрасно описывает цветовое пространство LMS, но какой толк это обсуждать — это следует из определений же.

                                Я специально еще написал слово «примерно», чтобы подчеркнуть отклонения пиков чувствительности колбочек от «чистых» цветов. Или вы смотрите на мир не трехцветными рецепторами?
                                  0
                                  то было сделано с опорой именно на физиологию тех самых колбочек

                                  Да

                                  аддитивная модель RGB прекрасно описывает цветовое пространство LMS

                                  Нет. Точнее говоря пространство LMS конечно можно описать через RGB, но это а) нетривиальное соответствие и б) многие цвета LMS будут в этой модели заданы отрицательным R.

                                  Понимаете, в реальности RGB выбрали банально из соображений максимизации цветового охвата. Вот gamut в системе XYZ. Внешняя линия соответствует монохроматическим цветам. Если Вы возьмете любую смесь из N этих монохроматических цветов, то Вы получите точку в виде линейной комбинации этих цветов взятых с положительными коэффициентами, т.е. точку внутри выпуклого многоугольника заданного этими точками. Для трех цветов Вы получите точку внутри треугольника. Для непрерывного спектра (любых реальных источников света) — точку где-то внутри gamut.

                                  Нетрудно увидеть что для трехцветного источника света для максимизации цветового охвата надо брать R, B и какой-то G. И только. У нас нет рецепторов R, G или B. Наши рецепторы ближе к системе XYZ в которой нарисован этот рисунок и они способны воспринимать и распознавать цвета за пределами треугольника RGB.

                                  Вот как выглядит система цветов если ее к RGB привести. Легко видеть что есть куча цветов с «отрицательным красным».
                            0

                            Название цвета словом очень относительно ваше прежнего опыта.
                            Голубой может часто восприниматься как светло-синий. В научной литературе и школьной программе биологии есть сине-зелёные водоросли, они же цианобактерии — из их названия как раз и следует более точный термин для смеси синего и зелёного — циан. В англоязычной литературе название смеси rgb(Y, X, X) / hsl(180, X, Y) — только одно cyan, то есть Green + Blue = Cyan.

                              0
                              Вы правы насчет смеси rgb(Y, X, X) / hsl(180, X, Y), но я всего лишь хотел сказать, что получится явно не желтый.

                              А вот насчет цианобактерий есть тонкость — цвет у них получается, хоть и циановый, но другого оттенка — из-за субтрактивного смешивания зеленого и синего — получается сине-зеленый, который цвета морской волны, а не голубоватый циан аддитивного сложения, если уж строго.
                            0
                            del
                            0
                            А зачем? Сейчас все IDE/Редакторы могут показывать реальный цвет если не сразу, то по наведении уж точно. Нет никакого смысла держать в голове что там за цвет.
                              0

                              О, кстати об IDE!
                              Всегда мечтал о плагине к IDE, который позволил бы редактировать цвета подсветки синтаксиса как в графических редакторах — фильтрами.
                              К примеру, есть у нас цветовая схема, например, Darkula или Monokai, но хочется вот такую же, но чуть более (или менее) контрастную, или сдвинуть всё в тёплые тона немного, или как в фотошопе "кривыми" покрутить и добиться чтобы не было неприятных оттенков в желтой части…
                              Сейчас приходится лазить по всем пунктам всех синтаксисов и настраивать кучу цветов. Наверняка до такой идеи кто-то додумался уже.


                              Кто слышал о таком?

                                0
                                В той же intellij idea можно нажать на цвет и появится палитра
                                  0

                                  Так в том и проблема, что на каждый цвет нажимать приходится. А я хочу сразу все сделать суть ярче или чуть контрастнее. Или только тусклые красные сделать чуть ярче и желтее, а остальные не трогать. Сейчас приходится кучу кликов сделать.

                                    +1
                                    Используйте переменные.
                                    По другому я даже не представляю как IDE должна угадывать что вы там хотите изменить за 1 клик.
                                      0

                                      Да сколько угодно способов. К примеру, если мне надо всё оформление сделать ярче или темнее, можно покрутить глобальную яркость и все цвета будут изменены осветлением с гамма-коррекцией. Надо контрастность — домножаем все цвета на коэффициент. Фотошоп-то как-то умудряется понимать что вы там регулируете кривыми и меняет цвета многих пикселей. Так можно и в IDE.


                                      Про сколько угодно способов.


                                      • К примеру, можно взять корпус кода, раскрасить, применить фильтр к отрендереному изображению и снять с него цвета. Это будет максимально понятный фотошоперам подход.
                                      • Можно взять все цвета схемы и разместить на матрице по цвету на пиксель. Фильтр применять к матрице как к картинке, потом цвета разбирать обратно.
                                      0
                                      material theme плагин позволяет взять одну из своих тем и усилить в ней контрастность
                                0
                                Вы просто свою нейроночку хорошо натренировали. Я прекрасно помню студенческие годы и фотошоп с двумя панельками RGB и HSL. Я хорошо запомнил, как просто подбирать цвет по второй панельке и как это нереально по RGB.
                                Проблема с HSL в том что HUE начинаться может с любого оттенка в зависимости от софта. А RGB всегда от 0.
                                +14
                                Признаться открывал статью с предубеждением, что вряд ли у кого то получиться убедить меня отказаться от HEX. Но, похоже, у вас получилось. Спасибо.
                                  0
                                  Дихромат детектед! Макеты в опасности!)
                                  +4
                                  Удобно.
                                  Подумал, как заменить rgba.
                                  hsla оказывается существует.
                                    0
                                    del
                                      –4
                                      Есть hex с альфой
                                      –5
                                      А если захочется распечатать на цветном принтере? Там CMYK.
                                        +5
                                        Там принтер пусть разбирается )
                                          0
                                          Цвет-то не получится передать.
                                        –10
                                        > Забудьте про RGB и HEX
                                        Ну будьте быдлом. И не важно что вам так удобнее )
                                        «Просто мне кажется что все должны пользоваться тем чем мне удобнее»
                                          –10
                                          Гг, забыл табличку «SARCASM».
                                          Ну и кавычки видимо не заметили.
                                          Хочется сказать как Задорнов но не буду )
                                          +1
                                          Никто не пользуется HSL и никогда не будет, это мертворожденная система. Исторически стандарт де-факто в графическом софте — HSB, которая устроена по аналогичному принципу, но интуитивно понятнее. HSL кое-где поддерживается, конечно, но в реальной практике её не использует никто.

                                          Вообще, иначе как саботажем нельзя назвать тот факт, что W3C протащил в свои стандарты HSL вместо HSB. Я свечку не держал, но подозреваю, что это было сделано исключительно в пику «проклятой проприетарщине» — с выстрелом в ногу всем веб-дизайнерам и разработчикам.

                                          А вот появление в будущих спеках Lab и Lch — это в целом очень ожидаемая штука. Но есть нюансы: в зависимости от выбранной точки белого нас могут ожидать несовместимости с разными стандартами и/или погрешности конвертаций.
                                            0
                                            О, а можно подробности?

                                            Чем HSL сильно хуже HSB (между ними разве не линейный переход вообще?)? И зачем вообще Lab / Lch в вебе, правда есть смысл учить браузер его интерпретировать?
                                              +1
                                              Lab гораздо круче HSV в плане воспринимаемой яркости. При одинаковых Saturation и Value, но разном Hue в модели HSV получаются различные по яркости оттенки. В модели Lab при одинаковом Luminance, но разных a и b такой проблемы нет.

                                              Можно ещё посмотреть www.youtube.com/watch?v=nIaczt4F2D4

                                              А уж зачем это в вебе — так затем, чтобы у дизайнеров было больше инструментов. Вот, теперь смогут равномерную воспринимаемую яркость у страницы делать.
                                                –1

                                                Да и не только для дизайнеров. Первый же юзкейс который приходит на ум: вы делаете библиотеку компонентов. И в каждый компонент можно передать значение Hue но только его. При некоторых значениях цвет будет восприниматься слишком ярким, или темным, что вынудит пользователя вашей библиотеки дополнительно запарится чтобы выровнять воспринимаемою яркость у отдельных элементов.

                                                  0

                                                  Вот вам ссылка на SASS библиотеку в которой есть поддержка LCH(ab), LCH(uv), HSLab, HSLuv и много чего ещё.

                                                +5
                                                Координаты HSB просто более интуитивны и удобны для восприятия.

                                                image
                                                HSB это конус, где значения по осям S и B можно удобно крутить независимо друг от друга.
                                                HSL это двойной конус с изломом боковины. Во-первых, получается, что координаты S и L не независимы — крутя одну, субъективно кажется, что меняется и другая. Во-вторых, плавают эффективные диапазоны. Например, у максимального белого L=100, у максимального красного L=50.
                                                А при L>50 все хроматические цвета выбеляются, ну то есть как бы падает S, хотя численно её никто не трогал.

                                                В результате мысленно представить цвет по трём HSB-координатам не составляет труда. В HSL это намного сложнее. Отчасти благодаря удобству, отчасти поддержке Adobe, но де-факто HSB уже давно победила.

                                                Теперь про CIE Lab. Его специально разрабатывали как perceptually uniform color space. То есть любые цвета с численно равной яркостью должны и визуально восприниматься как равнояркостные. В HSB/HSL это не так: например, синий субъективно всегда гораздо темнее зеленого при равных циферках. И изменение любой координаты на равное количество единиц должно приводить к изменениям субъективно равной величины. На самом деле в Lab это тоже работает не совсем идеально, но намного лучше, чем в любой другой системе.
                                                  +1

                                                  Добавлю что Lab это уже динозавр в мире прецепционных цветовых моделей, логичнее сразу смотреть в сторону CAM16 или JzAzBz.

                                                    0
                                                    Стоп-стоп, всякие CIECAM02 и CAM16 — это уже не цветовые пространства, а модели восприятия (color appearance model). Они предназначены для предсказания восприятия цвета с учетом условий сцены. Это игроки из другой лиги, они явно выходят за рамки темы поста.

                                                    А вот про JzAzBz я не знал, обязательно почитаю.
                                                      0

                                                      Процитирую Вики:
                                                      "They tried to achieve this goal by creating a perceptually uniform color space, i.e. a color space where identical spatial distance between two colors equals identical amount of perceived color difference. Though they succeeded only partially, they thereby created the CIELAB (“Lab*”) color space which had all the necessary features to become the first color appearance model. While CIELAB is a very rudimentary color appearance model, it is one of the most widely used because it has become one of the building blocks of color management with ICC profiles."


                                                      По сути, Lab это прародитель цветовых моделей восприятия.


                                                      Могу посоветовать книгу Фершильда (второе издание есть в переводе) https://onlinelibrary.wiley.com/doi/book/10.1002/9781118653128

                                                        0
                                                        Прародитель — да, но не эквивалент.

                                                        Модель восприятия получает на вход тристимул CIE XYZ плюс условия его просмотра, чтобы с учетом известных феноменов восприятия предсказать, как он будет выглядеть для зрителя. Это иная задача, чем та, которую мы обсуждаем. Нам всего лишь нужно прописать абсолютный цвет в CSS, а не угадывать, как на него повлияет освещение в комнате пользователя.

                                                        Книга у меня эта есть, и не только она.
                                                          0

                                                          Ну это не мешает их использовать в виде Jch с частично фиксированными параметрами.

                                                            0
                                                            Ну в комнате — это перебор. Но в рамках страницы это то-что надо.
                                                            0

                                                            Ну и в браузеры завезли толтолько два цветовых пространства sRGB и P3.
                                                            HSL и HSB это модели представления RGB.

                                                        0
                                                        А при L>50 все хроматические цвета выбеляются, ну то есть как бы падает S, хотя численно её никто не трогал.

                                                        Так цветовая модель отражает техническое ограничение монитора. Белый цвет на мониторе гораздо ярче максимального красного. При попытке задать цвет ярче чем может монитор он выбеляется.

                                                        Во-первых, получается, что координаты S и L не независимы — крутя одну, субъективно кажется, что меняется и другая.

                                                        Это как раз для HSB больше проблема — изменение S меняет V. HSL как раз по восприятию более однородная — ценою того что она вынуждена отражать реальные возможности монитора и из-за этого устроена сложнее.

                                                        Впрочем в отличие от Lab обе системы в любом случае неоднородны. Так что тем кому нужна однородность — берут Lab, те кому удобство — HSB.
                                                          0
                                                          Ну это лукавство. Никакие технические особенности HSL не отражает.
                                                          Максимальный желтый (L*=98 для sRGB) по своей перцептивной светлоте гораздо ближе к белому (L*=100), чем например к максимальному синему (L*=30) — однако же ведет себя как последний.

                                                          Если говорить честно, усложнение HSL по сравнению с HSB не дает никаких реальных плюсов, только минусы.
                                                            0
                                                            Ну как же не отражает? В мониторе цвет формирует три разных источника света (скажем три разноцветных пикселя ЖК-фильтра пропускающие белый свет). Очевидно что если они все дают свет, то это больше света, чем если свет дает только один из них.

                                                            Да, HSL опирается по сути на идею что все три цвета имеют равную интенсивность, тогда как в реальности зеленый напрочь забивает по яркости синий. Но это все равно ближе к реальности чем идея HSB о том что один пиксель синего цвета светит так же ярко как пиксель белого цвета (тот же синий + красный + зеленый).

                                                            А так я повторю то что уже написал — получилось что HSL занимает промежуточную нишу, проигрывая Lab в однородности а HSB — в удобстве.
                                                    +1
                                                    Я так и не понял, в какой момент времени и что именно должно стать для разработчика гибче/лучше/удобнее во время повседневной работы.
                                                    Есть макет от дизайн-отдела с отдельным артбордом, в котором цветовая палитра, шрифты, базовые компоненты, какие-то правилами по сетке и/или вертикальному ритму, и т.д.
                                                    Загнал все возможные цвета в переменные (css или scss, неважно), продолжаешь работать.
                                                    Какая разница в каком формате загонять цвета из макета в переменные?

                                                      0

                                                      Да, если хранить в переменных весь цвет, тогда не важно в каком он формате. Но гибкость появляется в тот момент, когда в переменных вы храните именно составляющие части цвета а не цвет целиком. Тогда вы можете получать цвет из составных частей "на месте", внутри каждого компонента и изменять их под разные нужды в зависимости от ситуации. Это часто необходимо, когда вы создаёте что-то более чем просто верстку по идеальному макету. Когда у вас есть необходимость получать производные цвета от какого-то одного, но вы не знаете какой он, или хотите иметь возможность легко его изменять. Или когда вы занимаетесь поддержкой проекта, в который постоянно вносятся изменения и часто, без макета с отдельным артбордом на каждую правку.

                                                        +2

                                                        А потом говорят: сделай кнопоску понасыщенней сам, дизайнерам некогда. Это если вообще есть дизайн-отдел.

                                                        +1
                                                        В этом примере оттенок кнопки зависит (+130° на цветовом круге) от оттенка контейнера.

                                                        фигня же выходит

                                                          +3

                                                          На вашей картинке ошибка.



                                                          Насышенный красный цвет справа hsl(0, 100%, 50%) при сатурации 0% будет иметь цвет hsl(0, 0%, 50%), что является серым, а не черным.

                                                            0

                                                            Да там всё неправильно. Надо было не 3 линейки рисовать, а линейку и два квадрата.


                                                            А если линейки — надо на первой зафиксировать стрелкой Hue = 0 (красный).
                                                            Вторую тогда переименовать в "Brightness".
                                                            А третью выкинуть и заменить на нормальную шкалу Saturation от красного к серому (или белому).


                                                            Brightness & Saturation


                                                              0

                                                              "линейки" для того чтобы показать зависимость цвета от какой-либо линейки при неизменности остальных

                                                            +1
                                                            Ключевое преимущество HSL именно в возможности указывать характеристики цвета независимо друг от друга. Это открывает перед вами огромные возможности. Вы можете легко делать цвет ярче, темнее, более насыщенным или обесцвечивать. И при этом сохранять его оттенок. Или наоборот — изменять оттенки, не меняя их насыщенность или яркость.

                                                            Это не совсем так, если мы потом конвертируем цвет в RGB. Попробуйте зафиксировать компоненту L и прокрутить H. По факту вы получите разную яркость пикселя. Для отображения на мониторе так или иначе произойдёт конвертация в RGB, если мы HSL цвет конвертируем в серый путем простого усреднения, то получим разную яркость пикселя:

                                                            Обратите внимание на синий и желтый цвета — они разные по яркости. Цветовая модель, которая может сохранить яркость пикселя в RGB палитре называется HSI (i на конце). Ни HSL, ни HSV, ни HSY при блокировании яркостной компоненты итоговую яркость пикселя в RGB гарантировать не могут.
                                                              0
                                                              если мы HSL цвет конвертируем в серый путем простого усреднения, то получим разную яркость пикселя
                                                              А зачем так делать? Есть же много методов конвертации в greyscale. Среднее арифметическое — самый тупой и некорректный из них. Ни графические редакторы, ни браузеры так не поступают. Имхо, усреднение можно оправдать только в случаях, когда требования по скорости/объему кода экстремальные, а на качество плевать (демосцена например).
                                                                0
                                                                HSI сохраняет яркость только в модели grayscale с простым усреднением.
                                                                Это не лучший вариант преобразования к серому
                                                                Хотя L в HSL действительно еще хуже
                                                                –1
                                                                Спасибо за познавательную статью
                                                                  –1
                                                                  Автору плюсик в карму, апвоут статье и благодарный комментарий, вот так сильно мне понравилась эта статья. Коротко и доходчиво.
                                                                    +5
                                                                    Я не соглашусь с автором в его найденном походе как более удобным. Я понимаю, это звучит заманчиво, сместить коэфицент и получить новую цветовую схему, которая казалось бы, смотрится сносно.
                                                                    Но цвета не существует без формы, а формы не существует без окружения. Про это забывают все, кто берется за цветовые генераторы. Все это убивает любую теорию цветовых схем. Они вас начинают ограничивать сразу же по переносу в ваш интерфейс.
                                                                    Цветовые круги и гуляния по ним давно вшиты в препроцессоры но не получили никакой популярности. Их используют только в каких нибудь генераторах чего нибудь по привычке.

                                                                    Цвет всегда подбирается индивидуально даже в зависимости от типа антиалиазинга шрифта в браузере.
                                                                    Увы, задать ручками новую цветовую схему надёжнее и быстрее, чем искать приятный вариант через установку коэфицентов то есть введение новой абстракции через предположение что чувственное восприятие цвета ложиться в мат. логику.
                                                                    Конечный результат: приятная кнопка. Если вас устраивает результат вашего генератора -ок. Пока цветом заведует вы — все нормально. Но любой советчик цвета со стороны в приказном порядке сломает все.
                                                                    По мне с цветами вообще нет проблем после добавления колорпикера в браузеры. Цвета подбираются индивидуально, копипастятся в css. Вам даже смотреть не надо что вы копипастите.
                                                                      +1
                                                                      По мне с цветами вообще нет проблем после добавления колорпикера в браузеры. Цвета подбираются индивидуально, копипастятся в css. Вам даже смотреть не надо что вы копипастите.

                                                                      Подбор индивидуальных цветов абсолютно везде — плохо масштабируется. Есть цвета естественным образом зависимые, например, всякого рода тени (чтоб получить естественный эффект). Если градиенты для тени сидеть и кодировать индивидуально подобранными цветами — ну, удачи вам потом изменять пачку из 5 RGB-значений, когда кто-то со стороны захочет чуть другого оттенка.

                                                                      Мир фронтэнда давно уже сложнее, чем использование захардкоженных цветов ради раскраски кнопочек.
                                                                        0
                                                                        Для меня зависимость цветов — только соглашение об упрощении. То есть как бы принятие общей религиозной модели. Цвета независимы и смотрятся по разному на разных формах, толщинах и окружении. Если ударить кулаком о стол и сказать «не волнует, у нас такое соглашение по зависимости цветов, желайте в этих рамках» и всех все устраивает то ок.
                                                                        Я могу возразить только мыслью что это чревато бутсрапиризицией интерфейсов, и отбитыми пальцами дизайнера.
                                                                        Если вы говорите про тень — это упрощение только до какого-то одного фона. И ее нельзя делать зависимой только от цвета элемента. И что делать с ночной темой?

                                                                        удачи вам потом изменять пачку из 5 RGB-значений, когда кто-то со стороны захочет чуть другого оттенка.

                                                                        Честно — не вижу проблем, потому что мыслю в ощущениях цвета, которые получаю регуляцией колорпикером до положения устраивает или не устраивает. Какие он значения и в какой системе показывает при этом — мало волнует. Я бы рад посмотреть пример.

                                                                        Мир фронтэнда давно уже сложнее, чем использование захардкоженных цветов ради раскраски кнопочек.

                                                                        Но все равно состоит весь и полостью из раскрашивания кнопочек)
                                                                          +1
                                                                          Мир фронтэнда давно уже сложнее, чем использование захардкоженных цветов
                                                                          Вот именно потому, что мир вообще и человеческое зрение в частности очень сложны, цвета и приходится подбирать вручную.
                                                                          Один и тот же цвет выглядит по-разному в зависимости от размера и формы объекта, от цвета фона, соседей, наложенных эффектов, общей яркости сцены и тд. Цветовые модели RGB/HSB/HSL нелинейны, цвета смешиваются по-разному, сочетаются по-разному. Нюансов куча.

                                                                          Поэтому попытки формализовать отношения между цветами какой-то простой формулой (вот эти все функции препроцессоров типа lighten/darken) — не работают. Хотя в теории выглядят заманчиво, согласен. Точнее, это может работать в узких частных случаях. Но в широком случае — типа, взял светлую тему, что-то там инвертировал или перемножил на коэффициент и получил темную — это абсолютная утопия. Поэтому без ручного вмешательства, увы, не обойтись.

                                                                          Естественное, это не означает, что нужно впадать в другую крайность и хардкодить отдельный цвет для каждой запятой. Конечно, нужны разумные рамки.
                                                                            +1
                                                                            Но в широком случае — типа, взял светлую тему, что-то там инвертировал или перемножил на коэффициент и получил темную — это абсолютная утопия. Поэтому без ручного вмешательства, увы, не обойтись.

                                                                            Да ну нет конечно. Но вот когда надо передать определенные эффекты (тени, блики, тому подобное) — тут как раз нужны больше отношения между цветами, чем ручная работа. И статья абсолютно правильно утверждает, что RGB ну очень неудобен для описания таких отношений.
                                                                              0
                                                                              Даже в этом случае очень плохо работает :)
                                                                              Например, у меня есть светло-серая кнопка default, ярко-синяя primary, красная danger и зеленая success. Так вот если я попытаюсь наложить на них численно одинаковые блики или тени, результат будет очень так себе. При любом варианте будет так: где-то почти ничего не видно, а где-то уже перебор.
                                                                                0
                                                                                У меня перед глазами текст с пунктирным подчеркиванием
                                                                                border-bottom:1px dashed rgba(73,51,31,0.3)

                                                                                Я подбирал цвет пунктира по образцу из 5 букв. Когда же я увидел, как он смотрится на слове из 10 букв — напрягся. Основная масса текста стала забирать на себя бОльшее внимание из-за своей оптической массы. Теперь подчеркивание слишком блеклое.И что делать? Искать золотую середину. Не велика проблема, просто я ее чувствую.

                                                                                Другая проблема — гарнитура кастомных шрифтов меньше 1rem теряет ощущение однородности цвета из-за субпиксельного сглаживания (основная проблема любых кастомных шрифтов) с гарнитурой больше 1rem. Цвет то один! Что делать то?
                                                                                Да, можно добавить text-shadow, оттенить немного… или же взять другой более сочный цвет до визуального сходства. И такого хватает.

                                                                                Понимаете, это чувственная задача. Автор статьи, верятно, не обладает должной чувствительностью для того, чтобы воспинимать массу оттенков и их взаимоотношения. Меня не сильно волнует, например, опера. А для него облегчение задачи масштабирования цвета доминирует перед чьими то духовными и эстеттическими страданиями.
                                                                                  0
                                                                                  Если ваша единственная проблема — разобраться с чьими-то духовными и эстетическими страданиями по поводу малозначительных деталей дизайна — мне кажется, что вы могли бы и чем-то гораздо более продуктивным заняться.

                                                                                  Тем более, что вы на самом деле разбираетесь исключительно со своими собственными возвышенными чуйствами, а не с чьими-то еще — ваши страдания над подчёркиванием и сглаживанием будут выглядеть совершенно иначе на других мониторах, операционных системах, и прочих разных условиях просмотра. Не говоря уж про разных людей. Вы вот страдаете над мелкими шрифтами, а лично я готов вломить каждому любителю поставить шрифт меньше 1rem канделябром, потому что у меня не настолько хорошие глаза, чтоб это потом разбирать.
                                                                                    0
                                                                                    Я бы не назвал их малозначительными и индивидуальными, это скорее попытка разобраться в мелочах для постановки более четких технических границ. Все таки цвета, формы, констрасты в интерфейсах не так хорошо всеми ощущаются одинаково, но как и в любой области речь идет скорее о профессиональной теории.
                                                                                    Гарнитуры не всегда совпадают по размеру и выглядят по разному при 1rem. Например, на экране менее 500px можно отказаться от загрузки кастомных шрифтов и использовать системные. При этом заметно как сильно прыгает интерфейс. Если 1rem это 16px то у какой-то гарнитуры это 18px. Поэтому иногда приходится делать .95
                                                                                    +2

                                                                                    Вы правы. Я не дизайнер. И если уж на то пошло, то и верстальщиком себя не считаю. Тема статьи — показать преимущества одной CSS функции в определённом спектре задач. Если вы работаете над одним сайтом, со статическим контентом, где каждое слово, каждое подчеркивание выверено до субпикселя того, я полагаю, описанные мною техники для вас не важны, или даже вредны. Но есть же и другие задачи. Скажем разработка темы для какой-то CMS. Там вы не можете знать какой контент будет на странице. Или конвеерная разработка. Когда нужно скопировать бОльшую часть из одного проекта, добавить куски другого чутка изменить и выкатить
                                                                                    Здесь скорость, гибкость и простое масштабирование куда важнее. Как бы грустно это не звучало.

                                                                                      0
                                                                                      Да, для технического прекрасно дизайна подходит.
                                                                            0
                                                                            Ответил RGB, потом заметил что у пункта ответа HEX почему-то больше голосов, и понял что в вашем списке у меня тоже он.
                                                                            Не надо всё в кучу валить. RGB, HSL и ключевые слова — это действительно разные способы представления цвета. А то, что вы назвали HEX — это не новый способ представления, а другая система счисления (шестнадцатиричная) при указании компонент RGB.

                                                                            Пользуюсь везде RGB (обычно в hex-форме потому что так короче), потому что за долгое время он стал интуитивно понятным, и нужный цвет обычно можно закодировать с 1-2 попыток со скоростью нажатия кнопок на клавиатуре и без просмотра всяких таблиц. Ну и потому что это нативное представление для видеокарт и мониторов.

                                                                              0
                                                                              Главное преимущество HEX — формат в котором передается значение.
                                                                              По сути набор цифр и букв. В любом инструменте, особенно «пипетка» есть поле где выводится это значение, и вам достаточно скопировать и вставить его в свой стиль.
                                                                                0
                                                                                В статью стоит добавить упоминание hsla (alpha канала)
                                                                                  0
                                                                                  Я себе мозг вскипятил и чуть в гугле бан не получил, пока пытался понять, почему во втором примере содержимое атрибута style дописывается к блоку. Нельзя же так с нубами…
                                                                                    0
                                                                                    Примеры в статье действительно простоваты для современного веба, поэтому предложил бы автору сделать логичный шаг и начать пользоваться SCSS. Там такие штуки с цветами можно вытворять — закачаетесь. И не обязательно с привычного HEX уходить.
                                                                                      0

                                                                                      Достаточно yellow, red, blue, green, white и др. :)

                                                                                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                      Самое читаемое