<color>

Синтаксис

Для типа данных задаётся <color> с помощью одного из следующих параметров.

Ключевые цвета

Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.

Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:

• HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG.

• В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.

• Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.

• Несколько ключевых слов являются псевдонимами друг для друга:

  • aqua / cyan
  • fuchsia / magenta
  • darkgray / darkgrey
  • darkslategray / darkslategrey
  • dimgray / dimgrey
  • lightgray / lightgrey
  • lightslategray / lightslategrey
  • gray / grey
  • slategray / slategrey

• Хотя многие ключевые слова были адаптированы из X11, их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.

Прозрачное ключевое слово

Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent- это ярлык для rgba (0,0,0,0).

currentColor ключевое слово

Ключевое слово currentColor представляет значение свойства элемента color. Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.

Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color.

currentColor пример

<div style="color:blue; border: 1px dashed currentColor;">
  Цвет текста-синий.
  <div style="background:currentColor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

RGB цвет

Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.

Синтаксис

Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (rgb (), rgba ()) нотациями.

Шестнадцатеричное представление: #RRGGBB[AA]

R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.

Шестнадцатеричное представление: #RGB[A]

R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырёхзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.

Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)

R (красный), G (зелёный) и B (синий) могут быть либо <number>s, либо <percentage>s, где число 255 соответствует 100%. А (Альфа) может быть <number> между 0 и 1 или <percentage>, где число 1 соответствует 100% (полная непрозрачность).

Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

Пример

RGB варианты синтаксиса

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

/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */

/* Шестнадцатеричный синтаксис */
#f09
#F09
#ff0099
#FF0099

/* Функциональный синтаксис */
rgb(255,0,153)
rgb(255, 0, 153)
rgb(255, 0, 153.0)
rgb(100%,0%,60%)
rgb(100%, 0%, 60%)
rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */
rgb(255 0 153)

/* Шестнадцатеричный синтаксис с Альфа-значением */
#f09f
#F09F
#ff0099ff
#FF0099FF

/* Функциональный синтаксис с Альфа-значением */
rgb(255, 0, 153, 1)
rgb(255, 0, 153, 100%)

/* Синтаксис пробелов */
rgb(255 0 153 / 1)
rgb(255 0 153 / 100%)

/* Функциональный синтаксис со значением floats */
rgb(255, 0, 153.6, 1)
rgb(1e2, .5e1, .5e0, +.25e2%)

RGB вариации прозрачности

/* Шестнадцатеричный синтаксис */
#3a30                    /*   0% непрозрачный зелёный цвет */
#3A3F                    /* полный непрозрачный зелёный цвет */
#33aa3300                /*   0% непрозрачный зелёный цвет */
#33AA3380                /* 50% непрозрачный зелёный цвет */

/* Функциональный синтаксис */
rgba(51, 170, 51, .1)    /* непрозрачный зелёный цвет на 10%  */
rgba(51, 170, 51, .4)    /* непрозрачный зелёный цвет на */
rgba(51, 170, 51, .7)    /* непрозрачный зелёный цвет на 70% */
rgba(51, 170, 51,  1)    /* полный непрозрачный зелёный цвет  */

/* Синтаксис пробелов */
rgba(51 170 51 / 0.4)    /* непрозрачный зелёный цвет  на 40%*/
rgba(51 170 51 / 40%)    /* непрозрачный зелёный цвет на 40% */

/* Функциональный синтаксис со значением floats */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

Цвет HSL

Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.

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

Синтаксис

Цвета HSL выражаются через функциональные обозначения hsl() и hsla().

Функциональная нотация: hsl(H, S, L[, A]) или hsla(H, S, L, A)

H (hue) - это <угол> цветового круга, заданного в degS, rads, градусах или поворотах CSS Color Module Level 4. При записи в виде unitless <number> он интерпретируется как Градусы, как указано в CSS Color Module Level 3. По определению, red=deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость "нормально". A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть <number> между 0 и 1 или <percentage>, где число 1 соответствует 100% (полная непрозрачность).

Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)

CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.

Examples

HSL варианты синтаксиса

/* Все эти примеры указывают один и тот же цвет: лаванда. */
hsl(270,60%,70%)
hsl(270, 60%, 70%)
hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

/* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */
hsl(270, 60%, 50%, .15)
hsl(270, 60%, 50%, 15%)
hsl(270 60% 50% / .15)
hsl(270 60% 50% / 15%)

Полностью насыщенные цвета

Более светлая и более тёмная зелень

Насыщенная и ненасыщенная зелень

Вариации прозрачности HSL

hsla(240, 100%, 50%, .05)     /* непрозрачный синий на 5% */
hsla(240, 100%, 50%, .4)      /* непрозрачный синий на 40% */
hsla(240, 100%, 50%, .7)      /* непрозрачный синий на 70% */
hsla(240, 100%, 50%, 1)       /* полный непрозрачный синий */

/* Синтаксис пробелов */
hsla(240 100% 50% / .05)      /* непрозрачный синий на  5% */

/* Процентное значение для Альфа */
hsla(240 100% 50% / 5%)       /*  непрозрачный синий на 5% */

Системный цвет

Не все системные цвета поддерживаются на всех системах. Устарело для использования на общедоступных веб-страницах.

ActiveBorder

Активная граница окна.

ActiveCaption

Активный заголовок окна. Должен использоваться с текстом CaptionText в качестве цвета переднего плана.

AppWorkspace

Цвет фона интерфейса нескольких документов.

Background

Фон рабочего стола.

ButtonFace

Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.

ButtonHighlight

Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.

ButtonShadow

Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.

ButtonText

Следует использовать с ButtonFace или ThreeDFace цвет фона.

CaptionText

Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption.

GrayText

Серый (отключён) текст.

Highlight

Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.

HighlightText

Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.

InactiveBorder

Граница неактивного окна.

InactiveCaption

Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText.

InactiveCaptionText

Следует использовать с InactiveCaption неактивным цветом фона заголовка.

InfoBackground

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

InfoText

Цвет текста элементов подсказки. Должен использоваться с и InfoBackground фона.

Menu

Фон меню. Должен использоваться с MenuText или -moz-MenuBarText строки меню цвет переднего плана.

MenuText

Текст в меню. Следует использовать с меню Цвет фона.

Scrollbar

Цвет фона полос прокрутки.

ThreeDDarkShadow

Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDFace

Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.

ThreeDHighlight

Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDLightShadow

Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

ThreeDShadow

Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.

Window

Фон окна. Следует использовать с WindowText цвет переднего плана.

WindowFrame

Оконная рама

WindowText

Текст в windows. Следует использовать с цветом фона окна.

Расширенные Цвета Системы Mozilla

• -moz-ButtonDefault

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

• -moz-ButtonHoverFace

  • : Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.

• -moz-ButtonHoverText

  • : Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.

• -moz-CellHighlight

  • : Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText. Смотрите также-moz-html-CellHighlight.

• -moz-CellHighlightText

  • : Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона moz-CellHighlight background. Смотрите также -moz-html-CellHighlightText выделения ячейки.

• -moz-Combobox

  • : цвет фона для комбинированных полей -moz-ComboboxText. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-Field.

• -moz-ComboboxText

  • : цвет текста для комбинированных полей. Следует использовать с цветом фона -moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-FieldText.

• -moz-Dialog

  • : Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана --moz-DialogText.

• -moz-DialogText

  • : Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog.

• -moz-dragtargetzone

  -moz-EvenTreeRow

  • : цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также -moz-OddTreeRow.

• -moz-Field

  • : Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана-moz-FieldText.

• -moz-FieldText

  • : Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color. Текстовое поле цвет текста. Следует использовать с -moz-Field, -moz-EvenTreeRow или -moz-OddTreeRow цветом фона строки дерева.

• -moz-html-CellHighlight

  • : Background color for highlighted item in HTML <select>s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight. цвет фона для выделенного элемента в HTML <select> s. должен использоваться с цветом переднего плана -moz-html-CellHighlight. До Gecko 1.9, используйте -moz-CellHighlightText.

• -moz-html-CellHighlightText

  • : цвет текста для -moz-html-CellHighlight выделенных элементов в HTML <select> s. должен использоваться с цветом фона. До Gecko 1.9, используйте moz-html-CellHighlight.

• -moz-mac-accentdarkestshadow

  -moz-mac-accentdarkshadow

  -moz-mac-accentface

  -moz-mac-accentlightesthighlight

  -moz-mac-accentlightshadow

  -moz-mac-accentregularhighlight

  -moz-mac-accentregularshadow

  -moz-mac-chrome-active

• -moz-mac-chrome-inactive

• -moz-mac-focusring

  -moz-mac-menuselect

  -moz-mac-menushadow

  -moz-mac-menutextselect

  -moz-MenuHover

  • : Цвет фона для зависших пунктов меню. Часто похожи на Highlight. Следует использовать с moz-MenuHoverText или -moz-MenuBarHoverText при наведении цвет текста переднего плана.

• -moz-MenuHoverText

  • : Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста HighlightText. Следует использовать с -moz-MenuHover наведите цвет фона.

• -moz-MenuBarText

  • : цвет текста в строках меню. Часто похоже на текст меню "MenuText". Должен использоваться поверх фона Menu.

• -moz-MenuBarHoverText

  • : Цвет для зависшего текста в строках меню. Часто похоже на -moz-MenuHoverText меню наведения текста. Следует использовать поверх -moz-MenuHover наведите фон.

• -moz-nativehyperlinktext

  • : цвет гиперссылки платформы по умолчанию.

• -moz-OddTreeRow

  • : цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.

• -moz-win-communicationstext

  • : следует использовать для текста в объектах с - moz-appearance:- moz-win-communications-toolbox;.

• -moz-win-mediatext

  • : следует использовать для текста в объектах с - moz-appearance:- moz-win-media-toolbox.

• -moz-win-accentcolor

  • : Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.

• -moz-win-accentcolortext

  • : Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.

Расширения Цветовых Предпочтений Mozilla

-moz-activehyperlinktext

Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-default-background-color

предпочтения пользователя для цвета фона документа.

-moz-default-color

предпочтения пользователя для цвета текста.

-moz-hyperlinktext

Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.

-moz-visitedhyperlinktext

Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.

Интерполяция

В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени.

Соображения доступности

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

Спецификации

Совместимость с браузерами

Смотрите также

• Свойство непрозрачность позволяет определить прозрачность на уровне элемента.
• Некоторые общие свойства, которые используют этот тип данных: цвет, фон, бордюр-колор, окно-тень, контур-цвет, текст-тень
• Применение цвета к элементам HTML с помощью CSS