docs: update color spec to document all supported CSS color formats

README.md

@@ -122,7 +122,7 @@ components:
 
 | Type | Format | Example |
 |:-----|:-------|:--------|
-| Color | `#` + hex (sRGB) | `"#1A1C1E"` |
+| Color | Any CSS color (hex, `rgb()`, `oklch()`, named, etc.) | `"#1A1C1E"`, `"oklch(62% 0.18 250)"` |
 | Dimension | number + unit (`px`, `em`, `rem`) | `48px`, `-0.02em` |
 | Token Reference | `{path.to.token}` | `{colors.primary}` |
 | Typography | object with `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`, `fontFeature`, `fontVariation` | See example above |

docs/spec.md

@@ -59,7 +59,17 @@ components:
 
 The `<scale-level>` placeholder represents a named level in a sizing or spacing scale. Common level names include `xs`, `sm`, `md`, `lg`, `xl`, and `full`. Any descriptive string key is valid.
 
-**Color**: A color value must start with "#" followed by a hex color code in the SRGB color space.
+**Color**: A color value is any valid CSS color string. Supported formats include:
+
+* Hex: `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`
+* Named colors: `red`, `cornflowerblue`, `transparent`
+* Functional: `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`
+* Wide-gamut: `oklch()`, `oklab()`, `lch()`, `lab()`
+* Mixing: `color-mix(in srgb, ...)`
+
+All color values are internally converted to sRGB for WCAG contrast checking. The original format is preserved for display and export.
+
+Hex notation (`#RRGGBB`) remains the recommended default for simplicity and broad tooling support.
 
 - `fontFamily` (string)
 - `fontSize` (Dimension)

packages/cli/src/linter/model/handler.ts

@@ -60,7 +60,7 @@ export class ModelHandler implements ModelSpec {
             findings.push({
               severity: 'error',
               path: `colors.${name}`,
-              message: `'${raw}' is not a valid color. Expected a hex color code (e.g., #ffffff).`,
+              message: `'${raw}' is not a valid color. Expected a CSS color value (e.g., #ffffff, rgb(0 0 0), oklch(0.5 0.2 240)).`,
             });
             // Store as-is for fallback
             symbolTable.set(`colors.${name}`, raw);

packages/cli/src/linter/spec-gen/spec.mdx

@@ -43,7 +43,17 @@ components:
 
 The `<scale-level>` placeholder represents a named level in a sizing or spacing scale. Common level names include `xs`, `sm`, `md`, `lg`, `xl`, and `full`. Any descriptive string key is valid.
 
-**Color**: A color value must start with "#" followed by a hex color code in the SRGB color space.
+**Color**: A color value is any valid CSS color string. Supported formats include:
+
+- Hex: `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`
+- Named colors: `red`, `cornflowerblue`, `transparent`
+- Functional: `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hwb()`
+- Wide-gamut: `oklch()`, `oklab()`, `lch()`, `lab()`
+- Mixing: `color-mix(in srgb, ...)`
+
+All color values are internally converted to sRGB for WCAG contrast checking. The original format is preserved for display and export.
+
+Hex notation (`#RRGGBB`) remains the recommended default for simplicity and broad tooling support.
 
 {typographyPropertyList()}