Generate Palette
  1. Colors palettes
  2. Tailwind Utility First CSS Atomic Design Palette
Created at 03/27/2026 21:02
bycolorhunt
  6

Tailwind Utility First CSS Atomic Design Palette

  • Utility Blue
    #3b82f6
  • Atomic Green
    #22c55e
  • Variant Indigo
    #6366f1
  • Accent Pink
    #f472b6
  • Neutral Light
    #f1f5f9
  • Base Dark
    #0f172a
  • Border Gray
    #cbd5e1
The palette consists of Light, Dark colors. Accent colors Utility Blue #3b82f6 and Accent Pink #f472b6. Palette has Cool, Warm, Neutral colors temperature.

By lightness, this palette runs from #0F172A (darkest) to #F1F5F9 (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): #0F172A, #22C55E, #3B82F6, #6366F1, #CBD5E1, #F1F5F9, #F472B6

Palette Tailwind Utility First CSS Atomic Design Palette has combination of 7 codes colors:
HEX: #3b82f6, RGB: (59, 130, 246); HEX: #22c55e, RGB: (34, 197, 94); HEX: #6366f1, RGB: (99, 102, 241)
HEX: #f472b6, RGB: (244, 114, 182); HEX: #f1f5f9, RGB: (241, 245, 249); HEX: #0f172a, RGB: (15, 23, 42)
HEX: #cbd5e1, RGB: (203, 213, 225)
Simplified version of palette colors
Tint of dodgerblue, Tint of limegreen, Tint of mediumslateblue, Shade of hotpink, Tint of aliceblue, Shade of Black, Shade of lightgrey
Color scheme was created by colorhunt

Colors codes in palette

Tailwind Utility First CSS Atomic Design Palette color codes HEX, RGB information in table

Color HEX RGB Name Alternative name
#3b82f6 #3b82f6 RGB(59, 130, 246)Utility Blue—
#22c55e #22c55e RGB(34, 197, 94)Atomic Green—
#6366f1 #6366f1 RGB(99, 102, 241)Variant Indigo—
#f472b6 #f472b6 RGB(244, 114, 182)Accent Pink—
#f1f5f9 #f1f5f9 RGB(241, 245, 249)Neutral Light—
#0f172a #0f172a RGB(15, 23, 42)Base Dark—
#cbd5e1 #cbd5e1 RGB(203, 213, 225)Border Gray—

Color Palette Contrast

9 color pairs have low contrast and need improvement which may impact readability.
Text Color Background Color Contrast Ratio
#3b82f6
#22c55e
1.61
#3b82f6
#6366f1
1.21
#3b82f6
#f472b6
1.38
#22c55e
#6366f1
1.96
#22c55e
#f472b6
1.16
#22c55e
#cbd5e1
1.53

Image palette Tailwind Utility First CSS Atomic Design Palette png

Tailwind Utility First CSS Atomic Design Palette - #570638
 Download image