Softonic

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

Шаг 1 / 4 Случайная палитра

Полезная палитра, это не просто набор случайных несвязанных цветов. Генератор создает от 2 до 15 готовых к копированию HEX-образцов в выбранном стиле, ярком, пастельном, приглушенном или темном, чтобы быстро искать акценты для интерфейса, цвета диаграмм, графику для соцсетей и первые направления бренда.

Как создать случайную палитру

  1. 1

    Выберите стиль

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

  2. 2

    Задайте количество цветов

    Создайте компактную пару или большой набор до 15 образцов для диаграмм, состояний интерфейса или мудбордов.

  3. 3

    Сгенерируйте или измените seed

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

  4. 4

    Скопируйте результат

    Нажмите на образец, чтобы скопировать его HEX-код, или экспортируйте всю палитру как список HEX либо CSS custom properties.

Краткая шпаргалка по стилям

Стиль Для чего подходит Что проверить
Яркий Продуктовые интерфейсы, кампании, диаграммы с четким разделением Не используйте все образцы на полной интенсивности в одном макете
Пастельный Спокойные фоны, мягкие иллюстрации, деликатные акцентные системы Убедитесь, что контраст текста остается достаточным
Приглушенный Редакционные макеты, дашборды, зрелые бренд-системы Добавьте более явный акцент, если набор выглядит слишком плоским
Темный Темные интерфейсы, визуализации данных и выразительные блоки Проверьте светлый текст и состояния фокуса перед публикацией

Практические советы

  • Назначьте роль каждому цвету. UI-палитре обычно нужен доминирующий цвет поверхности, один-два поддерживающих цвета и несколько акцентов.
  • Проверяйте контраст попарно. Палитра может хорошо выглядеть как набор образцов, но провалиться, когда на ней появится текст. Тестируйте реальные сочетания переднего плана и фона.
  • Используйте seed, если нужна повторяемость. Если палитра почти подходит, создайте другой seed; если вариант удачный, сохраните seed в заметках проекта, чтобы восстановить его позже.

Рабочие форматы

Генератор выдает HEX, потому что этот формат удобно переносить между дизайн-инструментами, CSS и документацией. HSL полезен, когда нужно мыслить через тон, насыщенность и светлоту. OKLCH стоит изучить для доступных цветовых систем: он помогает более равномерно с точки зрения восприятия рассуждать о lightness и chroma.

Часто задаваемые вопросы

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

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

Да: скопируйте один образец как HEX, всю палитру как список HEX через пробелы или блок CSS custom properties на шаге экспорта.

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

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

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

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

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Выбор цвета HEX

Выберите или введите HEX-цвет и получите RGB, HSL, примерный CMYK, относительную яркость и контраст с белым и чёрным.