Цвет - CSS-хитрости

Anonim

colorСвойство в CSS устанавливает цвет текста и текстовых украшений.

p ( color: blue; )

Значения

colorСвойство может принимать любое значение CSS цвета.

  • Именные цвета: например, «аква».
  • Шестнадцатеричные цвета: например, # 00FFFF или # 0FF.
  • Цвета RGB и RGBa: например, rgb (0, 255, 255) и rgba (0, 255, 255, .5).
  • Цвета HSL и HSLa: например, hsl (180, 100%, 50%) и hsla (180, 100%, 50%, .5).

Именованные цвета

p ( color: aqua; )

Именованные цвета также известны как цвета ключевых слов, цвета X11 или цвета SVG. Все названные цвета по умолчанию непрозрачны, за исключением transparentполностью прозрачного или «прозрачного». См. Наш фрагмент «Именованные цвета и шестнадцатеричные эквиваленты» для получения списка именованных цветов.

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

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

p ( color: #00FFFF; )

Если пары красного, синего и зеленого значений являются двойными, вы можете сократить шестнадцатеричное значение до 3-значного сокращения - например, # 00FFFF можно сократить до # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Цвета RGB и RGBa

Цвета RGB задаются с помощью списка из трех числовых значений (от 0 до 255) или процентных значений (от 0 до 100%), разделенных запятыми. Первое значение представляет красное значение, второе - зеленое, а третье - синее. Цвета RGB по умолчанию непрозрачны.

p ( color: rgb(0, 255, 255); )

RGBa добавляет четвертое значение для альфа-канала, которое устанавливает непрозрачность цвета. Альфа-значение - это число в диапазоне от 0,0 (полностью прозрачный) до 1 (полностью непрозрачный).

p ( color: rgba(0, 255, 255, .5); )

Цвета HSL и HSLa

Цвета HSL указываются с помощью списка из трех значений, разделенных запятыми: степень оттенка (число от 0 до 360), процент насыщенности (от 0% до 100%) и процент яркости (от 0%). до 100%). Цвета HSL по умолчанию непрозрачны.

p ( color: hsl(180, 100%, 50%); )

HSLa добавляет четвертое значение для альфа-канала, чтобы контролировать непрозрачность цвета. Альфа-значение - это число в диапазоне от 0,0 (полностью прозрачный) до 1 (полностью непрозрачный).

p ( color: hsla(180, 100%, 50%, .5); )

Демо

См. Значения цвета пера с помощью CSS-Tricks (@ css-tricks) на CodePen.

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

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

Границы наследуются, colorесли в объявлении не указано значение цвета border.

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

colorтакже применяется к маркерам пунктов списка (например, пунктам и числам). Вы не можете установить отдельный цвет для маркера элемента списка, но можете заменить его изображением со list-styleсвойством.

Хотя именованные цвета и шестнадцатеричные цвета не имеют альфа-каналов, вы можете установить их непрозрачность с помощью opacityсвойства во всех текущих браузерах и IE9 +.

Связанный

  • font
  • text-decoration-color
  • opacity

Дополнительная информация

  • color в спецификации W3C
  • color в MDN
  • Статья CSS-Tricks Ура для HSLa

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

Хром Сафари Fire Fox Опера IE Android iOS
Любой Любой Любой Любой Любой * Любой Любой

* HSL, HSLa и RGBa поддерживаются в IE9 +.