Меню
ГлавнаяAndroid

Желтый цвет css. Установка цвета для текста в CSS. Способы представления цветов

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

Цвет в языке 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.

Выражаю опосредованную благодарность Google за идею и предлагаю коллегам эстафету: необходимо поделится с читателями зарубежными ресурсами по веб-разработке из своей RSS-ленты, которые предметно и интересно пишут по данному вопросу. Для снижения пустословия требуется выполнить ряд простых положений:

  1. На своем блоге опубликовать перевод (можно вольный, с комментариями и дополнениями) статьи из представляемого ресурса.
  2. Переводы как и их источники не должны повторяться, чтобы обеспечить охват и разнообразие информации.
  3. Ссылочно упомянуть блогера, от которого получена благая весть и, по возможности, передать эстафетную палочку дальше.
  4. Сроки эстафеты не устанавливаются; обязательно найдется тот, кто прекратит эту вакханалию.

Первоисточником данного поста послужила одна из заметок Дрю МакЛеллана на коллективно-календарном блоге 24ways . Поехали!

Что такое RGBA-цвет?

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

CSS3 предлагает пару новых способов задания цвета, один из которых — использование цветовой модели RGBA. Буква «A» в аббревиатуре означает «Альфа»; ее значение отвечает за величину прозрачности цвета. С помощью данной модели мы можем установить не только необходимое сочетание красного, зеленого и синего, но также определить, насколько цвет «просвечивает». Что-то подобное можно наблюдать при работе со слоями в Photoshop.

Для чего тогда свойство оpacity?

Дело в том, что определение прозрачности для цвета отличается от настройки прозрачности для элемента, заданное с помощью css-свойства opacity . Давайте посмотрим на примере.

У нас имеется заголовок h1 c определенными цветами для текста и фона, находящийся на странице с фоновым рисунком.

H1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); }

Путем установки свойства opacity , можно применить прозрачность ко всему элементу в целом:

H1 { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); opacity: 0.5; }

RGBA-модель предоставляет нам более гибкую возможность — проконтролировать лишь цветовую прозрачность, а не весь элемент. Например, можно установить прозрачность только для фонового цвета:

H1 { color: rgb(0, 0, 0); background-color: rgba(255, 255, 255, 0.5); }

Или оставить фон без изменений и присвоить прозрачность только тексту:

H1 { color: rgba(0, 0, 0, 0.5); background-color: rgb(255, 255, 255); }

Вероятно, использование синтаксиса rgb () для определения цвета менее распространено чем шестнадцатеричная запись (вроде #fff), однако, в данном случае это железная необходимость, поскольку невозможно записать RGBA-значение в шестнадцатеричной нотации. Поэтому, задаем rgba () именно так:

Color: rgba(255, 255, 255, 0.5);

Так же как в rgb () , первые три значения отвечают за сочетание красного, зеленого и синего. Они могут принимать как целочисленные значения в диапазоне 0–255 так и процентные соотношения в промежутке от 0 до 100 %. Четвертое значение определяет степень прозрачности в диапазоне от 0 (абсолютно прозрачный) до 1 (совершенно непрозрачный).

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

Поддержка в браузерах

Большинство современных браузеров (Firefox, Safari, Opera, Google Chrome) поддерживают RGBA-цвета, но не Internet Explorer.

Ничего не остается, как указывать RGBA-цвета для браузеров, которые их поддерживают, а для остальных придумать свои «костыли».

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

H1 { color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); }

В случаях, когда вы хотите применить прозрачность для свойства background-color можно прибегнуть к использованию PNG-рисунка с альфа-каналом, чтобы добиться точно такого же эффекта. Конечно, это более затратный способ, в отличие от «чистого» CSS, поскольку придется создавать свой PNG для каждого уровня прозрачности, но на безрыбье и рак рыба.

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

H1 { background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; }

Следует отметить, что такая конструкция работоспособна, поскольку мы используем сокращенную форму записи background , позволяющую одновременно установить и фоновый цвет и фоновое изображение. Браузеры, столкнувшиеся с неизвестным значением rgba () целиком проигнорируют второю строку и будут обрабатывать первое объявление.

Кое-что еще

Главное преимущество RGBA — возможность создания различных дизайнерских решений без использования рисунков. Выгода здесь не только в более легких (как следствие — более быстрых) страницах, но и в выигрыше во времени: сайты с использование упомянутой технологии проще создавать и поддерживать. Под влиянием Javascript или в ответ на пользовательские действия значения в CSS могут с легкостью изменяться. Рисунки в нашем случае могут затруднить такие преобразования.

Div { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); } div:hover { color: rgba(255, 255, 255, 1); background-color: rgba(142, 213, 87, 0.6); }

Разумное применение прозрачности для рамочных цветов поможет выглядеть некоторым элементам на странице более органично:

Div { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); }

В заключение

Как это часто бывает, передовые нововведения в области CSS поддерживают передовые браузеры. Будем надеяться, что парни из Редмонда, кое-что осознают в жизни и присоединятся к большинству.

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

