Створено 07/19/2025 07:29
Webflow Responsive Design System
- Gridline Gray#d4d4d8
- Flexbox Blue#93c5fd
- Container Cream#fff7ed
- Breakpoint Black#1f2937
- Interaction Lime#a3e635
- CMS Pink#f472b6
- Symbol Slate#64748b
Палітра містить світлий, темний кольори. Акцентні кольори Flexbox Blue #93c5fd та Container Cream #fff7ed. Палітра має температуру кольорів Нейтральний, Холодний, Теплий.
За світлістю палітра сягає від #1F2937 (найтемніший) до #FFF7ED (найсвітліший). Діапазон світлості широкий.
Загалом насиченість здається яскравою (висока хрома).
Деякі пари відтінків близькі до комплементарних позицій — можливе читання як комплементарний контраст (евристика).
Загалом температура зміщена в бік холодного.
HEX-коди (відсортовано): #1F2937, #64748B, #93C5FD, #A3E635, #D4D4D8, #F472B6, #FFF7ED
Палітра Webflow Responsive Design System містить комбінацію з 7 кодів кольорів :
HEX: #d4d4d8, RGB: (212, 212, 216); HEX: #93c5fd, RGB: (147, 197, 253); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #1f2937, RGB: (31, 41, 55); HEX: #a3e635, RGB: (163, 230, 53); HEX: #f472b6, RGB: (244, 114, 182)
HEX: #64748b, RGB: (100, 116, 139)
Спрощений варіант палітри кольорів
Відтінок lightgrey, Відтінок lightskyblue, Відтінок floralwhite, Відтінок Чорний, Відтінок Жовтозелений, Відтінок hotpink, Відтінок slategrey
Кольорова схема створена автором colorslib
Коди кольорів у палітрі
Webflow Responsive Design System коди кольорів HEX, RGB інформація у таблиці
| Колір | HEX | RGB | Назва | Альтернативна назва |
| #d4d4d8 | #d4d4d8 | RGB(212, 212, 216) | Gridline Gray | — |
| #93c5fd | #93c5fd | RGB(147, 197, 253) | Flexbox Blue | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Container Cream | Fatback |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Breakpoint Black | — |
| #a3e635 | #a3e635 | RGB(163, 230, 53) | Interaction Lime | — |
| #f472b6 | #f472b6 | RGB(244, 114, 182) | CMS Pink | — |
| #64748b | #64748b | RGB(100, 116, 139) | Symbol Slate | — |
Контраст палітри кольорів
10 пари кольорів мають низький контраст і потребують покращення, що може вплинути на зручність читання.
| Колір тексту | Колір фону | Коефіцієнт контрастності |
#d4d4d8 | #93c5fd | 1.22 |
#d4d4d8 | #fff7ed | 1.39 |
#d4d4d8 | #a3e635 | 1.02 |
#d4d4d8 | #f472b6 | 1.79 |
#93c5fd | #fff7ed | 1.69 |
#93c5fd | #a3e635 | 1.19 |
Зображення палітри Webflow Responsive Design System png
Експортувати палітру
Завантажте "Webflow Responsive Design System" у кількох форматах для безшовної інтеграції у ваші дизайнерські проєкти.
Доступні формати: