paletta
Tailwind CSS token

Tailwind Slate 700 in OKLCH

Quick answer: Tailwind Slate 700 is #334155, which converts to oklch(0.372 0.039 257.30). On white, it has a WCAG contrast ratio of 10.35:1 and an APCA score of Lc +94.02.

This meets the WCAG 2.2 AAA Normal text threshold (7:1) on white. The color shipped in Tailwind CSS v4.0 (January 2025) as part of the OKLCH default palette, which has 92% global browser support (caniuse, April 2026).

oklch(0.372 0.039 257.30)

Tailwind Slate 700 is a Tailwind utility color. This page frames #334155 as a utility stop: copy the generated @theme scale below, or map it into your own tokens.

Specs

oklch(0.372 0.039 257.30)
#334155

Highest contrast: white

10.35:1
Normal AA
Normal AAA
Large AA
Large AAA
Lc +94.02
Try in Studio

Accessibility lens

  • Base#334155
  • 300#798495
  • 500#334155
  • 700#1D2838

Toggle a lens to preview this color under color vision differences.

How does Tailwind Slate 700 go from primitive to component?

  1. Primitive
  2. Semantic
  3. Component

Primitive

The raw value, before it means anything.

hex
#334155
oklch
oklch(0.372 0.039 257.30)

Semantic

Bound to a role token that UI reads by name.

--primary: #334155

One primitive feeds the role. --primary then drives --ring and the hover and active states below, so a single value stays in sync everywhere.

Component

Applied to real UI across states.

AAA10.35:1
DefaultSave paletteNew
HoverSave paletteNew
ActiveSave paletteNew
DisabledSave paletteNew

On-color text: white (10.35:1 on #334155).

How does Tailwind Slate 700 scale from 50 to 950?

Tailwind Slate 700
50 to 950
#F2F5FA
#C8CED7
#A0A9B6
#798495
#546275
#334155
#283447
#1D2838
#141D29
#0B121B
#04070D
  • 50oklch(0.969 0.007 260.73)
  • 100oklch(0.849 0.014 258.35)
  • 200oklch(0.732 0.021 257.49)
  • 300oklch(0.610 0.029 259.04)
  • 400oklch(0.492 0.035 256.10)
  • 500oklch(0.372 0.039 257.29)
  • 600oklch(0.323 0.038 259.43)
  • 700oklch(0.274 0.034 257.67)
  • 800oklch(0.228 0.027 255.80)
  • 900oklch(0.180 0.022 255.00)
  • 950oklch(0.127 0.016 257.84)

How does Tailwind Slate 700 score on WCAG 2.2 contrast?

Every fg × bg combination, with WCAG 2.2 verdicts.

AAA (7:1+)
AA (4.5:1+)
Below AA (under 4.5:1)
Hover for APCA
Aa1.00Below AA
Aa2.17Below AA
Aa5.68AA
Aa11.49AAA
Aa15.53AAA
Aa18.45AAA
Aa2.17Below AA
Aa1.00Below AA
Aa2.62Below AA
Aa5.29AA
Aa7.15AAA
Aa8.49AAA
Aa5.68AA
Aa2.62Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa2.73Below AA
Aa3.25Below AA
Aa11.49AAA
Aa5.29AA
Aa2.02Below AA
Aa1.00Below AA
Aa1.35Below AA
Aa1.61Below AA
Aa15.53AAA
Aa7.15AAA
Aa2.73Below AA
Aa1.35Below AA
Aa1.00Below AA
Aa1.19Below AA
Aa18.45AAA
Aa8.49AAA
Aa3.25Below AA
Aa1.61Below AA
Aa1.19Below AA
Aa1.00Below AA

Does Tailwind Slate 700 pass WCAG 2.2 on common neutral backgrounds?

  • Aa10.35AAA

    White #FFFFFF

  • Aa9.50AAA

    Neutral 100 #F5F5F5

  • Aa8.22AAA

    Neutral 200 #E5E5E5

  • Aa4.10Below AA

    Neutral 400 #A3A3A3

  • Aa1.33Below AA

    Neutral 600 #525252

  • Aa1.73Below AA

    Neutral 900 #171717

  • Aa2.03Below AA

    Black #000000

What palettes pair with Tailwind Slate 700?

Analogous

  • #33554D
  • #334F55
  • #334155
  • #333355
  • #413355

Complementary

  • #506685
  • #334155

Triadic

  • #334155
  • #171D26
  • #553341

Where should you use Tailwind Slate 700 in production UI?

bg: primary-50 · border: primary-100
Monthly revenue
$48,219
text: primary-900
+12.4% vs last mo.
badge: primary-100 / primary-700
primary-500
$8.2k
JANFEBMARAPRMAYJUNJUL
bg: primary-600 · fg: white
ONBOARDING · STEP 2
Export your first design system this week.
bg: surface · border: neutral-200
SYSTEM
All systems normal
APIprimary-50 / primary-700Webprimary-50 / primary-700Pluginprimary-50 / primary-700
Tokens
248
+18 this week
overlay: primary-700 → primary-800
"One color system, every screen in sync."
Maya Okafor
Design systems lead
EPISODE 14
Designing color systems that scale
28:14
bg: primary-900
--primary-500
#334155
focus ring: primary-100COMPONENT · INPUT
Search projects…⌘K
button-primary: primary-600button-secondary: primary-50
SETTINGS
Weekly digest
Net new tokens
$15,989
$18,871 last period

Notes on Tailwind Slate 700

Slate 700 is dark enough to act as body ink while still reading cooler and softer than black, oklch(0.372 0.039 257.3). This is the color for primary paragraph text on light UIs and for high-emphasis headings. Its contrast on white is very high, WCAG 2.2 AAA (10.35:1, APCA Lc +94.02), which means long-form copy in #334155 is easy on the eyes at any size. The flip side is absolute: on a true black surface it lands Below AA (2.03:1), so it belongs on light backgrounds only, with lighter slates handling dark mode. When a card needs a lift, the complementary #506685 offers a muted steel blue, and the analogous #334F55 leans faintly teal. As with the other slates, the accessibility lens is a formality; the CVD simulations cluster around #38374F and #344C4C, so its job as reliable text ink holds for protanopia, deuteranopia, and tritanopia alike.

What other Tailwind and shadcn colors relate to Tailwind Slate 700?

Browse all colors

@theme {
  --color-primary-50: #f2f5fa;
  --color-primary-100: #c8ced7;
  --color-primary-200: #a0a9b6;
  --color-primary-300: #798495;
  --color-primary-400: #546275;
  --color-primary-500: #334155;
  --color-primary-600: #283447;
  --color-primary-700: #1d2838;
  --color-primary-800: #141d29;
  --color-primary-900: #0b121b;
  --color-primary-950: #04070d;

  --color-secondary-50: #f5f4fb;
  --color-secondary-100: #cccbd6;
  --color-secondary-200: #a4a4b4;
  --color-secondary-300: #7f7e92;
  --color-secondary-400: #5b5a71;
  --color-secondary-500: #3a3850;
  --color-secondary-600: #2f2d43;
  --color-secondary-700: #242235;
  --color-secondary-800: #1a1827;
  --color-secondary-900: #100f1a;
  --color-secondary-950: #07060d;

  --color-accent-50: #f1f6f7;
  --color-accent-100: #c9d2d3;
  --color-accent-200: #a2afb0;
  --color-accent-300: #7c8e8f;
  --color-accent-400: #596d6f;
  --color-accent-500: #384e50;
  --color-accent-600: #2b3f41;
  --color-accent-700: #1f3032;
  --color-accent-800: #142223;
  --color-accent-900: #0b1516;
  --color-accent-950: #040809;

  --color-neutral-50: #f7f7f8;
  --color-neutral-100: #eff0f1;
  --color-neutral-200: #dfe0e2;
  --color-neutral-300: #c4c6ca;
  --color-neutral-400: #9ea2a9;
  --color-neutral-500: #787e87;
  --color-neutral-600: #5b6067;
  --color-neutral-700: #43474c;
  --color-neutral-800: #2b2d31;
  --color-neutral-900: #18191b;
  --color-neutral-950: #0e0f10;

  --color-success-50: #e6fce9;
  --color-success-100: #c4eaca;
  --color-success-200: #9ddaa7;
  --color-success-300: #74c985;
  --color-success-400: #4ab766;
  --color-success-500: #16a34a;
  --color-success-600: #008330;
  --color-success-700: #00631a;
  --color-success-800: #00440a;
  --color-success-900: #002700;
  --color-success-950: #000d00;

  --color-error-50: #ffebe6;
  --color-error-100: #ffc9c0;
  --color-error-200: #ffa398;
  --color-error-300: #fe7c6f;
  --color-error-400: #f0544a;
  --color-error-500: #dc2626;
  --color-error-600: #b8000a;
  --color-error-700: #910000;
  --color-error-800: #680000;
  --color-error-900: #420000;
  --color-error-950: #200000;

  --color-warning-50: #fff1e1;
  --color-warning-100: #fed9be;
  --color-warning-200: #f9c095;
  --color-warning-300: #f2a66a;
  --color-warning-400: #e78e40;
  --color-warning-500: #d97706;
  --color-warning-600: #b25800;
  --color-warning-700: #893d00;
  --color-warning-800: #612500;
  --color-warning-900: #3a0f00;
  --color-warning-950: #180000;

  --color-info-50: #e6f6ff;
  --color-info-100: #bfdaff;
  --color-info-200: #95bdff;
  --color-info-300: #6ca0ff;
  --color-info-400: #4782fd;
  --color-info-500: #2563eb;
  --color-info-600: #114ac8;
  --color-info-700: #0333a1;
  --color-info-800: #002076;
  --color-info-900: #000e4e;
  --color-info-950: #000129;

  /* Surfaces */
  --color-background: #F7F7F8;
  --color-surface: #FFFFFF;
  --color-elevated: #F7F7F8;
  --color-foreground: #18191B;
  --color-muted: #787E87;
  --color-border: #DFE0E2;
}

How do you export Tailwind Slate 700 as design tokens?

Export a W3C DTCG token document for the Tailwind Slate 700 50 to 950 scale, ready for Style Dictionary or any DTCG aware pipeline.

Frequently asked questions

Ready to build your color system?

Free forever, no credit card, Pro when you need more.

Built by a product designer who ships to code.

Generate system See pricing