Initial commit

2025-11-29 18:22:33 +08:00
commit 735ed8d1d7
19 changed files with 5548 additions and 0 deletions
--- a/skills/using-theme-variables/references/color-conversion.md
+++ b/skills/using-theme-variables/references/color-conversion.md
@@ -0,0 +1,179 @@
+# 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
+
+```css
+@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);
+}
+```