OKLCH Color Picker
Professional OKLCH color picker and converter with real-time preview, gamut checking, and multiple format support.
How to use
Adjust the color
Use the L (lightness), C (chroma), and H (hue) controls on the left to fine-tune your OKLCH color and preview changes instantly.
Convert formats
Review and copy multiple output formats on the right, including OKLCH, HEX, RGB, HSL, and LAB.
Paste any color input
Enter a color value such as #FF5733 or rgb(255,87,51), and the tool will convert it into OKLCH automatically.
Check gamut support
See whether your color fits within sRGB, P3, and Rec2020 so you can make informed compatibility decisions.
Copy for production
Use the copy buttons beside each format to move the final color straight into your CSS or design workflow.
đ¨Color & Controls
đFormats & Tools
oklch(70% 0.150 180)#00bca2rgb(0, 188, 162)hsl(173.99, 100%, 23.41%)lab(67.08 -53.09 -0.37)lch(67.08 53.09 180.39)Use presets as fast starting points, then fine-tune the result with the OKLCH controls.
Developer Export Workspace
Turn the current color into CSS variables, Tailwind theme values, design tokens, and shareable URLs without retyping anything.
Exports will use the prefix `brand`.
Current Production Values
oklch(0.70 0.150 180.0)#00bca2color(display-p3 0.223999 0.723004 0.637309)Ship with fallback included
The snippets below include both modern OKLCH output and a HEX fallback so you can move faster in production.
Current share link
This link encodes the current OKLCH values so you can send the exact color state to a teammate or reopen it later.