gh-djankies-claude-configs-tailwind-4/skills/using-theme-variables/references/color-conversion.md

Color Conversion: Hex to oklch()

Common Color Conversions

Grays

Hex	oklch()	Description
#ffffff	oklch(1 0 0)	White
#f9fafb	oklch(0.99 0 0)	Gray 50
#f3f4f6	oklch(0.97 0 0)	Gray 100
#e5e7eb	oklch(0.93 0 0)	Gray 200
#d1d5db	oklch(0.88 0 0)	Gray 300
#9ca3af	oklch(0.74 0 0)	Gray 400
#6b7280	oklch(0.62 0 0)	Gray 500
#4b5563	oklch(0.51 0 0)	Gray 600
#374151	oklch(0.42 0 0)	Gray 700
#1f2937	oklch(0.31 0 0)	Gray 800
#111827	oklch(0.21 0 0)	Gray 900
#000000	oklch(0 0 0)	Black

Blues

Hex	oklch()	Description
#eff6ff	oklch(0.98 0.01 250)	Blue 50
#dbeafe	oklch(0.95 0.03 250)	Blue 100
#bfdbfe	oklch(0.90 0.06 250)	Blue 200
#93c5fd	oklch(0.82 0.10 250)	Blue 300
#60a5fa	oklch(0.73 0.16 250)	Blue 400
#3b82f6	oklch(0.65 0.25 270)	Blue 500
#2563eb	oklch(0.55 0.28 270)	Blue 600
#1d4ed8	oklch(0.47 0.27 270)	Blue 700
#1e40af	oklch(0.40 0.24 270)	Blue 800
#1e3a8a	oklch(0.33 0.20 270)	Blue 900

Greens

Hex	oklch()	Description
#f0fdf4	oklch(0.99 0.01 142)	Green 50
#dcfce7	oklch(0.97 0.03 142)	Green 100
#bbf7d0	oklch(0.93 0.07 142)	Green 200
#86efac	oklch(0.87 0.13 142)	Green 300
#4ade80	oklch(0.79 0.18 142)	Green 400
#22c55e	oklch(0.72 0.15 142)	Green 500
#16a34a	oklch(0.61 0.17 142)	Green 600
#15803d	oklch(0.50 0.15 142)	Green 700
#166534	oklch(0.41 0.13 142)	Green 800
#14532d	oklch(0.33 0.11 142)	Green 900

Reds

Hex	oklch()	Description
#fef2f2	oklch(0.98 0.01 25)	Red 50
#fee2e2	oklch(0.95 0.03 25)	Red 100
#fecaca	oklch(0.90 0.06 25)	Red 200
#fca5a5	oklch(0.82 0.11 25)	Red 300
#f87171	oklch(0.73 0.16 25)	Red 400
#ef4444	oklch(0.65 0.22 25)	Red 500
#dc2626	oklch(0.55 0.24 25)	Red 600
#b91c1c	oklch(0.47 0.22 25)	Red 700
#991b1b	oklch(0.40 0.19 25)	Red 800
#7f1d1d	oklch(0.33 0.16 25)	Red 900

Purples

Hex	oklch()	Description
#faf5ff	oklch(0.98 0.01 320)	Purple 50
#f3e8ff	oklch(0.95 0.04 320)	Purple 100
#e9d5ff	oklch(0.89 0.08 320)	Purple 200
#d8b4fe	oklch(0.82 0.14 320)	Purple 300
#c084fc	oklch(0.73 0.20 320)	Purple 400
#a855f7	oklch(0.65 0.25 320)	Purple 500
#9333ea	oklch(0.55 0.28 320)	Purple 600
#7e22ce	oklch(0.47 0.27 320)	Purple 700
#6b21a8	oklch(0.40 0.24 320)	Purple 800
#581c87	oklch(0.33 0.20 320)	Purple 900

Yellows / Oranges

Hex	oklch()	Description
#fef3c7	oklch(0.96 0.05 90)	Yellow 100
#fde047	oklch(0.90 0.15 90)	Yellow 300
#facc15	oklch(0.82 0.18 90)	Yellow 400
#eab308	oklch(0.75 0.20 90)	Yellow 500
#fed7aa	oklch(0.89 0.07 60)	Orange 200
#fdba74	oklch(0.82 0.12 60)	Orange 300
#fb923c	oklch(0.75 0.16 60)	Orange 400
#f97316	oklch(0.68 0.20 60)	Orange 500
#ea580c	oklch(0.60 0.22 60)	Orange 600

Teals / Cyans

Hex	oklch()	Description
#ccfbf1	oklch(0.95 0.04 180)	Teal 100
#99f6e4	oklch(0.92 0.08 180)	Teal 200
#5eead4	oklch(0.86 0.13 180)	Teal 300
#2dd4bf	oklch(0.79 0.16 180)	Teal 400
#14b8a6	oklch(0.72 0.17 180)	Teal 500
#cffafe	oklch(0.98 0.02 200)	Cyan 100
#a5f3fc	oklch(0.94 0.05 200)	Cyan 200
#67e8f9	oklch(0.88 0.10 200)	Cyan 300
#22d3ee	oklch(0.81 0.15 200)	Cyan 400
#06b6d4	oklch(0.73 0.18 200)	Cyan 500

Conversion Tips

Understanding oklch() Parameters

Lightness (0-1):

• 0.95-1.0: Very light colors (50-100)
• 0.80-0.95: Light colors (200-300)
• 0.65-0.80: Medium colors (400-500)
• 0.45-0.65: Dark colors (600-700)
• 0.20-0.45: Very dark colors (800-900)
• 0-0.20: Near black

Chroma (0-0.4):

• 0: Grayscale
• 0.01-0.05: Very muted
• 0.05-0.15: Muted
• 0.15-0.25: Vibrant
• 0.25+: Very vivid

Hue (0-360):

• 0-30: Red
• 30-60: Orange
• 60-90: Yellow
• 90-150: Green
• 150-210: Cyan/Teal
• 210-270: Blue
• 270-330: Purple/Violet
• 330-360: Magenta/Pink

Online Conversion Tools

1. OKLCH Color Picker: https://oklch.com/
2. Evil Martians OKLCH Converter: https://oklch.evilmartians.io/
3. Colorjs.io: https://colorjs.io/apps/convert/

Manual Conversion Process

1. Convert hex to RGB
2. Use online tool to convert RGB to OkLCh
3. Round values to 2 decimal places
4. Test in browser to verify appearance

Example:

Hex: #3b82f6 (Tailwind Blue 500)
RGB: rgb(59, 130, 246)
OkLCh: oklch(0.65 0.25 270)

Custom Color Palette Example

@theme {
  --color-brand-purple: oklch(0.65 0.25 320);
  --color-brand-blue: oklch(0.65 0.25 270);
  --color-brand-teal: oklch(0.72 0.17 180);

  --color-success: oklch(0.72 0.15 142);
  --color-warning: oklch(0.78 0.18 60);
  --color-error: oklch(0.65 0.22 25);
  --color-info: oklch(0.73 0.18 200);

  --color-text: oklch(0.21 0 0);
  --color-text-muted: oklch(0.51 0 0);
  --color-background: oklch(0.99 0 0);
  --color-surface: oklch(1 0 0);
}