Color Format Converter translates any color between HEX, RGB, HSL, HSV, and OKLCH. Pick a color with the native picker, type a hex value, paste any CSS color string, or adjust RGB sliders — every format updates live and each has its own Copy button.
Modern CSS gives you a dozen ways to write the same color: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus alpha variants of each. You often need to convert between them — a Figma design hands you an OKLCH, your codebase uses HEX, and your theme variables prefer HSL for hover tweaks. Color Format Converter does all conversions in one panel. Pick a color from the native color picker, paste an existing color in any syntax, or drag RGB sliders to dial one in. Every common format renders simultaneously: HEX (with alpha), rgb()/rgba(), hsl()/hsla(), hsv(), and oklch() — plus a CSS variable snippet and the computed luminance value for quick contrast math. Alpha channel is supported end-to-end. Each format has its own Copy button for one-click use, and the parser accepts native color names and everything CSS supports.
Shows HEX, RGB/RGBA, HSL/HSLA, HSV, and OKLCH simultaneously — pick whichever format your target code expects without re-converting each time.
Accepts HEX (#abc or #aabbcc or #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), and native color names. Paste anything CSS supports.
Handles the new OKLCH format used in modern CSS — perceptually uniform color space that's becoming the new design-system default.
Each output has its own Copy button. Click to grab exactly the format you need for your code, no manual selection required.
Adjust Red/Green/Blue/Alpha sliders for fine tuning. Every format updates in real time as you drag.
Transparency is handled across every format: #RRGGBBAA, rgba(...), hsla(...). Set once, converted everywhere.
Figma hands you an OKLCH or HSL — paste it, copy the HEX equivalent for your Tailwind config or CSS variables without leaving the browser.
Drag sliders to explore shades, noting the OKLCH values for a systematic design system palette.
Convert a brand color to its HSL form so you can use hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) for hover states.
The luminance field gives you the raw value used in WCAG contrast calculations — useful for a11y math.
Paste an oklch(...) from a CSS file you're reading and instantly see what color it actually produces.
Click the Color Formats icon in the DevSuite Pro dock. A panel opens with a color picker, hex input, and RGB sliders.
Use the color picker, type a hex, or paste any CSS color string (rgb(...), oklch(...), etc.). The color previews instantly.
Every format renders below: HEX, RGB, HSL, HSV, OKLCH, CSS variable, and luminance. All stay in sync as you adjust.
Drag R/G/B/A sliders for fine adjustments. Great for dialing in a specific shade that matches a design spec.
Click Copy on the format row you want — the value lands in your clipboard in the correct syntax.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
