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 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 AAmeets WCAG 2.2
    Normal AAAmeets WCAG 2.2
    Large AAmeets WCAG 2.2
    Large AAAmeets WCAG 2.2
    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.52AAA
Aa18.45AAA
Aa2.17Below AA
Aa1.00Below AA
Aa2.61Below AA
Aa5.28AA
Aa7.14AAA
Aa8.49AAA
Aa5.68AA
Aa2.61Below AA
Aa1.00Below AA
Aa2.02Below AA
Aa2.73Below AA
Aa3.24Below AA
Aa11.49AAA
Aa5.28AA
Aa2.02Below AA
Aa1.00Below AA
Aa1.35Below AA
Aa1.60Below AA
Aa15.52AAA
Aa7.14AAA
Aa2.73Below AA
Aa1.35Below AA
Aa1.00Below AA
Aa1.18Below AA
Aa18.45AAA
Aa8.49AAA
Aa3.24Below AA
Aa1.60Below AA
Aa1.18Below AA
Aa1.00Below AA

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

  • Aa10.35AAA

    White #FFFFFF

  • Aa9.49AAA

    Neutral 100 #F5F5F5

  • Aa8.22AAA

    Neutral 200 #E5E5E5

  • Aa4.10Below AA

    Neutral 400 #A3A3A3

  • Aa1.32Below AA

    Neutral 600 #525252

  • Aa1.73Below AA

    Neutral 900 #171717

  • Aa2.02Below 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 / white
$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 · fg: white
"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-600 / whitebutton-secondary: primary-50 / primary-700
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.02: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?

Tailwind v4 @theme block

@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.

FAQ

Frequently asked questions

Tailwind Slate 700 (#334155) is oklch(0.372 0.039 257.3) in the OKLCH color space.

Tailwind Slate 700 passes WCAG 2.2 AA on white for normal text. Contrast ratios: 10.35:1 on white, 2.02:1 on black.

On white, Tailwind Slate 700 has an APCA Lc of 94. On black, Lc is -8.5. APCA is a perceptual contrast model, not a WCAG compliance standard.

Paste the snippet above into your tailwind.config (or globals.css with @theme).

Under deuteranopia (most common, around 5 percent of men), Tailwind Slate 700 simulates to #38374f. Under protanopia it shifts to #393950. Under tritanopia it appears as #344c4c. Always pair color with shape, label, or icon for accessibility.

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