ПаветтаГенератор случайных цветов
Случайный цвет нужен, когда отправной точки нет: подобрать акцент, разметить категории на графике, раздать метки проектам. Инструмент выдаёт либо один цвет, либо палитру из пяти.
Диапазоны
Случайность и схемы сочетаемости
Генератор выдаёт случайный цвет и показывает его сразу в четырёх записях: шестнадцатеричной, RGB, HSL и с названием ближайшего именованного цвета. Пробел на клавиатуре бросает новый.
Полная случайность в подборе цвета работает плохо: равномерный выбор по трём каналам даёт много грязных болотных оттенков, потому что таких сочетаний в кубе RGB просто больше. Поэтому генератор умеет ограничивать выборку по насыщенности и светлоте, работая уже в пространстве HSL.
Отдельный режим собирает палитру из нескольких цветов по правилам сочетаемости: дополнительные лежат напротив друг друга на круге, триада — в вершинах равностороннего треугольника, аналоговые — рядом. Такие наборы выглядят согласованно без подбора на глаз.
Каждый цвет сопровождается проверкой контраста с белым и чёрным текстом по формуле из рекомендаций по доступности. Значение 4,5 — порог для обычного текста, 3,0 — для крупного.
| Схема | Как расположены цвета |
|---|---|
| Дополнительные | Напротив друг друга |
| Триада | Через 120° |
| Аналоговые | Рядом, через 30° |
| Раздельно-дополнительные | Напротив и по бокам |
Ньютон, Гёте и 148 названий
Цветовой круг придумал Исаак Ньютон: разложив белый свет призмой, он свернул спектр в кольцо, соединив красный с фиолетовым. Кольцо получилось потому, что глаз воспринимает эти края спектра как соседние, хотя по длине волны они крайние.
Гёте в «Учении о цвете» 1810 года описал пары противоположных цветов и последовательный контраст — эффект, при котором после долгого взгляда на красное белая стена кажется зеленоватой. Его наблюдения легли в основу правил сочетаемости, которыми пользуются до сих пор.
Запись цвета шестнадцатеричным числом пришла из первых веб-браузеров: три пары знаков задают яркость красного, зелёного и синего от нуля до 255. Пространство HSL появилось позже и удобнее для человека, потому что раскладывает цвет на тон, насыщенность и светлоту.
Отдельная линия развития — измерение цвета приборами. Колориметр появился в первой половине XX века и позволил задавать цвет числами независимо от наблюдателя, что и сделало возможной точную цветопередачу в печати и на экране.
Список именованных цветов в вебе вырос из палитры первых графических систем и сегодня насчитывает 148 названий. Часть из них выглядит странно: «papayawhip», «lightgoldenrodyellow» и «mediumspringgreen» попали в стандарт из набора цветов графической подсистемы Unix.
Как собрать рабочую палитру
Жмите пробел, пока не появится подходящий тон, затем стройте от него палитру по одной из схем. Для интерфейса берите цвета с ограниченной насыщенностью: полностью насыщенный синий на белом фоне утомляет глаз уже через минуту чтения.
Проверяйте контраст сразу. Красивый светло-серый текст на белом почти всегда проваливает порог 4,5, и это первое, к чему придираются при проверке доступности.
Для веба сохраняйте цвета в шестнадцатеричной записи, для правок — в HSL: поменять светлоту на десять процентов в HSL можно одним числом, а в шестнадцатеричной записи придётся пересчитывать все три канала.
Помните, что экран и печать передают цвет по-разному. Насыщенный экранный зелёный на бумаге выйдет тусклее, потому что типографские краски покрывают меньший охват, и для печати цвет подбирают по вееру образцов.
Для печати и экрана держите разные наборы. Один и тот же фирменный цвет на бумаге и на мониторе подбирается отдельно: типографские краски и подсветка экрана дают разные охваты, и совпадение по числам совпадения по виду не гарантирует.
Подобрать градиент поможет генератор CSS-градиентов, а построить набор оттенков одного тона — генератор оттенков.
| Записей цвета | четыре |
| Именованных цветов | 148 |
| Порог контраста | 4,5 |
| Для крупного текста | 3,0 |
| Триада | через 120° |
| Аналоговые | через 30° |
| Круг Ньютона | 1704 |
| «Учение о цвете» | 1810 |
Каждый цвет можно закрепить замком и жать пробел дальше — остальные перегенерируются, закреплённые останутся.
Как пользоваться
Диапазоны тона, насыщенности и светлоты задаются ползунками, поэтому можно получать только пастель, только тёмные или только цвета в пределах одного сектора круга. У каждого цвета показан контраст с белым и чёрным текстом, коды забираются кликом, а вся палитра выгружается переменными CSS.
- Один цвет или палитра из пяти.
- Ползунками тона, насыщенности и светлоты — либо пресетом: пастель, яркие, тёмные.
- Замок на карточке оставляет цвет при следующей генерации.
- Пробел генерирует заново, клик по карточке копирует код.
Частые вопросы
Почему случайные цвета часто выглядят грязно
Потому что равномерная случайность по трём каналам RGB даёт в основном мутные средние цвета: ярких и чистых в этом кубе меньшинство. Генерация через HSL с ограниченными диапазонами решает проблему — насыщенность и светлота берутся из осмысленного коридора, а случайным остаётся в основном тон.
Как получить пастельную палитру
Держать насыщенность в пределах 25–45%, а светлоту около 80–90%. Пастель — это разбавленные белым цвета, поэтому важно не занижать светлоту. Пресет «пастель» ставит эти границы сразу.
Что даёт фиксация цветов
Возможность собирать палитру постепенно. Обычно из первой пятёрки нравится один цвет — его закрепляют и генерируют остальные заново, пока не появится второй подходящий. За несколько итераций набирается палитра, которую руками пришлось бы подбирать долго.
Можно ли этим генерировать цвета для графиков
Можно, но с оговоркой: цвета серий на диаграмме должны различаться не только тоном, но и светлотой, иначе они сольются в чёрно-белой печати и при дальтонизме. Практичнее задать узкий диапазон насыщенности, широкий диапазон тона и разводить светлоту вручную, проверив результат в подборщике сочетаний.
Насколько случайны эти цвета
Это псевдослучайность браузера, функция Math.random. Для подбора палитры этого более чем достаточно. Для криптографии такой источник не годится, но задача тут другая.
Почему один и тот же цвет иногда выпадает дважды
При узком диапазоне вариантов немного: если насыщенность и светлота зажаты, а тон ограничен сектором в 30°, всего доступных заметно различимых цветов — десятки. Расширьте диапазон тона, и повторы исчезнут.
Спросите нейросети об инструменте
Похожие инструменты
Линейный, радиальный и конический градиент с живым предпросмотром. Любое число цветовых точек, угол и позиции, разбор чужого кода обратно в точки.
ОткрытьГенератор оттенков и тоновШкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьПалитра из картинкиГлавные цвета фото или логотипа: от 3 до 10 оттенков с HEX и RGB, копирование, экспорт в CSS-переменные и проверка контраста с текстом.
ОткрытьСочетание цветовГармоничные палитры по цветовому кругу: комплементарные, триада, аналоговые. С симуляцией дальтонизма и контрастом пар.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.