Created at 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
The palette consists of Light, Dark colors. Accent colors Flexbox Blue #93c5fd and Container Cream #fff7ed. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #1F2937 (darkest) to #FFF7ED (lightest). The lightness range is wide.
Overall saturation feels vivid (higher chroma).
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #1F2937, #64748B, #93C5FD, #A3E635, #D4D4D8, #F472B6, #FFF7ED
Palette Webflow Responsive Design System has combination of 7 codes colors:
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)
Simplified version of palette colors
Shade of lightgrey, Tint of lightskyblue, Tint of floralwhite, Shade of Black, Shade of Yellowgreen, Shade of hotpink, Tint of slategrey
Color scheme was created by colorslib
Colors codes in palette
Webflow Responsive Design System color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #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 | — |
Color Palette Contrast
10 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#d4d4d8 | #93c5fd | 1.22 |
#d4d4d8 | #fff7ed | 1.39 |
#d4d4d8 | #a3e635 | 1.02 |
#d4d4d8 | #f472b6 | 1.79 |
#93c5fd | #fff7ed | 1.69 |
#93c5fd | #a3e635 | 1.19 |
Image palette Webflow Responsive Design System png
Export Palette
Download the "Webflow Responsive Design System" in multiple formats for seamless integration into your design projects.
Available formats: