TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

#0F172A: Tailwind slate-900 codes, contrast and shades

By TechCompare · Updated · How we check

#0F172A is rgb(15, 23, 42), the slate-900 of Tailwind CSS 3. It's a background for light text: white scores 17.85:1 and passes AAA, while black gets only 1.18:1.

#0F172A

Color Codes

  • HEX#0F172A
  • RGBrgb(15, 23, 42)
  • HSLhsl(222, 47%, 11%)
  • OKLCHoklch(20.77% 0.0398 265.75)

Text on #0F172A

White Text

Aa

The quick brown fox jumps over the lazy dog.

17.85:1APCA Lc -106.8

  • AA Normal (4.5:1)Pass
  • AA Large (3:1)Pass
  • AAA Normal (7:1)Pass
  • AAA Large (4.5:1)Pass
Check White Text in Contrast Checker

Black Text

Aa

The quick brown fox jumps over the lazy dog.

1.18:1APCA Lc 0.0

  • AA Normal (4.5:1)Fail
  • AA Large (3:1)Fail
  • AAA Normal (7:1)Fail
  • AAA Large (4.5:1)Fail
Check Black Text in Contrast Checker

WCAG 2 ratios are the same whichever color is the text, so they also hold for #0F172A text on a white or black page. APCA is a newer method that isn't part of any WCAG standard, and a minus sign means light text on dark.

#0F172A in the Color Picker. Tweak it with HSL or OKLCH sliders, or compare it with a second color.
Edit in the full tool

#0F172A mixes 15 red, 23 green and 42 blue. Blue leads, so instead of a flat black it reads as a very dark navy. It's slate-900 in Tailwind CSS, the darkest slate until version 3.3 added a 950 step. The cards above list its codes and test white and black text on it. It's already darker than the deepest step the shade scale makes, so the scale below runs 8 steps lighter instead.

Shades

Same hue and chroma in OKLCH, with even steps of lightness. Open any shade in the Color Picker.

  1. #EAF5FF
  2. #C9D6F1
  3. #ABB7D2
  4. #8E9AB3
  5. #727D95
  6. #576179
  7. #3D475D
  8. #252E43
  9. Base#0F172A

Nearest Named Colors

  • CSS Name

    midnightblue

    #191970

    Not CloseΔE OK 0.132

  • Tailwind 4

    slate-900

    oklch(20.8% 0.042 265.755)

    Very CloseΔE OK 0.002

  • Tailwind 3

    slate-900

    #0F172A

    ExactΔE OK 0.000

About #0F172A

In Tailwind CSS 2 this color was blueGray-900, part of the extra palette you imported from tailwindcss/colors. Tailwind 3 renamed it slate-900. Version 3.3 then gave every color a 950 step, so slate-950 (#020617) now sits below it as a tinted black for very dark interfaces.

Tailwind 4 rewrote the palette in OKLCH and defines slate-900 as oklch(20.8% 0.042 265.755). The closest hex to that is #0F172B, 0.002 away from #0F172A in OKLab, far too small a change to see.

As a dark mode background, #0F172A keeps a hint of color that pure black doesn't have. White text on it scores 17.85:1. The WCAG 2 ratio is the same with the colors swapped, so #0F172A text on a white page passes AAA too. APCA, a newer method that isn't part of any WCAG standard, gives white text Lc -106.8, well past the Lc 75 it suggests for body text. For text, an off white like slate-50, #F8FAFC, keeps the same blue tint.

Verdict

Use #0F172A as a dark mode page background, a footer, a code block or a dark hero section. White text passes AAA on it at any size. Keep black text and dark icons off it, since they only reach 1.18:1.

The shade scale runs 8 steps lighter and keeps the slate's blue tint. The first step, #252E43, still gives white text 13.54:1, so it works for raised cards and panels on a #0F172A page. From #727D95 up, switch to dark text. Click a shade to open it in the Color Picker.

More Color scenarios

Hex to RGB
A hex color code is three RGB numbers written in base 16.
View details
RGB vs CMYK
Screens add light and print adds ink. See one color in both, and why a plain CMYK formula can't promise a print match.
View details
HSL color model
Hue, saturation and lightness, with three live sliders and a table of common colors in hex, RGB and HSL.
View details

Related guides

#F8FAFC
Slate-50, the pale end of the same Tailwind gray.
View guide
#000000
Pure black, and why many dark themes avoid it.
View guide
WCAG AAA for normal text
What the 7:1 ratio asks for and which pairs reach it.
View guide
Hex to OKLCH
Turn a hex code into the oklch() form Tailwind 4 uses.
View guide

Frequently asked questions

What color is #0F172A?
A very dark navy blue, close to black: rgb(15, 23, 42), hsl(222, 47%, 11%) or oklch(20.77% 0.0398 265.75). Tailwind CSS 3 calls it slate-900. No CSS name comes close. The nearest, midnightblue (#191970), is a much brighter blue.
Is #0F172A good for dark mode?
Yes, as a background. White text gets 17.85:1, past the 7:1 AAA asks for normal text. And unlike #000000, it keeps a slight blue tint that ties in with the slate grays.
What's #0F172A in Tailwind 4?
Tailwind 4's slate-900 is oklch(20.8% 0.042 265.755), which rounds to #0F172B. That's 0.002 away from #0F172A in OKLab, too close to tell apart. To keep the exact old value, set --color-slate-900: #0F172A in your @theme block.
How is #0F172A different from #000000?
#000000 is pure black, with no light at all. #0F172A has an OKLCH lightness of 20.77% and a blue hue, so it reads as navy next to true black. Both pass AAA with white text: 17.85:1 here and 21.00:1 on black.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool