Створення ідеальної кольорової палітри для вашої дизайн-системи

Добре продумана кольорова палітра - це основа будь-якої успішної дизайн-системи. Вона забезпечує послідовність, покращує доступність і легко масштабується в міру зростання вашого продукту. Давайте створимо її з нуля.

Анатомія кольорової палітри дизайн-системи

Повна кольорова палітра зазвичай включає:

Брендові кольори - Первинні та вторинні кольори ідентичності бренду

Нейтральні кольори - Сірі для тексту, рамок та фонів

Семантичні кольори - Стани успіху, попередження, помилки та інформації

Фонові кольори - Рівні поверхні для глибини та ієрархії

Інтерактивні кольори - Стани hover, active та focus

Крок 1: Виберіть основний колір

Почніть з основного кольору вашого бренду. Це зазвичай найбільш впізнаваний колір бренду, який використовуватиметься для основних дій, посилань та ключових елементів UI.

Порада: Виберіть колір посередині діапазону яскравості (40-60% в HSL). Це дає вам простір для створення світліших і темніших варіацій.

:root {
  --primary-500: hsl(220, 90%, 56%);
}

Крок 2: Створіть повну шкалу

Створіть 9-11 відтінків вашого основного кольору, від дуже світлого до дуже темного. Поширений підхід - шкала 50-900:

:root {
  --primary-50: hsl(220, 90%, 96%);
  --primary-100: hsl(220, 90%, 92%);
  --primary-200: hsl(220, 90%, 84%);
  --primary-300: hsl(220, 90%, 72%);
  --primary-400: hsl(220, 90%, 64%);
  --primary-500: hsl(220, 90%, 56%);
  --primary-600: hsl(220, 90%, 48%);
  --primary-700: hsl(220, 90%, 40%);
  --primary-800: hsl(220, 90%, 32%);
  --primary-900: hsl(220, 90%, 24%);
}

Крок 3: Створіть нейтральну шкалу

Нейтральні кольори - це робочі коні вашої палітри. Вони використовуються для тексту, фонів, рамок та тонких елементів UI.

Важливо: Нейтральні кольори повинні мати дуже низьку насиченість (0-5%). Чисті сірі (0% насиченості) можуть здаватися холодними, тоді як злегка теплі або холодні сірі (2-5% насиченості) додають індивідуальності.

:root {
  --neutral-50: hsl(220, 5%, 98%);
  --neutral-100: hsl(220, 5%, 96%);
  --neutral-200: hsl(220, 5%, 92%);
  --neutral-300: hsl(220, 4%, 84%);
  --neutral-400: hsl(220, 3%, 64%);
  --neutral-500: hsl(220, 2%, 48%);
  --neutral-600: hsl(220, 2%, 36%);
  --neutral-700: hsl(220, 3%, 24%);
  --neutral-800: hsl(220, 4%, 16%);
  --neutral-900: hsl(220, 5%, 12%);
}

Крок 4: Додайте семантичні кольори

Створіть кольорові шкали для поширених станів UI:

:root {
  --success-500: hsl(142, 76%, 36%);
  --warning-500: hsl(38, 92%, 50%);
  --error-500: hsl(0, 84%, 60%);
  --info-500: hsl(200, 94%, 46%);
}

Створіть повні шкали (50-900) для кожного семантичного кольору, використовуючи той самий підхід, що й для основного кольору.

Крок 5: Забезпечте доступність

Усі комбінації кольорів тексту та фону повинні відповідати вимогам контрастності WCAG:

• Звичайний текст: Мінімальне співвідношення контрастності 4.5:1
• Великий текст (18px+): Мінімальне співвідношення контрастності 3:1
• Елементи UI: Мінімальне співвідношення контрастності 3:1

Використовуйте інструменти, такі як WebAIM Contrast Checker, щоб перевірити ваші комбінації.

Крок 6: Плануйте темний режим

Створіть палітру для темного режиму:

Інвертуйте вашу нейтральну шкалу

Зменшіть насиченість яскравих кольорів (вони виглядають занадто інтенсивними на темних фонах)

Перевірте всі комбінації на достатню контрастність

[data-theme="dark"] {
  --background: var(--neutral-900);
  --surface: var(--neutral-800);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-400);
  --primary-500: hsl(220, 75%, 64%);
}

Крок 7: Створіть семантичні токени

Зіставте ваші базові значення кольорів із семантичними назвами:

:root {
  --color-background-primary: var(--neutral-50);
  --color-background-secondary: var(--neutral-100);
  --color-text-primary: var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-border-default: var(--neutral-200);
  --color-action-primary: var(--primary-500);
  --color-action-primary-hover: var(--primary-600);
}

Ця абстракція полегшує заміну тем та підтримку послідовності.

Найкращі практики

Обмежте вашу палітру - Забагато кольорів створюють хаос. Дотримуйтесь 1-2 основних кольорів та надійної нейтральної шкали.

Тестуйте в контексті - Кольори виглядають по-різному на різних фонах та поруч з іншими кольорами.

Використовуйте HSL - Це більш інтуїтивно, ніж RGB, для створення кольорових варіацій.

Документуйте все - Включіть інструкції з використання для кожного кольору.

Створюйте інструменти - Створіть стилі кольорів Figma або спеціальні властивості CSS для легкого впровадження.

Інструменти, які допоможуть вам

• Coolors.co - Генерація кольорових палітр
• Accessible Colors - Перевірка та виправлення контрастності
• Palettte - Створення та експорт кольорових шкал
• ColorBox - Генерація доступних кольорових систем

Висновок

Добре спроектована кольорова палітра - це і мистецтво, і наука. Вона вимагає ретельного врахування ідентичності бренду, доступності та масштабованості. Приділіть час, щоб зробити це правильно, і вона буде служити вашій дизайн-системі роками.