Css палитра цветов: HTML CSS Палитра цветов

Материальный дизайн — Цвет — CSS-LIVE

Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Цветовая палитра

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные – в качестве акцентных цветов.

Скачать цветовые образцы

Использование цветов в UI

Выберите палитру

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

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

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

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Темный текст (#000000)	Непрозрачность
Основной текст	87%
Вспомогательный текст	54%
Подсказки (текстовые поля, метки)	26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF)	Непрозрачность
Основной текст	100%
Вспомогательный текст	70%
Подсказки (текстовые поля, метки)	30%

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

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

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

Переключатель, использующий акцентный цвет.

Правильно.

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Неправильно.

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

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

Неправильно.

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

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

Темы

Темы позволяют вам задать приложению единый тон. Тема определяет, насколько темными будут поверхности, задает уровень тени и подходящую непрозрачность для элементов краски. Для продвижения идеи большей гармоничности приложений предложены две темы: Светлая и Темная.

Скачать темы

Светлая тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра светлой темы

Применение в UI

Темная тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра темной темы

Применение в UI

Таблица кодировок цветов HTML . Таблица цветов CSS.  HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML

Справочно: спецсимволы HTML Таблица цветов HTML . Таблица цветов CSS.  HTML safe Color Codes. «Безопасные» цвета HTML. Палитра цветов HTML. Сперва брузеры не поддерживали никаких цветов, кроме 256 «безопсных»: Цвет: Color Шестнадцатеричный код: Hex code (#RRGGBB) Десятичный код: Decimal code (R,G,B) HTML/CSS цвет #000000 rgb(0,0,0) black — черный #000033 rgb(0,0,51) #000066 rgb(0,0,102) #000099 rgb(0,0,153) #0000CC rgb(0,0,204) #0000FF rgb(0,0,255) blue — синий #003300 rgb(0,51,0) #003333 rgb(0,51,51) #003366 rgb(0,51,102) #003399 rgb(0,51,153) #0033CC rgb(0,51,204) #0033FF rgb(0,51,255) #006600 rgb(0,102,0) #006633 rgb(0,102,51) #006666 rgb(0,102,102) #006699 rgb(0,102,153) #0066CC rgb(0,102,204) #0066FF rgb(0,102,255) #009900 rgb(0,153,0) #009933 rgb(0,153,51) #009966 rgb(0,153,102) #009999 rgb(0,153,153) #0099CC rgb(0,153,204) #0099FF rgb(0,153,255) #00CC00 rgb(0,204,0) #00CC33 rgb(0,204,51) #00CC66 rgb(0,204,102) #00CC99 rgb(0,204,153) #00CCCC rgb(0,204,204) #00CCFF rgb(0,204,255) #00FF00 rgb(0,255,0) lime — лайм #00FF33 rgb(0,255,51) #00FF66 rgb(0,255,102) #00FF99 rgb(0,255,153) #00FFCC rgb(0,255,204) #00FFFF rgb(0,255,255) cyan — цвет морской волны (бирюза) #330000 rgb(51,0,0) #330033 rgb(51,0,51) #330066 rgb(51,0,102) #330099 rgb(51,0,153) #3300CC rgb(51,0,204) #3300FF rgb(51,0,255) #333300 rgb(51,51,0) #333333 rgb(51,51,51) #333366 rgb(51,51,102) #333399 rgb(51,51,153) #3333CC rgb(51,51,204) #3333FF rgb(51,51,255) #336600 rgb(51,102,0) #336633 rgb(51,102,51) #336666 rgb(51,102,102) #336699 rgb(51,102,153) #3366CC rgb(51,102,204) #3366FF rgb(51,102,255) #339900 rgb(51,153,0) #339933 rgb(51,153,51) #339966 rgb(51,153,102) #339999 rgb(51,153,153) #3399CC rgb(51,153,204) #3399FF rgb(51,153,255) #33CC00 rgb(51,204,0) #33CC33 rgb(51,204,51) #33CC66 rgb(51,204,102) #33CC99 rgb(51,204,153) #33CCCC rgb(51,204,204) #33CCFF rgb(51,204,255) #33FF00 rgb(51,255,0) #33FF33 rgb(51,255,51) #33FF66 rgb(51,255,102) #33FF99 rgb(51,255,153) #33FFCC rgb(51,255,204) #33FFFF rgb(51,255,255) #660000 rgb(102,0,0) #660033 rgb(102,0,51) #660066 rgb(102,0,102) #660099 rgb(102,0,153) #6600CC rgb(102,0,204) #6600FF rgb(102,0,255) #663300 rgb(102,51,0) #663333 rgb(102,51,51) #663366 rgb(102,51,102) #663399 rgb(102,51,153) #6633CC rgb(102,51,204) #6633FF rgb(102,51,255) #666600 rgb(102,102,0) #666633 rgb(102,102,51) #666666 rgb(102,102,102) #666699 rgb(102,102,153) #6666CC rgb(102,102,204) #6666FF rgb(102,102,255) #669900 rgb(102,153,0) #669933 rgb(102,153,51) #669966 rgb(102,153,102) #669999 rgb(102,153,153) #6699CC rgb(102,153,204) #6699FF rgb(102,153,255) #66CC00 rgb(102,204,0) #66CC33 rgb(102,204,51) #66CC66 rgb(102,204,102) #66CC99 rgb(102,204,153) #66CCCC rgb(102,204,204) #66CCFF rgb(102,204,255) #66FF00 rgb(102,255,0) #66FF33 rgb(102,255,51) #66FF66 rgb(102,255,102) #66FF99 rgb(102,255,153) #66FFCC rgb(102,255,204) #66FFFF rgb(102,255,255) #990000 rgb(153,0,0) #990033 rgb(153,0,51) #990066 rgb(153,0,102) #990099 rgb(153,0,153) #9900CC rgb(153,0,204) #9900FF rgb(153,0,255) #993300 rgb(153,51,0) #993333 rgb(153,51,51) #993366 rgb(153,51,102) #993399 rgb(153,51,153) #9933CC rgb(153,51,204) #9933FF rgb(153,51,255) #996600 rgb(153,102,0) #996633 rgb(153,102,51) #996666 rgb(153,102,102) #996699 rgb(153,102,153) #9966CC rgb(153,102,204) #9966FF rgb(153,102,255) #999900 rgb(153,153,0) #999933 rgb(153,153,51) #999966 rgb(153,153,102) #999999 rgb(153,153,153) #9999CC rgb(153,153,204) #9999FF rgb(153,153,255) #99CC00 rgb(153,204,0) #99CC33 rgb(153,204,51) #99CC66 rgb(153,204,102) #99CC99 rgb(153,204,153) #99CCCC rgb(153,204,204) #99CCFF rgb(153,204,255) #99FF00 rgb(153,255,0) #99FF33 rgb(153,255,51) #99FF66 rgb(153,255,102) #99FF99 rgb(153,255,153) #99FFCC rgb(153,255,204) #99FFFF rgb(153,255,255) #CC0000 rgb(204,0,0) #CC0033 rgb(204,0,51) #CC0066 rgb(204,0,102) #CC0099 rgb(204,0,153) #CC00CC rgb(204,0,204) #CC00FF rgb(204,0,255) #CC3300 rgb(204,51,0) #CC3333 rgb(204,51,51) #CC3366 rgb(204,51,102) #CC3399 rgb(204,51,153) #CC33CC rgb(204,51,204) #CC33FF rgb(204,51,255) #CC6600 rgb(204,102,0) #CC6633 rgb(204,102,51) #CC6666 rgb(204,102,102) #CC6699 rgb(204,102,153) #CC66CC rgb(204,102,204) #CC66FF rgb(204,102,255) #CC9900 rgb(204,153,0) #CC9933 rgb(204,153,51) #CC9966 rgb(204,153,102) #CC9999 rgb(204,153,153) #CC99CC rgb(204,153,204) #CC99FF rgb(204,153,255) #CCCC00 rgb(204,204,0) #CCCC33 rgb(204,204,51) #CCCC66 rgb(204,204,102) #CCCC99 rgb(204,204,153) #CCCCCC rgb(204,204,204) #CCCCFF rgb(204,204,255) #CCFF00 rgb(204,255,0) #CCFF33 rgb(204,255,51) #CCFF66 rgb(204,255,102) #CCFF99 rgb(204,255,153) #CCFFCC rgb(204,255,204) #CCFFFF rgb(204,255,255) #FF0000 rgb(255,0,0) red — красный #FF0033 rgb(255,0,51) #FF0066 rgb(255,0,102) #FF0099 rgb(255,0,153) #FF00CC rgb(255,0,204) #FF00FF rgb(255,0,255) magenta, fuchsia — пурпурный = фуксин #FF3300 rgb(255,51,0) #FF3333 rgb(255,51,51) #FF3366 rgb(255,51,102) #FF3399 rgb(255,51,153) #FF33CC rgb(255,51,204) #FF33FF rgb(255,51,255) #FF6600 rgb(255,102,0) #FF6633 rgb(255,102,51) #FF6666 rgb(255,102,102) #FF6699 rgb(255,102,153) #FF66CC rgb(255,102,204) #FF66FF rgb(255,102,255) #FF9900 rgb(255,153,0) #FF9933 rgb(255,153,51) #FF9966 rgb(255,153,102) #FF9999 rgb(255,153,153) #FF99CC rgb(255,153,204) #FF99FF rgb(255,153,255) #FFCC00 rgb(255,204,0) #FFCC33 rgb(255,204,51) #FFCC66 rgb(255,204,102) #FFCC99 rgb(255,204,153) #FFCCCC rgb(255,204,204) #FFCCFF rgb(255,204,255) #FFFF00 rgb(255,255,0) yellow-желтый #FFFF33 rgb(255,255,51) #FFFF66 rgb(255,255,102) #FFFF99 rgb(255,255,153) #FFFFCC rgb(255,255,204) #FFFFFF rgb(255,255,255) white-белый Безопасные цвета HTML (safe web RGB Red-красный, Green-зеленый, и Blue-синий) цвета — это комбинация из шестнадцатеричных чисел: 00 — нет цвета 33 66 99 CC FF- полный цвет Число комбинаций из 6 по 3: 63 = 216 «безопасных» цветов

Таблица основных цветов CSS

Цвета, выводимые на экране монитора, меняются в зависимости от интенсивности свечения рабочих точек поверхности дисплея, каждая из которых, делает возможным отображение трёх основных каналов: red-красный, green-зеленый и blue-синий.

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

Такой метод передачи цвета называется RGB-способ.

Один канал позволяет передать от 0 до 256 оттенков.

Цвета задаются в шестнадцатеричном коде следующими цифрами:

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

Цифры с 10 до 15 заменены на латинские буквы.

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

HTML

<div>
  white
</div>
  
<div>
  blue
</div>

<div>
  red
</div>

CSS

.box{
    width: 250px;
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    margin: 0px auto;
    padding: 3px 20px;
    text-align: center;
}
.red{
    color: #fff;
    background-color: #d52b1e;
}
.blue{
    color: #fff;
    background-color: #0039a6;
}
.white{
    color: #818181;
    background-color: #fff;
}

Бесплатная онлайн палитра цветов | SEO

	Абрикосовый	#FBCEB1	251	206	177
	Абрикосовый Крайола	#FDD9B5	253	217	181
	Агатовый серый	#B5B8B1	181	184	177
	Аквамариновый	#7FFFD4	127	255	212
	Аквамариновый Крайола	#78DBE2	120	219	226
	Ализариновый красный	#E32636	227	38	54
	Алый	#FF2400	255	36	0
	Амарантово-пурпурный	#AB274F	171	39	79
	Амарантово-розовый	#F19CBB	241	156	187
	Амарантовый	#E52B50	229	43	80
	Амарантовый глубоко-пурпурный	#9F2B68	159	43	104
	Амарантовый маджента	#ED3CCA	237	60	202
	Амарантовый светло-вишневый	#CD2682	205	38	130
	Американский розовый	#FF033E	255	3	62
	Аметистовый	#9966CC	153	102	204
	Античная латунь	#CD9575	205	149	117
	Антрацитово-серый	#293133	41	49	51
	Антрацитовый	#464451	70	68	81
	Арлекин	#44944A	68	148	74
	Аспидно-серый	#2F4F4F	47	79	79
	Аспидно-синий	#6A5ACD	106	90	205
	Бабушкины яблоки	#A8E4A0	168	228	160
	Базальтово-серый	#4E5754	78	87	84
	Баклажанный Крайола	#614051	97	64	81
	Баклажановый	#990066	153	0	102
	Баклажановый Крайола	#6E5160	110	81	96
	Бананомания	#FAE7B5	250	231	181
	Барвинок, перванш	#CCCCFF	204	204	255
	Барвинок Крайола	#C5D0E6	197	208	230
	Бедра испуганной нимфы	#FAEEDD	250	238	221
	Бежево-коричневый	#79553D	121	85	61
	Бежево-красный	#C1876B	193	135	107
	Бежево-серый	#6D6552	109	101	82
	Бежевый	#F5F5DC	245	245	220
	Бело-алюминиевый	#A5A5A5	165	165	165
	Бело-зеленый	#BDECB6	189	236	182
	Белоснежный	#FFFAFA	255	250	250
	Белый	#FFFFFF	255	255	255
	Белый антик	#FAEBD7	250	235	215
	Белый навахо	#FFDEAD	255	222	173
	Берлинская лазурь	#003153	0	49	83
	Бирюзово-голубой Крайола	#77DDE7	119	221	231
	Бирюзово-зеленый	#1E5945	30	89	69
	Бирюзово-синий	#3F888F	63	136	143
	Бирюзовый	#30D5C8	48	213	200
	Бисквитный	#FFE4C4	255	228	196
	Бисмарк-фуриозо	#A5260A	165	38	10
	Бистр	#3D2B1F	61	43	31
	Бледно-васильковый	#ABCDEF	171	205	239
	Бледно-желтый	#FFDB8B	255	219	139
	Бледно-зелено-серый	#8D917A	141	145	122
	Бледно-зеленый	#89AC76	137	172	118
	Бледно-золотистый	#EEE8AA	238	232	170
	Бледно-карминный	#B03F35	176	63	53
	Бледно-каштановый	#DDADAF	221	173	175
	Бледно-коричневый	#755C48	117	92	72
	Бледно-песочный	#DABDAB	218	189	171
	Бледно-пурпурный	#F984E5	249	132	229
	Бледно-розоватый	#FFCBDB	255	203	219
	Бледно-розовый	#FADADD	250	218	221
	Бледно-синий	#AFEEEE	175	238	238
	Бледно-фиолетовый	#957B8D	149	123	141
	Бледный весенний бутон	#ECEBBD	236	235	189
	Бледный желто-зеленый	#F0D698	240	214	152
	Бледный желто-розовый	#FFC8A8	255	200	168
	Бледный зеленовато-желтый	#FFDF84	255	223	132
	Бледный зеленый	#98FB98	152	251	152
	Бледный красно-пурпурный	#AC7580	172	117	128
	Бледный оранжево-желтый	#FFCA86	255	202	134
	Бледный пурпурно-розовый	#FDBDBA	253	189	186
	Бледный пурпурно-синий	#8A7F8E	138	127	142
	Бледный серо-коричневый	#BC987E	188	152	126
	Бледный синий	#919192	145	145	146
	Бледный фиолетово-красный	#D87093	216	112	147
	Блестящий желто-зеленый	#CED23A	206	210	58
	Блестящий желтовато-зеленый	#8CCB5E	140	203	94
	Блестящий желтый	#FFCF40	255	207	64
	Блестящий зеленовато-желтый	#FFDC33	255	220	51
	Блестящий зеленовато-синий	#2A8D9C	42	141	156
	Блестящий зеленый	#47A76A	71	167	106
	Блестящий оранжевый	#FFB841	255	184	65
	Блестящий пурпурно-розовый	#FF97BB	255	151	187
	Блестящий пурпурно-синий	#62639B	98	99	155
	Блестящий пурпурный	#DD80CC	221	128	204
	Блестящий синевато-зеленый	#009B76	0	155	118
	Блестящий синий	#4285B4	66	133	180
	Блестящий фиолетовый	#755D9A	117	93	154
	Блошиный (Красновато-коричневый)	#755A57	117	90	87
	Бобровый	#9F8170	159	129	112
	Болгарский розовый	#480607	72	6	7
	Болотный	#ACB78E	172	183	142
	Бордо (Красно-бордовый)	#B00000	176	0	0
	Бордово-фиолетовый	#641C34	100	28	52
	Бордовый	#9B2D30	155	45	48
	Бороды Абдель-Керима	#D5D5D5	213	213	213
	Брезентово-серый	#4C514A	76	81	74
	Бриллиантово-синий	#3E5F8A	62	95	138
	Бриллиантовый оранжево-желтый	#FFB02E	255	176	46
	Бронзовый	#CD7F32	205	127	50
	Бургундский	#900020	144	0	32
	Бурый	#45161C	69	22	28
	Бутылочно-зеленый	#343B29	52	59	41
	Ванильный	#D5713F	213	113	63
	Васильковый	#6495ED	100	149	237
	Васильковый Крайола	#9ACEEB	154	206	235
	Вердепешевый	#DAD871	218	216	113
	Вердепомовый	#34C924	52	201	36
	Вересково-фиолетовый	#DE4C8A	222	76	138
	Весенне-зеленый (Зеленая весна)	#00FF7F	0	255	127
	Весенне-зеленый Крайола	#ECEABE	236	234	190
	Весенний бутон	#A7FC00	167	252	0
	Византийский	#BD33A4	189	51	164
	Византия	#702963	112	41	99
	Винно-красный	#5E2129	94	33	41
	Винтовочный зеленый	#414833	65	72	51
	Вишневый (Вишня)	#911E42	145	30	66
	В меру оливково-коричневый	#64400F	100	64	15
	Водная синь	#256D7B	37	109	123
	Воды пляжа Бонди	#0095B6	0	149	182
	Восход солнца	#FFCF48	255	207	72
	Галечный серый	#B8B799	184	183	153
	Гейнсборо	#DCDCDC	220	220	220
	Гелиотроп (Гелиотроповый)	#DF73FF	223	115	255
	Георгиново-желтый	#F3A505	243	165	5
	Глиняный коричневый	#734222	115	66	34
	Глициния (Глициниевый)	#C9A0DC	201	160	220
	Глициния Крайола	#CDA4DE	205	164	222
	Глубокая фуксия Крайола	#C154C1	193	84	193
	Глубокий желто-коричневый	#593315	89	51	21
	Глубокий желто-розовый	#F64A46	246	74	70
	Глубокий желтовато-зеленый	#00541F	0	84	31
	Глубокий желтый	#B57900	181	121	0
	Глубокий желтый зеленый	#425E17	66	94	23
	Глубокий зеленовато-желтый	#9F8200	159	130	0
	Глубокий зеленый	#004524	0	69	36
	Глубокий карминно-розовый	#EF3038	239	48	56
	Глубокий карминный	#A9203E	169	32	62
	Глубокий коралловый	#FF4040	255	64	64
	Глубокий коричневый	#4D220E	77	34	14
	Глубокий красно-коричневый	#490005	73	0	5
	Глубокий красно-оранжевый	#A91D11	169	29	17
	Глубокий красно-пурпурный	#641349	100	19	73
	Глубокий красный	#7B001C	123	0	28
	Глубокий оливково-зеленый	#142300	20	35	0
	Глубокий оранжево-желтый	#D76E00	215	110	0
	Глубокий оранжевый	#C34D0A	195	77	10
	Глубокий пурпурно-красный	#6F0035	111	0	53
	Глубокий пурпурно-розовый	#EB5284	235	82	132
	Глубокий пурпурно-синий	#1A153F	26	21	63
	Глубокий пурпурный	#531A50	83	26	80
	Глубокий розовый	#FF1493	255	20	147
	Глубокий синевато-зеленый	#00382B	0	56	43
	Глубокий синий	#002F55	0	47	85
	Глубокий фиолетово-черный	#240935	36	9	53
	Глубокий фиолетовый	#423189	66	49	137
	Голубино-синий	#606E8C	96	110	140
	Голубой	#42AAFF	66	170	255
	Голубой (Морозное небо)	#00BFFF	0	191	255
	Голубой колокольчик Крайола	#A2A2D0	162	162	208
	Голубой Крайола	#80DAEB	128	218	235
	Горечавково-синий	#0E294B	14	41	75
	Горный луг	#30BA8F	48	186	143
	Городское небо (Пасмурно-небесный)	#87CEEB	135	206	235
	Горчичный	#FFDB58	255	219	88
	Горько-сладкий	#FD7C6E	253	124	110
	Гранатовый	#F34723	243	71	35
	Гранитовый серый (Гранитный)	#2F353B	47	53	59
	Графитно-черный	#1C1C1C	28	28	28
	Графитовый серый	#474A51	71	74	81
	Гридеперлевый	#C7D0CC	199	208	204
	Грузинский розовый	#D71868	215	24	104
	Грушево-зеленый	#D1E231	209	226	49
	Грушевый	#EFD334	239	211	52
	Гуммигут	#E49B0F	228	155	15
	Гусеница	#B2EC5D	178	236	93
	Дартмутский зеленый	#00693E	0	105	62
	Джазовый джем	#CA3767	202	55	103
	Джинсовый синий	#1560BD	21	96	189
	Дикая клубника Крайола	#FF43A4	255	67	164
	Дикий арбуз Крайола	#FC6C85	252	108	133
	Дикий синий Крайола	#A2ADD0	162	173	208
	Дымчато-белый	#F5F5F5	245	245	245
	Дынно-желтый	#F4A900	244	169	0
	Дыня Крайола	#FDBCB4	253	188	180
	Железно-серый	#434B4D	67	75	77
	Желтая сера	#EDFF21	237	255	33
	Желтая слоновая кость	#E1CC4F	225	204	79

HTML цвета. Имена цветов HTML, CSS, SVG.

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

Значения цвета в HTML может быть задано одним из следующих способов.

• RGB:
  в шестнадцатеричном коде (hex): #008800 или его сокращенном написании: #080.
  в процентах: rgb(80%, 20%, 30%),
  числами от 0 до 255: rgb(240, 120, 10).
• По имени:
  Teal или teal (регистр значения не имеет).
• HSL:
  в процентах: hsl(195, 60%, 40%).

Стандарт W3C HTML 4.01 определяет имена 16 цветов:

Имя	R G B		H S L
white	#ffffff	255, 255, 255	0°, 0%, 100%
silver	#c0c0c0	192, 192, 192	0°, 0%, 75%
gray	#808080	128, 128, 128	0°, 0%, 50%
black	#000000	0, 0, 0	0°, 0%, 0%
red	#ff0000	255, 0, 0	0°, 100%, 50%
maroon	#800000	128, 0, 0	0°, 100%, 25%
fuchsia	#ff00ff	255, 0, 255	300°, 100%, 50%
purple	#800080	128, 0, 128	300°, 100%, 25%
lime	#00ff00	0, 100, 0	120°, 100%, 50%
green	#008000	0, 128, 0	120°, 100%, 25%
yellow	#ffff00	255, 255, 0	60°, 100%, 50%
olive	#808000	128, 128, 0	60°, 100%, 25%
aqua	#00ffff	0, 255, 255	180°, 100%, 50%
teal	#008080	0, 128, 128	180°, 100%, 25%
blue	#0000ff	0, 0, 255	240°, 100%, 50%
navy	#000080	0, 0, 128	240°, 100%, 25%

Согласно последним рекомендациям W3C, применение элементов и атрибутов HTML для указания цвета (к примеру: style="color: #0000ff;") устарело, и в качестве альтернативы предложено использовать каскадные таблицы стилей — CSS.

Имена цветов CSS, SVG.

В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).

Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.

Имя	R G B	H S L
white	#ffffffhex	0°, 0%, 100%
ivory	#fffff0hex	60°, 100%, 97%
lightyellow	#ffffe0hex	60°, 100%, 94%
yellow	#ffff00hex	60°, 100%, 50%
snow	#fffafahex	0°, 100%, 99%
floralwhite	#fffaf0hex	40°, 100%, 97%
lemonchiffon	#fffacdhex	54°, 100%, 90%
cornsilk	#fff8dchex	48°, 100%, 93%
seashell	#fff5eehex	25°, 100%, 97%
lavenderblush	#fff0f5hex	340°, 100%, 97%
papayawhip	#ffefd5hex	37°, 100%, 92%
blanchedalmond	#ffebcdhex	36°, 100%, 90%
mistyrose	#ffe4e1hex	6°, 100%, 94%
bisque	#ffe4c4hex	33°, 100%, 88%
moccasin	#ffe4b5hex	38°, 100%, 86%
navajowhite	#ffdeadhex	36°, 100%, 84%
peachpuff	#ffdab9hex	28°, 27%, 100%
gold	#ffd700hex	51°, 100%, 50%
pink	#ffc0cbhex	350°, 100%, 88%
lightpink	#ffb6c1hex	351°, 100%, 86%
orange	#ffa500hex	39°, 100%, 50%
lightsalmon	#ffa07ahex	17°, 100%, 74%
darkorange	#ff8c00hex	33°, 100%, 50%
coral	#ff7f50hex	16°, 100%, 66%
hotpink	#ff69b4hex	330°, 100%, 71%
tomato	#ff6347hex	9°, 100%, 64%
orangered	#ff4500hex	16°, 100%, 50%
deeppink	#ff1493hex	328°, 100%, 54%
magenta, fuchsia	#ff00ffhex	300°, 100%, 50%
red	#ff0000hex	0°, 100%, 50%
oldlace	#fdf5e6hex	39°, 85%, 95%
lightgoldenrodyellow	#fafad2hex	60°, 80%, 90%
linen	#faf0e6hex	30°, 67%, 94%
antiquewhite	#faebd7hex	34°, 78%, 91%
salmon	#fa8072hex	6°, 93%, 71%
ghostwhite	#f8f8ffhex	240°, 100%, 99%
mintcream	#f5fffahex	150°, 100%, 98%
whitesmoke	#f5f5f5hex	0°, 0%, 96%
beige	#f5f5dchex	60°, 56%, 91%
wheat	#f5deb3hex	39°, 77%, 83%
sandybrown	#f4a460hex	28°, 87%, 67%
azure	#f0ffffhex	180°, 100%, 97%
honeydew	#f0fff0hex	120°, 100%, 97%
aliceblue	#f0f8ffhex	208°, 100%, 97%
khaki	#f0e68chex	54°, 77%, 75%
lightcoral	#f08080hex	0°, 79%, 72%
palegoldenrod	#eee8aahex	55°, 67%, 80%
violet	#ee82eehex	300°, 76%, 72%
darksalmon	#e9967ahex	15°, 72%, 70%
lavender	#e6e6fahex	240°, 67%, 94%
lightcyan	#e0ffffhex	180°, 100%, 94%
burlywood	#deb887hex	34°, 57%, 70%
plum	#dda0ddhex	300°, 47%, 75%
gainsboro	#dcdcdchex	0°, 0%, 86%
crimson	#dc143chex	348°, 83%, 47%
palevioletred	#db7093hex	340°, 60%, 65%
goldenrod	#daa520hex	43°, 74%, 49%
orchid	#da70d6hex	302°, 59%, 65%
thistle	#d8bfd8hex	300°, 24%, 80%
lightgray, lightgrey	#d3d3d3hex	0°, 0%, 83%
tan	#d2b48chex	34°, 44%, 67%
chocolate	#d2691ehex	25°, 75%, 47%
peru	#cd853fhex	30°, 59%, 53%
indianred	#cd5c5chex	0°, 53%, 58%
mediumvioletred	#c71585hex	322°, 81%, 43%
silver	#c0c0c0hex	0°, 0%, 75%
darkkhaki	#bdb76bhex	56°, 38%, 58%
rosybrown	#bc8f8fhex	0°, 25%, 65%
mediumorchid	#ba55d3hex	288°, 59%, 58%
darkgoldenrod	#b8860bhex	43°, 89%, 38%
firebrick	#b22222hex	0°, 68%, 42%
powderblue	#b0e0e6hex	187°, 52%, 80%
lightsteelblue	#b0c4dehex	214°, 41%, 78%
paleturquoise	#afeeeehex	180°, 65%, 81%
greenyellow	#adff2fhex	84°, 100%, 59%
lightblue	#add8e6hex	195°, 53%, 79%
darkgray, darkgrey	#a9a9a9hex	0°, 0%, 66%
brown	#a52a2ahex	0°, 59%, 41%
sienna	#a0522dhex	19°, 56%, 40%
yellowgreen	#9acd32hex	80°, 61%, 50%
darkorchid	#9932cchex	280°, 61%, 50%
palegreen	#98fb98hex	120°, 93%, 79%
darkviolet	#9400d3hex	282°, 100%, 41%
mediumpurple	#9370dbhex	260°, 60%, 65%
lightgreen	#90ee90hex	120°, 73%, 75%
darkseagreen	#8fbc8fhex	120°, 25%, 65%
saddlebrown	#8b4513hex	25°, 76%, 31%
darkmagenta	#8b008bhex	300°, 100%, 27%
darkred	#8b0000hex	0°, 100%, 27%
blueviolet	#8a2be2hex	271°, 76%, 53%
lightskyblue	#87cefahex	203°, 92%, 76%
skyblue	#87ceebhex	197°, 71%, 73%
gray, grey	#808080hex	0°, 0%, 50%
olive	#808000hex	60°, 100%, 25%
purple	#800080hex	300°, 100%, 25%
maroon	#800000hex	0°, 100%, 25%
aquamarine	#7fffd4hex	160°, 100%, 75%
chartreuse	#7fff00hex	90°, 100%, 50%
lawngreen	#7cfc00hex	91°, 100%, 4%
mediumslateblue	#7b68eehex	249°, 80%, 67%
lightslategray, lightslategrey	#778899hex	210°, 14%, 53%
slategray или slategrey	#708090hex	210°, 13%, 50%
olivedrab	#6b8e23hex	80°, 61%, 35%
slateblue	#6a5acdhex	248°, 54%, 58%
dimgray, dimgrey	#696969hex	0°, 0%, 41%
mediumaquamarine	#66cdaahex	160°, 51%, 60%
rebeccapurple	#663399hex	270°, 50%, 40%
cornflowerblue	#6495edhex	219°, 79%, 66%
cadetblue	#5f9ea0hex	182°, 26%, 50%
darkolivegreen	#556b2fhex	82°, 39%, 30%
indigo	#4b0082hex	275°, 100%, 26%
mediumturquoise	#48d1cchex	178°, 60%, 55%
darkslateblue	#483d8bhex	249°, 39%, 39%
steelblue	#4682b4hex	207°, 44%, 49%
royalblue	#4169e1hex	225°, 73%, 57%
turquoise	#40e0d0hex	174°, 72%, 57%
mediumseagreen	#3cb371hex	147°, 50%, 47%
limegreen	#32cd32hex	120°, 61%, 50%
darkslategray, darkslategrey	#2f4f4fhex	180°, 25%, 25%
seagreen	#2e8b57hex	147°, 50%, 36%
forestgreen	#228b22hex	120°, 61%, 34%
lightseagreen	#20b2aahex	177°, 70%, 41%
dodgerblue	#1e90ffhex	210°, 100%, 56%
midnightblue	#191970hex	240°, 64%, 27%
aqua, cyan	#00ffffhex	180°, 100%, 50%
springgreen	#00ff7fhex	150°, 100%, 50%
lime	#00ff00hex	120°, 100%, 50%
mediumspringgreen	#00fa9ahex	157°, 100%, 49%
darkturquoise	#00ced1hex	181°, 100%, 41%
deepskyblue	#00bfffhex	195°, 100%, 50%
darkcyan	#008b8bhex	180°, 100%, 27%
teal	#008080hex	180°, 100%, 25%
green	#008000hex	120°, 100%, 25%
darkgreen	#006400hex	120°, 100%, 20%
blue	#0000ffhex	240°, 100%, 50%
mediumblue	#0000cdhex	240°, 100%, 40%
darkblue	#00008bhex	240°, 100%, 27%
navy	#000080hex	240°, 100%, 25%
black	#000000hex	0°, 0%, 0%

Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.

Цвета HTML

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

Произвольные палитры цветов Gutenberg

Когда вы редактируете пост при помощи редактора Gutenberg, вы можете заметить вкладку «Настройки цвета» у многих блоков, которая выглядит вот так:

Дело в том, что когда вы создаёте свою тему с поддержкой Gutenberg либо работаете над своим собственным сайтом, то вам ради перфекционизма удобства было бы неплохо указать предопределённые цвета, например для проекта «Маркетинговая рубка» я задавал такой набор цветов:

А для собственного misha.agency моя палитра и вовсе прекрасна! 😁

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

Хотите лучше прокачаться в Gutenberg? Начните с моего видеокурса по созданию блока.

1. Регистрация новых цветов в палитру при помощи add_theme_support()

С функцией add_theme_support() вы возможно уже знакомы, но с приходом Gutenberg она получила новую жизнь, и тут мы используем её для регистрации цветов:

add_action( 'after_setup_theme', 'truemisha_color_palette' );
 
function truemisha_color_palette(){
	add_theme_support( 
		'editor-color-palette', 
		array(
			array(
				'name'  => 'Оранж',
				'slug'  => 'orange',
				'color'	=> '#ffab40',
			),
			array(
				'name'  => 'Сероватый',
				'slug'  => 'grey',
				'color' => '#efefef',
			),
			array(
				'name'  => 'Белый',
				'slug'  => 'white',
				'color' => '#fff',
			),
			array(
				'name'	=> 'Блэк',
				'slug'	=> 'black',
				'color'	=> '#111',
			),
		)
	);
}

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

Но сначала ещё один момент…

Как сохранить уже существующую палитру и добавить в неё цвета не перезаписывая полностью?

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

Решение легче, чем кажется:

// 1. Сначала получаем уже существующую палитру
$editor_color_palette = get_theme_support( 'editor-color-palette' );
 
// 2. Тут добавляем новые цвета в массив $editor_color_palette
// ... 
 
// 3. И перезаписываем палитру с уже новыми цветами
add_theme_support( 'editor-color-palette', $editor_color_palette );

2. CSS для зарегистрированных цветов

На самом деле тут всё сводится к двум CSS-классам:

.has-orange-color { 
	color: #ffab40;
}
.has-orange-background-color {
	background-color: #ffab40; 
}
/* и так же делаем для остальных трёх цветов нашей палитры */

Добавляем эти CSS-правила в таблицу стилей сайта.

3. Отключаем выбор произвольного цвета

Для произвольных цветов нам не требуется никаких дополнительных CSS-стилей, однако это может дать слишком много свободы пользователю сайта и в итоге задуманный вами дизайн будет уже не тот 🙃

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

add_theme_support( 'disable-custom-colors' );

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

CSS цвета — таблица и палитра цветов CSS с кодами

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

• Black
• Цвет css: #000000
• 0, 0, 0

• Gray
• Цвет css: #808080
• 128, 128, 128

• Silver
• Цвет css: #C0C0C0
• 192, 192, 192

• White
• Цвет css: #FFFFFF
• 255, 255, 255

• Fuchsia
• Цвет css: #FF00FF
• 255, 0, 255

• Purple
• Цвет css: #800080
• 128, 0, 128

• Red
• Цвет css: #FF0000
• 255, 0, 0

• Maroon
• Цвет css: #800000
• 128, 0, 0

• Yellow
• Цвет css: #FFFF00
• 255, 255, 0

• Olive
• Цвет css: #808000
• 128, 128, 0

• Lime
• Цвет css: #00FF00
• 0, 255, 0

• Green
• Цвет css: #008000
• 0, 128, 0

• Aqua
• Цвет css: #00FFFF
• 0, 255, 255

• Teal
• Цвет css: #008080
• 0, 128, 128

• Blue
• Цвет css: #0000FF
• 0, 0, 255

• Navy
• Цвет css: #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

• FireBrick
• #B22222
• 178, 34, 34

Зеленые тона

• GreenYellow
• #ADFF2F
• 173, 255, 47

• Chartreuse
• #7FFF00
• 127, 255, 0

• LawnGreen
• #7CFC00
• 124, 252, 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

• DarkGreen
• #006400
• 0, 100, 0

• YellowGreen
• #9ACD32
• 154, 205, 50

• OliveDrab
• #6B8E23
• 107, 142, 35

• 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

Розовые тона

• 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

• OrangeRed
• #FF4500
• 255, 69, 0

• DarkOrange
• #FF8C00
• 255, 140, 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

Синие тона

• 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

• MediumBlue
• #0000CD
• 0, 0, 205

• MidnightBlue
• #191970
• 25, 25, 112

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

• Lavender
• #E6E6FA
• 230, 230, 250

• Thistle
• #D8BFD8
• 216, 191, 216

• 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

• SlateBlue
• #6A5ACD
• 106, 90, 205

• DarkSlateBlue
• #483D8B
• 72, 61, 139

Белые тона

• White
• #FFFFFF
• 255, 255, 255

• 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

Палитра цветов RGBA

Цветовое пространство RGB

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

Цветовое пространство RGB представляет собой комбинацию красного, зеленого и синего компонентов аддитивного цвета. Компоненты RGB представлены математической моделью:

  R = красный (0 ≤ R ≤ 255)
G = зеленый (0 ≤ G ≤ 255)
B = синий (0 ≤ B ≤ 255)  

В цветовом пространстве RGB интенсивность света каждого канала равна значению каждого канала.Например, если значение каждого канала установлено на 255, цвет визуализированного цветового пространства будет белым. Кроме того, если значение каждого канала установлено на 0, цвет визуализированного цветового пространства будет черным.

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

Цветовое пространство RGBA

Цветовое пространство RGBA — это цветовое пространство, которое включает дополнительный канал (альфа-канал) для представления информации о прозрачности изображения. Цвет RGBA состоит из четырех каналов, каждый из которых представлен 8 битами. В RGBA информация о прозрачности хранится в альфа-канале, а информация о цвете хранится в трех каналах RGB.

Альфа-канал может отображаться как изображение в градациях серого. Это означает, что альфа-канал состоит из 256 уровней прозрачности, где 0 представляет максимальный уровень прозрачности, а 255 представляет максимальный уровень непрозрачности.

В цветовом пространстве RGBA альфа-канал считается таким же, как четвертый канал, а интенсивность света каждого канала равна значению каждого канала. Например, если значение каждого канала установлено на 255, цвет визуализированного цветового пространства будет белым. Кроме того, если значение каждого канала установлено на 0, цвет визуализированного цветового пространства будет черным.

Равные значения каждого канала представлены одним и тем же цветом в цветовом пространстве RGBA, но комбинация разных значений каждого канала приводит к разным цветам.

Цветовое пространство RGBA используется для расчета цвета каждого пикселя, который может отображаться на экране. Кроме того, можно получить доступ к альфа-каналу, чтобы сделать изображение прозрачным. Это означает, что если альфа-канал имеет значение 255 (непрозрачный), он не представляет собой прозрачный пиксель.

Другие цветовые пространства

Помимо цветовых пространств RGB и RGBA, существуют другие цветовые пространства, которые широко используются в программировании:

CMYK : Цветовое пространство CMYK — это цветовое пространство, которое используется для печати.Это цветовое пространство, состоящее из четырех каналов, где каждый канал представлен 8 битами. Цветовое пространство CMYK — это субтрактивное цветовое пространство, в котором цвет каждого канала создается путем вычитания цвета одного канала из остальных каналов. По крайней мере, один из каналов черный, и цвет этого канала известен как ключевой цвет. Другие каналы представляют собой цвета, смешанные с ключевым цветом, и цвет каждого канала определяется количеством смешанного ключевого цвета.

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

HSL : это цветовое пространство используется для представления цвета одного оттенка. Он представлен позицией на круге оттенков, яркостью и значением.

LAB : это цветовое пространство используется для представления цветов, включая яркость данного цвета. Он представлен положением на кривой, значением яркости и значением красного / зеленого / синего цветов.

Палитра цветов | WebStorm

Это диалоговое окно открывается при выполнении любого из следующих действий:

• Щелкните определенный цвет на подстраницах редактора, зависящих от языка | Страница цветовой схемы настроек / предпочтений Ctrl + Alt + S .

• Нажмите Ctrl + Shift + A и найдите действие «Показать палитру цветов».

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

Элемент	Описание
	Щелкните эту пипетку, чтобы перейти к объекту и получить его цвет RGB или HSB, а также шестнадцатеричные значения цвета.
Цветовой миксер	Используйте эту область для выбора цвета.
Набор цветов	В этой области отображаются цвета, которые были выбраны последними.
Яркость	Переместите ползунок вверх, чтобы сделать цвета в области микшера цветов ярче; переместите ползунок вниз, чтобы сделать цвета темнее.
Выберите	Нажмите эту кнопку, чтобы выбрать цвет в области «Смешение цветов» или в стопке цветов.
Отмена	Нажмите эту кнопку, чтобы не сохранять информацию о цвете.

Последнее изменение: 18 мая 2021 г.

HSL Color Picker; Палитра цветов HTML; Интернет, HEX, CSS, HSLa

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

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

С помощью палитры цветов HSL вы можете быстро получить цветовые коды из цветов, которые вы хотели бы использовать на других веб-сайтах или в настольных приложениях. Вывод CSS — это надстройка для веб-дизайнеров, которые хотят создавать цветовые коды для html-документов с возможностью принимать преимущество новой цветовой нотации CSS3 (RGB (a), HSL (a)).

Как использовать

Совет: перейдите в полноэкранный режим отображения в своем браузере
(обычно нажмите клавишу [F11]).Макет адаптируется к вашему экрану …

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

Дважды щелкните поле ввода, чтобы выбрать его содержание. Трижды щелкните #HEX и Поля вывода CSS для выбора их содержимого.

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

Щелкните один раз на переключателе буфера обмена, чтобы активировать другой контейнер.

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

Выбор цвета:

Рекомендуется использовать последовательность — оттенок — светлота. — насыщенность — для выбора цвета.

Для нового цвета рекомендуется начинать с значение насыщенности 100%, но имейте в виду, что «естественный» цвет редко имеет значение насыщенности 100%.

Сохранение цветов буфера обмена:

Щелкните постоянную ссылку, с помощью которой вы расширите URL-адрес адресная строка вашего браузера с цветовыми кодами вашего текущие цвета буфера обмена.Затем добавьте эту страницу в закладки, как вы делаете с любой другой страницей.

Ссылка на эту страницу:

URL

HTML-ссылка

Цитата

Электронная почта

Скопируйте и вставьте следующий текст:

HTML, CSS, RGB, цветовые палитры и многое другое

Работа с цветами — трудоемкая задача для веб-дизайнера, для начала вам нужно выбрать цветовую палитру для ваших красочных дизайнов , затем есть все виды кодовых значений, которые нужно запомнить и преобразовать из шестнадцатеричного в RGBa.Чтобы ускорить процесс и сделать жизнь дизайнера намного проще, в Интернете доступно множество удобных инструментов. Эти инструменты цвета помогут вам с легкостью выбирать и преобразовывать выбранные цвета для вашего следующего проекта веб-дизайна.

Вы когда-нибудь хотели использовать определенный цвет, но не могли найти его название или шестнадцатеричный код? С помощью этих генераторов цвета вы можете найти именно тот цвет, который вам нужен. Есть несколько вариантов, которые помогут получить желаемый цвет. Например, вы можете выбрать цвет, похожий на тот, который вам нужен, а затем выбрать между альтернативными оттенками.Кроме того, вы можете регулировать оттенок, насыщенность или яркость, пока не будете довольны результатом. После всех изменений вы получите шестнадцатеричный код, а также название цвета и интегрируете их в свой дизайн. Просто, правда ?!

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

Вот несколько цветовых инструментов, которые помогут вам собрать красивую комбинацию цветов, которая гарантированно подействует.

ColourLovers

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

Adobe Color CC

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

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

Палитра цветов Just Color

Ищете определенную эмоцию, стиль или атмосферу из своей цветовой палитры? Just Color Picker — это умный инструмент, который позволяет вам раскрасить код в буфер обмена одним щелчком мыши.

Paletton — Дизайнер цветовых схем

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

Color Hunt

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

Sip — Генератор цветовой палитры

Sip — потрясающее приложение, которое отлично работает на iPhone и Mac.Это приложение позволяет быстро создавать цветовые схемы из изображений, а затем сохранять, систематизировать и публиковать созданные вами палитры.

Генератор цветовой палитры Palettr

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

Цветовые комбинации

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

Генератор цветовой палитры Colrd

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

В

Photoshop есть окно выбора цвета по умолчанию, с которым, я уверен, знакомы все веб-дизайнеры, но просто подумайте, сколько раз вам приходилось переключаться между приложениями, чтобы копировать / вставлять или запоминать значения цвета.Там должен быть лучший способ! Собственно, это…

Палитра цветов от WebpageFX

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

Код цвета

Это еще один отличный генератор цветовой палитры, основанный на курсоре. Вы можете использовать его для создания различных цветовых палитр, а затем экспортировать их в различные форматы файлов: SCSS, LESS или PNG.

Color Supply — Генератор шестнадцатеричной цветовой палитры

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

color.hailpixel.com

Простой, но удивительно полезный маленький инструмент, color.hailpixel.com позволяет сканировать окно браузера в поисках идеального цвета, а затем копировать шестнадцатеричный код одним щелчком мыши.

Названия цветов CSS

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

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

Сфера

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

Дизайнер цветовых схем

Создайте свою собственную цветовую схему с помощью Color Scheme Designer. Поверните и отрегулируйте цветовое колесо, чтобы выбрать базовый цвет, затем просмотрите автоматически сгенерированные значения в зависимости от типа палитры.

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

Накопитель CSS

: генератор палитры изображений в цвета

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

Окончательный генератор градиентов CSS

Градиенты

CSS3, как известно, сложно написать в коде. Вам не только нужно знать разные значения цвета, вам также необходимо добавить различные префиксы поставщиков, чтобы он работал в нескольких браузерах.Ultimate CSS Gradient Generator упрощает задачу, предоставляя вам интерфейс в стиле Photoshop для настройки градиента, а затем предоставляет вам код для копирования / вставки.

Калькулятор цвета Hex 2 RGBA

Преобразование шестнадцатеричного значения в RGB или даже в RGBa несложно, это просто утомительно, когда каждое значение задается отдельно, что означает как минимум три щелчка мышью, чтобы скопировать числа. Калькулятор Devoth Hex 2 RGBA упрощает этот процесс, поскольку полное значение CSS копируется одним щелчком мыши.

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

0to255

Стандарт для выбора состояния наведения для ваших ссылок — просто выбрать более темный оттенок того же цвета. Этот процесс становится намного проще с помощью 0to255.com. Выберите свой цвет и посмотрите полную серию вариантов, что сделает его идеальным для наведения, градиентов и границ.

Цвет Hexa

Color Hexa — это как энциклопедия цвета! Введите выбранный вами цвет в любое желаемое значение, и он отобразит описание вместе с некоторыми полезными фактами. Прямое преобразование из Hex или RGB в ближайшее значение CMYK также особенно полезно для дизайнеров печати.

Палитра материалов: генератор цветовой палитры материального дизайна

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

Наличие правильных инструментов выбора цвета, а также генератора цветовой палитры может улучшить или испортить ваш дизайн-проект. Мы надеемся, что эти инструменты были вам полезны. Если у вас есть что добавить в список, сообщите нам об этом ниже.

Используйте встроенную палитру цветов Chrome без расширений

Позвольте мне сказать вам кое-что: я, , не могу поверить Я, , так и не нашел этот .Внутри Chrome Dev Tools есть интегрированная пипетка , также называемая Eye Dropper, CSS Color Picker или Pipette Tool .

Если вы не знаете: палитра цветов — это инструмент , , который позволяет извлекать HTML или шестнадцатеричные цветовые коды CSS из конкретных пикселей , значки или селекторы на любой веб-страница и сразу же применить их к CSS-свойствам .Это особенно полезно, если ваша работа включает в себя множество вещей, связанных с веб-дизайном и .

Проклятие, есть также множество расширений Chrome для выбора цвета, доступных в Интернет-магазине Chrome , но, поскольку он уже интегрирован , вам, , на самом деле не нужно расширение для этого. Итак, лучше поздно, чем никогда, я думаю, мой совет о том, как вы можете использовать палитру цветов в Google Chrome , так что вам не нужно ждать 2 года (как я сделал o .O):

1. Откройте Developer-Tools (Dev-Tools) в Google Chrome (F12) и вкладку Styles в нижнем левом углу.
2. Найдите для любого элемента со свойствами цвета CSS и щелкните на цветном квадрате перед шестнадцатеричным кодом.
3. Палитра цветов Chrome отображается как , как только вы переместите мышь назад на веб-сайт , в сторону от инструментов разработчика.
4. Щелкните левой кнопкой мыши на любом элементе на веб-сайте изменит свойство цвета , которое вы выбрали , изменится на цвет, на котором вы щелкнули

Надеюсь, это руководство помогло вам получить глаз некоторые интересные функции в инструментах разработчика Chrome и отказаться от некоторых цветов 😉

Кстати, если вы хотите увидеть RGB Color вместо HTML Color Codes , вы тоже можете это сделать:

Просто нажимайте стрелки рядом с HTML-кодом, чтобы переключаться между режимами.

Нам нравится 💚 Обратная связь и быстрые веб-сайты, поэтому, если у вас остались вопросы или они не сработали, напишите нам комментарий 👇

Поделиться — это забота! Поделитесь этой статьей с друзьями или сохраните для дальнейшего использования.

Палитра цветов — бесплатный онлайн-инструмент

Изменение точного оттенка или насыщенности цвета вызывает совершенно другие чувства. Есть миллионы цветовых оттенков, которые можно получить. Но иногда бывает действительно сложно получить именно тот цвет, который вы хотите для своего проекта.Выбрать правильные цвета для проекта всегда непросто. Так что вам определенно понадобится инструмент для выбора цвета, чтобы подобрать именно тот оттенок, который вам нужен. Если вы ищете простой инструмент для выбора цвета, вы попали в нужное место! Наш сайт предлагает один из полезных инструментов — Color Picker. Но для профессионалов в области графики, разработчиков программного обеспечения, программистов, фотографов или художников очень важно получить возможность указывать цвета по кодовому номеру в различных форматах.

Инструмент

Color Picker помогает веб-дизайнерам, фотографам, графическим дизайнерам выбрать правильный цвет и быстро получить код различных цветовых оттенков!

Средство выбора цвета (также средство выбора цвета или инструмент цвета) — это виджет графического интерфейса пользователя, обычно находящийся в графическом программном обеспечении или в Интернете, используемый для выбора цветов, а иногда и для создания цветовых схем.(Википедия)

С помощью этого очень простого и быстрого инструмента процесс выбора цвета становится намного проще. Инструмент помогает выбрать желаемый цвет, просто щелкнув мышью. В левой части страницы вы видите большой шестиугольник с множеством разноцветных маленьких шестиугольников внутри него. При нажатии на любой цвет вы получите шестнадцатеричный код цвета под шестиугольником. Вы также можете сделать наоборот, введя код в область «Выбранный цвет» и получив указанный цвет.В правой части страницы вы увидите все оттенки выбранного цвета с их кодами. Когда вы вводите число в поле ввода Детализации, инструмент покажет вам указанное количество темных и светлых оттенков. Например, если вы введете «5», инструмент покажет вам 5 темных и 5 светлых оттенков.

Знаете ли вы, что человеческий глаз может увидеть около семи миллионов различных цветов?

Свет состоит из семи групп длин волн. Это цвета радуги: красный, оранжевый, желтый, зеленый, синий, индиго и фиолетовый.Красноватые цвета представляют собой длинные волны с максимумом около 564–580 нм (нанометр). Зеленоватые цвета относятся к средним длинам волн с максимумом около 534–545 нм. Голубоватый цвет — это коротковолновый свет около 420–440 нм.

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

Цвета разделены на три основные группы: первичные, вторичные и третичные.

Три основных цвета: красный, синий и желтый.Эти цвета являются основными цветами, составляющими все остальные цвета на цветовом круге. Основные цвета экранов телевизоров и компьютерных мониторов — красный, зеленый и синий. В принтерах в качестве основных цветов используются пурпурный, желтый и голубой (они также используют черный).

Вторичные цвета — это смесь основных цветов. Это оранжевый, зеленый и фиолетовый.

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

Цвета также выражают эмоции. Большинство цветов можно воспринимать как положительно, так и отрицательно, в зависимости от того, как они сочетаются с другими цветами.

Красный, оранжевый и желтый считаются теплыми, а фиолетовый и синий — холодными.

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

Оранжевый — это сочетание красного и желтого. Он символизирует счастье, радость и солнечный свет. Оранжевый не так агрессивен, как красный, но также символизирует невежество и обман.

Ярко-желтый цвет — счастливый цвет, символизирующий радость, интеллект, яркость, энергию, оптимизм и счастье. Мутный желтый цвет вызывает негативные чувства: осторожность, критику, лень и ревность.

Зеленый считается самым нейтральным цветом. Это символ денег, проявление жадности или ревности.

Blue — это мирный и успокаивающий цвет, излучающий стабильность и опыт. Это обычный цвет, используемый на корпоративных сайтах. Синий также может символизировать доверие и надежность. Синий может подарить ощущение гармонии, покоя и заботы. Холодный оттенок может вызвать негативную сторону синего, символизируя депрессию, холодность и пассивность.

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

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

Черный — это отсутствие цвета и, следовательно, не цвет. Белый — это смешение всех цветов, и это цвет. Его часто ассоциируют с силой, элегантностью, изысканностью и глубиной. Говорят, что надевание черного на собеседовании может показать, что собеседник — влиятельная личность, и то же самое касается веб-сайтов.Черный также можно увидеть в негативном свете, потому что этот цвет ассоциируется со смертью, тайной и неизвестным. Это цвет печали, печали и печали, поэтому его нужно использовать с умом.

