4 способа определения цветов в CSS

Ключевые выводы

• Использование названий цветов: CSS предоставляет 145 названий цветов для простого и удобного для начинающих выбора цвета, но варианты ограничены и могут не соответствовать точным потребностям дизайна.
• Шестнадцатеричные цветовые коды. Шестнадцатеричные коды предлагают широкий спектр вариантов цвета и точную настройку, хотя их использование и запоминание могут быть менее интуитивными.
• Цветовые значения RGB и RGBA: RGB позволяет точно управлять цветом с помощью числовых значений, а RGBA добавляет прозрачности. Важно обеспечить доступные цветовые комбинации.

Цвета являются одними из наиболее часто используемых атрибутов CSS, играя жизненно важную роль в формировании визуальной идентичности, настроения и пользовательского опыта веб-сайта. CSS предлагает множество вариантов использования цвета, каждый из которых адаптирован к конкретным потребностям и предпочтениям дизайна.

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

1. Использование названий цветов

CSS предоставляет удобный способ определения цветов с помощью имен, и доступно 145 вариантов. Эти названия цветов варьируются от простых «красный», «зеленый» и «синий» до более конкретных оттенков, таких как «коралл» или «лаванда».

Использовать именованные цвета очень просто: вы выбираете имя цвета, например «красный», и используете его в свойстве CSS, которое поддерживает значения цвета. Такой свойства включают в себя очевидные цвет и фоновый цвет, но и цвет границы, цвет контура, и тень текста, среди других.

Названия цветов удобны, когда вам нужен временный цвет для прототипирования или вы хотите, чтобы ваш код был легко читаемым. Вот синтаксис:

color_property: color_name;

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

p {
color: red;
}

Это придаст вашим абзацам красный цвет текста:

Плюсы: их легко читать и понимать в CSS-коде. Они удобны для новичков, хорошо работают во всех браузерах и удобны для быстрого создания дизайнерских идей.

Минусы: они имеют ограниченный выбор и могут не обеспечивать нужные вам оттенки, что ограничивает творческий потенциал дизайнера. Кроме того, они не всегда могут соответствовать строгим требованиям доступности, а поддержка в старых системах может различаться.

2. Шестнадцатеричные цветовые коды

Шестнадцатеричные коды цветов, часто называемые «шестнадцатеричными кодами», являются наиболее распространенными методами указания цветов в веб-дизайне. Эти коды состоят из шестизначных комбинаций цифр и букв (0–9, A–F), представляющих смесь красного, зеленого и синего (RGB) компонентов цвета.

Хотя они просты в использовании, понимание того, как они работают, может оказаться сложной задачей. Ты можешь взять глубокое погружение в шестнадцатеричные коды чтобы лучше понять. Вот базовый пример того, как вы можете использовать шестнадцатеричные коды в CSS:

color: #RRGGBB;

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

header {
background-color: #336699;
}

Это даст глубокий синий цвет:

​​​​​

Вы также можете использовать сокращение, если каждый из трех компонентов повторяет один и тот же символ дважды. Вы можете записать приведенный выше пример как:

header {
background-color: #369;
}

Плюсы: Шестнадцатеричные коды цветов предоставляют широкий спектр вариантов цвета, позволяя создавать подробные и индивидуальные оттенки. Они обеспечивают плавный контроль над выбором цвета, что делает их идеальными для выполнения сложных дизайнерских требований.

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

3. Цветовые значения RGB и RGBA

Как и шестнадцатеричные коды, этот формат позволяет указывать цвета по их красному, зеленому и синему компонентам. Однако на этот раз вы можете использовать более удобные целые числа.

Цветовые значения RGB

Цветовые значения RGB — второй наиболее часто используемый метод определения цветов в CSS. «RGB» представляет красный, зеленый и синий цвета, выраженные в виде функции CSS с последующими круглыми скобками. Внутри круглых скобок вы назначаете значения каждому цветовому каналу в диапазоне от 0 до 255. Это позволяет вам контролировать интенсивность красного, зеленого и синего цвета, который вы хотите использовать.

Вот синтаксис:

rgb(red_value, green_value, blue_value);

Заменять красное_значение, зеленое_значение, и blue_value с соответствующими числовыми значениями. Например, вы можете добиться белого, черного и красного цветов, как показано на этом изображении:

Когда вы устанавливаете для всех трех цветовых каналов (красный, зеленый и синий) максимальное значение 255, это приводит к максимальной интенсивности для каждого канала, создавая белый цвет:

