OKLCH color references for Tailwind and shadcn
25 reference pages with OKLCH triplets, WCAG 2.2 + APCA validation, and copy-ready Tailwind v4 @theme blocks.
Tailwind
Tailwind Blue 600 in OKLCH
Tailwind Blue 600 as oklch(0.546 0.215 262.90), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#2563EB
Tailwind Slate 500 in OKLCH
Tailwind Slate 500 as oklch(0.554 0.041 257.40), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#64748B
Tailwind Emerald 400 in OKLCH
Tailwind Emerald 400 as oklch(0.773 0.153 163.20), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#34D399
Tailwind Violet 600 in OKLCH
Tailwind Violet 600 as oklch(0.541 0.247 293.00), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#7C3AED
Tailwind Rose 500 in OKLCH
Tailwind Rose 500 as oklch(0.645 0.215 16.40), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#F43F5E
Tailwind Blue 500 in OKLCH
Tailwind Blue 500 as oklch(0.623 0.188 259.80), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#3B82F6
Tailwind Blue 700 in OKLCH
Tailwind Blue 700 as oklch(0.488 0.217 264.40), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#1D4ED8
Tailwind Slate 600 in OKLCH
Tailwind Slate 600 as oklch(0.446 0.037 257.30), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#475569
Tailwind Slate 700 in OKLCH
Tailwind Slate 700 as oklch(0.372 0.039 257.30), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#334155
Tailwind Emerald 500 in OKLCH
Tailwind Emerald 500 as oklch(0.696 0.149 162.50), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#10B981
Tailwind Emerald 600 in OKLCH
Tailwind Emerald 600 as oklch(0.596 0.127 163.20), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#059669
Tailwind Emerald 700 in OKLCH
Tailwind Emerald 700 as oklch(0.508 0.105 165.60), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#047857
Tailwind Rose 600 in OKLCH
Tailwind Rose 600 as oklch(0.586 0.222 17.60), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#E11D48
Tailwind Rose 700 in OKLCH
Tailwind Rose 700 as oklch(0.514 0.198 16.90), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#BE123C
Tailwind Amber 500 in OKLCH
Tailwind Amber 500 as oklch(0.769 0.165 70.10), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#F59E0B
Tailwind Amber 600 in OKLCH
Tailwind Amber 600 as oklch(0.666 0.157 58.30), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#D97706
Tailwind Amber 700 in OKLCH
Tailwind Amber 700 as oklch(0.555 0.146 49.00), with WCAG 2.2 + APCA contrast and copy-ready Tailwind v4 @theme block.#B45309
shadcn
shadcn Primary Blue in OKLCH
shadcn Primary Blue as a shadcn token: oklch(0.623 0.188 259.80), with WCAG 2.2 + APCA contrast.#3B82F6
shadcn Zinc Dark in OKLCH
shadcn Zinc Dark as a shadcn token: oklch(0.274 0.005 286.00), with WCAG 2.2 + APCA contrast.#27272A
shadcn Slate Accessible in OKLCH
shadcn Slate Accessible as a shadcn token: oklch(0.279 0.037 260.00), with WCAG 2.2 + APCA contrast.#1E293B
shadcn Indigo Custom in OKLCH
shadcn Indigo Custom as a shadcn token: oklch(0.585 0.204 277.10), with WCAG 2.2 + APCA contrast.#6366F1
shadcn Orange in OKLCH
shadcn Orange as a shadcn token: oklch(0.705 0.187 47.60), with WCAG 2.2 + APCA contrast.#F97316
shadcn Green in OKLCH
shadcn Green as a shadcn token: oklch(0.723 0.192 149.60), with WCAG 2.2 + APCA contrast.#22C55E
shadcn Red in OKLCH
shadcn Red as a shadcn token: oklch(0.637 0.208 25.30), with WCAG 2.2 + APCA contrast.#EF4444
shadcn Violet in OKLCH
shadcn Violet as a shadcn token: oklch(0.606 0.219 292.70), with WCAG 2.2 + APCA contrast.#8B5CF6