Главная » Языки программирования

Цвета

На чтение 8 мин
Содержание
  1. Цвет
  2. По шестнадцатеричному значению
  3. По названию
  4. С помощью RGB
  5. RGBA
  6. HSL
  7. HSLA
  8. Цветовые коды CSS
  9. Установка цвета фона элемента
  10. Установка цвета границы элемента
  11. Красные цвета
  12. Оранжевые цвета
  13. Желтые цвета
  14. Зеленые цвета
  15. Голубые цвета
  16. Синие цвета
  17. Фиолетовые цвета
  18. Розовые цвета
  19. Белые цвета
  20. Серые цвета
  21. Коричневые цвета
  22. Смотрите также

Цвет

Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате 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%) Фиолетовый

С помощью RGB

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

Читайте также:  Create php project with composer

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)
Читайте также:  Css видимая часть экрана

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

цвет Имя цвета 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 email

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

цвет Имя цвета 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)

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

Источник

Оцените статью
© 2023 Программирование