Определение цветовых тем градиентных шкал: я должен использовать гекс или RGBA?

Question

Я относительно новичок в CSS. Я пытаюсь понять, почему моя команда UX иногда определяет цвета с помощью шестнадцатеричных кодов, а иногда использует RGBA.

Контекст: Мы создаем высокотехнологичные веб-приложения для управления. Все наши веб-приложения имеют белый фон и не имеют склонности к слоям элементов (например, не рекламируют изображения в качестве фонов). Некоторые дизайнеры считают, что RGBA помогает контролировать коэффициенты цветовой контрастности. Некоторые дизайнеры просто предпочитают использовать RGBA вместо hex. Некоторые дизайнеры используют hex. Никто не дал мне четкую причину своего выбора. Мне бы хотелось знать плюсы и минусы каждого метода и в каких ситуациях один метод лучше другого, потому что я создаю решение для цветовой тематики для нашей основной структуры. Мы хотим градиентные шкалы для каждого из наших основных и дополнительных цветов. В настоящее время нет требований к прозрачности, но я полагаю, что однажды может быть.

Я натолкнулся на сообщение , касающееся UX SE : https://ux.stackexchange.com/questions/105503/why-isnt-primary-text-full-opacity Ответы говорят о том, что RGBA помогает обеспечить стандартное использование цвета. То есть, если вы начинаете с цвета RGB и используете альфа-значение для регулировки яркости / темноты, вы можете обеспечить согласованную шкалу градиента цвета. (Примечание. В этом сообщении имеется хорошее изображение, показывающее цветовую шкалу с использованием шестнадцатеричного значения и эквивалентное альфа-значение рядом с ним: https://i.stack.imgur.com/MWust.png)

Но что происходит, когда у вас есть элементы HTML , перекрывающиеся , и вы не хотите, чтобы они казались частично прозрачными, и при этом хотите использовать соответствующий цвет? Используете ли вы эквивалентный RGB с альфа 1 или шестнадцатеричный код?

Что касается теории коэффициента контрастности , то вот что сказал мне один разработчик UX: цвет RGBA всегда поддерживает тот же уровень контрастности, что и на нем. Если вы поместите текст тела #AAA на фон #FFF, в отличие от текста на фоне #EEE, текст #AAA будет выглядеть светлее на фоне #EEE. Но если вы поместите rgba (0,0,0,0.33) на фон #FFF vs #EEE, текст всегда будет иметь на 33% более темный контраст на обоих. Это правда? При использовании калькулятора контрастности (https://contrast -ratio.com / ) rgba (0,0,0,0,33) на #FFF имеет коэффициент 2,3, тогда как rgba (0,0,0,0,33) на #EEE имеет коэффициент 2,26. Близко, но не идентично. #DDD снижается до 2,23.

Цветовые палитры пользовательского интерфейса , кажется, использует шестнадцатеричные коды (см. https://material.io/design/color/#color-theme-creation), но я видел другие записи, которые иногда предлагали, чтобы пользовательский интерфейс материала иногда использовал RGBA. Не то чтобы Material UI всегда был прав. :)

Итак, еще раз, я ищу плюсы и минусы шестнадцатеричных значений в сравнении со значениями RGBA и когда лучше всего использовать какие.

Связанные сообщения StackOverflow:

Разница между шестнадцатеричным цветом, RGB и RGBA и когда каждый из них должен использоваться? Объясняет техническое назначение этих двух опций, но не касается целей UX, в частности, использование которых для базовых цветов в основной структуре цветовых тем

Используйте HEX или RGBA Аналогично, хотя это и более старая статья, она также говорит о поддержке браузера. Мой проект требует, чтобы пользователи использовали новые браузеры, поэтому меня больше интересуют преимущества обоих решений.

Answer 1

Хорошо, я построил скрипку, чтобы изучить эти идеи в контексте: https://jsfiddle.net/marniea/1q9adxo6/

Показывает, как один и тот же цвет, выраженный как непрозрачный RGB, ведет себя по-разному, когда выражается в RGBA. Я использую RGBA и RGB (а не HEX), поскольку речь идет об использовании частично прозрачного цвета вместо непрозрачного.

Используемые значения цвета:

• RGB: rgb(128, 128, 128)
• RGBA: rgba(0, 0, 0, .54)

На белом фоне цвета выглядят одинаково ( Пример 1 ).

RGBA говорит: « смешайте 54% моего цвета » - в данном случае черный - « с любым фоном ».

Таким образом, для пример 2 значение RBGA смешивает 54% черного с серым фоном. 54% черный + серый темнее, чем 54% черный + белый. Значение RGB выглядит так же, как в примере 1. Поскольку он имеет почти тот же цвет, что и серый фон, мы его не видим в примере 2.

Для , например, 3 , он смешивает 54% черного с черным фоном. 54% черный + черный только черный, поэтому вы не видите текст или поле RGBA в примере 3.

Цвет RGB предсказуем; это всегда выглядит одинаково. Цвета RGBA не так предсказуемы. RGBA иногда адаптируется лучше (как в примере 2), а иногда нет (как в примере 3).

Если мы смотрим на определение известного количества скинов приложения, определение одного набора цветов с помощью RGBA и надежды на то, что они адаптируются к цветам фона, оставляют вещи на волю случая (или много тестируют, особенно для проверки коэффициентов контрастности). Я чувствую, что лучше знать заранее, какие цвета будут каждый раз, независимо от цвета фона. Если цвета должны быть непрозрачными, почему бы их не сделать?

Единственное преимущество, которое я пока вижу в RGBA, - это обеспечение точного градиента цвета / шкалы насыщенности. Но основной вариант использования - с использованием цветов; определение цвета - это вторичный вариант использования.

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

Answer 2

Hex более традиционный, но долгое время не было возможности определить альфа-канал с ним.

rgba был введен, чтобы позволить людям создавать полупрозрачные цвета.

Однако добавление к спецификации CSS означает, что шестнадцатеричные цвета могут включать альфа-канал, если они имеют 4 или 8 символов.

То есть # 00000055 такой же, как и для rgba (0,0,0,0,33). # 0005 похоже.

Итак, для альфа-смешивания требовалось использовать rgba, но это больше не нужно. Неважно, какой вы используете.