Цветовые коды 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)

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

Источник

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

Hello World

Lorem ipsum.

Ut wisi enim.

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

Hello World

Hello World

Hello World

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three elements have their background color set with RGB, HEX, and HSL values:

The following two elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

Источник

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

In these chapters, you will learn about the following CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

With CSS, a color is most often specified by:

• a valid color name — like «red»
• a HEX value — like «#ff0000»
• an RGB value — like «rgb(255,0,0)»

Look at CSS Color Values for a complete list of possible color values.

Other Elements

You can set the background color for any HTML elements:

Example

Here, the ,

, and elements will have different background colors:

div background-color: lightblue;
>

Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 — 1.0. The lower value, the more transparent:

Example

Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

The CSS Background Color Property

Источник

CSS Colors

CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

The following example defines different RGBA colors:

Example

HSL Colors

HSL stands for Hue, Saturation and Lightness.

An HSL color value is specified with: hsl(hue, saturation, lightness).

1. Hue is a degree on the color wheel (from 0 to 360):
   • 0 (or 360) is red
   • 120 is green
   • 240 is blue
2. Saturation is a percentage value: 100% is the full color.
3. Lightness is also a percentage; 0% is dark (black) and 100% is white.

The following example defines different HSL colors:

Example

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

The following example defines different HSLA colors:

Example

Opacity

The CSS opacity property sets the opacity for the whole element (both background color and text will be opaque/transparent).

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Notice that the text above will also be transparent/opaque!

The following example shows different elements with opacity:

Источник