HCHTML Color

Shades of blue

Blue is the most common brand and link color on the web. It reads as trustworthy and calm, and pure #0000FF is surprisingly dark, with an OKLCH lightness of only 0.45.

blue · #0000FF

16 blue color names

Every CSS named color in the blue family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

aliceblue#f0f8ffrgb(240 248 255)oklch(0.975 0.013 244.3)powderblue#b0e0e6rgb(176 224 230)oklch(0.875 0.05 205.7)lightblue#add8e6rgb(173 216 230)oklch(0.856 0.049 219.7)lightskyblue#87cefargb(135 206 250)oklch(0.821 0.095 236.8)skyblue#87ceebrgb(135 206 235)oklch(0.815 0.082 225.8)lightsteelblue#b0c4dergb(176 196 222)oklch(0.814 0.043 255)deepskyblue#00bfffrgb(0 191 255)oklch(0.755 0.153 231.6)cornflowerblue#6495edrgb(100 149 237)oklch(0.675 0.141 261.3)dodgerblue#1e90ffrgb(30 144 255)oklch(0.652 0.19 253.2)steelblue#4682b4rgb(70 130 180)oklch(0.588 0.099 245.7)royalblue#4169e1rgb(65 105 225)oklch(0.56 0.188 266.4)blue#0000ffrgb(0 0 255)oklch(0.452 0.313 264.1)mediumblue#0000cdrgb(0 0 205)oklch(0.383 0.266 264.1)midnightblue#191970rgb(25 25 112)oklch(0.288 0.144 272.8)darkblue#00008brgb(0 0 139)oklch(0.288 0.199 264.1)navy#000080rgb(0 0 128)oklch(0.271 0.188 264.1)

Tailwind blue scales

The Tailwind v4 default palette families closest to blue, 50 to 950.

Using blue in a UI

Blue makes an easy primary because its mid and dark shades pass contrast on white. Shift slightly toward indigo for a more modern feel, or toward sky for something lighter.

blue-colors.css
:root {
  --aliceblue: oklch(0.975 0.013 244.3); /* #f0f8ff */
  --powderblue: oklch(0.875 0.05 205.7); /* #b0e0e6 */
  --lightblue: oklch(0.856 0.049 219.7); /* #add8e6 */
  --lightskyblue: oklch(0.821 0.095 236.8); /* #87cefa */
  --skyblue: oklch(0.815 0.082 225.8); /* #87ceeb */
  --lightsteelblue: oklch(0.814 0.043 255); /* #b0c4de */
  --deepskyblue: oklch(0.755 0.153 231.6); /* #00bfff */
  --cornflowerblue: oklch(0.675 0.141 261.3); /* #6495ed */
  --dodgerblue: oklch(0.652 0.19 253.2); /* #1e90ff */
  --steelblue: oklch(0.588 0.099 245.7); /* #4682b4 */
  --royalblue: oklch(0.56 0.188 266.4); /* #4169e1 */
  --blue: oklch(0.452 0.313 264.1); /* #0000ff */
  --mediumblue: oklch(0.383 0.266 264.1); /* #0000cd */
  --midnightblue: oklch(0.288 0.144 272.8); /* #191970 */
  --darkblue: oklch(0.288 0.199 264.1); /* #00008b */
  --navy: oklch(0.271 0.188 264.1); /* #000080 */
}
Generate a blue scaleBuild a palette

Frequently asked questions

What is the hex code for blue?
The CSS keyword blue is #0000FF, which is rgb(0 0 255) or oklch(0.452 0.313 264.1). Tailwind's blue-500 is #2B7FFF, a softer blue that many design systems use instead.
How many shades of blue have CSS color names?
This page lists 16 CSS named colors in the blue family, from aliceblue (#F0F8FF) at the light end to navy (#000080) at the dark end. Every one can be used directly in CSS by name.
What colors go well with blue?
Blue pairs well with orange, yellow and white. For a guaranteed match, open any blue shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a blue color scale for my design system?
Pick a blue you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenTealPurplePinkBrownGrayWhite