Design System Component Guide
- Primary Indigo#6366f1
- Secondary Coral#fb7185
- Surface Cream#fff7ed
- Border Fog#f5f5f5
- Text Graphite#1f2937
- Interactive Yellow#fde047
- Muted Gray#cbd5e1
Створено 06/28/2025 20:29
Палітра містить світлий, темний кольори. Акцентні кольори Primary Indigo #6366f1 та Surface Cream #fff7ed. Палітра має температуру кольорів Холодний, Теплий, Нейтральний.
За світлістю палітра сягає від #1F2937 (найтемніший) до #FFF7ED (найсвітліший). Діапазон світлості широкий.
Загалом насиченість здається яскравою (висока хрома) — 57% кольорів яскраві.
Деякі кольори розташовані майже навпроти один одного на колірному колі, що дає палітрі комплементарний контраст.
Загалом температура зміщена в бік холодного (3 із 7).
HEX-коди (відсортовано): #1F2937, #6366F1, #CBD5E1, #F5F5F5, #FB7185, #FDE047, #FFF7ED
Палітра Design System Component Guide містить комбінацію з 7 кодів кольорів :
HEX: #6366f1, RGB: (99, 102, 241); HEX: #fb7185, RGB: (251, 113, 133); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #1f2937, RGB: (31, 41, 55); HEX: #fde047, RGB: (253, 224, 71)
HEX: #cbd5e1, RGB: (203, 213, 225)
Спрощений варіант палітри кольорів
Темний відтінок Помірний сланцево-синій, Темний відтінок Світло-кораловий, Темний відтінок Квітково-білий, Димчасто-білий, Світлий відтінок Чорний, Світлий відтінок Золотий, Світлий відтінок Світло-сірий
Кольорова схема створена автором raccoon
Коди кольорів у палітрі
Design System Component Guide коди кольорів HEX, RGB інформація у таблиці
| Колір | HEX | RGB | Назва | Альтернативна назва |
|---|---|---|---|---|
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Primary Indigo | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Secondary Coral | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Surface Cream | Fatback |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Border Fog | Whitesmoke |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Text Graphite | — |
| #fde047 | #fde047 | RGB(253, 224, 71) | Interactive Yellow | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | Muted Gray | — |
Контраст палітри кольорів
8 пари кольорів мають низький контраст і потребують покращення, що може вплинути на зручність читання.
| Колір тексту | Колір фону | Коефіцієнт контрастності |
|---|---|---|
#6366f1 | #fb7185 | 1.65 |
#fb7185 | #cbd5e1 | 1.81 |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #fde047 | 1.24 |
#fff7ed | #cbd5e1 | 1.39 |
#f5f5f5 | #fde047 | 1.2 |
Палітра із зображення Design System Component Guide png
Експортувати палітру
Завантажте "Design System Component Guide" у кількох форматах для безшовної інтеграції у ваші дизайнерські проєкти.
Доступні формати: