Когда дело доходит до всплесков цвета на экране, есть несколько способов сделать это с помощью кодирования. 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). Шестой красный79 это зеленыйи f7 синий,
Во-первых, вы должны знать, что в шестнадцатеричной системе цветов буквы «a-f» представляют числа от десяти до пятнадцати. Во-вторых, это шестнадцатеричное, что означает, что все в основе. 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 (Hue Saturation Intensity) имеет некоторые незначительные отличия от HSB / HSV, но он мало используется, так что вы, вероятно, не увидите его часто в дикой природе.
Какую цветовую модель я должен использовать?
В общем, выбор цветовой модели – это довольно маленькое дизайнерское решение, но хорошие вещи делаются многими маленькими решениями. В общем, шестнадцатеричные коды облегчают копирование и хороши в ситуациях, когда люди не слишком вовлечены. RGB / RGBA стоит прочитать, и его лучше использовать, когда было бы лучше, если бы люди иногда могли менять прозрачность. Если человеку нужно изменить цвета вручную, используйте HSL / HSLA. Кроме того, это скорее вопрос предпочтений, хотя люди из команды HSL, как правило, умнее и выглядят лучше.
Кредит изображения: Сплошной цвет HSL Cylinder Saturation Серый, Аддитивный цвет, XTerm Color Chart, HSL и HSV, Манселл 1943
Была ли эта статья полезной? Да Нет
