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