Цвета

Цвет

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

По шестнадцатеричному значению

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

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 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%) Фиолетовый
Читайте также:  Дождаться полной загрузки страницы php

С помощью RGB

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

RGBA

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

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

HSL

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

Цветовой круг

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

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

HSLA

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

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

     body < background-color: #F9F2E3; >h2 < background-color: rgb(214,86,43); color: rgba(255,255,255,.9); padding: 10px; >p < color: green; >div 

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

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

Арррргх!

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

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

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

Источник

Цветовые коды CSS

Для всех однотипных элементов. Поместите код в тег

пример

Установка красного цвета текста абзаца:

Установка цвета определенного абзаца:

Установка цвета всех абзацев

Установка цвета фона элемента

пример

Установка красного цвета фона абзаца:

Установка цвета фона определенного абзаца:

Установка цвета фона всех абзацев:

Установка цвета границы элемента

element < border-color: topcode rightcode bottomcode leftcode >

пример

Установка красного, зеленого, синего и черного цвета границы абзаца:

Установка цвета границы конкретного абзаца:

Установка цвета границы всех абзацев:

Красные цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
лосось # FFA07A RGB (255,160,122)
лосось # FA8072 RGB (250,128,114)
темный лосось # E9967A RGB (233,150,122)
светло-коралловый # F08080 rgb (240,128,128)
индийский # CD5C5C RGB (205,92,92)
малиновый # DC143C RGB (220,20,60)
огнеупорный кирпич # B22222 RGB (178,34,34)
красный # FF0000 RGB (255,0,0)
темно-красный # 8B0000 RGB (139,0,0)

Оранжевые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
коралл # FF7F50 RGB (255,127,80)
помидор # FF6347 RGB (255,99,71)
Оранжево-красный # FF4500 RGB (255,69,0)
золото # FFD700 RGB (255 215,0)
апельсин # FFA500 RGB (255,165,0)
темно-оранжевый # FF8C00 RGB (255,140,0)

Желтые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-желтого # FFFFE0 rgb (255 255 224)
лимонный шифон #FFFACD rgb (255 250 205)
светзолото-желтый # FAFAD2 RGB (250,250,210)
папайавип # FFEFD5 rgb (255 239 213)
мокасины # FFE4B5 rgb (255 228 181)
персиковый # FFDAB9 rgb (255 218 185)
Palegoldenrod # EEE8AA RGB (238 232 170)
цвет хаки # F0E68C RGB (240,230,140)
темный хаки # BDB76B RGB (189 183 107)
желтый # FFFF00 RGB (255,255,0)

Зеленые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
газон # 7CFC00 RGB (124,252,0)
шартрез # 7FFF00 RGB (127,255,0)
салатовый # 32CD32 RGB (50,205,50)
Лайм # 00FF00 RGB (0,255,0)
зеленый лес # 228B22 RGB (34,139,34)
зеленый # 008000 RGB (0,128,0)
темно-зеленый # 006400 rgb (0,100,0)
желто-зеленый # ADFF2F RGB (173,255,47)
желтый зеленый # 9ACD32 RGB (154,205,50)
весенне-зеленый # 00FF7F RGB (0,255,127)
средний весенний # 00FA9A RGB (0,250,154)
светло-зеленый # 90EE90 RGB (144 238 144)
бледно-зеленый # 98FB98 RGB (152 251 152)
темно-зеленый # 8FBC8F RGB (143 188 143)
средний # 3CB371 RGB (60 179 113)
цвет морской волны # 2E8B57 RGB (46,139,87)
оливковый # 808000 RGB (128,128,0)
темно-оливковый # 556B2F RGB (85,107,47)
оливковый # 6B8E23 RGB (107,142,35)

Голубые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-голубой # E0FFFF RGB (224,255,255)
голубой # 00FFFF RGB (0,255,255)
аква # 00FFFF RGB (0,255,255)
Аквамарин # 7FFFD4 rgb (127,255,212)
среднийаквамарин # 66CDAA RGB (102 205 170)
палитра бирюза #AFEEEE RGB (175 238 238)
бирюзовый # 40E0D0 RGB (64 224 208)
средняя бирюза # 48D1CC RGB (72 209 204)
темно-бирюзовый # 00CED1 RGB (0,206,209)
свет # 20B2AA RGB (32 178 170)
кадетсиний # 5F9EA0 RGB (95 158 160)
темно-синий # 008B8B RGB (0,139,139)
бирюзовый # 008080 RGB (0,128,128)

