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
Created at 06/08/2025 14:42
The palette consists of Light, Semi dark 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) — 67% of colors are vivid.
Some colors sit roughly opposite each other on the color wheel, giving the palette complementary contrast.
Overall temperature among swatches leans cool (3 of 6).
HEX codes (sorted): #1D3557, #3DDAD7, #9B5DE5, #F9F6EE, #FF6F61, #FFF5E1
Palette CSS Grid Visual Kit Studio combines 6 color codes:
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
Tint of Old Lace, Tint of Medium Turquoise, Shade of Salmon, Shade of Medium Purple, Tint of Midnight Blue, Shade of Floral White
Color scheme was created by hex
Color 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: