• Оранжевый код. Учeбник HTML. Цвета RGB. Цвета безопасной палитры

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

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

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

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

    Табл. 1. Названия цветов, их RGB, HEX и HSL код.
    Имя Цвет RGB HEX HSL Описание
    white rgb(255, 255, 255) #ffffff или #fff hsl(0, 0%, 100%) Белый
    silver rgb(192, 192, 192) #c0c0c0 hsl(0, 0%, 75%) Серый
    gray rgb(128, 128, 128) #808080 hsl(0, 0%, 50%) Темно-серый
    black rgb(0, 0, 0) #000000 или #000 hsl(0, 0%, 0%) Черный
    maroon rgb(128, 0, 0) #800000 hsl(0, 100%, 25%) Темно-красный
    red rgb(255, 0, 0) #ff0000 или #f00 hsl(0, 100%, 50%) Красный
    orange rgb(255, 165, 0) #ffa500 hsl(38.8, 100%, 50%) Оранжевый
    yellow rgb(255, 255, 0) #ffff00 или #ff0 hsl(60, 100%, 50%) Желтый
    olive rgb(128, 128, 0) #808000 hsl(60, 100%, 25%) Оливковый
    lime rgb(0, 255, 0) #00ff00 или #0f0 hsl(120, 100%, 50%) Светло-зеленый
    green rgb(0, 128, 0) #008000 hsl(120, 100%, 25%) Зеленый
    aqua rgb(0, 255, 255) #00ffff или #0ff hsl(180, 100%, 50%) Голубой
    blue rgb(0, 0, 255) #0000ff или #00f hsl(240, 100%, 50%) Синий
    navy rgb(0,0,128) #000080 hsl(240, 100%, 25%) Темно-синий
    teal rgb(0, 128, 128) #008080 hsl(180, 100%, 25%) Сине-зеленый
    fuchsia rgb(255, 0, 255) #ff00ff или #f0f hsl(300, 100%, 50%) Розовый
    purple rgb(128, 0, 128) #800080 hsl(300, 100%, 25%) Фиолетовый

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

    RGB в CSS

    MediumTurquoise
    brown
    crimson
    blueviolet
    rolivedrab

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

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

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

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

    Ближе к делу.

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

    Пример кода.

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

    RGB в CSS

    rgb(255, 0, 0)
    rgb(0, 255, 0)
    rgb(0, 0, 255)

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

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

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

    В начале страницы создаём класс 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 - полупрозрачности в различной степени.

    Пример кода.

    RGBA в CSS3

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

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

    RGBA в CSS3

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

    Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в 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.

    HEX код в CSS

    #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.

    HEX / HTML

    Цвет в формате HEX - это ни что иное, как шестнадцатеричное представление RGB.

    Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 - красный, 22 - зелёный, 33 - синий. Все значения должны быть между 00 и FF.

    Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.

    1. h1 { color: #ff0000; } /* красный */
    2. h2 { color: #00ff00; } /* зелёный */
    3. h3 { color: #0000ff; } /* синий */
    4. h4 { color: #00f; } /* тот же синий, сокращённая запись */

    RGB

    Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.

    Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.

    Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).

    1. h1 { color: rgb(255, 0, 0); } /* красный */
    2. h2 { color: rgb(0, 255, 0); } /* зелёный */
    3. h3 { color: rgb(0, 0, 255); } /* синий */
    4. h4 { color: rgb(0%, 0%, 100%); } /* тот же синий, процентная запись */

    Цветовые значения RGB поддерживаются во всех основных браузерах.

    RGBA

    С недавних пор современные браузеры научились работать с цветовой моделью RGBA - расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.

    Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

    1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
    2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
    3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
    4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
    5. h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */

    RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

    HSL

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

    HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

    Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

    1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
    2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
    3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
    4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

    HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

    HSLA

    По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.

    Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

    1. h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
    2. h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
    3. h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
    4. h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
    5. h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */

    CMYK

    Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.

    Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).

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

    Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 - жёлтой краски, и 46 - чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).

    HSB / HSV

    HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.

    HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

    Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).

    XYZ

    Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.

    LAB

    Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

    Влад Мержевич

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

    Шестнадцатеричные цвета

    Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

    Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

    Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

    Типичный цвет, используемый в HTML, выглядит следующим образом.

    Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

    FA + 8E + 47 = FA8E47

    Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

    Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

    • Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
    • Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
    • Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

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

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

    Рис. 6.2. Окно для выбора цвета в программе Photoshop

    Веб-цвета

    Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых - красной, зеленой и синей - устанавливается одно из шести значений - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 - 216 цветов. Пример веб-цвета - #33FF66.

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

    Цвета по названию

    Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.

    Табл. 6.3. Названия некоторых цветов
    Имя цвета Цвет Описание Шестнадцатеричное значение
    black Черный #000000
    blue Синий #0000FF
    fuchsia Светло-фиолетовый #FF00FF
    gray Темно-серый #808080
    green Зеленый #008000
    lime Светло-зеленый #00FF00
    maroon Темно-красный #800000
    navy Темно-синий #000080
    olive Оливковый #808000
    purple Темно-фиолетовый #800080
    red Красный #FF0000
    silver Светло-серый #C0C0C0
    teal Сине-зеленый #008080
    white Белый #FFFFFF
    yellow Желтый #FFFF00

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

    Пример 6.1. Цвет фона и текста

    Цвета

    Пример текста

    В данном примере цвет фона задается с помощью атрибута bgcolor тега , а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .

    Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.

    По названию

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

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

    Табл. 1. Названия цветов
    Имя Цвет Код RGB HSL Описание
    white #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%) Белый
    silver #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Серый
    gray #808080 rgb(128,128,128) hsl(0,0%,50%) Темно-серый
    black #000000 или #000 rgb(0,0,0) hsl(0,0%,0%) Черный
    maroon #800000 rgb(128,0,0) hsl(0,100%,25%) Темно-красный
    red #ff0000 или #f00 rgb(255,0,0) hsl(0,100%,50%) Красный
    orange #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Оранжевый
    yellow #ffff00 или #ff0 rgb(255,255,0) hsl(60,100%,50%) Желтый
    olive #808000 rgb(128,128,0) hsl(60,100%,25%) Оливковый
    lime #00ff00 или #0f0 rgb(0,255,0) hsl(120,100%,50%) Светло-зеленый
    green #008000 rgb(0,128,0) hsl(120,100%,25%) Зеленый
    aqua #00ffff или #0ff rgb(0,255,255) hsl(180,100%,50%) Голубой
    blue #0000ff или #00f rgb(0,0,255) hsl(240,100%,50%) Синий
    navy #000080 rgb(0,0,128) hsl(240,100%,25%) Темно-синий
    teal #008080 rgb(0,128,128) hsl(180,100%,25%) Сине-зеленый
    fuchsia #ff00ff или #f0f rgb(255,0,255) hsl(300,100%,50%) Розовый
    purple #800080 rgb(128,0,128) hsl(300,100%,25%) Фиолетовый

    С помощью RGB

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

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

    RGBA

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

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

    HSL

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

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

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

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

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

    HSLA

    Internet Explorer Chrome Opera Safari Firefox Android iOS
    9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

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

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

    HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    Цвета

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

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

    Арррргх!

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

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