Цвета придают веб-сайтам смысл без слов. Они оказывают большое влияние, показывая пользователям, чем занимается компания и какие продукты они продают.

Сочетание цветов может помочь полностью изменить смысл сайта. Сочетание нежно-синего и ярко-оранжевого цветов сделает ваш сайт более захватывающим и веселым.Мягкие синие цвета придают вашему сайту более успокаивающий и умиротворяющий тон. Или гиганты быстрого питания, такие как McDonald’s, KFC, Burger King и многие другие рестораны, носят красно-желтую цветовую гамму. Исследователи говорят, что красный и желтый — самые аппетитные цвета. С другой стороны, синий цвет наименее аппетитный.

Для описания цветов существует множество терминов. Цветовые отношения делятся на две группы:

Бесплатные цвета — это цвета, которые хорошо дополняют друг друга.Это такие цвета, как синий и оранжевый, фиолетовый и желтый, красный и зеленый.

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

Какой цветовой код HTML?

Код цвета

HTML — это идентификатор, используемый для представления цвета в Интернете. Распространенными формами являются имя ключевого слова, шестнадцатеричное значение, триплет RGB (красный, зеленый, синий) и триплет HSL (оттенок, насыщенность, яркость).Каждая форма позволяет выбрать около 16 миллионов оттенков.

Например, красный цвет может быть идентификатором в следующих форматах:

• синий (ключевое слово) — название цвета. В этом формате мы можем указать только 147 цветов, представленных 17 основными цветами, со 130 другими оттенками, эти цвета называются цветами X11.
• шестнадцатеричный (# 1c87c9) — указывается с помощью: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий).
• RGB (28, 135, 201) — каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%).
• HSL (203, 76%, 45%) — обозначает оттенок, насыщенность и яркость, представляя представление цветов в цилиндрических координатах. Оттенок — это градус на цветовом круге (от 0 до 360), где 0 (или 360) — красный, 120 — зеленый, 240 — синий. Насыщенность — это процентное значение, где 0% означает оттенок серого, а 100% — полный цвет. Яркость — это также процент, где 0% — черный, 100% — белый.

Инструмент «Палитра цветов» показывает цвета в шестнадцатеричном (также шестнадцатеричном) формате.

Что такое шестнадцатеричный цвет?

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

Шестнадцатеричный цветовой код содержит числовые значения от 0 до 9 и алфавитные значения от A до F.

Значения кодовых байтов находятся в диапазоне от 00 (наименьшая интенсивность цвета) до FF (наибольшая интенсивность).

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

Top 5: Лучшие плагины для выбора цвета javascript и jQuery

Инструмент для выбора цвета, палитра цветов или селектор цветов в приложении — это утилита, которая обычно, но не обязательно, находится в графических приложениях. Они используются для выбора цветов или создания цветовых схем. Обычно они позволяют вам выбрать цвет в его представлении RGB-A, HEX или HSL-A.

В этом топе мы поделимся с вами 5 наиболее важными, полезными и простыми в реализации плагинами выбора цвета для веб-приложений.

Github

Tiny Colorpicker — это кроссбраузерная библиотека, которая создает поле выбора цвета (форму). Это простой способ добавить средства выбора цвета к вашим формам или пользовательскому интерфейсу.

• Поддержка IOS, Android и Windows Phone.
• Доступен как плагин jQuery и как ванильный микролибер Javascript.
• Поддержка AMD, Node, requirejs и commonjs.
• Легко настраивается
• Может использоваться внутри форм или снаружи
• Легкий
• Позволяет выбрать цвет из предопределенного изображения

Как разработчик, возможно, вы уже где-то видели этот плагин, старую палитру цветов Google Chrome! Этот плагин был частью самых известных веб-браузеров.Он очень простой в использовании и легкий.

Github

Pick-a-Color — это простая в использовании палитра цветов jQuery для Twitter Bootstrap. Он позволяет пользователям управлять насыщенностью, спектром и оттенком для получения любого цвета, удобен для мобильных устройств и настольных компьютеров.

Этот плагин представляет собой простой компонент для выбора цвета так же, как вы выбираете цвет в Adobe Photoshop. Он настраивается и имеет следующие функции:

• Плоский режим — как элемент на странице
• Мощные средства управления для выбора цвета
• Легко настроить внешний вид, изменив некоторые изображения
• Помещается в окно просмотра (полуответчик)

Farbtastic — это подключаемый модуль jQuery, который может добавлять на страницу один или несколько виджетов выбора цвета с помощью JavaScript.Затем каждый виджет связывается с существующим элементом (например, текстовым полем) и обновляет значение элемента при выборе цвета.

Почетные грамоты

Huebee

Github

Huebee — это библиотека JavaScript для создания ориентированных на пользователя палитр цветов. Huebee отображает ограниченный набор цветов, поэтому пользователи сразу видят все цвета, принимают четкие решения и выбирают цвет одним щелчком мыши. Если вы создаете приложение с открытым исходным кодом по лицензии, совместимой с лицензией GNU GPL v3, вы можете использовать Huebee в соответствии с условиями GPLv3.Узнайте больше о лицензировании Huebee с открытым исходным кодом.

Колпик

Colpick — это легкий плагин для палитры цветов jQuery с полями RGB, HSB и HEX, несколькими скинами и макетами.

• Нет изображений! Просто файл JS и CSS
• Очень интуитивно понятный интерфейс в стиле Photoshop
• Светлые и темные, легко настраиваемые скины CSS3
• 28 КБ всего загружено браузером
• Работает и красиво смотрится даже на IE7
• Очень просто реализовать

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

• Polyfill: Новая опция polyfill для работы с полями ввода собственных цветов
• Автоцвет: Получить цвет по умолчанию из атрибута value элемента с помощью функции jQuery .val ()
• Пользовательский родительский элемент: Новый параметр appendTo, чтобы указать, к какому элементу добавить средство выбора (PR # 44)
• Стили CSS: Новая опция «стили» для указания дополнительных стилей, которые будут установлены в средстве выбора (PR # 44)
• Совместимость с UMD: Использует закрытие в стиле UMD для загрузки с помощью загрузчиков AMD (требуется.js) или CommonJS
• Поддержка трехсимвольного шестнадцатеричного кода: Добавлена ​​поддержка ввода трехсимвольного шестнадцатеричного кода, как указано в спецификации CSS 2.1 (PR # 43)
• Исправленные проблемы: # 16, # 17, PR # 58

Палитра цветов

Github

Color picker — это простой плагин выбора цвета, написанный на чистом JavaScript, для современных браузеров с поддержкой сенсорных событий.

Iro.js

Github

Iro.js — это библиотека выбора цвета JavaScript на основе SVG с нулевыми зависимостями. Предлагает:

• Настраиваемый пользовательский интерфейс на основе SVG
• Преобразование цветов между RGB, HSV, HSL и шестнадцатеричным RGB
• Динамически обновлять стили CSS при изменении выбранного цвета
• Легкий, около 13 КБ в уменьшенном виде (или ~ 5 КБ в минимизированном виде + сжатие с помощью gzip)
• Нулевые зависимости (даже без jQuery или дополнительных таблиц стилей / изображений)

Colorjoe

Github

Colorjoe — масштабируемая палитра цветов.Colorjoe был в некоторой степени вдохновлен ColorJack и RightJS Colorpicker. В отличие от них, он неплохо масштабируется. По сути, это означает, что вы сможете определить его фактические размеры и макет, используя немного CSS. Таким образом, виджет хорошо вписывается в адаптивный макет. Кроме того, относительно легко реализовать недостающие функции (поля RGB и многое другое) благодаря простому API, который он предоставляет.