.white-box {
 color: rgb(255, 255, 255);
}

Когда вы устанавливаете для всех трех цветовых каналов минимальное значение 0, это означает отсутствие цвета в каждом канале, что приводит к черному цвету.

.black-box {
color: rgb(0, 0, 0);
}

Установка для красного канала максимального значения 255, сохраняя при этом минимальное значение остальных каналов 0, дает красный цвет:

.red-box {
color: rgb(255, 0, 0); 
}

Цветовые значения RGBA

RGBA функционирует так же, как и RGB, с той лишь разницей, что включается альфа-значение. «А» в RGBA означает альфа, которая определяет уровень прозрачности или непрозрачности выбранного цвета. Значение 0 представляет полную прозрачность, делая цвет полностью невидимым, а значение 1 представляет полную непрозрачность, делая цвет полностью видимым.

RGBA особенно полезен, когда вы хотите создавать элементы с разным уровнем прозрачности, например полупрозрачный фон или блеклый текст. Полный синтаксис:

color: rgba(red_value, green_value, blue_value, alpha_value);

Здесь, красное_значение, зеленое_значение, и blue_value представляют цветовые каналы, как в RGB, и альфа_значение определяет уровень прозрачности.

div {
background-color: rgba(0, 128, 0, 0.5);
}

В этом примере значение альфа 0,5 присваивает 50% прозрачности зеленому цвету, позволяя просвечивать содержимое под ним:

Плюсы: RGB и RGBA позволяют точно управлять цветами, упрощая выбор точных оттенков и создание визуально привлекательных дизайнов. Они совместимы с различными веб-браузерами, обеспечивая единообразие выбранных вами цветов.

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

4. Цветовые значения HSL и HSLA

HSL — сокращение от Hue, Saturation и Lightness — это еще одна функция CSS, определяющая цвета. Подобно RGB, HSL использует числовые значения для представления цветов, но делает это по-другому. Возможно, вы знакомы с Значения HSL из компонентов пользовательского интерфейса в приложениях для дизайна и в других местах.

Хюэ: представляет сам цвет в градусах цветового круга в диапазоне от 0 до 360. Представьте себе, что это выбор точки на круге, где каждая степень соответствует разному цвету. Например, 0 и 360 градусов для красного, 120 градусов для зеленого и 240 градусов для синего.

Насыщенность: Насыщенность определяет яркость или интенсивность цвета. Он определяет соотношение цвета с серым: 0 % означает полностью оттенки серого (ненасыщенный), а 100 % — полностью насыщенный (яркий и чистый).

Легкость: Яркость показывает, насколько ярким или темным выглядит цвет. Это связано с положением цвета в спектре между черным (0%) и белым (100%). Значение 50 % соответствует нормальному цвету, значения ниже 50 % делают цвет темнее, а значения выше 50 % осветляют его.

Помимо HSL, существует HSLA, где «А» означает «альфа». Это похоже на букву «А» в RGBA и означает прозрачность.

Вот синтаксис:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Используя этот синтаксис, замените оттенок_значение, насыщенность_процента, и легкость_процент с конкретными значениями, которые вы хотите для каждого компонента. Например:

div {
background-color: hsl(120, 100%, 50%);
}

В этом примере цвет фона div элементу присвоен ярко-зеленый цвет с использованием значений HSL. 120 соответствует оттенку (зеленому), 100 % соответствует полной насыщенности, а 50 % устанавливает сбалансированный уровень яркости.

Плюсы: HSL и HSLA предлагают универсальные вычисления цвета с использованием пользовательских свойств CSS. Они хорошо совместимы с современными браузерами и позволяют легко регулировать яркость цвета.

Минусы: Изучение HSL включает в себя понимание науки о цвете, такие как оттенки и насыщенность, которые могут быть более сложными, чем знакомые цвета RGB.

Использование силы цветов CSS

Есть и другие методы, которые вы можете проверить, и пока вы изучаете различные форматы определения цветов. Что касается CSS, имейте в виду, что у вас есть возможность формировать внешний вид, настроение и взаимодействие с пользователем вашего веб-сайта.

Выбор вами цветового формата — будь то простые названия цветов, шестнадцатеричные коды, RGB или HSL — может повлиять на то, как ваша аудитория воспринимает ваш сайт. Итак, экспериментируйте, учитесь и находите определения цвета, которые лучше всего соответствуют вашим целям дизайна.