К разделу «Дизайн»

RGB (Red, Green, Blue)

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

Red
Green
Blue
Yellow
White
Совет: В CSS цвета RGB можно задавать как rgb(255, 0, 0) или с прозрачностью rgba(255, 0, 0, 0.5).

HEX (Шестнадцатеричный код)

Шестнадцатеричное представление цвета в формате #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) — шестнадцатеричные значения от 00 до FF.

#FF0000
#00FF00
#0000FF
#FFA500
#800080
Совет: HEX-коды широко используются в веб-дизайне, так как они компактны и легко копируются.

HSL (Hue, Saturation, Lightness)

Цветовая модель, которая представляет цвета в виде трех компонентов: оттенок (H), насыщенность (S) и светлота (L).

Hue 0°
Hue 120°
Hue 240°
Hue 60°
Hue 300°
Совет: HSL особенно полезен, когда нужно создать вариации цвета, просто изменяя насыщенность или светлоту.
Модель Применение Преимущества
RGB Экраны, веб-дизайн Широкий цветовой охват, соответствует работе мониторов
HEX Веб-дизайн, CSS Компактная запись, легко копировать и вставлять
HSL Веб-дизайн, CSS Интуитивно понятное управление цветом
Пример использования RGB

Для веб-дизайна лучше использовать RGB/HEX/HSL модели, так как они предназначены для цифровых экранов. Например, для кнопки "Купить" можно использовать:

rgb(76, 175, 80)

Этот зеленый цвет хорошо выделяется на белом фоне и ассоциируется с действием.

Пример использования HSL

HSL удобен для создания цветовых вариаций. Например, для hover-эффекта:

hsl(210, 100%, 50%)
hsl(210, 100%, 40%)

Просто уменьшили светлоту на 10% для эффекта наведения.

Пример использования HEX

HEX-коды часто используются в веб-дизайне для задания цветов:

#2196F3
#4CAF50

Эти цвета часто используются в Material Design.