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 BH 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 BH 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, который он предоставляет.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *