Створено 07/16/2025 11:49
UX-Optimized UI Kit for React
- Component Cream#f5f5f5
- Focus Indigo#3d348b
- CTA Red#e63946
- Background Sand#fff8e1
- Text Gray#4a4a4a
- Surface Green#a8dadc
Палітра містить світлий, напівтемний кольори. Акцентні кольори Focus Indigo #3d348b та Background Sand #fff8e1. Палітра має температуру кольорів Нейтральний, Холодний, Теплий.
За світлістю палітра сягає від #4A4A4A (найтемніший) до #F5F5F5 (найсвітліший). Діапазон світлості широкий.
Насиченість змішана — є приглушені й більш яскраві акценти.
Деякі пари відтінків близькі до комплементарних позицій — можливе читання як комплементарний контраст (евристика).
Загалом температура зміщена в бік холодного.
HEX-коди (відсортовано): #3D348B, #4A4A4A, #A8DADC, #E63946, #F5F5F5, #FFF8E1
Палітра UX-Optimized UI Kit for React містить комбінацію з 6 кодів кольорів :
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #3d348b, RGB: (61, 52, 139); HEX: #e63946, RGB: (230, 57, 70)
HEX: #fff8e1, RGB: (255, 248, 225); HEX: #4a4a4a, RGB: (74, 74, 74); HEX: #a8dadc, RGB: (168, 218, 220)
Спрощений варіант палітри кольорів
Відтінок darkslateblue, Відтінок crimson, Відтінок cornsilk, Відтінок dimgrey, Відтінок powderblue
Кольорова схема створена автором hex
Коди кольорів у палітрі
UX-Optimized UI Kit for React коди кольорів HEX, RGB інформація у таблиці
| Колір | HEX | RGB | Назва | Альтернативна назва |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Component Cream | White Smoke |
| #3d348b | #3d348b | RGB(61, 52, 139) | Focus Indigo | — |
| #e63946 | #e63946 | RGB(230, 57, 70) | CTA Red | — |
| #fff8e1 | #fff8e1 | RGB(255, 248, 225) | Background Sand | Still Morning |
| #4a4a4a | #4a4a4a | RGB(74, 74, 74) | Text Gray | Gray29 |
| #a8dadc | #a8dadc | RGB(168, 218, 220) | Surface Green | — |
Контраст палітри кольорів
4 пари кольорів мають низький контраст і потребують покращення, що може вплинути на зручність читання.
| Колір тексту | Колір фону | Коефіцієнт контрастності |
#f5f5f5 | #fff8e1 | 1.02 |
#f5f5f5 | #a8dadc | 1.4 |
#3d348b | #4a4a4a | 1.14 |
#fff8e1 | #a8dadc | 1.43 |
Зображення палітри UX-Optimized UI Kit for React png
Експортувати палітру
Завантажте "UX-Optimized UI Kit for React" у кількох форматах для безшовної інтеграції у ваші дизайнерські проєкти.
Доступні формати: