Tailwind Sky: 11 Shades, Contrast & Codes

Tailwind CSS 4.3.3

sky: current colors

11 shades with exact official OKLCH values. Use bg-sky-500, text-sky-500 or border-sky-500 in Tailwind. Wide-gamut colors are preserved; these are not the v3 hex values.

Color	Exact OKLCH	CSS variable
sky-50	`oklch(97.7% 0.013 236.62)`	`--color-sky-50`
sky-100	`oklch(95.1% 0.026 236.824)`	`--color-sky-100`
sky-200	`oklch(90.1% 0.058 230.902)`	`--color-sky-200`
sky-300	`oklch(82.8% 0.111 230.318)`	`--color-sky-300`
sky-400	`oklch(74.6% 0.16 232.661)`	`--color-sky-400`
sky-500	`oklch(68.5% 0.169 237.323)`	`--color-sky-500`
sky-600	`oklch(58.8% 0.158 241.966)`	`--color-sky-600`
sky-700	`oklch(50% 0.134 242.749)`	`--color-sky-700`
sky-800	`oklch(44.3% 0.11 240.79)`	`--color-sky-800`
sky-900	`oklch(39.1% 0.09 240.876)`	`--color-sky-900`
sky-950	`oklch(29.3% 0.066 243.157)`	`--color-sky-950`

Source: Tailwind CSS 4.3.3 theme.css (MIT). Values are pinned to this release. Older v3 reference values below are kept separately for existing projects.

Scale

Every shade, 50 to 950

Each shade has a page of its own. Under each, white and black text on it; a bold figure passes 4.5:1.

50#F0F9FF
White
1.06
Black
19.69
100#E0F2FE
White
1.14
Black
18.30
200#BAE6FD
White
1.32
Black
15.82
300#7DD3FC
White
1.66
Black
12.59
400#38BDF8
White
2.14
Black
9.80
500#0EA5E9
White
2.77
Black
7.57
600#0284C7
White
4.09
Black
5.12
700#0369A1
White
5.93
Black
3.53
800#075985
White
7.56
Black
2.77
900#0C4A6E
White
9.45
Black
2.22
950#082F49
White
13.87
Black
1.51

Values

Hex, RGB and OKLCH values

The Tailwind CSS v3.4 values, with the contrast of white and black text on each shade.

Shade	HEX	RGB	OKLCH	White text	Black text
sky-50	`#F0F9FF`	`rgb(240, 249, 255)`	`oklch(0.977 0.012 236.6)`	1.06	19.69
sky-100	`#E0F2FE`	`rgb(224, 242, 254)`	`oklch(0.951 0.025 236.8)`	1.14	18.30
sky-200	`#BAE6FD`	`rgb(186, 230, 253)`	`oklch(0.901 0.055 230.9)`	1.32	15.82
sky-300	`#7DD3FC`	`rgb(125, 211, 252)`	`oklch(0.828 0.101 230.3)`	1.66	12.59
sky-400	`#38BDF8`	`rgb(56, 189, 248)`	`oklch(0.754 0.139 232.7)`	2.14	9.80
sky-500	`#0EA5E9`	`rgb(14, 165, 233)`	`oklch(0.685 0.148 237.3)`	2.77	7.57
sky-600	`#0284C7`	`rgb(2, 132, 199)`	`oklch(0.588 0.139 242.0)`	4.09	5.12
sky-700	`#0369A1`	`rgb(3, 105, 161)`	`oklch(0.500 0.119 242.7)`	5.93	3.53
sky-800	`#075985`	`rgb(7, 89, 133)`	`oklch(0.443 0.100 240.8)`	7.56	2.77
sky-900	`#0C4A6E`	`rgb(12, 74, 110)`	`oklch(0.391 0.085 240.9)`	9.45	2.22
sky-950	`#082F49`	`rgb(8, 47, 73)`	`oklch(0.293 0.063 243.2)`	13.87	1.51

Legibility

Which shades pass on each other

Every shade as text on every other shade. 32 of 110 pairings pass 4.5:1 for body text, and 18 more pass 3:1 for large text.

Text shade, then background shade	50	100	200	300	400	500	600	700	800	900	950
50	same shade	1.07	1.24	1.56	2.00	2.59	3.84	5.56	7.09	8.87	13.01
100	1.07	same shade	1.15	1.45	1.86	2.41	3.56	5.17	6.59	8.24	12.09
200	1.24	1.15	same shade	1.25	1.61	2.08	3.08	4.47	5.69	7.12	10.45
300	1.56	1.45	1.25	same shade	1.28	1.66	2.45	3.55	4.53	5.67	8.32
400	2.00	1.86	1.61	1.28	same shade	1.29	1.91	2.76	3.53	4.41	6.47
500	2.59	2.41	2.08	1.66	1.29	same shade	1.47	2.14	2.72	3.41	5.00
600	3.84	3.56	3.08	2.45	1.91	1.47	same shade	1.44	1.84	2.30	3.38
700	5.56	5.17	4.47	3.55	2.76	2.14	1.44	same shade	1.27	1.59	2.33
800	7.09	6.59	5.69	4.53	3.53	2.72	1.84	1.27	same shade	1.25	1.83
900	8.87	8.24	7.12	5.67	4.41	3.41	2.30	1.59	1.25	same shade	1.46
950	13.01	12.09	10.45	8.32	6.47	5.00	3.38	2.33	1.83	1.46	same shade

Rows are the text shade, columns the background. A bold figure on a tinted cell passes 4.5:1 for body text; a plain one passes 3:1 for large text only; a faint one fails.

Color vision

The scale with color blindness

The same eleven shades as seen with each color vision deficiency. Lightness keeps a ramp in order even where its hue collapses.

Simulated with Machado et al. (2009) at full severity, in linear light.

What each type sees

Typical vision

Closest neighbors: 50 and 100, ΔE2000 3.9
Protanopia

Closest neighbors: 50 and 100, ΔE2000 3.9
Deuteranopia

Closest neighbors: 50 and 100, ΔE2000 3.8
Tritanopia

Closest neighbors: 300 and 400, ΔE2000 4.2
Achromatopsia

Closest neighbors: 50 and 100, ΔE2000 1.9

Code

Design tokens

The whole family in six formats, ready to paste.

CSS custom properties

:root {
  --color-sky-50: #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #075985;
  --color-sky-900: #0c4a6e;
  --color-sky-950: #082f49;
}

Tailwind config

// tailwind.config.js — sky is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        sky: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
};

Tailwind v4 theme

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own sky; these pin the v3 values. */
  --color-sky-50: oklch(0.977 0.012 236.6);
  --color-sky-100: oklch(0.951 0.025 236.8);
  --color-sky-200: oklch(0.901 0.055 230.9);
  --color-sky-300: oklch(0.828 0.101 230.3);
  --color-sky-400: oklch(0.754 0.139 232.7);
  --color-sky-500: oklch(0.685 0.148 237.3);
  --color-sky-600: oklch(0.588 0.139 242.0);
  --color-sky-700: oklch(0.500 0.119 242.7);
  --color-sky-800: oklch(0.443 0.100 240.8);
  --color-sky-900: oklch(0.391 0.085 240.9);
  --color-sky-950: oklch(0.293 0.063 243.2);
}

Design tokens (W3C DTCG)

{
  "color": {
    "sky": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9412, 0.9765, 1],
          "hex": "#f0f9ff"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8784, 0.949, 0.9961],
          "hex": "#e0f2fe"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7294, 0.902, 0.9922],
          "hex": "#bae6fd"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4902, 0.8275, 0.9882],
          "hex": "#7dd3fc"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2196, 0.7412, 0.9725],
          "hex": "#38bdf8"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0549, 0.6471, 0.9137],
          "hex": "#0ea5e9"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0078, 0.5176, 0.7804],
          "hex": "#0284c7"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0118, 0.4118, 0.6314],
          "hex": "#0369a1"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0275, 0.349, 0.5216],
          "hex": "#075985"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0471, 0.2902, 0.4314],
          "hex": "#0c4a6e"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0314, 0.1843, 0.2863],
          "hex": "#082f49"
        }
      }
    }
  }
}

SwiftUI colors

import SwiftUI

enum Palette {
    static let sky50 = Color(.sRGB, red: 0.941, green: 0.976, blue: 1.000, opacity: 1)
    static let sky100 = Color(.sRGB, red: 0.878, green: 0.949, blue: 0.996, opacity: 1)
    static let sky200 = Color(.sRGB, red: 0.729, green: 0.902, blue: 0.992, opacity: 1)
    static let sky300 = Color(.sRGB, red: 0.490, green: 0.827, blue: 0.988, opacity: 1)
    static let sky400 = Color(.sRGB, red: 0.220, green: 0.741, blue: 0.973, opacity: 1)
    static let sky500 = Color(.sRGB, red: 0.055, green: 0.647, blue: 0.914, opacity: 1)
    static let sky600 = Color(.sRGB, red: 0.008, green: 0.518, blue: 0.780, opacity: 1)
    static let sky700 = Color(.sRGB, red: 0.012, green: 0.412, blue: 0.631, opacity: 1)
    static let sky800 = Color(.sRGB, red: 0.027, green: 0.349, blue: 0.522, opacity: 1)
    static let sky900 = Color(.sRGB, red: 0.047, green: 0.290, blue: 0.431, opacity: 1)
    static let sky950 = Color(.sRGB, red: 0.031, green: 0.184, blue: 0.286, opacity: 1)
}

Jetpack Compose colors

import androidx.compose.ui.graphics.Color

object Palette {
    val Sky50 = Color(0xFFF0F9FF)
    val Sky100 = Color(0xFFE0F2FE)
    val Sky200 = Color(0xFFBAE6FD)
    val Sky300 = Color(0xFF7DD3FC)
    val Sky400 = Color(0xFF38BDF8)
    val Sky500 = Color(0xFF0EA5E9)
    val Sky600 = Color(0xFF0284C7)
    val Sky700 = Color(0xFF0369A1)
    val Sky800 = Color(0xFF075985)
    val Sky900 = Color(0xFF0C4A6E)
    val Sky950 = Color(0xFF082F49)
}

Families

Other Tailwind families

The rest of the Tailwind CSS v3.4 palette, in the order Tailwind lists it.

Tailwind sky 11 shades, 50 to 950