𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

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

Создавайте гармоничные цветовые палитры онлайн. Генерируйте случайные или тематические цвета, закрепляйте избранные, просматривайте цветовые шкалы, проверяйте контраст и симуляцию цветовой слепоты, экспортируйте в CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL или OKLCH.

Нажмите на палитру, чтобы открыть её в редакторе

Редактировать цвет

Об этом инструменте

Создавайте гармоничные цветовые палитры за считанные секунды. Просматривайте галерею автоматически сгенерированных палитр или откройте редактор, чтобы создавать вариации, закреплять любимые цвета, настраивать количество цветов и экспортировать для своих проектов. Цвета рассчитываются в перцептивном пространстве Okhsl, которое поддерживает визуальную сбалансированность тонов и устраняет типичные искажения традиционного HSL.

Основные возможности

Генерация случайных или тематических палитр — пастельные, яркие, тёмные, винтаж и земляные
Закрепляйте любимые цвета, создавайте новые вариации и настраивайте размер палитры
Просматривайте перцептивные цветовые шкалы, проверяйте контраст WCAG и симулируйте цветовую слепоту
Экспортируйте в HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON или Tailwind и делитесь по ссылке

Распространённые применения

  • Поиск новых палитр и комбинаций для интерфейсов и дизайн-систем с перцептивно сбалансированными и готовыми к использованию тонами
  • Определение цветовых схем для презентаций, публикаций и маркетинговых материалов с визуальной гармонией
  • Копирование значений цветов в HEX, RGB, HSL или OKLCH прямо в CSS без ручного расчёта
  • Тестирование различных цветовых гармоний (аналогичных, монохроматических, дополнительных, триадических, тетрадических) при редизайне интерфейсов до завершения проекта
  • Проверка доступности контраста и визуализация того, как палитру воспринимают люди с цветовой слепотой

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

1

Просмотр галереи

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

2

Открыть в редакторе

Нажмите на палитру, чтобы открыть её в редакторе. Закрепите цвета, которые хотите сохранить, и сгенерируйте снова, чтобы изменить только остальные.

3

Настроить и экспортировать

Настройте количество цветов, просмотрите цветовые шкалы, проверьте контраст и цветовую слепоту, затем экспортируйте в нужном формате или поделитесь по ссылке.

Технические примечания

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

Цвета генерируются в пространстве Okhsl, которое является перцептивно равномерным: изменение яркости даёт визуально равномерные шаги, в отличие от HSL, где одно и то же значение яркости выглядит светлее на жёлтом, чем на синем
При нажатии на 'показать шкалу цветов' для любого цвета создаётся рампа от 50 до 900 с фиксированным оттенком и насыщенностью и переменной перцептивной яркостью — готовая для шкал дизайн-систем и копируемая в CSS или Tailwind
Проверка контраста использует соотношение WCAG между цветом и разборчивым текстом на нём; значок AA указывает соотношение не менее 4,5:1
Симуляция цветовой слепоты является приближением для быстрой проверки и не заменяет тестирование с реальными пользователями

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

Как создать цветовую палитру?

Страница уже открывается с несколькими автоматически сгенерированными палитрами. Нажмите пробел (или кнопку «Сгенерировать новые»), чтобы создать больше, или выберите тему, например пастельную или тёмную. Нажав на палитру, вы откроете редактор, где можно закреплять цвета и настраивать по своему усмотрению.

В чём разница между случайным и тематическим режимами?

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

Что такое цветовое пространство Okhsl и почему оно важно?

Okhsl — это перцептивно равномерная цветовая модель. На практике это означает, что изменение яркости цвета даёт изменения, которые глаз воспринимает как равномерные шаги, создавая более сбалансированные палитры и тона, чем традиционный HSL — особенно при сравнении очень разных цветов, таких как жёлтый и синий.

Как сохранить или поделиться палитрой?

В редакторе кнопка «Поделиться» копирует ссылку с цветами, закодированными в URL. Тот, кто откроет эту ссылку, увидит точно такую же палитру в редакторе. Вы также можете экспортировать цвета в CSS, SCSS, JSON, Tailwind или как список HEX.

Смотрите также