A Complete Color Workflow in Your Browser
The Color suite is organized to match the order most design work actually happens. You usually start from one of three places: a single brand color you already have, a mood image you want to extract colors from, or a blank palette you want to generate. Whichever entry point you pick, the rest of the workflow chains together cleanly.
Pick or extract. Start with the OKLCH Color Picker for a brand color you want to author from scratch in perceptually uniform space, the Color Picker for sampling from an uploaded image, or the Image Color Extractor and Palette from Image for pulling a multi-color palette from a mood board. Both extractors use k-means clustering for accurate dominant-color detection.
Convert and verify the gamut. Run any color through the Color Space Converter to translate between HEX, OKLCH, OKLAB, LAB, LCH, HWB, and Display P3 at once. Use the Gamut Mapper to confirm the color renders correctly in sRGB and Display P3, and to generate CSS color-mix() fallbacks for any out-of-gamut values you want to ship.
Build palettes and tokens. Run the Palette Generator with a harmony rule (analogous, complementary, triadic) for related colors. Use the Tailwind v4 OKLCH Palette to generate an 11-stop scale (50 to 950) for any brand anchor. For a complete design system, the Semantic Color Token Generator emits all six semantic scales (primary, secondary, neutral, success, warning, error) with full 50-950 stops from one input color.
Design interaction states. Each anchor color in the palette typically needs five interaction states (default, hover, active, focus, disabled). The Color Desaturator generates the full five-state series from a single base color using OKLCH lightness and chroma deltas calibrated for typical 2026 design system conventions.
Compose gradients. Use the Gradient Interpolator to compare sRGB versus OKLCH interpolation between any two colors (the muddy-middle question). Use the Gradient Stop Optimizer to produce a multi-stop CSS declaration that avoids gray midpoints. Use CSS Mesh from Palette to turn any 4-6 color palette into a production-ready mesh gradient with one click. The existing Gradient Builder and Mesh Gradient Generator (both in the CSS category) are the hand-tuning workbenches for the gradients these tools produce.
Verify accessibility. Run any text-background pair through the Contrast Checker for one-pair WCAG ratios. Use the Contrast Batch Checker for a small set of known pairs. Use the Palette Contrast Matrix when you want every possible N-by-N pair in the entire palette at once: this is the matrix view design systems use to find the safe pairs. Cross-check the palette through the Color Blindness Simulator and the Perceptual Color Difference calculator for full accessibility coverage.
Ship. Export design tokens as CSS custom properties, tailwind.config.js entries, Style Dictionary JSON, or Figma variables. The tools that generate token sets all offer multiple export formats, so the same palette can feed a web build, an iOS build, and a Figma variable collection without re-authoring.
Frequently Asked Questions about the Color Suite
Are all 27 color tools really free?+
Yes. Every tool in the Color Suite is free with no time limits, no signup, no watermarks, and no API keys. The site is supported by ads on surrounding pages; the tools themselves are unrestricted. The color math runs locally in your browser via the culori library at version 4.0.2 under the MIT license.
Do my colors or palettes ever leave my device?+
No. Every tool in the Color Suite runs entirely in your browser. The culori library loads from a CDN once and is cached; after that, color conversions, palette generation, contrast checking, and every other operation happen locally. No color value you paste is sent to any server.
Which color spaces does the suite support?+
All major spaces: HEX, RGB, HSL, HSB, CMYK, OKLCH, OKLAB, LAB, LCH, HWB, and Display P3. The classic Color Converter handles the legacy formats; the Color Space Converter handles the CSS Color Module Level 4 additions. Tools that benefit from perceptual uniformity (palette generators, gradient interpolators, contrast checkers) use OKLCH internally.
Which browsers are supported?+
Chrome, Edge, Firefox, and Safari (recent versions). The tools work in any browser that supports CSS Custom Properties and ES modules, which covers approximately 99 percent of users in 2026. Tools that generate modern CSS Color Level 4 output (in oklch syntax, color-mix, oklch() function) work as authored in browsers shipped since 2023; older browsers fall back to HEX equivalents the tools emit alongside.
Why does the suite use OKLCH so heavily?+
OKLCH is perceptually uniform across every hue, which means equal numerical steps look equally different to the human eye. HSL is not perceptually uniform, which is why HSL-generated palettes always need hand-correction in the middle stops. Tailwind v4, Radix Themes, and most modern design systems moved to OKLCH for this reason. The suite uses it as the default working space for palette generation, gradient interpolation, and shade scaling.
Can I chain tools together (e.g., palette to mesh gradient to contrast check)?+
Yes. Most tools accept multiple input formats and emit copyable values, so the output of one tool can be pasted into the next. Common chains: Palette Generator → CSS Mesh from Palette (build a mesh gradient from a generated palette), Tailwind v4 OKLCH Palette → Palette Contrast Matrix (audit the contrast story of every shade pair), Color Picker → Color Desaturator (turn a sampled image color into a full five-state UI palette).
What about color management for print?+
The classic Color Converter supports CMYK conversion for print workflows. The Color Space Converter additionally supports LAB and LCH, which are the spaces used by professional print color-management software. For an exact print match, use the Perceptual Color Difference calculator with CIEDE2000 to verify the screen-to-proof drift is within the target Delta-E (typically below 2 for calibrated proofs).
How does the Color Suite compare to paid tools like Adobe Color and Coolors?+
The Color Suite covers most of what Adobe Color (paid) and Coolors (freemium with limits) offer, plus several capabilities they do not have, including OKLCH-native palette generation, modern CSS Color Level 4 conversion, Display P3 gamut checking, Tailwind v4 OKLCH palette export, and the Palette Contrast Matrix. The trade-off is that the suite is a set of single-purpose tools rather than one integrated editor; the upside is no signup, no paid tiers, and no monthly cost.