Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
Начните с ценностей вашего бренда и целевой аудитории. Используйте психологию цвета как руководство: синий передаёт доверие и профессионализм, зелёный ассоциируется с ростом и природой, красный сигнализирует срочность или страсть, фиолетовый предполагает роскошь или творчество. Ограничьте основную палитру 3–5 цветами. Обеспечьте достаточный контраст (коэффициент 4,5:1) для доступности.
Правило 60-30-10 — принцип дизайна для сбалансированного использования цвета: 60% доминирующего цвета (фон, большие области), 30% вторичного цвета (карточки, боковые панели, UI-элементы), 10% акцентного цвета (кнопки, выделения, призывы к действию). Это создаёт визуальную иерархию при сохранении гармонии. Нейтральные цвета часто образуют 60%-ную основу в современном UI-дизайне.
WCAG 2.1 требует минимального коэффициента контраста 4,5:1 для обычного текста и 3:1 для крупного текста. Используйте инструменты, такие как WebAIM Contrast Checker или DevTools браузера, для проверки. Не полагайтесь только на цвет для передачи информации (используйте также иконки/текст), тестируйте с симуляторами цветовой слепоты и убедитесь, что интерактивные элементы имеют видимые состояния фокуса.
Для веб-разработки: hex-коды (#RRGGBB) для CSS, значения RGB/HSL для динамических манипуляций и CSS Custom Properties для тематизации. Для инструментов дизайна: большинство принимает hex-коды; Figma и Sketch поддерживают библиотеки цветов. Для Tailwind CSS: определите цвета в tailwind.config.js под theme.extend.colors. Для брендинга: включите значения Pantone (печать), CMYK (печать) и RGB (экран).