Генератор случайных цветов

Что делает генератор случайных цветов

Каждое нажатие Сгенерировать случайно выбирает новый цвет и показывает его код в трёх форматах: HEX, RGB и HSL. Режим палитры даёт пять цветов сразу: зафиксируй понравившиеся и перебирай остальные, пока набор не станет правильным.

Рядом с каждым цветом есть проверка контраста. Она показывает, насколько читаемым будет белый и чёрный текст на этом фоне, по тому же коэффициенту контрастности, что и в рекомендациях по веб-доступности (WCAG).

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

Нажми «Сгенерировать» (или клавишу «Пробел»), чтобы получить новый случайный цвет.
Скопируй нужное значение. HEX-коды вроде #3A7BD5 подходят для большинства дизайнерских программ и веб-страниц, RGB перечисляет красную, зелёную и синюю составляющие, а HSL описывает оттенок, насыщенность и светлоту.
Переключись в режим палитры, чтобы увидеть пять цветов рядом.
Зафиксируй любой цвет, который хочешь оставить. При следующей генерации изменятся только незафиксированные цвета.
Проверь контраст. У каждого цвета показан коэффициент для белого и чёрного текста, поэтому сразу видно, какой читается легче.

Как использовать генератор цветовых палитр

Дизайнерские проекты

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

Практика рисования и иллюстрации

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

Программирование и тестирование

Случайный HEX-цвет удобен для временных фонов, тестовых данных и быстрых экспериментов с темами. Копируй код прямо в таблицу стилей.

Рукоделие и идеи для дома

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

Уроки о цвете в классе

Покажи ученикам, как HEX, RGB и HSL по-разному описывают один и тот же цвет. Проверка контраста — простой способ объяснить, почему на некоторых фонах текст трудно читать.

Советы по работе с цветами

Читай HEX-код парами. Шесть символов после # — это три пары для красного, зелёного и синего, каждая от 00 (нет) до FF (полная).
Используй HSL для более светлых и тёмных версий. Оставь оттенок и меняй светлоту, чтобы получить светлые и тёмные тона одного цвета в своей дизайнерской программе.
Стремись к хорошему контрасту. WCAG AA требует коэффициент не меньше 4,5:1 для обычного текста и 3:1 для крупного.
Сначала фиксируй, потом перебирай. Если один цвет тебе уже нравится, зафиксируй его, и пусть генератор предложит остальные.
Экран и бумага различаются. В печати цвета могут выглядеть иначе, поэтому перед большой печатью сделай пробный оттиск.
Нужны ещё и идеи для рисования? Сочетай палитру со списком идей для рисования или случайной картинкой.

Вопросы

Как получить случайный HEX-цвет?

Нажми «Сгенерировать», и рядом с новым цветом появится HEX-код вместе со значениями RGB и HSL, готовыми к копированию.

Чем отличаются HEX, RGB и HSL?

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

Можно собрать целую палитру?

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

Что означает проверка контраста?

Она показывает коэффициент контрастности между цветом и белым или чёрным текстом. Чем выше коэффициент, тем легче читать текст, а 4,5:1 и больше — обычная цель для обычного текста.

Можно использовать цвета в своих проектах?

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