How to use Color Converter
Paste your input on the left, choose the options you want, and the output appears instantly on the right. Everything runs in your browser — none of your data is sent to a server.
- Paste or type your input in the
INPUTpanel - The output regenerates automatically as you type
- Use
Copyto put the result in your clipboard - Click
Sampleto load a working example
What is Color Converter?
Color Converter accepts any CSS-parseable color (hex, rgb(), hsl(), oklch(), or a CSS named color like `rebeccapurple`) and emits every standard representation: hex, rgb(), hsl(), oklch(), plus the relative luminance per WCAG. Optionally include a 5-step LCH palette around the input — useful for generating tint/shade scales for design systems. All conversions run via chroma-js in the browser. This tool is part of santekno's developer toolbox — a curated collection of utilities built for engineers who care about speed, privacy, and simplicity.
Common use cases
- Debugging API payloads and integration issues
- Inspecting tokens, hashes, or encoded strings during development
- Generating fixtures and sample data for tests
- Sharing readable output with teammates in code reviews
FAQ
A modern perceptual color space (CSS Color Level 4). Equal-step changes in lightness or chroma look equal to the eye — making it superior to HSL for design tokens.
A number 0–1 representing perceived brightness, defined by WCAG. Used to compute contrast ratios for accessibility (4.5:1 minimum for body text).
A 5-step LCH-interpolated scale running from a very dark variant (l=0.1) through your input to a very light variant (l=0.9).
Pure grays (saturation = 0) have no defined hue. The tool defaults to 0 in that case for consistency.
Currently no — alpha is normalized away on input. Use `rgba()` syntax with this tool then re-add the alpha channel manually if needed.