Синие цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
синий порошок # B0E0E6 rgb (176,224,230)
светло-синий # ADD8E6 RGB (173 216 230)
светнебосиний # 87CEFA RGB (135 206 250)
голубое небо # 87CEEB RGB (135 206 235)
темно-синий # 00BFFF RGB (0,191,255)
светстальсиний # B0C4DE RGB (176 196 222)
голубой # 1E90FF RGB (30,144,255)
васильковый # 6495ED RGB (100 149 237)
стальной синий # 4682B4 RGB (70 130 180)
Королевский синий # 4169E1 RGB (65,105,225)
синий # 0000FF RGB (0,0,255)
средне-синий # 0000CD RGB (0,0,205)
темно-синий # 00008B RGB (0,0,139)
флот # 000080 RGB (0,0,128)
темно-синий # 191970 RGB (25,25,112)
средний # 7B68EE RGB (123 104 238)
сланцево-синий # 6A5ACD RGB (106,90,205)
темно-синий # 483D8B RGB (72,61,139)

Фиолетовые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
лаванда # E6E6FA RGB (230,230,250)
чертополох # D8BFD8 RGB (216,191,216)
слива # DDA0DD RGB (221 160 221)
Виолетта # EE82EE RGB (238 130 238)
орхидея # DA70D6 RGB (218 112 214)
фуксия # FF00FF RGB (255,0,255)
пурпурный # FF00FF RGB (255,0,255)
среднеорхид # BA55D3 RGB (186,85,211)
среднефиолетовый # 9370DB RGB (147 112 219)
сине-фиолетовый # 8A2BE2 RGB (138,43,226)
темно-фиолетовый # 9400D3 RGB (148,0 211)
Darkorchid # 9932CC RGB (153,50,204)
темно-пурпурный # 8B008B RGB (139,0,139)
фиолетовый # 800080 RGB (128,0,128)
индиго # 4B0082 RGB (75,0,130)

Розовые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
розовый # FFC0CB RGB (255 192 203)
светло-розовый # FFB6C1 RGB (255 182 193)
ярко-розовый # FF69B4 RGB (255 105 180)
темно-розовый # FF1493 RGB (255, 20, 147)
бледно-фиолетовый # DB7093 RGB (219 112 147)
среднефиолетовый # C71585 RGB (199,21,133)

Белые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
белый #FFFFFF RGB (255,255,255)
снег #FFFAFA rgb (255,250,250)
нектар # F0FFF0 RGB (240,255,240)
мятный крем # F5FFFA rgb (245,255,250)
лазурный # F0FFFF RGB (240,255,255)
алиса синий # F0F8FF RGB (240 248 255)
призрачный # F8F8FF RGB (248 248 255)
белый дым # F5F5F5 RGB (245 245 245)
морская ракушка # FFF5EE rgb (255 245 238)
бежевый # F5F5DC RGB (245 245 220)
старое платье # FDF5E6 RGB (253 245 230)
цветочный белый # FFFAF0 rgb (255,250,240)
слоновая кость # FFFFF0 rgb (255 255 240)
античный # FAEBD7 rgb (250 235 215)
белье # FAF0E6 RGB (250,240,230)
лаванда # FFF0F5 RGB (255 240 245)
туманная роза # FFE4E1 rgb (255 228 225)

Серые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
Gainsboro #DCDCDC RGB (220,220,220)
светло-серый # D3D3D3 RGB (211 211 211)
Серебряный # C0C0C0 RGB (192,192,192)
темно-серый # A9A9A9 RGB (169 169 169)
серый # 808080 RGB (128,128,128)
тусклый # 696969 RGB (105 105 105)
свет # 778899 RGB (119,136,153)
шифер серый # 708090 rgb (112,128,144)
темно-серый # 2F4F4F RGB (47,79,79)
черный # 000000 rgb (0,0,0)

Коричневые цвета

цвет Имя цвета HTML / CSS Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
кукурузные рыльца # FFF8DC RGB (255 248 220)
бланшированный миндаль #FFEBCD RGB (255 235 205)
бисквит # FFE4C4 RGB (255 228 196)
навайовайт #FFDEAD rgb (255 222 173)
пшеница # F5DEB3 RGB (245 222 179)
Burlywood # DEB887 RGB (222 184 135)
загар # D2B48C RGB (210,180,140)
розово-коричневый # BC8F8F RGB (188 143 143)
песочно-коричневый # F4A460 RGB (244,164,96)
золотарник # DAA520 RGB (218,165,32)
Перу # CD853F RGB (205,133,63)
шоколад # D2691E RGB (210,105,30)
седло-коричневый # 8B4513 RGB (139,69,19)
Сиена # A0522D RGB (160,82,45)
коричневый # A52A2A RGB (165,42,42)
бордовый # 800000 RGB (128,0,0)

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

Источник

Оцените статью