Color Picker
Color
Accepts hex, rgb(), hsl(), or oklch(). Click the swatch to use the native picker.
Enter a color above or click the swatch to get started.
Why use a private color picker?
Converting colors seems harmless, but brand palettes and unreleased designs are often confidential. Every conversion here is plain math in your browser, so nothing about your palette is sent anywhere.
It also avoids the clutter of many online color tools: enter a color in any common CSS format and copy the format you need.
How it works
Your input is parsed into an sRGB color, then converted to each output format. OKLCH conversion goes through the OKLab color space using the standard published matrices.
Every output is formatted as valid CSS, so you can paste it straight into a stylesheet, a Tailwind config, or a design token file.
Common use cases
- Converting a hex value from a design file into hsl() or oklch() for CSS
- Moving a palette to OKLCH for more predictable lightness steps
- Checking the RGB values behind a hex color for a canvas or WebGL project
- Translating colors between design tools that use different formats
Frequently asked questions
- Which color formats can I enter?
- Hex (#rgb, #rrggbb, or #rrggbbaa), rgb(), hsl(), and oklch(). You can also pick a color visually with the swatch.
- Which formats does it output?
- HEX, RGB, HSL, and OKLCH, each as a CSS-ready value you can copy with one click.
- What is OKLCH and why would I use it?
- OKLCH describes a color by lightness, chroma, and hue in a perceptually uniform space. Changing lightness by the same amount looks like the same change across different hues, which makes it well suited to building consistent palettes and design tokens. All modern browsers support oklch() in CSS.
- Why does a converted color look slightly different?
- Values are rounded for readability, and some OKLCH colors fall outside the sRGB range that HEX, RGB, and HSL can express. Those colors are clamped to the nearest displayable sRGB color.
- Does it work offline?
- Yes, once the page has loaded. All conversions are plain math in your browser.