Palette · 5 colors · Lc 8.4
Tailwind Azure System palette
Tailwind Azure System: a 5-color palette (Tailwind 50-950, Trending). HEX, RGB, HSL and OKLCH for #EFF6FF, #93C5FD, #3B82F6, #1D4ED8, #172554, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
50
#EFF6FF
300
#93C5FD
500
#3B82F6
700
#1D4ED8
950
#172554
Colors in Tailwind Azure System: HEX, RGB, HSL & OKLCH
- #EFF6FF color page →
50
#EFF6FF
- RGB
- rgb(239 246 255)
- HSL
- hsl(214 100% 97%)
- OKLCH
- oklch(0.97 0.014 254.6)
WCAG contrast: on white 1.08:1 (Fail) · on black 19.29:1 (AAA)
- #93C5FD color page →
300
#93C5FD
- RGB
- rgb(147 197 253)
- HSL
- hsl(212 96% 78%)
- OKLCH
- oklch(0.809 0.096 251.8)
WCAG contrast: on white 1.80:1 (Fail) · on black 11.64:1 (AAA)
- #3B82F6 color page →
500
#3B82F6
- RGB
- rgb(59 130 246)
- HSL
- hsl(217 91% 60%)
- OKLCH
- oklch(0.623 0.188 259.8)
WCAG contrast: on white 3.67:1 (Fail) · on black 5.70:1 (AA)
- #1D4ED8 color page →
700
#1D4ED8
- RGB
- rgb(29 78 216)
- HSL
- hsl(224 76% 48%)
- OKLCH
- oklch(0.488 0.217 264.4)
WCAG contrast: on white 6.70:1 (AA) · on black 3.13:1 (Fail)
- #172554 color page →
950
#172554
- RGB
- rgb(23 37 84)
- HSL
- hsl(226 57% 21%)
- OKLCH
- oklch(0.282 0.087 267.9)
WCAG contrast: on white 14.69:1 (AAA) · on black 1.42:1 (Fail)
Export Tailwind Azure System: CSS variables, Tailwind & JSON
CSS variables
:root {
--tailwind-azure-50: #eff6ff;
--tailwind-azure-300: #93c5fd;
--tailwind-azure-500: #3b82f6;
--tailwind-azure-700: #1d4ed8;
--tailwind-azure-950: #172554;
}Tailwind CSS v4 @theme
@theme {
--color-tailwind-azure-50: #eff6ff;
--color-tailwind-azure-300: #93c5fd;
--color-tailwind-azure-500: #3b82f6;
--color-tailwind-azure-700: #1d4ed8;
--color-tailwind-azure-950: #172554;
}JSON (DTCG tokens)
{
"tailwind-azure": {
"tailwind-azure-50": {
"$type": "color",
"$value": "#eff6ff"
},
"tailwind-azure-300": {
"$type": "color",
"$value": "#93c5fd"
},
"tailwind-azure-500": {
"$type": "color",
"$value": "#3b82f6"
},
"tailwind-azure-700": {
"$type": "color",
"$value": "#1d4ed8"
},
"tailwind-azure-950": {
"$type": "color",
"$value": "#172554"
}
}
}About this palette
Tailwind Azure System is a 5-color OKLCH-ready palette tagged tailwind 50-950, trending. Hex values: #EFF6FF, #93C5FD, #3B82F6, #1D4ED8, #172554. APCA contrast score Lc 8.4. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.
Related palettes
Shared tags, similar size and contrast.
Palettes with similar colors
Closest to Tailwind Azure System by OKLab color distance.