Color-space comparison
Compare the same mix in sRGB, linear sRGB, Oklab, OKLCH, Lab, LCH, HSL, and Display P3 with resolved fallback evidence.
Modern web color engineering workspace
Modern CSS Color Lab
Compare interpolation spaces, compile static fallbacks and modern relationships, build relative-color recipes, inspect wide gamut, test this browser, refactor legacy CSS, and export an implementation pack that remains reviewable before production.
Direct answer
How should modern CSS color features be implemented?
Start with a deterministic sRGB value, add the modern relationship afterward, and isolate each feature with a focused support query. Keep wide-gamut values separate from fallback values, measure contrast rather than assuming it, and treat uncalibrated CMYK as planning data—not proof-ready print output.
Loading Modern CSS Color Lab…The compiler, gamut, recipe, refactoring, and export engines run locally in this browser.
Connected workflow
From one source color to production-oriented CSS evidence.
The same source, recipe, gamut, support, and refactoring model flows through the compiler and exports.
Progressive-enhancement compiler
Declare deterministic values first, then isolate color-mix(), relative color syntax, light-dark(), contrast-color(), Display P3, and device-cmyk() in focused @supports blocks.
Color recipe builder
Derive hover, active, subtle, border, focus, disabled, and custom states from one canonical brand color with both static and dynamic outputs.
Gamut inspector
Inspect sRGB, Display P3, and Rec. 2020 coverage, clipped channels, sRGB fallback, OKLCH coordinates, and the measured fallback color difference.
CSS refactoring assistant
Find repeated literals, hard-coded colors, near duplicates, legacy syntax, missing custom properties, and opportunities for modern dynamic relationships.
Live capability testing
Use CSS.supports() in the current browser instead of relying only on a static compatibility table.
Portable evidence pack
Export CSS, token JSON, recipe evidence, gamut reports, refactor reports, migration bridges, a restorable project, and a complete ZIP handoff.
Design-system handoff
Send canonical colors, mixed values, surfaces, and generated UI states into Design System Doctor for token architecture and component-state review.
Standards-aware
CSS Color 4 foundation, Color 5 enhancements.
OKLCH and predefined wide-gamut spaces belong to the CSS Color 4 foundation. Relative colors, light-dark(), contrast-color(), custom profiles, and device-cmyk() continue in CSS Color 5. The Lab labels maturity and tests the current browser rather than presenting every draft feature as universally stable.
Compare interpolation spacesPrint boundary
Screen color and print planning stay separate.
Display P3 expands screen gamut. device-cmyk() represents uncalibrated, device-dependent components and may render very differently without a suitable profile. Color Pick preserves its existing rule: generic CMYK values are planning approximations unless a real ICC workflow is implemented.
Open CMYK and Print LabStarter files
Try a reviewed example before importing production CSS.
The example project can be restored in the Lab. The CSS example shows fallback-first ordering and isolated enhancement blocks.
Questions
Modern CSS Color Lab FAQ
What is the difference between sRGB and OKLCH mixing?
sRGB mixes numeric RGB channels, while OKLCH interpolates perceptual lightness, chroma, and hue. The visual midpoint can differ substantially, so the Lab resolves both results for comparison.
Does the Lab guarantee browser compatibility?
No. It tests CSS parsing in the current browser and generates static fallbacks plus @supports gates. Test the exported code in the browser matrix required by the real product.
Why does light-dark() need color-scheme?
The function reacts to the used color scheme. The generated output opts the root into light and dark schemes so the browser has the required context.
Can contrast-color() replace a full contrast audit?
No. It currently resolves to black or white, and some mid-tone backgrounds may still be unsuitable for small text. The Lab keeps a measured fallback and reports its contrast ratio.
Is device-cmyk() suitable for production print matching?
Not by itself. It is uncalibrated and device-dependent. Color Pick treats it as a planning approximation unless a real ICC profile and proofing workflow is implemented.
Does the CSS refactoring assistant upload my stylesheet?
No. The stylesheet is read and analyzed locally in the browser. The heuristic parser produces a reviewable suggestion rather than silently rewriting a production repository.