Web Components Design System for Open UI
- Component Frame White#f9fafb
- State Flow Teal#00c2a8
- Atomic Indigo#6a63ff
- Reusable Gray#d1d5db
- Slot Highlight Pink#f48fb1
- Variant Yellow#fce77d
Создано 07/17/2025 08:24
Палитра содержит светлый цвета. Акцентные цвета State Flow Teal #00c2a8 и Variant Yellow #fce77d. Палитра имеет цветовую температуру Нейтральный, Холодный, Теплый.
По светлоте палитра тянется от #6A63FF (самый тёмный) до #F9FAFB (самый светлый). Диапазон светлоты умеренный.
В целом насыщенность выглядит яркой (высокая хрома) — 67% цветов насыщенные.
Некоторые цвета находятся почти напротив друг друга на цветовом круге, что даёт палитре комплементарный контраст.
В целом температура смещена в сторону холодного (3 из 6).
HEX-коды (по возрастанию): #00C2A8, #6A63FF, #D1D5DB, #F48FB1, #F9FAFB, #FCE77D
Палитра Web Components Design System for Open UI содержит комбинацию из 6 кодов цветов:
HEX: #f9fafb, RGB: (249, 250, 251); HEX: #00c2a8, RGB: (0, 194, 168); HEX: #6a63ff, RGB: (106, 99, 255)
HEX: #d1d5db, RGB: (209, 213, 219); HEX: #f48fb1, RGB: (244, 143, 177); HEX: #fce77d, RGB: (252, 231, 125)
Упрощенная версия цветов палитры
Светлый оттенок Дымчато-белый, Тёмный оттенок Умеренный аквамариновый, Тёмный оттенок Умеренный аспидно-синий, Светлый оттенок Светло-серый, Светлый оттенок Бледный фиолетово-красный, Светлый оттенок Хаки
Цветовая схема создана автором hex
Коды цветов в палитре
Web Components Design System for Open UI коды цветов HEX, RGB информация в таблице
| Цвет | HEX | RGB | Название | Альтернативное название |
|---|---|---|---|---|
| #f9fafb | #f9fafb | RGB(249, 250, 251) | Component Frame White | — |
| #00c2a8 | #00c2a8 | RGB(0, 194, 168) | State Flow Teal | — |
| #6a63ff | #6a63ff | RGB(106, 99, 255) | Atomic Indigo | — |
| #d1d5db | #d1d5db | RGB(209, 213, 219) | Reusable Gray | — |
| #f48fb1 | #f48fb1 | RGB(244, 143, 177) | Slot Highlight Pink | — |
| #fce77d | #fce77d | RGB(252, 231, 125) | Variant Yellow | — |
Контраст палитры цветов
10 цветовых пары имеют низкий контраст и требуют улучшения, что может повлиять на читаемость.
| Цвет текста | Цвет фона | Коэффициент контрастности |
|---|---|---|
#f9fafb | #d1d5db | 1.41 |
#f9fafb | #fce77d | 1.19 |
#00c2a8 | #6a63ff | 1.91 |
#00c2a8 | #d1d5db | 1.53 |
#00c2a8 | #f48fb1 | 1.01 |
#00c2a8 | #fce77d | 1.81 |
Палитра из изображения Web Components Design System for Open UI png
Экспорт палитры
Скачайте "Web Components Design System for Open UI" в нескольких форматах для удобной интеграции в ваши дизайнерские проекты.
Доступные форматы: