Quick presets:
Complementary
5 colors · Click any swatch to copy HEX
Base
rgb(13, 162, 231)
hsl(199°, 89%, 48%)
Base Light
rgb(101, 200, 246)
hsl(199°, 89%, 68%)
Base Dark
rgb(8, 95, 135)
hsl(199°, 89%, 28%)
Complement
rgb(231, 82, 13)
hsl(19°, 89%, 48%)
Complement Light
rgb(246, 147, 101)
hsl(19°, 89%, 68%)
Export
:root {
--color-base: #0da2e7;
--color-base-light: #65c8f6;
--color-base-dark: #085f87;
--color-complement: #e7520d;
--color-complement-light: #f69365;
}- 7 правил гармонии: создавайте палитры, используя дополнительные, триадные, аналогичные, разделенно-дополнительные, тетрадные, монохроматические и шкалы оттенков в стиле попутного ветра из любого цвета семян.
- Точная цветовая математика: во всех преобразованиях используются правильные алгоритмы RGB/HSL с расчетом коэффициента контрастности WCAG. См. относительную яркость, значки «прошел/не прошел» белый и черный текст на каждом образце.
- Значения HEX, RGB и HSL: каждый образец отображает значения HEX, RGB и HSL. Щелкните любой образец, чтобы мгновенно скопировать HEX-код в буфер обмена.
- Экспорт в формат CSS, SVG или TXT. Загрузите свою палитру в виде пользовательских свойств CSS, листа образцов SVG или простого текстового списка HEX. Идеально подходит для систем проектирования, конфигураций Tailwind и документации.
Распространенные случаи использования генератора цветовой палитры
- Дизайн и прототипирование пользовательского интерфейса: создавайте гармоничные цветовые палитры для макетов пользовательского интерфейса веб-сайтов и приложений. Используйте дополнительные и аналогичные правила для создания сбалансированных интерфейсов с правильной цветовой иерархией.
- CSS и токены дизайна Tailwind: используйте правило «Оттенки 50 → 900», чтобы создать полную шкалу оттенков для пользовательских цветов бренда. Экспортируйте переменные CSS и подключите их непосредственно к конфигурации вашей системы дизайна.
- Создание системы дизайна: создайте единую систему цветов для ваших жетонов дизайна. Создавайте тетрадные и триадные палитры, которые работают вместе, а затем экспортируйте их в виде пользовательских свойств CSS для документации вашей системы дизайна.
- Идентичность бренда и логотипы. При создании фирменного стиля используйте правила разделения-дополнения или аналогии, чтобы найти цвета, которые дополняют основной цвет вашего бренда, сохраняя при этом визуальную гармонию.
- Презентации и слайды: создавайте целостные цветовые схемы для презентаций. Используйте правило монохроматики, чтобы получить ряд оттенков и оттенков, которые сделают ваши слайды профессиональными и последовательными.
- Визуализация данных и диаграммы: создавайте доступные цветовые палитры для диаграмм и инфографики. На каждом образце имеются контрастные значки WCAG, позволяющие проверить читаемость изображения как на белом, так и на черном фоне.
Часто задаваемые вопросы
Генератор цветовой палитры поддерживает семь правил гармонии: дополнительный (противоположные цвета на круге — высокий контраст), триадный (три равномерно расположенных цвета — сбалансированный), аналогичный (соседние цвета — гармоничный), сплит-дополнительный (основной цвет плюс два близких к нему), тетрадный (четыре цвета в прямоугольнике — сложный), монохромный (одинаковый оттенок при разных уровнях освещенности) и оттенки 50 → 900 (десятиступенчатый оттенок в стиле попутного ветра). масштаб).
Просто нажмите на любую карту образца, чтобы скопировать ее шестнадцатеричный код в буфер обмена. На короткое время появляется значок галочки для подтверждения копирования. Каждый образец также отображает значения RGB и HSL, поэтому вы можете использовать их в любом инструменте дизайна или редакторе кода. Для массового экспорта используйте параметры загрузки переменных CSS, SVG или TXT в разделе «Экспорт».
На каждом образце изображены два значка: один для белого текста (⬜), другой для черного текста (⬛). Зеленые значки указывают на то, что цвет соответствует требованиям контрастности WCAG; красный означает, что это не удалось. Показаны уровни AA Large (3:1), AA (4,5:1) и AAA (7:1). Это поможет вам быстро оценить, читаем ли цвет в качестве фона для текста.
Да! Выберите правило гармонии «Оттенки 50→900», чтобы создать десятиступенчатую шкалу оттенков (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) — тот же шаблон, который используется в Tailwind CSS. Базовым цветом становится оттенок 500, более светлые и темные варианты генерируются автоматически. Экспортируйте переменные CSS для использования непосредственно в файле Tailwind.config.js.
Вы можете экспортировать свою палитру в трех форматах: переменные CSS (настраиваемые свойства: :root { ... }), лист образцов SVG (визуальная сетка образцов цвета с шестнадцатеричными метками) и обычный текст (список имен: шестнадцатеричные пары). Используйте кнопку «Копировать CSS» или кнопки «Загрузить» для файлов CSS, SVG или TXT.
Во всех преобразованиях цветов используются стандартные алгоритмы преобразования RGB↔HSL с правильным представлением оттенка (0–360°), насыщенности (0–100%) и яркости (0–100%). Коэффициенты контрастности рассчитываются с использованием формулы относительной яркости WCAG 2.1, которая учитывает нелинейную гамма-коррекцию устройств отображения. Это обеспечивает точную и надежную информацию о цвете.
Да, генератор цветовой палитры совершенно бесплатен и не требует регистрации. Никаких скрытых платежей, дополнительных функций и ограничений на количество палитр, которые вы можете создать, нет. Поскольку все работает локально в вашем браузере, нет никаких затрат на сервер или ограничений API.
После начальной загрузки страницы генератор цветовой палитры работает полностью автономно. Все функции цветовой математики, рендеринга образцов и экспорта выполняются в вашем браузере без каких-либо запросов к серверу. Это делает его надежным инструментом для дизайнеров и разработчиков, работающих в средах с ограниченным подключением к Интернету или без него.