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.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 39 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
