Frontend Component Design System
- Component Beige#f5f3e7
- Element Rose#ffb4a2
- Interactive Gray#d6d6d6
- Primary Blue#3d5a80
- Layer Mint#b8f2e6
- Focus Black#1c1c1c
Створено 07/28/2025 11:07
Палітра містить світлий, напівтемний, темний кольори. Акцентні кольори Element Rose #ffb4a2 та Layer Mint #b8f2e6. Палітра має температуру кольорів Нейтральний, Теплий, Холодний.
За світлістю палітра сягає від #1C1C1C (найтемніший) до #F5F3E7 (найсвітліший). Діапазон світлості широкий.
Насиченість змішана — 2 приглушених і 2 яскравих із 6 кольорів.
Деякі кольори розташовані майже навпроти один одного на колірному колі, що дає палітрі комплементарний контраст.
Загалом температура зміщена в бік холодного (2 із 6).
HEX-коди (відсортовано): #1C1C1C, #3D5A80, #B8F2E6, #D6D6D6, #F5F3E7, #FFB4A2
Палітра Frontend Component Design System містить комбінацію з 6 кодів кольорів :
HEX: #f5f3e7, RGB: (245, 243, 231); HEX: #ffb4a2, RGB: (255, 180, 162); HEX: #d6d6d6, RGB: (214, 214, 214)
HEX: #3d5a80, RGB: (61, 90, 128); HEX: #b8f2e6, RGB: (184, 242, 230); HEX: #1c1c1c, RGB: (28, 28, 28)
Спрощений варіант палітри кольорів
Темний відтінок Квітково-білий, Світлий відтінок Світло-лососевий, Світлий відтінок Світло-сірий, Світлий відтінок Темний сланцево-синій, Світлий відтінок Блідо-бірюзовий, Світлий відтінок Чорний
Кольорова схема створена автором coolor
Коди кольорів у палітрі
Frontend Component Design System коди кольорів HEX, RGB інформація у таблиці
| Колір | HEX | RGB | Назва | Альтернативна назва |
|---|---|---|---|---|
| #f5f3e7 | #f5f3e7 | RGB(245, 243, 231) | Component Beige | — |
| #ffb4a2 | #ffb4a2 | RGB(255, 180, 162) | Element Rose | — |
| #d6d6d6 | #d6d6d6 | RGB(214, 214, 214) | Interactive Gray | Silver Medal |
| #3d5a80 | #3d5a80 | RGB(61, 90, 128) | Primary Blue | — |
| #b8f2e6 | #b8f2e6 | RGB(184, 242, 230) | Layer Mint | — |
| #1c1c1c | #1c1c1c | RGB(28, 28, 28) | Focus Black | Gray11 |
Контраст палітри кольорів
6 пари кольорів мають низький контраст і потребують покращення, що може вплинути на зручність читання.
| Колір тексту | Колір фону | Коефіцієнт контрастності |
|---|---|---|
#f5f3e7 | #ffb4a2 | 1.53 |
#f5f3e7 | #d6d6d6 | 1.3 |
#f5f3e7 | #b8f2e6 | 1.11 |
#ffb4a2 | #d6d6d6 | 1.17 |
#ffb4a2 | #b8f2e6 | 1.37 |
#d6d6d6 | #b8f2e6 | 1.16 |
Палітра із зображення Frontend Component Design System png
Експортувати палітру
Завантажте "Frontend Component Design System" у кількох форматах для безшовної інтеграції у ваші дизайнерські проєкти.
Доступні формати: