Created at 09/19/2025 22:06
Webflow Semantic Gradient UI
- Hyperlink Indigo#4f46e5
- Markup Coral#ff9f80
- Responsive Blue#0ea5e9
- Component White#fdfdfd
- Outline Gray#9ca3af
- SEO Green#22c55e
- Metadata Yellow#fcd34d
The palette consists of Semi dark, Light colors. Accent colors Markup Coral #ff9f80 and Responsive Blue #0ea5e9. Palette has Cool, Warm, Neutral colors temperature.
By lightness, this palette runs from #22C55E (darkest) to #FDFDFD (lightest). The lightness range is moderate.
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): #0EA5E9, #22C55E, #4F46E5, #9CA3AF, #FCD34D, #FDFDFD, #FF9F80
Palette Webflow Semantic Gradient UI has combination of 7 codes colors:
HEX: #4f46e5, RGB: (79, 70, 229); HEX: #ff9f80, RGB: (255, 159, 128); HEX: #0ea5e9, RGB: (14, 165, 233)
HEX: #fdfdfd, RGB: (253, 253, 253); HEX: #9ca3af, RGB: (156, 163, 175); HEX: #22c55e, RGB: (34, 197, 94)
HEX: #fcd34d, RGB: (252, 211, 77)
Simplified version of palette colors
Tint of slateblue, Shade of lightsalmon, Tint of deepskyblue, Tint of White, Tint of darkgrey, Tint of limegreen, Shade of gold
Color scheme was created by colorday
Colors codes in palette
Webflow Semantic Gradient UI color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #4f46e5 | #4f46e5 | RGB(79, 70, 229) | Hyperlink Indigo | — |
| #ff9f80 | #ff9f80 | RGB(255, 159, 128) | Markup Coral | — |
| #0ea5e9 | #0ea5e9 | RGB(14, 165, 233) | Responsive Blue | — |
| #fdfdfd | #fdfdfd | RGB(253, 253, 253) | Component White | Brilliance |
| #9ca3af | #9ca3af | RGB(156, 163, 175) | Outline Gray | — |
| #22c55e | #22c55e | RGB(34, 197, 94) | SEO Green | — |
| #fcd34d | #fcd34d | RGB(252, 211, 77) | Metadata Yellow | — |
Color Palette Contrast
12 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#ff9f80 | #0ea5e9 | 1.38 |
#ff9f80 | #fdfdfd | 1.96 |
#ff9f80 | #9ca3af | 1.27 |
#ff9f80 | #22c55e | 1.14 |
#ff9f80 | #fcd34d | 1.38 |
#0ea5e9 | #9ca3af | 1.09 |
Image palette Webflow Semantic Gradient UI png
Export Palette
Download the "Webflow Semantic Gradient UI" in multiple formats for seamless integration into your design projects.
Available formats: