CSS
Цвета

Синтаксис

• цвет: #rgb
• цвет: #rrggbb
• color: rgb [a] (<красный>, <зеленый>, <синий> [, <альфа>])
• color: hsl [a] (<hue>, <saturation%>, <lightness%> [, <alpha>])
• цвет: colorkeyword / * зеленый, синий, желтый, оранжевый, красный, ..etc * /

Цветные ключевые слова

Большинство браузеров поддерживают цветные ключевые слова, чтобы указать цвет. Например, чтобы задать color синего элемента, используйте ключевое слово blue :

.some-class {
    color: blue;
}

Ключевые слова CSS не чувствительны к регистру - blue , Blue и BLUE будут #0000FF в #0000FF .

Цветные ключевые слова

Название цвета	Значение Hex	Значения RGB	цвет
AliceBlue	# F0F8FF	RGB (240248255)
AntiqueWhite	# FAEBD7	RGB (250235215)
вода	# 00FFFF	RGB (0255255)
Аквамарин	# 7FFFD4	RGB (127255212)
лазурь	# F0FFFF	RGB (240255255)
Бежевый	# F5F5DC	RGB (245245220)
фора	# FFE4C4	RGB (255228196)
черный	# 000000	RGB (0,0,0)
BlanchedAlmond	#FFEBCD	RGB (255235205)
синий	# 0000FF	RGB (0,0,255)
Сине-фиолетовый	# 8A2BE2	RGB (138,43,226)
коричневый	# A52A2A	RGB (165,42,42)
BurlyWood	# DEB887	RGB (222184135)
CadetBlue	# 5F9EA0	RGB (95158160)
картезианский монастырь	# 7FFF00	RGB (127,255,0)
Шоколад	# D2691E	RGB (210,105,30)
коралловый	# FF7F50	RGB (255,127,80)
CornflowerBlue	# 6495ED	RGB (100149237)
Кукурузные рыльца	# FFF8DC	RGB (255248220)
малиновый	# DC143C	RGB (220,20,60)
Cyan	# 00FFFF	RGB (0255255)
Темно-синий	# 00008B	RGB (0,0,139)
DarkCyan	# 008B8B	RGB (0139139)
DarkGoldenRod	# B8860B	RGB (184,134,11)
Темно-серый	# A9A9A9	RGB (169169169)
Темно-серый	# A9A9A9	RGB (169169169)
Темно-зеленый	# 006400	RGB (0,100,0)
DarkKhaki	# BDB76B	RGB (189183107)
DarkMagenta	# 8B008B	RGB (139,0,139)
DarkOliveGreen	# 556B2F	RGB (85,107,47)
DarkOrange	# FF8C00	RGB (255,140,0)
DarkOrchid	# 9932CC	RGB (153,50,204)
Темно-красный	# 8B0000	RGB (139,0,0)
DarkSalmon	# E9967A	RGB (233150122)
DarkSeaGreen	# 8FBC8F	RGB (143188143)
DarkSlateBlue	# 483D8B	RGB (72,61,139)
DarkSlateGray	# 2F4F4F	RGB (47,79,79)
DarkSlateGrey	# 2F4F4F	RGB (47,79,79)
DarkTurquoise	# 00CED1	RGB (0206209)
DarkViolet	# 9400D3	RGB (148,0,211)
Темно-розовый	# FF1493	RGB (255,20,147)
DeepSkyBlue	# 00BFFF	RGB (0191255)
DimGray	# 696969	RGB (105105105)
DimGrey	# 696969	RGB (105105105)
DodgerBlue	# 1E90FF	RGB (30144255)
огнеупорный кирпич	# B22222	RGB (178,34,34)
FloralWhite	# FFFAF0	RGB (255250240)
Зеленый лес	# 228B22	RGB (34,139,34)
фуксия	# FF00FF	RGB (255,0,255)
Gainsboro	#DCDCDC	RGB (220220220)
GhostWhite	# F8F8FF	RGB (248248255)
Золото	# FFD700	RGB (255,215,0)
золотарник	# DAA520	RGB (218,165,32)
Серый	# 808080	RGB (128128128)
Серый	# 808080	RGB (128128128)
зеленый	# 008000	RGB (0,128,0)
Желто-зеленый	# ADFF2F	RGB (173,255,47)
Нектар	# F0FFF0	RGB (240255240)
Ярко-розовый	# FF69B4	RGB (255105180)
IndianRed	# CD5C5C	RGB (205,92,92)
Индиго	# 4B0082	RGB (75,0,130)
слоновая кость	# FFFFF0	RGB (255255240)
Хаки	# F0E68C	RGB (240230140)
лаванда	# E6E6FA	RGB (230230250)
LavenderBlush	# FFF0F5	RGB (255240245)
LawnGreen	# 7CFC00	RGB (124,252,0)
LemonChiffon	#FFFACD	RGB (255250205)
Светло-синий	# ADD8E6	RGB (173216230)
LightCoral	# F08080	RGB (240128128)
LightCyan	# E0FFFF	RGB (224255255)
LightGoldenRodYellow	# FAFAD2	RGB (250250210)
Светло-серый	# D3D3D3	RGB (211211211)
Светло-серый	# D3D3D3	RGB (211211211)
Светло-зеленый	# 90EE90	RGB (144238144)
Светло-розовый	# FFB6C1	RGB (255182193)
LightSalmon	# FFA07A	RGB (255160122)
LightSeaGreen	# 20B2AA	RGB (32178170)
LightSkyBlue	# 87CEFA	RGB (135206250)
LightSlateGray	# 778899	RGB (119136153)
LightSlateGrey	# 778899	RGB (119136153)
LightSteelBlue	# B0C4DE	RGB (176196222)
Светло-желтого	# FFFFE0	RGB (255255224)
Лайм	# 00FF00	RGB (0,255,0)
LimeGreen	# 32CD32	RGB (50,205,50)
Белье	# FAF0E6	RGB (250240230)
фуксин	# FF00FF	RGB (255,0,255)
каштановый	# 800000	RGB (128,0,0)
MediumAquaMarine	# 66CDAA	RGB (102205170)
MediumBlue	# 0000CD	RGB (0,0,205)
MediumOrchid	# BA55D3	RGB (186,85,211)
MediumPurple	# 9370DB	RGB (147112219)
MediumSeaGreen	# 3CB371	RGB (60179113)
MediumSlateBlue	# 7B68EE	RGB (123104238)
MediumSpringGreen	# 00FA9A	RGB (0250154)
MediumTurquoise	# 48D1CC	RGB (72209204)
MediumVioletRed	# C71585	RGB (199,21,133)
Темно-синий	# 191970	RGB (25,25,112)
MintCream	# F5FFFA	RGB (245255250)
MistyRose	# FFE4E1	RGB (255228225)
мокасин	# FFE4B5	RGB (255228181)
NavajoWhite	#FFDEAD	RGB (255222173)
военно-морской флот	# 000080	RGB (0,0,128)
OldLace	# FDF5E6	RGB (253245230)
оливковый	# 808000	RGB (128,128,0)
OliveDrab	# 6B8E23	RGB (107,142,35)
оранжевый	# FFA500	RGB (255,165,0)
Оранжево-красный	# FF4500	RGB (255,69,0)
орхидея	# DA70D6	RGB (218112214)
PaleGoldenRod	# EEE8AA	RGB (238232170)
Бледно-зеленый	# 98FB98	RGB (152251152)
PaleTurquoise	#AFEEEE	RGB (175238238)
PaleVioletRed	# DB7093	RGB (219112147)
PapayaWhip	# FFEFD5	RGB (255239213)
Peachpuff	# FFDAB9	RGB (255218185)
Перу	# CD853F	RGB (205,133,63)
розовый	# FFC0CB	RGB (255192203)
слива	# DDA0DD	RGB (221160221)
PowderBlue	# B0E0E6	RGB (176224230)
Пурпурный	# 800080	RGB (128,0,128)
RebeccaPurple	# 663399	RGB (102,51,153)
красный	# FF0000	RGB (255,0,0)
RosyBrown	# BC8F8F	RGB (188143143)
Королевский синий	# 4169E1	RGB (65105225)
SaddleBrown	# 8B4513	RGB (139,69,19)
Лосось	# FA8072	RGB (250128114)
Sandybrown	# F4A460	RGB (244,164,96)
Цвет морской волны	# 2E8B57	RGB (46,139,87)
Морская ракушка	# FFF5EE	RGB (255245238)
охра	# A0522D	RGB (160,82,45)
Серебряный	# C0C0C0	RGB (192192192)
Голубое небо	# 87CEEB	RGB (135206235)
SlateBlue	# 6A5ACD	RGB (106,90,205)
Шифер серый	# 708090	RGB (112128144)
SlateGrey	# 708090	RGB (112128144)
Снег	#FFFAFA	RGB (255250250)
SpringGreen	# 00FF7F	RGB (0255127)
Стальной синий	# 4682B4	RGB (70130180)
загар	# D2B48C	RGB (210180140)
чирок	# 008080	RGB (0128128)
чертополох	# D8BFD8	RGB (216191216)
Помидор	# FF6347	RGB (255,99,71)
Бирюзовый	# 40E0D0	RGB (64224208)
Виолетта	# EE82EE	RGB (238130238)
пшеница	# F5DEB3	RGB (245222179)
белый	#FFFFFF	RGB (255,255,255)
Белый дым	# F5F5F5	RGB (245245245)
желтый	# FFFF00	RGB (255,255,0)
Желто-зеленый	# 9ACD32	RGB (154,205,50)

