Палитра цветов онлайн
Проведите по полю или введите код — остальные форматы пересчитаются сразу. Ниже сочетания к выбранному цвету, оттенки светлее и темнее и проверка, читается ли на нём белый и чёрный текст.
Обновлено
Коды цвета
— — — — Контраст текста по WCAG
Белый текст
—
Чёрный текст
—
Как выбрать цвет и получить его код
Выберите оттенок ползунком под полем, а затем проведите пальцем или мышью по большому полю: вправо цвет становится насыщеннее, вверх — светлее. Все коды справа пересчитываются сразу, и любой можно скопировать одним нажатием. Если код уже есть — вставьте его в поле «Код цвета»: страница понимает HEX (#FF8800 и короткую запись #F80), rgb(), hsl() и названия цветов на английском и русском, например tomato или «томатный».
Точную подстройку удобно делать числами: R, G и B — доли красного, зелёного и синего от 0 до 255, H — оттенок в градусах, S и L — насыщенность и светлота в процентах. Выбранный цвет попадает в адрес страницы — ссылкой можно поделиться, и у получателя откроется тот же цвет.
Форматы: HEX, RGB, HSL и CMYK
HEX и RGB — одно и то же: три канала экрана, записанные шестнадцатеричными или десятичными числами. HSL удобнее для человека: чтобы сделать цвет светлее, достаточно увеличить L, а чтобы приглушить — уменьшить S. Именно по HSL строятся сочетания на этой странице. CMYK — доли голубой, пурпурной, жёлтой и чёрной краски; здесь он посчитан простой формулой и годится для прикидки, но не для сдачи макета в типографию — там нужен цветовой профиль.
Сочетания цветов
Сочетания строятся поворотом по кругу оттенков при той же насыщенности и светлоте. Противоположный цвет стоит напротив на 180° — пара получается самой контрастной, её берут для акцентов: кнопка на фоне, заголовок на плашке. Аналоговые — соседи на ±30°, спокойная гамма без резких переходов. Триада делит круг на три равные части: ярко, но уравновешенно, если один цвет главный, а два других — в мелких деталях. Раздельно-противоположные мягче, чем чистая пара. Строки «Светлее» и «Темнее» дают оттенки того же цвета для фона, рамок и наведения.
Контраст: будет ли читаться текст
Блок «Контраст» показывает, как на выбранном цвете смотрятся белые и чёрные буквы, и считает отношение яркостей по формуле стандарта доступности WCAG 2.1. Для обычного текста нужно не меньше 4,5 к 1 (уровень AA), для крупных заголовков хватит 3 к 1. Если оба варианта не проходят, сдвиньте цвет светлее или темнее: середина шкалы яркости хуже всего подходит под текст.
Цвета HTML с названиями
В CSS у 141 цвета есть собственное имя: его можно писать вместо кода — color: tomato. Русские названия в таблице — наши переводы для удобства поиска; в коде работают только английские имена. Нажмите «Выбрать», чтобы открыть цвет в палитре, получить его коды и сочетания. Если подобранный цвет совпадает с именованным или близок к нему, название появится под образцом.
| Образец | Название | В CSS | HEX | Действие |
|---|---|---|---|---|
| Белый | white | #FFFFFF | ||
| Дымчато-белый | whitesmoke | #F5F5F5 | ||
| Гейнсборо, светло-серый | gainsboro | #DCDCDC | ||
| Светло-серый | lightgray | #D3D3D3 | ||
| Серебряный | silver | #C0C0C0 | ||
| Тёмно-серый | darkgray | #A9A9A9 | ||
| Серый | gray | #808080 | ||
| Тускло-серый | dimgray | #696969 | ||
| Чёрный | black | #000000 | ||
| Снежный | snow | #FFFAFA | ||
| Туманная роза | mistyrose | #FFE4E1 | ||
| Светло-коралловый | lightcoral | #F08080 | ||
| Лососевый | salmon | #FA8072 | ||
| Розово-коричневый | rosybrown | #BC8F8F | ||
| Индийский красный | indianred | #CD5C5C | ||
| Красный | red | #FF0000 | ||
| Кирпичный | firebrick | #B22222 | ||
| Коричневый | brown | #A52A2A | ||
| Тёмно-красный | darkred | #8B0000 | ||
| Тёмно-бордовый | maroon | #800000 | ||
| Светлый лососевый | lightsalmon | #FFA07A | ||
| Тёмный лососевый | darksalmon | #E9967A | ||
| Коралловый | coral | #FF7F50 | ||
| Томатный | tomato | #FF6347 | ||
| Оранжево-красный | orangered | #FF4500 | ||
| Сиена | sienna | #A0522D | ||
| Морская ракушка | seashell | #FFF5EE | ||
| Льняной | linen | #FAF0E6 | ||
| Дынный, цвет папайи | papayawhip | #FFEFD5 | ||
| Античный белый | antiquewhite | #FAEBD7 | ||
| Бланшированный миндаль | blanchedalmond | #FFEBCD | ||
| Бисквитный | bisque | #FFE4C4 | ||
| Персиковый | peachpuff | #FFDAB9 | ||
| Белый навахо | navajowhite | #FFDEAD | ||
| Цвет древесины | burlywood | #DEB887 | ||
| Рыжевато-коричневый | tan | #D2B48C | ||
| Песочно-коричневый | sandybrown | #F4A460 | ||
| Перу, охристо-коричневый | peru | #CD853F | ||
| Тёмно-оранжевый | darkorange | #FF8C00 | ||
| Шоколадный | chocolate | #D2691E | ||
| Кожано-коричневый | saddlebrown | #8B4513 | ||
| Цветочно-белый | floralwhite | #FFFAF0 | ||
| Старое кружево | oldlace | #FDF5E6 | ||
| Кукурузный шёлк | cornsilk | #FFF8DC | ||
| Мокасиновый | moccasin | #FFE4B5 | ||
| Пшеничный | wheat | #F5DEB3 | ||
| Золотой | gold | #FFD700 | ||
| Оранжевый | orange | #FFA500 | ||
| Золотистый | goldenrod | #DAA520 | ||
| Тёмно-золотистый | darkgoldenrod | #B8860B | ||
| Слоновая кость | ivory | #FFFFF0 | ||
| Светло-жёлтый | lightyellow | #FFFFE0 | ||
| Бежевый | beige | #F5F5DC | ||
| Лимонный шифон | lemonchiffon | #FFFACD | ||
| Светло-золотистый | lightgoldenrodyellow | #FAFAD2 | ||
| Бледно-золотистый | palegoldenrod | #EEE8AA | ||
| Хаки | khaki | #F0E68C | ||
| Тёмный хаки | darkkhaki | #BDB76B | ||
| Жёлтый | yellow | #FFFF00 | ||
| Оливковый | olive | #808000 | ||
| Жёлто-зелёный | yellowgreen | #9ACD32 | ||
| Оливково-серый | olivedrab | #6B8E23 | ||
| Тёмно-оливковый | darkolivegreen | #556B2F | ||
| Зелёно-жёлтый | greenyellow | #ADFF2F | ||
| Шартрёз | chartreuse | #7FFF00 | ||
| Цвет газона | lawngreen | #7CFC00 | ||
| Медовая роса | honeydew | #F0FFF0 | ||
| Бледно-зелёный | palegreen | #98FB98 | ||
| Светло-зелёный | lightgreen | #90EE90 | ||
| Тёмный цвет морской зелени | darkseagreen | #8FBC8F | ||
| Лаймовый | lime | #00FF00 | ||
| Лимонно-зелёный | limegreen | #32CD32 | ||
| Лесной зелёный | forestgreen | #228B22 | ||
| Зелёный | green | #008000 | ||
| Тёмно-зелёный | darkgreen | #006400 | ||
| Мятный крем | mintcream | #F5FFFA | ||
| Весенне-зелёный | springgreen | #00FF7F | ||
| Умеренный весенне-зелёный | mediumspringgreen | #00FA9A | ||
| Умеренный цвет морской зелени | mediumseagreen | #3CB371 | ||
| Цвет морской зелени | seagreen | #2E8B57 | ||
| Аквамариновый | aquamarine | #7FFFD4 | ||
| Умеренный аквамариновый | mediumaquamarine | #66CDAA | ||
| Лазурный | azure | #F0FFFF | ||
| Светлый циан | lightcyan | #E0FFFF | ||
| Бледно-бирюзовый | paleturquoise | #AFEEEE | ||
| Пыльно-голубой | powderblue | #B0E0E6 | ||
| Бирюзовый | turquoise | #40E0D0 | ||
| Умеренный бирюзовый | mediumturquoise | #48D1CC | ||
| Цвет морской волны | aqua | #00FFFF | ||
| Серо-синий | cadetblue | #5F9EA0 | ||
| Циан, голубой | cyan | #00FFFF | ||
| Светлый цвет морской зелени | lightseagreen | #20B2AA | ||
| Тёмно-бирюзовый | darkturquoise | #00CED1 | ||
| Тёмный циан | darkcyan | #008B8B | ||
| Сине-зелёный | teal | #008080 | ||
| Тёмный грифельно-серый | darkslategray | #2F4F4F | ||
| Светло-голубой | lightblue | #ADD8E6 | ||
| Небесно-голубой | skyblue | #87CEEB | ||
| Насыщенный небесно-голубой | deepskyblue | #00BFFF | ||
| Бледно-голубой «Алиса» | aliceblue | #F0F8FF | ||
| Светлый стально-синий | lightsteelblue | #B0C4DE | ||
| Светлый небесно-голубой | lightskyblue | #87CEFA | ||
| Защитно-синий | dodgerblue | #1E90FF | ||
| Светлый грифельно-серый | lightslategray | #778899 | ||
| Грифельно-серый | slategray | #708090 | ||
| Стально-синий | steelblue | #4682B4 | ||
| Васильковый | cornflowerblue | #6495ED | ||
| Королевский синий | royalblue | #4169E1 | ||
| Призрачно-белый | ghostwhite | #F8F8FF | ||
| Лавандовый | lavender | #E6E6FA | ||
| Синий | blue | #0000FF | ||
| Умеренный синий | mediumblue | #0000CD | ||
| Тёмно-синий | darkblue | #00008B | ||
| Полуночно-синий | midnightblue | #191970 | ||
| Тёмно-синий, морской | navy | #000080 | ||
| Умеренный грифельно-синий | mediumslateblue | #7B68EE | ||
| Умеренный пурпурный | mediumpurple | #9370DB | ||
| Грифельно-синий | slateblue | #6A5ACD | ||
| Тёмный грифельно-синий | darkslateblue | #483D8B | ||
| Сине-фиолетовый | blueviolet | #8A2BE2 | ||
| Ребекка пёрпл | rebeccapurple | #663399 | ||
| Индиго | indigo | #4B0082 | ||
| Умеренная орхидея | mediumorchid | #BA55D3 | ||
| Тёмная орхидея | darkorchid | #9932CC | ||
| Тёмно-фиолетовый | darkviolet | #9400D3 | ||
| Чертополох | thistle | #D8BFD8 | ||
| Сливовый | plum | #DDA0DD | ||
| Фиалковый | violet | #EE82EE | ||
| Орхидея | orchid | #DA70D6 | ||
| Фуксия | fuchsia | #FF00FF | ||
| Маджента, пурпурный | magenta | #FF00FF | ||
| Тёмная маджента | darkmagenta | #8B008B | ||
| Пурпурный, фиолетовый | purple | #800080 | ||
| Умеренный фиолетово-красный | mediumvioletred | #C71585 | ||
| Ярко-розовый | hotpink | #FF69B4 | ||
| Насыщенный розовый | deeppink | #FF1493 | ||
| Лавандовый румянец | lavenderblush | #FFF0F5 | ||
| Розовый | pink | #FFC0CB | ||
| Светло-розовый | lightpink | #FFB6C1 | ||
| Бледный фиолетово-красный | palevioletred | #DB7093 | ||
| Малиновый | crimson | #DC143C |
Такого названия в таблице нет.
Узнать цвет на фотографии или собрать палитру из снимка поможет цвет по фото.
Чтобы узнать цвет на фотографии, откройте пипетку по фото: она покажет код цвета и основную палитру снимка.
Подобранный цвет можно сразу пустить в дело: наберите его код в поле «Свой цвет» на странице рисовать онлайн.
Вопросы
Чем HEX отличается от RGB?
Это один и тот же цвет в разной записи. RGB — три числа от 0 до 255: сколько в цвете красного, зелёного и синего. HEX — те же три числа в шестнадцатеричной системе подряд: rgb(255, 136, 0) = #FF8800. HEX короче, поэтому его чаще пишут в CSS и дизайн-программах.
Можно ли по CMYK отсюда печатать?
Для макета в типографию — нет. Здесь простой перевод по формуле, без цветового профиля бумаги и печатной машины. Реальные значения CMYK для печати даёт программа вёрстки с профилем, который назовёт типография. Для офисного принтера и прикидки цифр хватит.
Что значат AA и AAA в проверке контраста?
Это уровни доступности из международного стандарта WCAG 2.1. Для обычного текста уровень AA требует контраста не меньше 4,5 к 1, AAA — 7 к 1. Для крупного текста (от 18 пунктов или от 14 полужирным) достаточно 3 к 1 для AA и 4,5 к 1 для AAA.
Как подобрать сочетание цветов?
Выберите основной цвет и посмотрите гармонии ниже поля: противоположный даёт самый сильный контраст, аналоговые — спокойную гамму из соседних оттенков, триада — яркое, но уравновешенное сочетание. Нажмите на любой квадрат, чтобы сделать его основным и получить его коды.
Как взять цвет с картинки?
В Chrome и Edge на компьютере есть кнопка «Пипетка с экрана» — она берёт цвет любой точки экрана. Чтобы узнать цвет на фотографии или получить её палитру, откройте сервис «Цвет по фото».
Источники
- W3C: Web Content Accessibility Guidelines (WCAG) 2.1 — определения relative luminance и contrast ratio; критерии успеха 1.4.3 «Контраст (минимальный)» и 1.4.6 «Контраст (повышенный)». (проверено 26.09.2026).
- W3C: CSS Color Module Level 4 — раздел 6.1 «Named Colors» (список именованных цветов и их значения) и раздел 7 «HSL Colors» (перевод HSL в sRGB). (проверено 26.09.2026).
- MDN Web Docs: EyeDropper API — выбор цвета с экрана, поддержка браузерами. (проверено 26.09.2026).
Ещё сервисы
Цвет по фото
Узнать код цвета на фото пипеткой с лупой и получить основную палитру картинки из 5–8 цветов
Спецсимволы
Рубль, тире, кавычки-ёлочки, градус, стрелки и математика — скопировать и узнать Alt-код