Код цвета в HTML и CSS

Код цвета в HTML и CSS

От автора: всем привет. Сегодня я бы хотел поговорить о цвете в веб-разработке, а именно о том, как формируются коды цветов в html и css. Ну и вообще о способах задания цвета.

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

Задание цвета с помощью ключевых слов

Например, color: red. И даже те из вас, кто спал в школе на уроках английского, понимают, что мы задали красный цвет. Но таких вот ключевых слов в html не сильно много, чуть более сотни. То есть с их помощью вы не сможете задать миллион разных оттенков, да и запомнить все названия очень трудно. Я могу лишь порекомендовать держать в уме самые основные значения, остальное лучше задавать не с помощью ключевых слов, а по-другому.

С помощью шестнадцатеричного кода

Звучит, может быть, страшно, но на деле ничего сложного. Цвет в таком формате записывается через решетку, далее записывается 3 или 6 символов, которые и определяют оттенок. Чтобы брать значения, я рекомендую вам использовать сайт https://color.hailpixel.com

А также палитру программы Adobe Photoshop, где также отображается шестнадцатеричный код или как его еще называют – hex-код.

В фотошопе вы можете в палитре установить галочку “Только web-цвета”. В этом случае в палитре вам будут предложены только так называемые безопасные цвета, которые поддерживаются всеми браузерами. Но я вам могу сказать, что необходимость в этом потихоньку отходит в прошлое, так как современные браузеры могут без проблем распознавать миллионы оттенков.

В форматах rgb и rgba

Эти способы используются уже реже, потому что обычно хватает варианта с hex-кодом. Объяснить суть записи цвета в формате rgb очень просто. Есть красный, зеленый и синий цвета. Они являются основными. Вот на основании их смешивания мы и получаем нужный нам цвет. Для этого нужно в скобках указать первым значение насыщенности красным цветом от 0 до 255, далее через запятую проделать то же самое с зеленым и синим. Например, так:

rgb(234, 17, 98);

Как вы понимаете, это позволяет задавать миллионы разных оттенков, которые будут отличаться совсем незначительно. Значение (0, 0, 0) приравнивается к черному цвету, а (255, 255, 255) – белому. Здесь действует правило, что если смешать все цвета в их максимальной насыщенности, то получится белый цвет.

Формат rgba отличается лишь тем, что добавляется четвертое значение – альфа канал. Допустимо использовать значения от 0 до 1, значения с десятичной дробью, естественно, допускаются. Это позволяет задать полупрозрачный цвет. Например, если написать так:

rgba(0, 0, 0, 0.5)

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

В форматах hsl и hsla

Это последние форматы, которые мы рассмотрим. В веб-разработке они используются еще реже. Расшифровывается hsl так: цвет, насыщенность, светлота. Первое значение задается числом от 0 до 360, а второе и третье в процентах.

hsl(206, 50%, 42%);

Более понятно это объяснение будет для тех, кто работал с цветом более глубоко. В любом случае, чтобы понимать, как в этом формате формируется цвет, необходимо понимать принцип цветового круга, потому что именно на его основании задается цвет.

Собственно, hsla добавляет только тот самый альфа-канал. То есть это еще один формат, в котором вы можете получить полупрозрачный цвет. Кому-то удобнее будет использовать rgb, кому-то hsl.

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree