Желтый прозрачный цвет. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Задание цвета в HTML по его названию

В web-дизайне существует несколько способов представления цвета

HEX – шестнадцатеричная система представления цвета по основанию 16. Для данной системы используются арабские десятичные цифры от 0 до 9 и латинские буквы от A до F для дополнения цифрового количества до 16. Для web-дизайна взяты 16 основных (ключевых) цветов, так называемый шестнадцатеричный код цвета #RRGGBB, где каждая пара отвечает за свою долю цвета: RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Два других представления цвета в web-дизайне это: в виде RGB(*,*,*), где каждая «*» доля цвета представлена десятичными цифрами от 0 до 255 и по наименованиям цвета на английском языке.

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

Таблица 16 основных цветов , которые используются во всех браузерах

Таблица пурпурного цвета и его оттенков

Таблица серого цвета и его оттенков

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

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

С помощью RGB

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Предупреждение

Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице

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

Цветовая гамма в html

В html цвет может быть задан в нескольких форматах:

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

• Первая числовая пара – отвечает за красный цвет;
• Вторая пара – за содержание зеленого цвета;
• Последняя – за содержание синего цвета.

В начале кода (перед цифрами ) ставится решетка. Так обозначается шестнадцатеричный цветовой код. Кроме чисел от 1 до 9 в этой системе исчисления используются буквы латинского алфавита (A, B, C, D, E, F).

Например, код белого цвета в html будет иметь вид #FFFFFF :

2. Ключевым словом – сейчас html поддерживает около 147 ключевых слов. Но не все из этих слов являются уникальными. Некоторые из них ссылаются на один и тот же цветовой оттенок.

Серый цвет обозначается двумя ключевыми словами: grey и gray . Их шестнадцатеричный код (HEX ) задается одним и тем же значением #808080 .

Пример :

#808080

3. В формате RGB – эта кодировка цветов в html основана на использовании трех значений, задаваемых в диапазоне от 0 до 255. Каждое из них определяет насыщенность оттенка одним из основных цветов:

• R – красный (red );
• G – зеленый (green );
• B – синий (blue ).

Номер цвета в формате RGB записывается в таком виде: rgb(0, 210, 100).

background-color:rgb(100,186,43)

4. В формате RGBA – он представляет собой усовершенствованный формат RGB , где четвертым значением задается прозрачность цвета в виде десятичной дроби от 0 до 1.

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

background-color:rgba(100,86,143,0.2)

background-color:rgba(100,86,143,0.5)

background-color:rgba(100,86,143,0.8)

background-color:rgba(100,86,143,1)

Таблицы цветов html и генераторы цвета

При таком большом разбросе форматов установки цвета легко запутаться. Поэтому была придумана специальная таблица цветов. В ней к 147 ключевым названиям цветовых оттенков приведены коды соответствия во всех основных стандартах представления цвета. Дополнительно каждое поле снабжено планкой для визуального подбора цвета. Одна из таких таблиц представлена на сайте colorscheme.ru :

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

Чтобы обойти эту преграду и максимально упростить подбор нужного оттенка, были разработаны интерактивные веб-сервисы. Их пользовательский интерфейс может несколько разниться между собой.

На сайте html-color-codes.info генератор цветов имеет такой вид:

А в рамках сервиса color-picker.appsmaster.co этот инструмент реализован немного иначе:

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

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

Техника безопасности при работе с цветом

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

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

В наше время все изменилось. Поэтому все правила техники безопасности при работе с цветом в html полностью аннулируются. Ведь современное компьютерное железо поддерживает более 16 миллионов различных оттенков. И 216 безопасных цветов канули в лету.

Эти данные полностью подтверждаются статистикой. Судя по ней, в 2014 году всего лишь 0.5% пользователей имеют компьютеры, поддерживающие лишь 256 оттенков.

Основы цветовой гармонии

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

Модуль CSS color подробно описывает значения, которые позволяют авторам определять цвета и непрозрачность html-элементов, а также значения свойства color .

Свойство color

1. Приоритетные цвета: свойство color

Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.

Свойство наследуется.

2. Значения цвета

2.1. Основные ключевые слова

Список основных ключевых слов включает в себя следующие значения:

Названия цветов не чувствительны к регистру.

Синтаксис

Color: teal;

2.2. Числовые значения цвета

2.2.1. Цвета модели RGB

Формат значения RGB в шестнадцатеричном формате — это знак # , за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgb преобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00 . Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff , и удаляет любые зависимости от глубины цвета дисплея.

Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ) . Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:

Rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF

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

Цвет в языке CSS можно задавать разными способами:

• по названию,
• по шестнадцатеричному значению,
• в форматах RGB и RGBA,
• в форматах HSL и HSLA.

Задание цвета по названию

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

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

Вот как работает этот код:

Установка цвета с помощью RGB

RGB - аддитивная цветовая модель. На английском языке addition - добавление. RGB - это аббревиатура английских слов: Red, Green, Blue - красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

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

Ближе к делу.

Для установки свойств в этом формате используется запись rgb(r, g, b) , где r, g, b - это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Пример кода.

Чтобы всё стало понятно, приведу пример кода:

Вот так должен сработать этот пример:

Пояснения к примеру.

В начале страницы создаём класс div.rgb , он нужен чтобы блоки созданные тегом

отображались нужным размером: 240px на 40px . Свойству line-height (высота строки) присваиваем значение - 40px , то есть равное высоте блока, это позволит отображать текст в блоке

по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align : center ;} .

Далее, в коде устанавливаем фоновый цвет блока

при момощи атрибута style успользуя свойство background , а значения присваиваем rgb(255, 0, 0) , rgb(0, 255, 0) , и rgb(0, 0, 255) . То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.

Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100) .

Установка цвета с помощью RGBA

В CSS3 появился новый инструмент для работы с цветом - формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала - A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 - полной непрозрачности (цвет будет таким, каким он задан в первых трёх каналах RGB), а промежуточные значения, как 0.4 или 0.6 - полупрозрачности в различной степени.

Пример кода.

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0) показывает красный цвет rgb(255, 0, 0) .

По шестнадцатеричному значению (HEX-код)

В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты - у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 - это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.

Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

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

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB . Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF , C0 и CB . Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b) ) - каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

#FF0000

#00FF00

#0000FF

Этот код отобразит следующие элементы:

А вот рисунок с результатом из раздела "Установка цвета с помощью RGB" на этой странице выше.

Рис.1. Цвета в RGB.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

Например, цвет #ff22aa допустимо написать так - #f2a , или цвет #44aa22 допустимо указать в виде #4a2 .

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL - это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL - это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° - синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.

Рисунок 2. Цветовой круг HSL.

Второе значение - насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально "сочный", по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.

Третье значение - светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.

Установка цвета с помощью HSLA

Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.

Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.

Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?

Somebloсk { background-color: rgb(255,50,50); background-color: rgba(255,50,50,0.85) }

При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.