В дополнение к названным цветам также есть ключевое слово transparent , которое представляет собой полностью прозрачный черный цвет: rgba(0,0,0,0)

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

Фон

Цвета CSS также могут быть представлены в виде шестигранного триплета, где элементы представляют красные, зеленые и синие компоненты цвета. Каждое из этих значений представляет собой число в диапазоне от 00 до FF или от 0 до 255 в десятичной нотации. Можно использовать строчные и / или строчные шестнадцатеричные значения (т. #3fc = #3FC = #33ffCC ). Браузер интерпретирует #369 как #336699 . Если это не то, что вы намеревались, а скорее хотите #306090 , вам нужно указать это явно.

Общее количество цветов, которое может быть представлено шестнадцатеричной нотацией, составляет 256 ^ 3 или 16 777 216.

Синтаксис

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

Шестнадцатеричная нотация используется для указания значений цвета в цветовом формате RGB в соответствии с «Числовыми значениями цвета» W3C .

В Интернете доступно множество инструментов для поиска шестнадцатеричных (или просто шестнадцатеричных) значений цвета.

Найдите « шестнадцатеричную цветовую палитру » или « шестнадцатеричный подборщик цветов » с вашим любимым веб-браузером, чтобы найти кучу вариантов!

Значения шестнадцатеричных значений всегда начинаются с знака фунта (#), длиной до шести «цифр» и не зависят от регистра: то есть, они не заботятся о капитализации. #FFC125 и #ffc125 имеют один и тот же цвет.

rgb () Обозначение

RGB - это аддитивная цветовая модель, которая представляет цвета как смеси красного, зеленого и синего света. По сути, представление RGB является десятичным эквивалентом шестнадцатеричного обозначения. В шестнадцатеричном формате каждое число колеблется от 00-FF, что эквивалентно 0-255 в десятичном и 0% -100% в процентах.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Синтаксис

rgb(<red>, <green>, <blue>)

hsl () Обозначение

HSL обозначает оттенок («какой цвет»), насыщенность («сколько цветов») и легкость («сколько белого»).

Оттенок представлен как угол от 0 ° до 360 ° (без единиц), а насыщенность и легкость представлены в процентах.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Синтаксис

color: hsl(<hue>, <saturation>%, <lightness>%);

Заметки

• Насыщение 0% всегда производит оттенок серого; изменение оттенка не влияет.

• Легкость 0% всегда производит черный цвет, а 100% всегда производит белый; изменение оттенка или насыщенности не влияет.

currentColor

currentColor возвращает вычисленное значение цвета текущего элемента.

Использовать в одном элементе

Здесь currentColor оценивается как красный, поскольку свойство color установлено на red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

В этом случае указание currentColor для границы, скорее всего, избыточно, так как исключение должно давать идентичные результаты. Используйте свойство currentColor внутри свойства border внутри одного и того же элемента, если оно будет перезаписано иначе из-за более конкретного селектора.

Так как это вычисленный цвет, граница будет зеленой в следующем примере из-за второго правила, переопределяющего первое:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Унаследовано от родительского элемента

Цвет родителя наследуется, здесь currentColor оценивается как «синий», делая синий цвет дочернего элемента.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

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

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Возможный результат:

rgba () Обозначение

Подобно нотации rgb () , но с дополнительным значением альфа (непрозрачность).

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Синтаксис

rgba(<red>, <green>, <blue>, <alpha>);

hsla () Обозначение

Подобно нотации hsl () , но с добавленным значением альфа (непрозрачность).

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Синтаксис

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);