Created at 06/16/2025 20:00
Modern CSS Utility Framework
- Flexbox Blue#5ba3ff
- Z-Index Zinc#c4c4c4
- Tailwind Tangerine#ff9966
- Breakpoint Lilac#d7bfff
- Container Ivory#f8f8f8
- Hover Slate#6d7278
- Grid Forest#58c49a
The palette consists of Light colors. Accent colors Tailwind Tangerine #ff9966 and Breakpoint Lilac #d7bfff. Palette has Cool, Neutral, Warm colors temperature.
By lightness, this palette runs from #6D7278 (darkest) to #F8F8F8 (lightest). The lightness range is moderate.
Saturation is mixed — some muted swatches and some vivid accents.
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): #58C49A, #5BA3FF, #6D7278, #C4C4C4, #D7BFFF, #F8F8F8, #FF9966
Palette Modern CSS Utility Framework has combination of 7 codes colors:
HEX: #5ba3ff, RGB: (91, 163, 255); HEX: #c4c4c4, RGB: (196, 196, 196); HEX: #ff9966, RGB: (255, 153, 102)
HEX: #d7bfff, RGB: (215, 191, 255); HEX: #f8f8f8, RGB: (248, 248, 248); HEX: #6d7278, RGB: (109, 114, 120)
HEX: #58c49a, RGB: (88, 196, 154)
Simplified version of palette colors
Shade of cornflowerblue, Shade of Silver, Tint of lightsalmon, Shade of plum, Shade of whitesmoke, Shade of dimgrey, Tint of mediumaquamarine
Color scheme was created by palettespicker
Colors codes in palette
Modern CSS Utility Framework color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #5ba3ff | #5ba3ff | RGB(91, 163, 255) | Flexbox Blue | — |
| #c4c4c4 | #c4c4c4 | RGB(196, 196, 196) | Z-Index Zinc | Weathered Stone |
| #ff9966 | #ff9966 | RGB(255, 153, 102) | Tailwind Tangerine | Atomic Tangerine |
| #d7bfff | #d7bfff | RGB(215, 191, 255) | Breakpoint Lilac | — |
| #f8f8f8 | #f8f8f8 | RGB(248, 248, 248) | Container Ivory | — |
| #6d7278 | #6d7278 | RGB(109, 114, 120) | Hover Slate | — |
| #58c49a | #58c49a | RGB(88, 196, 154) | Grid Forest | — |
Color Palette Contrast
14 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#5ba3ff | #c4c4c4 | 1.48 |
#5ba3ff | #ff9966 | 1.23 |
#5ba3ff | #d7bfff | 1.57 |
#5ba3ff | #6d7278 | 1.87 |
#5ba3ff | #58c49a | 1.2 |
#c4c4c4 | #ff9966 | 1.2 |
Image palette Modern CSS Utility Framework png
Export Palette
Download the "Modern CSS Utility Framework" in multiple formats for seamless integration into your design projects.
Available formats: