Цвета html

Имена цветов, отсортированные по цветным группам

Все современные браузеры поддерживают следующие 140 цветовых имен (нажмите на название цвета, или шестнадцатеричное значение, чтобы увидеть цвет как фон-цвет вместе с различными цветами текста):

Color Name	HEX	Color	Shades	Mix
Pink	#FFC0CB		Shades	Mix
LightPink	#FFB6C1		Shades	Mix
HotPink	#FF69B4		Shades	Mix
DeepPink	#FF1493		Shades	Mix
PaleVioletRed	#DB7093		Shades	Mix
MediumVioletRed	#C71585		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Lavender	#E6E6FA		Shades	Mix
Thistle	#D8BFD8		Shades	Mix
Plum	#DDA0DD		Shades	Mix
Orchid	#DA70D6		Shades	Mix
Violet	#EE82EE		Shades	Mix
Fuchsia	#FF00FF		Shades	Mix
Magenta	#FF00FF		Shades	Mix
MediumOrchid	#BA55D3		Shades	Mix
DarkOrchid	#9932CC		Shades	Mix
DarkViolet	#9400D3		Shades	Mix
BlueViolet	#8A2BE2		Shades	Mix
DarkMagenta	#8B008B		Shades	Mix
Purple	#800080		Shades	Mix
MediumPurple	#9370DB		Shades	Mix
MediumSlateBlue	#7B68EE		Shades	Mix
SlateBlue	#6A5ACD		Shades	Mix
DarkSlateBlue	#483D8B		Shades	Mix
RebeccaPurple	#663399		Shades	Mix
Indigo	#4B0082		Shades	Mix
Color Name	HEX	Color	Shades	Mix
LightSalmon	#FFA07A		Shades	Mix
Salmon	#FA8072		Shades	Mix
DarkSalmon	#E9967A		Shades	Mix
LightCoral	#F08080		Shades	Mix
IndianRed	#CD5C5C		Shades	Mix
Crimson	#DC143C		Shades	Mix
Red	#FF0000		Shades	Mix
FireBrick	#B22222		Shades	Mix
DarkRed	#8B0000		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Orange	#FFA500		Shades	Mix
DarkOrange	#FF8C00		Shades	Mix
Coral	#FF7F50		Shades	Mix
Tomato	#FF6347		Shades	Mix
OrangeRed	#FF4500		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Gold	#FFD700		Shades	Mix
Yellow	#FFFF00		Shades	Mix
LightYellow	#FFFFE0		Shades	Mix
LemonChiffon	#FFFACD		Shades	Mix
LightGoldenRodYellow	#FAFAD2		Shades	Mix
PapayaWhip	#FFEFD5		Shades	Mix
Moccasin	#FFE4B5		Shades	Mix
PeachPuff	#FFDAB9		Shades	Mix
PaleGoldenRod	#EEE8AA		Shades	Mix
Khaki	#F0E68C		Shades	Mix
DarkKhaki	#BDB76B		Shades	Mix
Color Name	HEX	Color	Shades	Mix
GreenYellow	#ADFF2F		Shades	Mix
Chartreuse	#7FFF00		Shades	Mix
LawnGreen	#7CFC00		Shades	Mix
Lime	#00FF00		Shades	Mix
LimeGreen	#32CD32		Shades	Mix
PaleGreen	#98FB98		Shades	Mix
LightGreen	#90EE90		Shades	Mix
MediumSpringGreen	#00FA9A		Shades	Mix
SpringGreen	#00FF7F		Shades	Mix
MediumSeaGreen	#3CB371		Shades	Mix
SeaGreen	#2E8B57		Shades	Mix
ForestGreen	#228B22		Shades	Mix
Green	#008000		Shades	Mix
DarkGreen	#006400		Shades	Mix
YellowGreen	#9ACD32		Shades	Mix
OliveDrab	#6B8E23		Shades	Mix
DarkOliveGreen	#556B2F		Shades	Mix
MediumAquaMarine	#66CDAA		Shades	Mix
DarkSeaGreen	#8FBC8F		Shades	Mix
LightSeaGreen	#20B2AA		Shades	Mix
DarkCyan	#008B8B		Shades	Mix
Teal	#008080		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Aqua	#00FFFF		Shades	Mix
Cyan	#00FFFF		Shades	Mix
LightCyan	#E0FFFF		Shades	Mix
PaleTurquoise	#AFEEEE		Shades	Mix
Aquamarine	#7FFFD4		Shades	Mix
Turquoise	#40E0D0		Shades	Mix
MediumTurquoise	#48D1CC		Shades	Mix
DarkTurquoise	#00CED1		Shades	Mix
Color Name	HEX	Color	Shades	Mix
CadetBlue	#5F9EA0		Shades	Mix
SteelBlue	#4682B4		Shades	Mix
LightSteelBlue	#B0C4DE		Shades	Mix
LightBlue	#ADD8E6		Shades	Mix
PowderBlue	#B0E0E6		Shades	Mix
LightSkyBlue	#87CEFA		Shades	Mix
SkyBlue	#87CEEB		Shades	Mix
CornflowerBlue	#6495ED		Shades	Mix
DeepSkyBlue	#00BFFF		Shades	Mix
DodgerBlue	#1E90FF		Shades	Mix
RoyalBlue	#4169E1		Shades	Mix
Blue	#0000FF		Shades	Mix
MediumBlue	#0000CD		Shades	Mix
DarkBlue	#00008B		Shades	Mix
Navy	#000080		Shades	Mix
MidnightBlue	#191970		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Cornsilk	#FFF8DC		Shades	Mix
BlanchedAlmond	#FFEBCD		Shades	Mix
Bisque	#FFE4C4		Shades	Mix
NavajoWhite	#FFDEAD		Shades	Mix
Wheat	#F5DEB3		Shades	Mix
BurlyWood	#DEB887		Shades	Mix
Tan	#D2B48C		Shades	Mix
RosyBrown	#BC8F8F		Shades	Mix
SandyBrown	#F4A460		Shades	Mix
GoldenRod	#DAA520		Shades	Mix
DarkGoldenRod	#B8860B		Shades	Mix
Peru	#CD853F		Shades	Mix
Chocolate	#D2691E		Shades	Mix
Olive	#808000		Shades	Mix
SaddleBrown	#8B4513		Shades	Mix
Sienna	#A0522D		Shades	Mix
Brown	#A52A2A		Shades	Mix
Maroon	#800000		Shades	Mix
Color Name	HEX	Color	Shades	Mix
White	#FFFFFF		Shades	Mix
Snow	#FFFAFA		Shades	Mix
HoneyDew	#F0FFF0		Shades	Mix
MintCream	#F5FFFA		Shades	Mix
Azure	#F0FFFF		Shades	Mix
AliceBlue	#F0F8FF		Shades	Mix
GhostWhite	#F8F8FF		Shades	Mix
WhiteSmoke	#F5F5F5		Shades	Mix
SeaShell	#FFF5EE		Shades	Mix
Beige	#F5F5DC		Shades	Mix
OldLace	#FDF5E6		Shades	Mix
FloralWhite	#FFFAF0		Shades	Mix
Ivory	#FFFFF0		Shades	Mix
AntiqueWhite	#FAEBD7		Shades	Mix
Linen	#FAF0E6		Shades	Mix
LavenderBlush	#FFF0F5		Shades	Mix
MistyRose	#FFE4E1		Shades	Mix
Color Name	HEX	Color	Shades	Mix
Gainsboro	#DCDCDC		Shades	Mix
LightGray	#D3D3D3		Shades	Mix
Silver	#C0C0C0		Shades	Mix
DarkGray	#A9A9A9		Shades	Mix
DimGray	#696969		Shades	Mix
Gray	#808080		Shades	Mix
LightSlateGray	#778899		Shades	Mix
SlateGray	#708090		Shades	Mix
DarkSlateGray	#2F4F4F		Shades	Mix
Black	#000000		Shades	Mix

Список цветов с названиями

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

Название цвета	HEX	Цвет
Black	#000000
Navy	#000080
DarkBlue	#00008B
MediumBlue	#0000CD
Blue	#0000FF
DarkGreen	#006400
Green	#008000
Teal	#008080
DarkCyan	#008B8B
DeepSkyBlue	#00BFFF
DarkTurquoise	#00CED1
MediumSpringGreen	#00FA9A
Lime	#00FF00
SpringGreen	#00FF7F
Aqua	#00FFFF
Cyan	#00FFFF
MidnightBlue	#191970
DodgerBlue	#1E90FF
LightSeaGreen	#20B2AA
ForestGreen	#228B22
SeaGreen	#2E8B57
DarkSlateGray	#2F4F4F
LimeGreen	#32CD32
MediumSeaGreen	#3CB371
Turquoise	#40E0D0
RoyalBlue	#4169E1
SteelBlue	#4682B4
DarkSlateBlue	#483D8B
MediumTurquoise	#48D1CC
Indigo	#4B0082
DarkOliveGreen	#556B2F
CadetBlue	#5F9EA0
CornflowerBlue	#6495ED
MediumAquaMarine	#66CDAA
DimGray	#696969
SlateBlue	#6A5ACD
OliveDrab	#6B8E23
SlateGray	#708090
LightSlateGray	#778899
MediumSlateBlue	#7B68EE
LawnGreen	#7CFC00
Chartreuse	#7FFF00
Aquamarine	#7FFFD4
Maroon	#800000
Purple	#800080
Olive	#808000
Gray	#808080
SkyBlue	#87CEEB
LightSkyBlue	#87CEFA
BlueViolet	#8A2BE2
DarkRed	#8B0000
DarkMagenta	#8B008B
SaddleBrown	#8B4513
DarkSeaGreen	#8FBC8F
LightGreen	#90EE90
MediumPurple	#9370D8
DarkViolet	#9400D3
PaleGreen	#98FB98
DarkOrchid	#9932CC
YellowGreen	#9ACD32
Sienna	#A0522D
Brown	#A52A2A
DarkGray	#A9A9A9
LightBlue	#ADD8E6
GreenYellow	#ADFF2F
PaleTurquoise	#AFEEEE
LightSteelBlue	#B0C4DE
PowderBlue	#B0E0E6
FireBrick	#B22222
DarkGoldenRod	#B8860B
MediumOrchid	#BA55D3
RosyBrown	#BC8F8F
DarkKhaki	#BDB76B
Silver	#C0C0C0
MediumVioletRed	#C71585
IndianRed	#CD5C5C
Peru	#CD853F
Chocolate	#D2691E
Tan	#D2B48C
LightGray	#D3D3D3
PaleVioletRed	#D87093
Thistle	#D8BFD8
Orchid	#DA70D6
GoldenRod	#DAA520
Crimson	#DC143C
Gainsboro	#DCDCDC
Plum	#DDA0DD
BurlyWood	#DEB887
LightCyan	#E0FFFF
Lavender	#E6E6FA
DarkSalmon	#E9967A
Violet	#EE82EE
PaleGoldenRod	#EEE8AA
LightCoral	#F08080
Khaki	#F0E68C
AliceBlue	#F0F8FF
HoneyDew	#F0FFF0
Azure	#F0FFFF
SandyBrown	#F4A460
Wheat	#F5DEB3
Beige	#F5F5DC
WhiteSmoke	#F5F5F5
MintCream	#F5FFFA
GhostWhite	#F8F8FF
Salmon	#FA8072
AntiqueWhite	#FAEBD7
Linen	#FAF0E6
LightGoldenRodYellow	#FAFAD2
OldLace	#FDF5E6
Red	#FF0000
Fuchsia	#FF00FF
Magenta	#FF00FF
DeepPink	#FF1493
OrangeRed	#FF4500
Tomato	#FF6347
HotPink	#FF69B4
Coral	#FF7F50
Darkorange	#FF8C00
LightSalmon	#FFA07A
Orange	#FFA500
LightPink	#FFB6C1
Pink	#FFC0CB
Gold	#FFD700
PeachPuff	#FFDAB9
NavajoWhite	#FFDEAD
Moccasin	#FFE4B5
Bisque	#FFE4C4
MistyRose	#FFE4E1
BlanchedAlmond	#FFEBCD
PapayaWhip	#FFEFD5
LavenderBlush	#FFF0F5
SeaShell	#FFF5EE
Cornsilk	#FFF8DC
LemonChiffon	#FFFACD
FloralWhite	#FFFAF0
Snow	#FFFAFA
Yellow	#FFFF00
LightYellow	#FFFFE0
Ivory	#FFFFF0
White	#FFFFFF

Цвета CSS[править | править код]

 /* имя цвета */
 p { color red } /* Базовый список цветов */
 p { color blanchedalmond } /* Расширенный список цветов (X11) */

 /* модель RGB */
 p { color #F00}/* #rgb */
 p { color #FF0000 } /* #rrggbb */
 p { color rgb(255,,)} /* целое в диапазоне 0 — 255 */
 p { color rgb(100%,%, %) } /* число с плавающей точкой 0.0% — 100.0% */

 /* модель RGB с альфа-каналом, введена в CSS3 */
 p { color rgba(255, , , 0.5) } /* 0.5 прозрачность, полупрозрачность */

 /* модель HSL, введена в CSS3 */
 p { color hsl(, 100%, 50%) } /* красный (red) */
 p { color hsl(120, 100%, 50%) } /* зелёный (green) */
 p { color hsl(120, 100%, 25%) } /* тёмно-зелёный (dark green) */
 p { color hsl(120, 100%, 75%) } /* светло-зелёный (light green) */
 p { color hsl(120, 50%, 50%) } /* пастельный зелёный (pastel green) */

 /* модель HSL с альфа-каналом */
 p { color hsla(120, 100%, 50%, 1) } /* зелёный (green) */
 p { color hsla(120, 100%, 50%, 0.5) } /* полупрозрачный зелёный */
 p { color hsla(120, 100%, 50%, 0.1) } /* очень прозрачный зелёный */

Инструмент для определения значений цветов онлайн

Так же если значений этих цветов вам будет недостаточно, то можно воспользоваться специальным инструментом для подбора цветов для сайта.

Кликните по области палитры чтобы определить значение цвета

• RGB:
• HSV:
• HEX:

Здесь вы можете двигать мышкой указатель  и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)

Данный инструмент по подбору цвета сайта довольно полезен, поэтому не забудьте добавить эту статью в закладки.

Надеюсь, что данная статья была для вас полезной. Подбирайте цвета и разукрашивайте ваши сайты на свой вкус. Только не перестарайтесь 🙂

Хорошего вам настроения! До встречи в следующих статьях!

С уважением Юлия Гусарь

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

1. 1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

1. 2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. 1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные  оттенки

R – (red) – числовое значение красного цвета
G – (green) – числовое зелёного
B – (blue) — числовое значение синего

В CSS это выглядит так:

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб,  приведена ниже

1. 4. Задание цвета при помощи формата rgba

Здесь принцип использования абсолютно такой же как и в предыдущем случае, но добавляется ещё один параметр – прозрачность. То есть вы можете регулировать не только оттенок, но и его прозрачность

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб  код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0  до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов.
Если вы её ещё не читали вот ссылка

Способы использования RGB

Прежде всего, цветовая модель RGB используется в устройствах, использующих цвет. Из-за того, что это аддитивная цветовая модель, которая выдает более светлые цвета, когда три основных смешанных цвета (красный, зеленый, синий) являются более насыщенными, RGB лучше всего подходит для отображения излучающего изображения. Другими словами, цветовая модель RGB лучше всего подходит для экранов с подсветкой, таких как телевизоры, мониторы компьютеров, ноутбуков, смартфонов и планшетов.

Для сравнения, CMYK, что означает «Cyan Magenta Yellow Key (Black)» и является производным от CMY, является отражающей цветовой моделью, означающей, что его цвета отражаются, а не освещаются, и используются в основном в печати. Вот почему при калибровке принтера вы работаете с цветовым пространством CMY, а при калибровке дисплея компьютера — с RGB.

Принтеры используют цветовую модель CMYK

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

Например, ЖК-экраны состоят из множества пикселей, которые образуют их поверхность. Каждый из этих пикселей обычно состоит из трех разных источников света, и каждый из них может стать красным, зеленым или синим. Если вы внимательно посмотрите на ЖК-экран, используя увеличительное стекло, вы увидите эти маленькие источники света, которые образуют пиксели.

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

Источники RGB пикселей на экране

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

Однако диапазоны трех чисел могут различаться в зависимости от того, какую систему исчисления вы используете. Стандартные нотации RGB могут использовать тройки значений от 0 до 255, некоторые могут использовать арифметические значения от 0,0 до 1,0, а некоторые могут использовать процентные значения от 0% до 100%.

Например, если цвета RGB представлены 8 битами каждый, это будет означать, что диапазон каждого цвета может изменяться от 0 до 255, 0 — самая низкая интенсивность цвета, а 255 — самая высокая. Используя эту систему обозначений, RGB (0, 0, 0) будет означать черный, а RGB (255, 255, 255) будет означать белый. Кроме того, самый чистый красный будет RGB (255, 0, 0), самый чистый зеленый будет RGB (0, 255, 0), а самый чистый синий будет RGB (0, 0, 255).

Представление цветов RGB в 8-битной системе, каждый цвет в диапазоне от 0 до 255

Диапазон чисел от 0 до 255 выбран не случайно: RGB часто представлен в программном обеспечении 8-битами на канал. Если вам интересно, почему 255 является максимальным значением в 8-битной исчислении, так это потому, что каждый цвет в нем представлен 8 битами. Бит может иметь два значения: 0 или 1. Два бита, будут иметь четыре значения: 00, 01, 10, 11. (в двоичной системе.) Таким образом, восемь битов, дадут 256 значений — от 0 до 255. То есть, два в восьмой степени. Гики, верно?

Однако обычно используются и другие системы исчисления, такие как 16-бит на канал или 24-бит на канал. Например, в 16-битной системе, каждый бит может принимать значения от 0 до 65535, а в 24-битной системе — от 0 до 16777215. 24-битная система охватывает 16 миллионов цветов, что больше, чем все цвета, которые видны человеческому глазу, который различает 10 миллионов.

Как задать цвет, используя значение Hex ¶

HEX – шестнадцатеричная система представления цвета, которая использует арабские десятичные цифры от 0 до 9 и латинские буквы от A до F. В веб-дизайне используются 16 ключевых цветов, так называемый шестнадцатеричный код цвета #RRGGBB, RR – красный, GG – зеленый и BB – синий. Каждая доля цвета находится в диапазоне от 00 до FF.

Регистр букв в Hex не имеет значение. К примеру, определением белого цвета могут быть как заглавные буквы #FFFFFF, так и строчные #ffffff.

Для задания цвета используйте атрибут style, где свойством цвета будет код Hex.

Результат

В приведенной ниже таблице вы можете найти Hex код для каждого цвета. Получить код необходимого вам цвета вы также можете при помощи инструмента Пипетка/Color Picker.

Таблица цветов

Ниже представлена вся палитра стандартных CSS цветов. Просто нажмите на название цвета или его шестнадцатеричный HEX код.

AliceBlue#F0F8FF

AntiqueWhite#FAEBD7

Aqua#00FFFF

Aquamarine#7FFFD4

Azure#F0FFFF

Beige#F5F5DC

Bisque#FFE4C4

Black#000000

BlanchedAlmond#FFEBCD

Blue#0000FF

BlueViolet#8A2BE2

Brown#A52A2A

BurlyWood#DEB887

CadetBlue#5F9EA0

Chartreuse#7FFF00

Chocolate#D2691E

Coral#FF7F50

CornflowerBlue#6495ED

Cornsilk#FFF8DC

Crimson#DC143C

Cyan#00FFFF

DarkBlue#00008B

DarkCyan#008B8B

DarkGoldenRod#B8860B

DarkGray#A9A9A9

DarkGrey#A9A9A9

DarkGreen#006400

DarkKhaki#BDB76B

DarkMagenta#8B008B

DarkOliveGreen#556B2F

DarkOrange#FF8C00

DarkOrchid#9932CC

DarkRed#8B0000

DarkSalmon#E9967A

DarkSeaGreen#8FBC8F

DarkSlateBlue#483D8B

DarkSlateGray#2F4F4F

DarkSlateGrey#2F4F4F

DarkTurquoise#00CED1

DarkViolet#9400D3

DeepPink#FF1493

DeepSkyBlue#00BFFF

DimGray#696969

DimGrey#696969

DodgerBlue#1E90FF

FireBrick#B22222

FloralWhite#FFFAF0

ForestGreen#228B22

Fuchsia#FF00FF

Gainsboro#DCDCDC

GhostWhite#F8F8FF

Gold#FFD700

GoldenRod#DAA520

Gray#808080

Grey#808080

Green#008000

GreenYellow#ADFF2F

HoneyDew#F0FFF0

HotPink#FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory#FFFFF0

Khaki#F0E68C

Lavender#E6E6FA

LavenderBlush#FFF0F5

LawnGreen#7CFC00

LemonChiffon#FFFACD

LightBlue#ADD8E6

LightCoral#F08080

LightCyan#E0FFFF

LightGoldenRodYellow#FAFAD2

LightGray#D3D3D3

LightGrey#D3D3D3

LightGreen#90EE90

LightPink#FFB6C1

LightSalmon#FFA07A

LightSeaGreen#20B2AA

LightSkyBlue#87CEFA

LightSlateGray#778899

LightSlateGrey#778899

LightSteelBlue#B0C4DE

LightYellow#FFFFE0

Lime#00FF00

LimeGreen#32CD32

Linen#FAF0E6

Magenta#FF00FF

Maroon#800000

MediumAquaMarine#66CDAA

MediumBlue#0000CD

MediumOrchid#BA55D3

MediumPurple#9370DB

MediumSeaGreen#3CB371

MediumSlateBlue#7B68EE

MediumSpringGreen#00FA9A

MediumTurquoise#48D1CC

MediumVioletRed#C71585

MidnightBlue#191970

MintCream#F5FFFA

MistyRose#FFE4E1

Moccasin#FFE4B5

NavajoWhite#FFDEAD

Navy#000080

OldLace#FDF5E6

Olive#808000

OliveDrab#6B8E23

Orange#FFA500

OrangeRed#FF4500

Orchid#DA70D6

PaleGoldenRod#EEE8AA

PaleGreen#98FB98

PaleTurquoise#AFEEEE

PaleVioletRed#DB7093

PapayaWhip#FFEFD5

PeachPuff#FFDAB9

Peru#CD853F

Pink#FFC0CB

Plum#DDA0DD

PowderBlue#B0E0E6

Purple#800080

RebeccaPurple#663399

Red#FF0000

RosyBrown#BC8F8F

RoyalBlue#4169E1

SaddleBrown#8B4513

Salmon#FA8072

SandyBrown#F4A460

SeaGreen#2E8B57

SeaShell#FFF5EE

Sienna#A0522D

Silver#C0C0C0

SkyBlue#87CEEB

SlateBlue#6A5ACD

SlateGray#708090

SlateGrey#708090

Snow#FFFAFA

SpringGreen#00FF7F

SteelBlue#4682B4

Tan#D2B48C

Teal#008080

Thistle#D8BFD8

Tomato#FF6347

Turquoise#40E0D0

Violet#EE82EE

Wheat#F5DEB3

White#FFFFFF

WhiteSmoke#F5F5F5

Yellow#FFFF00

YellowGreen#9ACD32

Безопасная палитра Netscape

В эпоху 256-цветных видеокарт широко применялась так называемая «безопасная палитра Netscape» — однородная палитра 6×6×6. В truecolor у безопасных цветов все три компонента — R, G и B — равняются , , , , и . Браузер Netscape гарантировал, что эти цвета будут отображены без приближения или растрирования.

Другими словами, 216 цветов стандартной 16-цветовой палитры и палитры 6×6×6 были наиболее предпочтительными для цвета изображения и фона.

К концу 90-х годов, с полным исчезновением 8-битного цвета с рабочих столов ОС, это требование исчезло. Тем не менее, Adobe Photoshop и поныне оснащён опцией «Только Web-цвета» (англ. Only Web Colors).

Имена цветов в HTML

В спецификации HTML 4.01 определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):

Цвет	Код	Цвет	Код	Цвет	Код	Цвет	Код
aqua (морская волна, cyan)	#00ffff	black (чёрный)	#000000	blue (синий)	#0000ff	fuchsia (фуксия, magenta)	#ff00ff
gray (серый)	#808080	green (зелёный)	#008000	lime (лайм, lightgreen)	#00ff00	maroon (тёмно-бордовый)	#800000
navy (тёмно-синий)	#000080	olive (оливковый)	#808000	purple (пурпурный)	#800080	red (красный)	#ff0000
silver (серебряный)	#c0c0c0	teal (сине-зелёный)	#008080	white (белый)	#ffffff	yellow (жёлтый)	#ffff00

В спецификации используются английские названия цветов.

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

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

селектор {
color : #RRGGBB;
}

#RR (красный)
#GG (зеленый)
#BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

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

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

HSLA значение цвета

Значения цветов HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указано с помощью:

Параметр alpha представляет собой число между 0.0 (полностью прозрачным) и 1.0 (вообще не прозрачным):

А сейчас небольшой лайфхак если вы этого не знали. Определить цвет элемента можно также с помощью инспектирования элемента в браузере. Т.е нам например нужно задать цвет для шрифта, мы пока не знаем какой, но он должен сочетаться со стилистикой сайта. Как известно, из курсов веб дизайна и вообще юзабилити, на сайте не должно быть больше 3х цветов

Это важное правило! Просто усвойте его и все!

Итак, наводим на любой фрагмент текста и нажимаем правую клавишу мыши и выбираем в контекстном выпадающем меню «Просмотреть код» (использую Google Chrome браузер):

Нам необходимо будет протестировать и поменять цвет анонса на не насыщенный черный, а на его оттенок, более светлый. Сделать я это могу с помощью атрибута стиля для текста параграфа
color

Поиграв с палитрой прямо в браузере я примерно вывел следующий код в формате HEX цвета:
#384244

Чтобы изменить на другие значения нужно просто переключиться нажав на стрелочки верх или вниз:

До скорых новых встреч на страницах полезного блога! Изучаете вы — обучаюсь и я.

Как задать цвет шрифта css?

Для этого вы можете воспользоваться специальным CSS-свойством  color

Пример:

CSS

.block {
color: black;
}

1 2 3

.block { colorblack; }

Где вместо black указывается значение цвета для шрифта текста.

Более подробно о значении цветов в CSS и их форматах я распишу ниже

Так же обратите внимание, что если внутри блока текст находится в теге абзаца, или ссылки или span, то цвет шрифта к нему может не примениться, в этом случае нужно будет в CSS задавать цвет шрифта  конкретно для этого элемента. Например:

Например:

XHTML

<div class=”block”>
<p>Изменяем цвет текста абзаца и <a href=”#”>ссылки</a></p>
</div>

1 2 3

<div class=”block”> <p>Изменяем цвет текста абзаца и <a href=”#”>ссылки</a></p> </div>

CSS

.block p {
color: blue;
}
.block a {
color: red;
}

1 2 3 4 5 6 7

.block p { colorblue; }   .block a { colorred; }

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

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

Например:

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

HSL значение

В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:

HSL (оттенок, насыщенность, легкость)

Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.

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

Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

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

Насыщенность может быть охарактеризована как интенсивность цвета.

100% является чистым цветом, не оттенки серого

50% является 50% серый, но вы все еще можете увидеть цвет.

0% полностью серый, вы больше не можете видеть цвет.

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Легкость

Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:

HTML Ссылки

HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши

HTML Теги

<!—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Web Safe Colors?

Many years ago, when computers supported maximum 256 different colors, a list
of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed
system colors).

This is not important now, since most computers can display millions of
different colors.

This 216 hex values cross-browser color palette was created to ensure that all computers
would display the colors correctly when running a 256 color palette:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

❮ Назад
Дальше ❯