CSS - hsl или rgb (a) цвета

Я собираюсь начать новый проект, и я хочу, чтобы его CSS был как последовательным, так и результативным. Мне было интересно, какие цветовые единицы я должен использовать. Средний и Trello имеют разный подход, защищающий rba через hsl и наоборот. Я действительно пытаюсь понять преимущества друг друга

Каковы плюсы и минусы hsl над rgb?

Ответ 1

Старый вопрос, но здесь мой ответ, тем не менее.

Во-первых, если вы чистый разработчик и хотите просто написать код и закончить проект, используйте любой цветовой формат, это не имеет значения. Но если вас беспокоит удобство использования и передача в большую команду и так далее, читайте дальше.

Таким образом, форматы, такие как hex и rgb, предназначены для того, чтобы быть более машиночитаемыми, чем читаемыми человеком. HSL - это нечто противоположное - лучше понять людям.

HSL означает Оттенок, Насыщенность и Легкость. Оттенок - это значение фактического чистого цвета, такого как красный, зеленый, синий, желтый, фиолетовый и т.д., Как показано на цветовом круге. Значение указывается в градусах от 0 до 360.

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

Насыщенность - это количество этого цвета в миксе. Это процентная шкала, от 0% до 100%. Насыщенность 0% дает сероватый оттенок, т.е. 0% вашего оттенка в миксе.

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

HSL - это интуитивно понятный цветовой формат, имитирующий реальный мир. Например, вы, вероятно, сейчас сидите за столом. Обратите внимание на цвет стола. Позвольте сказать, что это стол из красного дерева. Значения цвета будут...

Hex: #4f2017;
RGB: rgb(79, 32, 23);
HSL: hsl(10, 55%, 20%);

Теперь держите руку над ней, как пару дюймов над поверхностью. Ваша тень руки делает рабочий стол немного темнее, верно? Теперь невозможно представить это изменение цвета в шестнадцатеричном или rgb без изменения самого цвета. Но в hsl это абсолютный бриз - просто уменьшите значение Lightness, и бац! Цвет остается тем же, но с добавлением небольшого количества черного - в основном уменьшают значение Lightness.

Hex: #200d09;
RGB: rgb(32, 13, 9);
HSL: hsl(10, 55%, 8%);

Как видите, значения Hex и RGB полностью изменились, тогда как в HSL изменился только один аспект. Благодаря этому становится легко создавать цветовые схемы на лету.

Если я сказал вам, что кнопка на веб-странице должна быть # 61904a или rgb (97, 144, 74), можете ли вы догадаться, какого цвета это может быть? Нет, если только вы не компьютер.

Но тот же цвет в HSL: hsl (100, 32%, 43%). Теперь значение оттенка составляет 100 °, что означает, что он близок к чистому зеленому, что составляет 120 °. Так что это своего рода зеленый. Затем он насыщен на 32%, что означает 32 шага от тусклого серого, который довольно ненасыщенный зеленый. Далее, 43 шага от чистого черного, и наоборот, 57 шагов от чистого белого. Итак, на темной стороне.

Сделать кнопку светлее при наведении, и темнее при нажатии? Это просто, просто увеличить и уменьшить последнее значение, легкость. Это все. Это невозможно сделать с Hex и RGB без инструмента или помощи дизайнеров.

Таким образом, вы можете создавать цветовые схемы с помощью HSL самостоятельно. Надеюсь, это достаточно ответит на ваш вопрос.

Ответ 2

По моему мнению:

HSL(A):

Pro: HSL удобен, когда вещи становятся светлее или темнее, быстрее пишется, позволяет изменять яркость и насыщенность без изменения самого цвета.

Минусы: HSL может не поддерживаться в более старых браузерах (например, IE <9).

RGB(A):

Плюсы: RGBA хорошо известен и поддерживается даже в старых браузерах.

Минусы: когда вы делаете вещи светлее или темнее, вам нужно переписать цвет.

Ответ 3

По правде говоря, нет никаких преимуществ или недостатков для любой модели. Обе модели могут создавать одни и те же цвета. Это зависит исключительно от вашей ментальной модели цвета. Вам легче думать о цвете, как сочетание красного, зеленого и синего, или как определенный оттенок с легкостью и ценностью? Если вы привыкли к одной модели, очевидно, лучше использовать ее.

Лично я предпочитаю RGB, потому что это то, что используют многие приложения рисования. Я могу использовать HSL, и мне не нравится Hex, потому что мне трудно читать.

Ответ 4

Я понимаю, что эта тема старая, но дискуссия затягивается. Я преподаю веб-разработку, и даже текущие учебники по-прежнему противоречивы в этом вопросе.

Есть, однако, явные причины для выбора одного формата над другим.

Используйте тот же формат, что и остальные члены вашей команды разработчиков.
Используйте hex, если ваши целевые посетители используют сильно устаревшие браузеры для просмотра ваших сайтов.
Используйте RGBa, если вы уже знакомы с этим форматом.
Используйте HSLa, если первые 3 варианта не ведут вас в другом направлении. HSLa позволяет кодировать прозрачность, которую делает RGBa, но таким образом, чтобы он был доступен для человека, и к этому времени он достаточно широко поддерживается, чтобы вы ' на самом деле вы не исключаете многие существующие устройства для просмотра вашего сайта.

Однако, как и во всем, оставайтесь гибкими. Жесткость в подходе является признаком когнитивной строгости у разработчика.

Реальность такова, что вы можете обойтись любым форматом, хотя у шестнадцатеричного есть ограничение не поддерживать прозрачность, а у RGBa есть ограничение, которое нелегко настроить без использования отдельной ссылки или инструмента. По этой причине я настоятельно рекомендую HSLa. Как только вы изучите цветовое колесо, вы сможете угадать коды для любого цвета, который вы хотите создать, и быть в поле. Попробуйте это с любым другим форматом, и вы будете сбиты с толку.