8.1 KiB
8.1 KiB
Color Tokens Comparison
Side-by-side comparison of provided tokens vs. global color palette
| Color Token | Provided Value | Our Global Palette | Match Status | Notes |
|---|---|---|---|---|
| RED | ||||
--color-red-50 |
oklch(.971 .013 17.38) |
oklch(0.971 0.013 17.38) ✅ |
EXACT MATCH | In tailwindcss/theme.css:10 |
--color-red-100 |
oklch(.936 .032 17.717) |
oklch(0.936 0.032 17.717) ✅ |
EXACT MATCH | In tailwindcss/theme.css:11 |
--color-red-500 |
oklch(.637 .237 25.331) |
oklch(0.637 0.237 25.331) ✅ |
EXACT MATCH | In tailwindcss/theme.css:15 |
--color-red-600 |
oklch(.577 .245 27.325) |
oklch(0.577 0.245 27.325) ✅ |
EXACT MATCH | In tailwindcss/theme.css:16 |
--color-red-700 |
oklch(.505 .213 27.518) |
oklch(0.505 0.213 27.518) ✅ |
EXACT MATCH | In tailwindcss/theme.css:17 |
| ORANGE | ||||
--color-orange-50 |
#fff6ed |
oklch(0.98 0.016 73.684) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:22) |
--color-orange-100 |
#ffead5 |
oklch(0.954 0.038 75.164) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:23) |
--color-orange-400 |
#fd853a |
oklch(0.75 0.183 55.934) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:26) |
--color-orange-500 |
#fb6514 |
oklch(0.705 0.213 47.604) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:27) |
--color-orange-600 |
#ec4a0a |
oklch(0.646 0.222 41.116) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:28) |
--color-orange-700 |
#c4320a |
oklch(0.553 0.195 38.402) ❌ |
DIFFERENT | Provided: hex, Ours: oklch (in tailwindcss/theme.css:29) |
| YELLOW | ||||
--color-yellow-100 |
oklch(.973 .071 103.193) |
oklch(0.973 0.071 103.193) ✅ |
EXACT MATCH | In tailwindcss/theme.css:47 |
--color-yellow-600 |
oklch(.681 .162 75.834) |
oklch(0.681 0.162 75.834) ✅ |
EXACT MATCH | In tailwindcss/theme.css:52 |
| GREEN | ||||
--color-green-50 |
oklch(.982 .018 155.826) |
oklch(0.982 0.018 155.826) ✅ |
EXACT MATCH | In tailwindcss/theme.css:70 |
--color-green-100 |
oklch(.962 .044 156.743) |
oklch(0.962 0.044 156.743) ✅ |
EXACT MATCH | In tailwindcss/theme.css:71 |
--color-green-500 |
oklch(.723 .219 149.579) |
oklch(0.723 0.219 149.579) ✅ |
EXACT MATCH | In tailwindcss/theme.css:75 |
--color-green-600 |
oklch(.627 .194 149.214) |
oklch(0.627 0.194 149.214) ✅ |
EXACT MATCH | In tailwindcss/theme.css:76 |
--color-green-700 |
oklch(.527 .154 150.069) |
oklch(0.527 0.154 150.069) ✅ |
EXACT MATCH | In tailwindcss/theme.css:77 |
| CYAN | ||||
--color-cyan-100 |
oklch(.956 .045 203.388) |
oklch(0.956 0.045 203.388) ✅ |
EXACT MATCH | In tailwindcss/theme.css:107 |
--color-cyan-600 |
oklch(.609 .126 221.723) |
oklch(0.609 0.126 221.723) ✅ |
EXACT MATCH | In tailwindcss/theme.css:112 |
| BLUE | ||||
--color-blue-50 |
oklch(.97 .014 254.604) |
oklch(0.97 0.014 254.604) ✅ |
EXACT MATCH | In tailwindcss/theme.css:130 |
--color-blue-100 |
oklch(.932 .032 255.585) |
oklch(0.932 0.032 255.585) ✅ |
EXACT MATCH | In tailwindcss/theme.css:131 |
--color-blue-500 |
oklch(.623 .214 259.815) |
oklch(0.623 0.214 259.815) ✅ |
EXACT MATCH | In tailwindcss/theme.css:135 |
--color-blue-700 |
oklch(.488 .243 264.376) |
oklch(0.488 0.243 264.376) ✅ |
EXACT MATCH | In tailwindcss/theme.css:137 |
| PURPLE | ||||
--color-purple-50 |
oklch(.977 .014 308.299) |
oklch(0.977 0.014 308.299) ✅ |
EXACT MATCH | In tailwindcss/theme.css:166 |
--color-purple-100 |
oklch(.946 .033 307.174) |
oklch(0.946 0.033 307.174) ✅ |
EXACT MATCH | In tailwindcss/theme.css:167 |
--color-purple-400 |
oklch(.714 .203 305.504) |
oklch(0.714 0.203 305.504) ✅ |
EXACT MATCH | In tailwindcss/theme.css:170 |
--color-purple-500 |
oklch(.627 .265 303.9) |
oklch(0.627 0.265 303.9) ✅ |
EXACT MATCH | In tailwindcss/theme.css:171 |
--color-purple-600 |
oklch(.558 .288 302.321) |
oklch(0.558 0.288 302.321) ✅ |
EXACT MATCH | In tailwindcss/theme.css:172 |
--color-purple-700 |
oklch(.496 .265 301.924) |
oklch(0.496 0.265 301.924) ✅ |
EXACT MATCH | In tailwindcss/theme.css:173 |
| PINK | ||||
--color-pink-100 |
oklch(.948 .028 342.258) |
oklch(0.948 0.028 342.258) ✅ |
EXACT MATCH | In tailwindcss/theme.css:191 |
--color-pink-600 |
oklch(.592 .249 .584) |
oklch(0.592 0.249 0.584) ⚠️ |
FORMAT DIFFERENCE | Provided: .584 (missing hue), Ours: full oklch (in tailwindcss/theme.css:196) |
| GRAY | ||||
--color-gray-50 |
#f9fafb |
#f9fafb ✅ |
EXACT MATCH | In index.css:87 |
--color-gray-100 |
#f2f4f7 |
#f2f4f7 ✅ |
EXACT MATCH | In index.css:88 |
--color-gray-200 |
#e4e7ec |
#e4e7ec ✅ |
EXACT MATCH | In index.css:89 |
--color-gray-300 |
#d0d5dd |
#d0d5dd ✅ |
EXACT MATCH | In index.css:90 |
--color-gray-400 |
#98a2b3 |
#98a2b3 ✅ |
EXACT MATCH | In index.css:91 |
--color-gray-500 |
#667085 |
#667085 ✅ |
EXACT MATCH | In index.css:92 |
--color-gray-600 |
#475467 |
#475467 ✅ |
EXACT MATCH | In index.css:93 |
--color-gray-700 |
#344054 |
#344054 ✅ |
EXACT MATCH | In index.css:94 |
--color-gray-800 |
#1d2939 |
#1d2939 ✅ |
EXACT MATCH | In index.css:95 |
--color-gray-900 |
#101828 |
#101828 ✅ |
EXACT MATCH | In index.css:96 |
--color-gray-950 |
#0c111d |
#0c111d ✅ |
EXACT MATCH | In index.css:97 |
| BLACK & WHITE | ||||
--color-black |
#101828 |
#101828 ✅ |
EXACT MATCH | In index.css:58 |
--color-white |
#fff |
#ffffff ✅ |
EQUIVALENT | In index.css:57 (same color, different format) |
Summary
✅ Matches (28 tokens)
- Red: All 5 tokens match exactly (oklch format)
- Yellow: Both tokens match exactly (oklch format)
- Green: All 5 tokens match exactly (oklch format)
- Cyan: Both tokens match exactly (oklch format)
- Blue: All 4 tokens match exactly (oklch format)
- Purple: All 6 tokens match exactly (oklch format)
- Gray: All 11 tokens match exactly (hex format)
- Black/White: Both match (hex format)
❌ Differences (6 tokens)
- Orange: All 6 tokens differ
- Provided: Hex format (
#fff6ed,#ffead5, etc.) - Ours: oklch format in Tailwind theme
- Note: These are likely the same colors, just different formats. The hex values you provided match our custom orange palette in
index.css:100-111(which uses hex), but Tailwind's theme uses oklch.
- Provided: Hex format (
⚠️ Format Issue (1 token)
- Pink-600:
oklch(.592 .249 .584)- Missing hue value (should be 3 values: lightness, chroma, hue)
Location of Colors in Codebase
Tailwind Default Colors (oklch format)
- File:
frontend/node_modules/tailwindcss/theme.css - Contains: red, orange, yellow, green, cyan, blue, purple, pink (all in oklch)
Custom IGNY8 Colors (hex format)
- File:
frontend/src/index.css(lines 55-154) - Contains:
- Gray scale (hex)
- Orange scale (hex) - Matches your provided orange values!
- Brand colors (hex)
- Success/Error/Warning colors (hex)
IGNY8 Brand Colors
- File:
frontend/src/styles/igny8-colors.css - Contains: Custom brand colors with
--igny8-prefix
Recommendation
Your provided orange tokens match our custom orange palette in index.css!
The orange colors you provided are already in our codebase:
--color-orange-50: #fff6ed✅ (line 101)--color-orange-100: #ffead5✅ (line 102)--color-orange-400: #fd853a✅ (line 105)--color-orange-500: #fb6514✅ (line 106)--color-orange-600: #ec4a0a✅ (line 107)--color-orange-700: #c4320a✅ (line 108)
All other colors (red, yellow, green, cyan, blue, purple, gray, black, white) also match either in Tailwind's theme or our custom palette.