Когда дело доходит до разбрызгивания цветов на экране, есть несколько способов сделать это с помощью кодирования. Hex, RGBA и HSLA являются тремя наиболее широко используемыми системами цветового кодирования.
Возможно, вы встречали RGB и шестнадцатеричные коды в прошлом, но HSL, хотя и более читабельный, может быть еще не на вашем радаре. Каждый способ написания цветов имеет смысл в разных ситуациях, и все, что вам нужно, это базовое понимание каждого типа, чтобы принять правильное решение. Здесь мы объясним разницу между RGB, HEX и HSL.
Что такое RGB (красный, зеленый, синий)
Имеет смысл начать со значения RGB, потому что красный, зеленыйи синий Есть три цвета, которые холст может использовать для создания практически любого другого цвета. Это делается с помощью «аддитивного смешения цветов», но вам не нужно изучать эти знания, чтобы понять RGB.
rgb (255, 0, 0) красный, потому что R максимально. Если вы установите G или B на 255, вы получите полный зеленый или синий цвет. Установите все 255 одновременно, и вы получите белый (сумма всех цветов), фокусируясь на черном. Если вы добавите четвертое значение (альфа-канал, введите от 0 до 1). Вы также можете получить прозрачность: rgba (0, 0, 0, .5) переводится в средний прозрачный черный.
Просто, да, но это не так умно. Баланс RGB может немного измениться, даже если меняется только цветовой тон, что делает очень трудным для человека ручную настройку без какого-либо генератора RGB (которого, к счастью, существует множество).
Что такое шестнадцатеричный код цвета?
Hex – это другой способ записи значений RGB. Нечто подобное # 6a79f7 (васильковый) отображается непосредственно в RGB (106, 121, 247). 6 является красный79 это зеленыйи f7 синий,
Во-первых, вы должны знать, что в шестнадцатеричной системе цветов буквы «af» представляют числа от десяти до пятнадцати. Во-вторых, это шестнадцатеричное, что означает, что все находится внизу. 16. 21 – это 2 * 10+ 1 в базе 10, но гекс станет 2 * * 16 + 1. Просто умножьте первое число на 16 и добавьте второе число, это так просто! 6a = 6 * * 16 + 10 или 106. 79 = 7 * * 16 + 9 или 121.
Хотя математика – это весело, она, безусловно, делает шестнадцатеричный код еще более болезненным для людей, чем RGB, хотя удивительные комбинации букв и цифр легко копировать и вставлять.
Вы также можете добавить прозрачность в шестнадцатеричный код, поместив значение, эквивалентное проценту 255 в начале, например: # 806a79f7. 80 в шестнадцатеричном = 126, что составляет примерно 50% от максимального значения 255.
Что такое HSL (оттенок, насыщенность, легкость)
HSL более или менее разработан для удобства чтения и становится все более популярным, особенно в качестве альтернативы RGB. Это работает так:
цвет обозначает цвет и использует примечание на цветовом круге, чтобы указать, какого цвета оно носит. Если вы знаете цветовое колесо и положение этих основных цветов, вы должны знать, что 45 будет оранжевым, а 270 – фиолетовым только на мгновение.
0 = красный60 = желтый120 = зеленый180 = голубой240 = синий300 = пурпурный
насыщение в основном, как красочные цвета. Насыщенность 0% означает, что цвет будет только серым, а 100% означает, что он покажет свою полную силу. Если вы хотите приглушить его цвет или сделать его немного более популярным, вы можете изменить это значение.
Рельеф говорит вам, насколько темный или яркий цвет. Яркость 0% означает, что его цвет будет черным независимо от настройки оттенка или насыщенности, а при 100% яркости он становится белым. Как вы уже догадались, 50% обеспечивает наиболее точный цвет.
Имея эту информацию, вы должны немедленно знать, что такое hsl (0, 100%, 50%). Только красный! Хотите более темный и богатый красный? попробуйте 0, 70%, 40%. Может быть, вы хотите, но в синем? Измените 0 на 240, и у вас это есть! Он также имеет прозрачность: он работает как RGB: просто добавьте четвертое значение (тип 0 и 1), например: hsla (240, 70%, 40%, .5)
HSV / HSB и HSI
Которого? Больше цветовых моделей? Когда это заканчивается? Для большинства людей, которые работают с цветом на компьютере, это конец. Шестнадцатеричный, RGB и HSL являются наиболее распространенными способами различения цветов. Однако, если вы находитесь в области, которая включает в себя множество изображений и цветов, таких как графический дизайн или машинное обучение, вы можете встретить людей, которые используют одну из этих более эзотерических цветовых моделей, или даже одну из других, которые этого не делают. делать. перечислены здесь. ,
HSB означает «Яркость насыщенности оттенка», а HSV – значение насыщенности оттенка. На самом деле это просто разные названия для одной и той же модели, и самое большое различие для HSL заключается в том, как они определяют насыщенность. HSI (интенсивность насыщенности оттенка) имеет некоторые небольшие отличия от HSB / HSV, но он не используется широко, поэтому вы, вероятно, не будете часто его видеть в природе.
Какую цветовую модель я должен использовать?
В общем, выбор цветовой модели – это очень маленькое дизайнерское решение, но хорошие решения делаются многими маленькими решениями. В общем, шестнадцатеричные коды облегчают копирование и хороши в ситуациях, когда люди могут быть не очень вовлечены. RGB / RGBA стоит читать и лучше всего использовать, когда было бы лучше, если бы люди иногда меняли прозрачность. Если человеку нужно изменить цвета вручную, используйте HSL / HSLA. Кроме того, это скорее вопрос предпочтений, хотя люди из команды HSL, как правило, умнее и привлекательнее.
Изображение предоставлено: Сплошная серая насыщенность цилиндров HSL, Аддитивный цвет, XTerm, HSL и HSV Colour Chart, Munsell 1943
Считаете ли вы эту статью полезной? Если не
