7 правил гармонииконтраст WCAG12 форматов экспортаработает в браузере
Увидьте цвет, прежде чем выбирать.
Палитры, конвертеры и проверка контраста, которые показывают свои расчёты. Ниже через всё это проходит один цвет: его гармонии, читаемость текста на нём, вид при дальтонизме и CSS, в который он экспортируется.
#3563E9Проверка контраста в студии подбирает цвет текста; полоса — девятиступенчатая шкала оттенков.
- HEX
- #3563E9
- RGB
- 53 99 233
- HSL
- 225 80% 56%
- OKLCH
- 55.0% 0.209 265
- CMYK
- 77 58 0 9
Семь правил для палитры
Каждое применено к цвету выше.
- #3563E9#E9BB35
Комплементарная
Противоположный тон на круге: максимальный контраст, хороша для акцента.
- #3563E9#E96135#BDE935
Раздельно-комплементарная
Два тона по обе стороны от противоположного: контраст с меньшим напряжением.
- #67E03E#3E67E0#E03E67
Аналоговая
Соседи на круге: спокойные, цельные схемы.
- #3563E9#E93563#63E935
Триада
Три равноудалённых тона: живо, но сбалансированно.
- #3563E9#BB35E9#E9BB35#63E935
Тетрада
Две комплементарные пары: богато, но сбалансировать сложнее всего.
- #3563E9#E935BD#E9BB35#35E961
Квадрат
Четыре равноудалённых тона: смело, лучше, если один явно главный.
- #0B1228#162F76#1746CF#5E7FE1#AFBEE9
Монохромная
Один тон в нескольких светлотах: надёжно и спокойно.
Перед публикацией
Две вещи, которых не видно по образцу.
Читается ли текст?
Четыре цвета текста на цвете выше, оценённые по формуле WCAG 2.1.
- Aa#FFFFFF5.11:1AA
- Aa#0B0E143.78:1AA крупный текст
- Aa#A6B9EE2.62:1Не проходит
- Aa#436CE61.10:1Не проходит
Как это видят все?
Палитра из четырёх цветов так, как её видит большинство, и так, как видят четыре вида дальтонизма.
- Обычное зрение
- Протанопия
- Дейтеранопия
- Тританопия
- Ахроматопсия
Что вы забираете
Настоящий результат студии для этого цвета.
:root {
--brand-100: #d5ddf6;
--brand-300: #7693e9;
--brand-500: #184ada;
--brand-700: #132b73;
--brand-900: #050915;
}// Tailwind CSS v4 config
colors: {
'brand': {
'100': '#d5ddf6',
'300': '#7693e9',
'500': '#184ada',
'700': '#132b73',
'900': '#050915',
},
},- HEX List
- RGB List
- HSL List
- CSS Variables
- JSON
- SVG Palette
- Adobe ASE
- GIMP Palette
- CSV
- Tailwind Config
- SCSS Variables
- Style Dictionary
Инструменты
9 страниц, каждая под свою задачу.
Генератор палитр
Создавайте цветовые палитры. Бесплатный генератор.
Конвертер цветов
Конвертируйте цвета между форматами. Бесплатно.
Проверка контраста
Проверяйте контрастность цветов. Бесплатно.
Конструктор тем
Создавайте дизайн-системы из одного цвета.
Генератор градиентов
Создавайте CSS градиенты. Бесплатный генератор.
Дизайн-токены
Экспортируйте цвета как дизайн-токены.
Цвета брендов
Палитры цветов известных брендов.
Названия цветов
Названия цветов с HEX кодами. Справочник.
Генератор случайных цветов
Генерируйте случайные цвета. Бесплатный генератор.
Часто задаваемые вопросы
Как работает Конструктор тем?
Введите основной цвет, и мы сгенерируем полную дизайн-систему: 11-ступенчатые шкалы (50-950) для primary, secondary, accent и neutral, плюс семантические цвета, светлую и тёмную темы и токены для разработчиков. Выберите из 30+ стилей, 20+ типов проектов и 15+ характеристик бренда.
Можно ли экспортировать токены дизайн-системы?
Да. Экспортируйте полную дизайн-систему как CSS-переменные, конфиг Tailwind CSS v4, SCSS, LESS или Style Dictionary JSON — готово для копирования в ваш проект.
Хранятся ли мои данные?
Нет. Всё работает в браузере. Избранное хранится в localStorage и не покидает ваше устройство.
Как работает проверка доступности?
Конструктор тем автоматически проверяет каждую пару текст-фон на соответствие WCAG 2.1 AA и корректирует цвета при необходимости. Вкладка проверки контраста предоставляет детальный анализ AA/AAA.
Выберите цвет
Начните с одного цвета и заберите палитру, отчёт о контрасте и токены.
Открыть студию