Loading...
Created at 06/08/2025 14:42
CSS Grid Visual Kit Studio
- Template Cream#fff5e1
- AutoFlow Teal#3ddad7
- Gutter Coral#ff6f61
- GridTrack Plum#9b5de5
- Media Query Navy#1d3557
- Z-Index Ivory#f9f6ee
The palette consists of Light colors. Accent colors Template Cream #fff5e1 and GridTrack Plum #9b5de5. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #1D3557 (darkest) to #F9F6EE (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): #1D3557, #3DDAD7, #9B5DE5, #F9F6EE, #FF6F61, #FFF5E1
Palette CSS Grid Visual Kit Studio has combination of 6 codes colors:
HEX: #fff5e1, RGB: (255, 245, 225); HEX: #3ddad7, RGB: (61, 218, 215); HEX: #ff6f61, RGB: (255, 111, 97)
HEX: #9b5de5, RGB: (155, 93, 229); HEX: #1d3557, RGB: (29, 53, 87); HEX: #f9f6ee, RGB: (249, 246, 238)
Simplified version of palette colors
Shade of oldlace, Shade of mediumturquoise, Tint of salmon, Tint of mediumpurple, Shade of midnightblue, Tint of floralwhite
Color scheme was created by hex
Colors codes in palette
CSS Grid Visual Kit Studio color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #fff5e1 | #fff5e1 | RGB(255, 245, 225) | Template Cream | — |
| #3ddad7 | #3ddad7 | RGB(61, 218, 215) | AutoFlow Teal | — |
| #ff6f61 | #ff6f61 | RGB(255, 111, 97) | Gutter Coral | Living Coral |
| #9b5de5 | #9b5de5 | RGB(155, 93, 229) | GridTrack Plum | — |
| #1d3557 | #1d3557 | RGB(29, 53, 87) | Media Query Navy | — |
| #f9f6ee | #f9f6ee | RGB(249, 246, 238) | Z-Index Ivory | — |
Color Palette Contrast
5 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#fff5e1 | #3ddad7 | 1.58 |
#fff5e1 | #f9f6ee | 1 |
#3ddad7 | #ff6f61 | 1.58 |
#3ddad7 | #f9f6ee | 1.59 |
#ff6f61 | #9b5de5 | 1.51 |
Image palette CSS Grid Visual Kit Studio png
Export Palette
Download the "CSS Grid Visual Kit Studio" in multiple formats for seamless integration into your design projects.
Available formats: