CSS colors

Основные цвета

  • Black
  • #000000
  • 0, 0, 0
  • Gray
  • #808080
  • 128, 128, 128
  • Silver
  • #C0C0C0
  • 192, 192, 192
  • White
  • #FFFFFF
  • 255, 255, 255
  • Fuchsia
  • #FF00FF
  • 255, 0, 255
  • Purple
  • #800080
  • 128, 0, 128
  • Red
  • #FF0000
  • 255, 0, 0
  • Maroon
  • #800000
  • 128, 0, 0
  • Yellow
  • #FFFF00
  • 255, 255, 0
  • Olive
  • #808000
  • 128, 128, 0
  • Lime
  • #00FF00
  • 0, 255, 0
  • Green
  • #008000
  • 0, 128, 0
  • Aqua
  • #00FFFF
  • 0, 255, 255
  • Teal
  • #008080
  • 0, 128, 128
  • Blue
  • #0000FF
  • 0, 0, 255
  • Navy
  • #000080
  • 0, 0, 128

Красные тона

  • IndianRed
  • #CD5C5C
  • 205, 92, 92
  • LightCoral
  • #F08080
  • 240, 128, 128
  • Salmon
  • #FA8072
  • 250, 128, 114
  • DarkSalmon
  • #E9967A
  • 233, 150, 122
  • LightSalmon
  • #FFA07A
  • 255, 160, 122
  • Crimson
  • #DC143C
  • 220, 20, 60
  • Red
  • #FF0000
  • 255, 0, 0
  • FireBrick
  • #B22222
  • 178, 34, 34
  • DarkRed
  • #8B0000
  • 139, 0, 0

Зеленые тона

  • GreenYellow
  • #ADFF2F
  • 173, 255, 47
  • Chartreuse
  • #7FFF00
  • 127, 255, 0
  • LawnGreen
  • #7CFC00
  • 124, 252, 0
  • Lime
  • #00FF00
  • 0, 255, 0
  • LimeGreen
  • #32CD32
  • 50, 205, 50
  • PaleGreen
  • #98FB98
  • 152, 251, 152
  • LightGreen
  • #90EE90
  • 144, 238, 144
  • MediumSpringGreen
  • #00FA9A
  • 0, 250, 154
  • SpringGreen
  • #00FF7F
  • 0, 255, 127
  • MediumSeaGreen
  • #3CB371
  • 60, 179, 113
  • SeaGreen
  • #2E8B57
  • 46, 139, 87
  • ForestGreen
  • #228B22
  • 34, 139, 34
  • Green
  • #008000
  • 0, 128, 0
  • DarkGreen
  • #006400
  • 0, 100, 0
  • YellowGreen
  • #9ACD32
  • 154, 205, 50
  • OliveDrab
  • #6B8E23
  • 107, 142, 35
  • Olive
  • #808000
  • 128, 128, 0
  • DarkOliveGreen
  • #556B2F
  • 85, 107, 47
  • MediumAquamarine
  • #66CDAA
  • 102, 205, 170
  • DarkSeaGreen
  • #8FBC8F
  • 143, 188, 143
  • LightSeaGreen
  • #20B2AA
  • 32, 178, 170
  • DarkCyan
  • #008B8B
  • 0, 139, 139
  • Teal
  • #008080
  • 0, 128, 128

Розовые тона

  • Pink
  • #FFC0CB
  • 255, 192, 203
  • LightPink
  • #FFB6C1
  • 255, 182, 193
  • HotPink
  • #FF69B4
  • 255, 105, 180
  • DeepPink
  • #FF1493
  • 255, 20, 147
  • MediumVioletRed
  • #C71585
  • 199, 21, 133
  • PaleVioletRed
  • #DB7093
  • 219, 112, 147

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

  • LightSalmon
  • #FFA07A
  • 255, 160, 122
  • Coral
  • #FF7F50
  • 255, 127, 80
  • Tomato
  • #FF6347
  • 255, 99, 71
  • OrangeRed
  • #FF4500
  • 255, 69, 0
  • DarkOrange
  • #FF8C00
  • 255, 140, 0
  • Orange
  • #FFA500
  • 255, 165, 0

Желтые тона

  • Gold
  • #FFD700
  • 255, 215, 0
  • Yellow
  • #FFFF00
  • 255, 255, 0
  • LightYellow
  • #FFFFE0
  • 255, 255, 224
  • LemonChiffon
  • #FFFACD
  • 255, 250, 205
  • LightGoldenrodYellow
  • #FAFAD2
  • 250, 250, 210
  • PapayaWhip
  • #FFEFD5
  • 255, 239, 213
  • Moccasin
  • #FFE4B5
  • 255, 228, 181
  • PeachPuff
  • #FFDAB9
  • 255, 218, 185
  • PaleGoldenrod
  • #EEE8AA
  • 238, 232, 170
  • Khaki
  • #F0E68C
  • 240, 230, 140
  • DarkKhaki
  • #BDB76B
  • 189, 183, 107

Синие тона

  • Aqua
  • #00FFFF
  • 0, 255, 255
  • Cyan
  • #00FFFF
  • 0, 255, 255
  • LightCyan
  • #E0FFFF
  • 224, 255, 255
  • PaleTurquoise
  • #AFEEEE
  • 175, 238, 238
  • Aquamarine
  • #7FFFD4
  • 127, 255, 212
  • Turquoise
  • #40E0D0
  • 64, 224, 208
  • MediumTurquoise
  • #48D1CC
  • 72, 209, 204
  • DarkTurquoise
  • #00CED1
  • 0, 206, 209
  • CadetBlue
  • #5F9EA0
  • 95, 158, 160
  • SteelBlue
  • #4682B4
  • 70, 130, 180
  • LightSteelBlue
  • #B0C4DE
  • 176, 196, 222
  • PowderBlue
  • #B0E0E6
  • 176, 224, 230
  • LightBlue
  • #ADD8E6
  • 173, 216, 230
  • SkyBlue
  • #87CEEB
  • 135, 206, 235
  • LightSkyBlue
  • #87CEFA
  • 135, 206, 250
  • DeepSkyBlue
  • #00BFFF
  • 0, 191, 255
  • DodgerBlue
  • #1E90FF
  • 30, 144, 255
  • CornflowerBlue
  • #6495ED
  • 100, 149, 237
  • MediumSlateBlue
  • #7B68EE
  • 123, 104, 238
  • RoyalBlue
  • #4169E1
  • 65, 105, 225
  • Blue
  • #0000FF
  • 0, 0, 255
  • MediumBlue
  • #0000CD
  • 0, 0, 205
  • DarkBlue
  • #00008B
  • 0, 0, 139
  • Navy
  • #000080
  • 0, 0, 128
  • MidnightBlue
  • #191970
  • 25, 25, 112

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

  • Lavender
  • #E6E6FA
  • 230, 230, 250
  • Thistle
  • #D8BFD8
  • 216, 191, 216
  • Plum
  • #DDA0DD
  • 221, 160, 221
  • Violet
  • #EE82EE
  • 238, 130, 238
  • Orchid
  • #DA70D6
  • 218, 112, 214
  • Fuchsia
  • #FF00FF
  • 255, 0, 255
  • Magenta
  • #FF00FF
  • 255, 0, 255
  • MediumOrchid
  • #BA55D3
  • 186, 85, 211
  • MediumPurple
  • #9370DB
  • 147, 112, 219
  • BlueViolet
  • #8A2BE2
  • 138, 43, 226
  • DarkViolet
  • #9400D3
  • 148, 0, 211
  • DarkOrchid
  • #9932CC
  • 153, 50, 204
  • DarkMagenta
  • #8B008B
  • 139, 0, 139
  • Purple
  • #800080
  • 128, 0, 128
  • Indigo
  • #4B0082
  • 75, 0, 130
  • SlateBlue
  • #6A5ACD
  • 106, 90, 205
  • DarkSlateBlue
  • #483D8B
  • 72, 61, 139

Белые тона

  • White
  • #FFFFFF
  • 255, 255, 255
  • Snow
  • #FFFAFA
  • 255, 250, 250
  • Honeydew
  • #F0FFF0
  • 240, 255, 240
  • MintCream
  • #F5FFFA
  • 245, 255, 250
  • Azure
  • #F0FFFF
  • 240, 255, 255
  • AliceBlue
  • #F0F8FF
  • 240, 248, 255
  • GhostWhite
  • #F8F8FF
  • 248, 248, 255
  • WhiteSmoke
  • #F5F5F5
  • 245, 245, 245
  • Seashell
  • #FFF5EE
  • 255, 245, 238
  • Beige
  • #F5F5DC
  • 245, 245, 220
  • OldLace
  • #FDF5E6
  • 253, 245, 230
  • FloralWhite
  • #FFFAF0
  • 255, 250, 240
  • Ivory
  • #FFFFF0
  • 255, 255, 240
  • AntiqueWhite
  • #FAEBD7
  • 250, 235, 215
  • Linen
  • #FAF0E6
  • 250, 240, 230
  • LavenderBlush
  • #FFF0F5
  • 255, 240, 245
  • MistyRose
  • #FFE4E1
  • 255, 228, 225

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

  • Cornsilk
  • #FFF8DC
  • 255, 248, 220
  • BlanchedAlmond
  • #FFEBCD
  • 255, 235, 205
  • Bisque
  • #FFE4C4
  • 255, 228, 196
  • NavajoWhite
  • #FFDEAD
  • 255, 222, 173
  • Wheat
  • #F5DEB3
  • 245, 222, 179
  • BurlyWood
  • #DEB887
  • 222, 184, 135
  • Tan
  • #D2B48C
  • 210, 180, 140
  • RosyBrown
  • #BC8F8F
  • 188, 143, 143
  • SandyBrown
  • #F4A460
  • 244, 164, 96
  • Goldenrod
  • #DAA520
  • 218, 165, 32
  • DarkGoldenRod
  • #B8860B
  • 184, 134, 11
  • Peru
  • #CD853F
  • 205, 133, 63
  • Chocolate
  • #D2691E
  • 210, 105, 30
  • SaddleBrown
  • #8B4513
  • 139, 69, 19
  • Sienna
  • #A0522D
  • 160, 82, 45
  • Brown
  • #A52A2A
  • 165, 42, 42
  • Maroon
  • #800000
  • 128, 0, 0

Серые тона

  • Gainsboro
  • #DCDCDC
  • 220, 220, 220
  • LightGrey
  • #D3D3D3
  • 211, 211, 211
  • LightGray
  • #D3D3D3
  • 211, 211, 211
  • Silver
  • #C0C0C0
  • 192, 192, 192
  • DarkGray
  • #A9A9A9
  • 169, 169, 169
  • DarkGrey
  • #A9A9A9
  • 169, 169, 169
  • Gray
  • #808080
  • 128, 128, 128
  • Grey
  • #808080
  • 128, 128, 128
  • DimGray
  • #696969
  • 105, 105, 105
  • DimGrey
  • #696969
  • 105, 105, 105
  • LightSlateGray
  • #778899
  • 119, 136, 153
  • LightSlateGrey
  • #778899
  • 119, 136, 153
  • SlateGray
  • #708090
  • 112, 128, 144
  • SlateGrey
  • #708090
  • 112, 128, 144
  • DarkSlateGray
  • #2F4F4F
  • 47, 79, 79
  • DarkSlateGrey
  • #2F4F4F
  • 47, 79, 79
  • Black
  • #000000
  • 0, 0, 0

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

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:

селектор { цвет : #RRGGBB; } #RR (красный) #GG (зеленый) #BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR - для красного, GG - для зеленого, BB - для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, B, С, D, Е, F. <Р>Например, значение #число 0000ff соответствует синему цвету, так как компонент ББ установлен в его самое высокое значение - (ФФ), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.вступление { цвет : #777; /* задаём темно-серый цвет для всех абзацев с классом вступление */ }

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

 

<ул>
  • газон # 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)
  • Internet Explorer Chrome Opera Safari Firefox Android iOS

    4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

    Браузеры поддерживают некоторые цвета по их названию. В табл. 1 и описание, шестнадцатеричный код, значения в формате RGB, HSL и описание.

    <ул>
  • белый #ffffff или #fff rgb(255,255,255) hsl(0,0%,100%) Белый
  • серебро #c0c0c0 rgb(192,192,192) hsl(0,0%,75%) Серый
  • серый #808080 rgb(128,128,128) hsl(0,0%,50%) Темно-серый
  • черный #000000 или #000 rgb(0,0,0) hsl(0,0%,0%) Черный
  • бордовый #800000 rgb(128,0,0) hsl(0,100%,25%) Темно-красный
  • красный #ff0000 или #f00 rgb(255,0,0) hsl(0,100%,50%) Красный
  • оранжевый #ffa500 rgb(255,165,0) hsl(38,8,100%,50%) Оранжевый
  • желтый #ffff00 или #ff0 rgb(255,255,0) hsl(60,100%,50%) Желтый
  • оливковый #808000 rgb(128,128,0) hsl(60,100%,25%) Оливковый
  • лайм #00ff00 или #0f0 rgb(0,255,0) hsl(120,100%,50%) Светло-зеленый
  • зеленый #008000 rgb(0,128,0) hsl(120,100%,25%) Зеленый
  • aqua #00ffff или #0ff rgb(0,255,255) hsl(180,100%,50%) или
  • синий #0000ff или #00f rgb(0,0,255) hsl(240,100%,50%) Синий
  • темно-синий #000080 rgb(0,0,128) hsl(240,100%,25%) Темно-синий
  • бирюзовый #008080 rgb(0,128,128) hsl(180,100%,25%) Сине-зеленый
  • фуксия #ff00ff или #f0f rgb(255,0,255) hsl(300,100%,50%) Розовый
  • фиолетовый #800080 rgb(128,0,128) hsl(300,100%,25%) Фиолетовый
  • Розовые цвета

     

    <ул>
  • розовый # 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)
  • Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    Рекомендация (Рекомендация) - спецификация одобрена W3C и рекомендована как стандарт.

    <Р>рекомендации кандидата (Возможная рекомендация) — не группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

    Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.

    Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.

    Редакторский черновик (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.

    Черновик (Черновик спецификации) — первая черновая версия стандарта.

    Серые цвета

     

    <ул>
  • Гейнсборо #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)
  • Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.

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

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

     

    Цветовые модели HSL и HSLA

    К еще одному методу задания цвета в CSS относится система , её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

    Оттенок — тон.

    Насыщенность — насыщенность.

    Легкость — осветленность.

    Цвет ссылок

    Цвет ссылки меняется похожим образом, только в качестве селектора нужно указать <a>:

    a { цвет: красный; }

    Если нужно менять цвет при наведении, тогда добавляем псевдо-класс :наведите курсор мыши:

    a:наведите курсор мыши { цвет: #A52A2A; }

    Синие цвета

     

    <ул>
  • синий порошок # 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)
  • Голубые цвета

     

    <ул>
  • светло-голубой # 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)
  • RGB и RGBA

    Система RGB использует три числа,Система, зеленого и синего цветов, которые смешаны вместе для получения любого оттенка. Числа могут варьироваться от 0 до 255. Рассмотрим РГБ-код для темно-фиолетового цвета: РГБ(204, 51, 255), его можно например применить к УСБ свойству, отвечающему за цвет шрифта:

    цвет: rgb(205, 51, 255); <Р>Система RGBA и добавляет еще одно число, которое описывает прозрачность цвета, значение может варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Значение 0.5 цвет делает полупрозрачным, рассмотрим версию темно-фиолетового цвета полупрозрачную, заданную с помощью формата RGBA системы:

    цвет: rgba(204, 51, 255, 0.5);

    Вы можете увидеть, что значения красного, зеленого и синего цветов аналогичны системе RGB. Четвертое число - 0.5 является степенью прозрачности. Буква "A" в RGBA означает альфа-канал, который является термином из графического дизайна означающим прозрачность.

    RGBA цвета удобно использовать для создания полупрозрачных элементов, обеспечивающих видимость элементов, располагающихся под ними.

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

     

    <ул>
  • кукурузные рыльца # 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)
  • Adblock
    detector