6. CSS — Цвета: форматы и коды

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

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

ФорматСинтаксисПример
Шестнадцатеричный код#00FF00p {color: #00FF00;}
Короткий шестнадцатеричный код#0F0p {color: #0F0;}
RGB %rgb(rrr%,ggg%,bbb%)p {color: rgb(0%, 100%, 0%);}
RGB абсолютныйrgb(rrr,ggg,bbb)p {color: rgb(0, 255, 0);}
Ключевое словоgreen, white, black и т.д.p {color: green;}

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

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

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

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

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

ЦветШестнадцатеричный цвет
Белый#FFFFFF
Черный#000000
Красный#FF0000
Лайма#00FF00
Синий#0000FF
Желтый#FFFF00
Морская волна#00FFFF
Фуксия#FF00FF

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

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

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

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

ЦветШестнадцатеричный цвет
Белый#FFF
Черный#000
Красный#F00
Лайма#0F0
Синий#00F
Желтый#FF0
Морская волна#0FF
Фуксия#F0F

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

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

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

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

ЦветШестнадцатеричный цвет
Белыйrgb(255, 255, 255)
Черныйrgb(0, 0, 0)
Красныйrgb(255, 0, 0)
Лаймаrgb(0, 255, 0)
Синийrgb(0, 0, 255)
Желтыйrgb(255, 255, 0)
Морская волнаrgb(0, 255, 255)
Фуксияrgb(255, 0, 255)

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

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

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

Ниже представлена таблица из 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
Поделитесь:

О сайте

Все материалы сайта proglang.su являются результатом труда его авторов. Копирование материалов в некоммерческих целях без указания источника в виде прямой ссылки на сайт proglang.su запрещено. Использование материалов в коммерческих целях разрешено только с письменного согласия автора. Нарушение авторских прав преследуется по закону. Мы это делаем, чтобы защитить плоды своих трудов от воровства. © 2014-2017

Присоединяйтесь


Обратная связь