OKLCH 컬러 피커
실시간 미리보기, 색영역 검사, 다중 형식 지원을 갖춘 전문 OKLCH 컬러 피커 및 변환기.
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.
🎨색상 및 제어
📋형식 및 도구
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.