Шестнадцатеричный формат цвета в CSS

Шестнадцатеричный формат цвета в CSS

От автора: в CSS насчитывается 149 ключевых слов стандартных цветов. При помощи же шестнадцатеричной системы счисления (или hex) можно получить доступ ко всей RGB гамме цветов. Понимание принципов работы шестнадцатеричной системы счисления лежит в основе изучения hex системы цветов.

В отличие от десятеричной системы с ее значениями от 0 до 9 в шестнадцатеричной системе счисления 16 разрядов: от 0 до 9 и до буквы f. В самом общем случае компоненты hex цвета (красный, зеленый и синий) представляются парой разрядов.

Минимальным значением цвета в паре считается 00. На один выше будет 01, 02 и т.д. После 09 пара записывается в форме 0a, 0b и так до 0f. Достигнув последнего возможного значения во втором разряде, первый разряд переключается на одно значение, как в обычных счетчиках, а второй разряд сбрасывается. В итоге мы получаем 10, после чего крайний разряд начинает заново подниматься вверх.

Чем больше значение компонента, тем больший вес он будет иметь в конечном цвета, где 00 – полное отсутствие данного компонента, а ff – максимальное присутствие в конечном варианте. Шестнадцатеричный цвет записывается со знаком #. То есть #000000 – черный цвет (отсутствие красного, зеленого и синего), #ffffff – белый, а #ffff00 – зеленый.

Обратите внимание на то, что hex цвета в CSS представляют собой аддитивную систему цвета, где отсутствие оттенка распознается как черный цвет (то есть цвет экрана по умолчанию).

Как запомнить hex цвета

Простой способ запомнить шестнадцатеричные цвета – думать о каждом цветовом компоненте (красный, зеленый и синий), как об отдельном фонарике с фильтром. В hex 00 означает «выключен», а ff означает «фонарик включен на полную».

Если в темной комнате включить только красный фонарик (#ff0000), вся комната озарится красным цветом. Если включить красный и зеленый фонарики и скрестить лучи (#ffff00), комната станет желтой.

Кроме того, можно представить не просто фонарики, а переключатели света с регулировкой освещения (от 00 до ff). #777777 будет средне-серым, а #440000 будет темно-красным.

Сокращения

Безопасные цвета – цвета, в которых разряды компонентов имеют одинаковое значение (00, 77, ee и т.д.). Такие цвета используются в случае, если монитор имеет крайне ограниченный диапазон цветов. Это необязательные цвета.
Если вы решили воспользоваться безопасными цветами, то вы получаете одно преимущество – шестнадцатеричную запись безопасных шрифтов можно сократить. К примеру, черный можно записать в виде #000, красный — #f00 и т.д. К примеру:

p {
    color: #000;
}

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

В шестнадцатеричных цветах необязательно значения пар должны совпадать: #3fa027 – хороший цвет, но его нельзя сократить.

Важно понимать, что hex система открывает вам доступ ко всей цветовой гамме, так же как и две другие основные системы цветов в CSS (RGB и HSL). Цветов в данной системе ровно столько же.

Альфа канал в hex системе цветов

В последней спецификации CSS в шестнадцатеричные цвета допускается добавление альфа канала или компонента прозрачности в виде #RRGGBBAA или #RGBA.

Преимущества и недостатки

Как система цвета для веб-дизайна и разработки, шестнадцатеричная система имеет свои плюсы и минусы:

Преимущества

можно очень быстро записывать простые первичные цвета, особенно в сокращенной форме (красный, черный и белый);

шестнадцатеричный код цвета понимается абсолютно всеми браузерами.

Недостатки

за исключением простых цветов, hex коды очень сложно записывать и подбирать точные оттенки, что приводит к использованию сторонних сервисов;

шестнадцатеричные коды сложные и нелогичные для веб-дизайнеров.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика 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