CSS цвета

На данной странице представлена таблица цветов CSS и круговая диаграмма цветов. Таблица включает в себя визуальное отображение самого цвета, а также коды HTML, CSS и RGB значения.

Шестнадцатеричный цвет задается с помощью: #RRGGBB, где шестнадцатеричные числа RR (красный), GG (зеленый) и BB (синий) задают основные параметры цвета. Все значения имеют диапазон от 00 и до FF.

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

  • 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

Предопределённые цвета

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

Например:

 p.intro { color : gray; /* задаём серый цвет для всех абзацев с классом intro */ } i { color : orange; /* задаём оранжевый цвет для всех элементов <i> */ } h2:first-child { color : red; /* задаём красный цвет для всех элементов <h2>, которые являются первыми дочерними элементами своего родителя */ }

HSL и HSLA

Система HSL (hue, saturation, lightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:

color: hsl(285, 100%, 60%);

Первое число - оттенок, выраженный в градусах от 0 до 360, определяющих позицию цвета на цветовом круге. Второе число - насыщенность, определяемая в процентах от 0% до 100%, указывает насколько насыщенным (ярким) будет цвет. Третье число - осветление, оно определяется в процентах также как и насыщенность, осветление указывает насколько светлым или темным будет цвет.

Система HSLA, как и RGBA, добавляет четвертое число в диапазоне от 0 до 1, определяющее насколько прозрачным должен быть цвет. Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью HSLA системы:

color: hsla(285, 100%, 60%, 0.5);

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

 селектор { color : rgb(R,G,B); }

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в (минимальное значение):

 p { color : rgb(0,0,255); /* задаём синий цвет для всех абзацев */ }

Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье "Единицы измерения CSS, размер шрифта". Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:

 h2 { color : rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */ }

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

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

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

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

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

Цветовые значения, разделённые пробелами

rgb()hsl()поддержкой

/* До */ .element {   background-color: rgb(0, 0, 0);   background-color: rgba(0, 0, 0, 1); }  /* После */ div {   background-color: rgb(0 0 0);   background-color: rgb(0 0 0 / 0.5);   background-color: rgb(0 0 0 / 50%); }

lab()lch()color()

Синие цвета

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

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

Adblock
detector