Когда мы задаем цвет для рамки элемента, фона или текста, то мы задаем цвет именно для пикселей из которых они состоят. Существует два общих подхода для указания цвета в CSS: по имени или по значению. Самое простое это указание по имени: красный - это red, синий - это blue и так далее, но CSS предоставляет не так много имен цветов из которых можно выбрать. С другой стороны указание значения цвета предполагает гораздо больший выбор оттенков. Есть несколько способов для указания значения цвета, два наиболее распространенных из них это RGB и шестнадцатеричные значения. Они были частью CSS с самой первой версии и каждый веб-браузер их поддерживает. В CSS3 появилось еще несколько вариантов для определения цвета: RGBA, HSL и HSLA, они менее кроссбраузерны, но самые последние версии браузеров их уже поддерживают.

Имена цветов

Самый простой и наиболее очевидный способ указать цвет в CSS - это выбрать из набора ключевых слов имя предопределенного цвета. Всего доступно 147 ключевых слов с именами цветов: 17 имен - стандартные цвета, которые были введены еще в ранних версиях HTML (white, black, red, yellow, blue, green, orange, purple, gray, silver, aqua, fuchsia, lime, maroon, navy, olive и teal), и 130 дополнительных, которые были добавлены в CSS2. Весь список доступных названий цветов вы можете посмотреть в разделе HTML в нашей таблице цветов .

RGB и RGBA

Система RGB использует три числа, которые описывают относительное количество красного, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим RGB-код для темно-фиолетового цвета: rgb(204, 51, 255), его можно например применить к CSS свойству, отвечающему за цвет шрифта:

Color: rgb(205, 51, 255);

Система RGBA добавляет еще одно число, которое описывает прозрачность цвета, значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью RGBA системы:

Color: rgba(204, 51, 255, 0.5);

Вы можете увидеть, что значения красного, зеленого и синего цветов аналогичны системе RGB. Четвертое число - 0.5 является степенью прозрачности. Буква "A " в RGBA означает альфа-канал, который является термином из графического дизайна означающим прозрачность.

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

HSL и HSLA

Система HSL (h ue, s aturation, l ightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:

Color: hsl(285, 100%, 60%);

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

Система HSLA , как и RGBA, добавляет четвертое число в диапазоне от 0 до 1, определяющее насколько прозрачным должен быть цвет. Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью HSLA системы:

Color: hsla(285, 100%, 60%, 0.5);

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

Шестнадцатеричный код цвета представляет собой шесть символов, стоящих после символа # :

Каждый набор двух символов представляет номер от 0 до 255. Так первые два символа представляют красный (red) цвет, следующие два - зеленый (green) и последние два - синий (blue). В этом шестнадцатеричный код очень похож на RGB с тем отличием, что тут каждый цвет задан в шестнадцатеричной системе счисления вместо десятичной.

Если каждая пара цифр состоит из одинаковых символов, то значение цвета может быть укорочено. Однако если шестнадцатеричный код выглядит, например, так #bbff10, то такую запись сокращать нельзя.

Color: #f00; color: #ff0000;

Примечание: браузеры, которые не поддерживают подобные цветовые значения (rgba, hsl и hsla), не связывают с фоном или шрифтом никакой цвет, полностью игнорируя объявление. В этом случае для фона элемента используется значение по умолчанию (он становится полностью прозрачным), а для текста используется либо значение по умолчанию (черный цвет), либо цвет унаследованный от родительского элемента.

Для старых версий браузеров следует добавить дополнительное правило, определяющее цвет в формате RGB, шестнадцатеричном значении или с помощью имени. Такое правило должно находиться перед правилом, указывающим цвет в формате RGBA, HSL или HSLA. Это обеспечит страховку для цвета, поскольку в CSS при наличии двух правил, устанавливающих значение для одного и того же свойства, приоритет всегда получает правило, установленное ниже в коде. Это означает, что если браузер поддерживает форматы RGBA, HSL или HSLA, то он будет использовать второе правило, а если не поддерживает - первое.

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

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

Ниже более подробно описаны перечисленные форматы.

Цвета CSS - шестнадцатеричные коды

Шестнадцатеричный код цвета - это шестизначное представление цвета. Первые две цифры (RR) - представляют собой красное значение, следующие две - это зеленое значение (GG), а последние - синее значение (BB).

Цвета CSS - короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета - это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша «#». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвета CSS - RGB значения

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

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

Ниже приведен пример, показывающий несколько цветов с использованием значений RGB.

Генератор цветовых кодов

Вы можете создавать миллионы цветовых кодов с помощью нашего сервиса .

Безопасные цвета браузера

Ниже представлена таблица из 216 цветов, которые наиболее безопасные и независимые от компьютера. Эти цвета в CSS варьируются от 000000 до FFFFFF шестнадцатеричного кода. Они безопасны в использовании, поскольку гарантируют, что все компьютеры будут правильно отображать цвет при работе с 256 цветовой палитрой.

Таблица «безопасных» цветов в CSS
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF