Color Converter — HEX, RGB, HSL, HSV, CMYK
Convert between every common color format with a live preview, alpha slider, and closest-Tailwind-class lookup. Click any value to copy.
Click any value to copy
Free. Runs in your browser. No signup.
About this tool
WRRK's color converter is built for designers and developers who live in five color formats at once: HEX for CSS, RGB for JavaScript and Canvas, HSL for design systems and dark-mode tweaks, HSV for Photoshop/Figma round-trips, and CMYK for print estimates. Pick a color once and read all five.
Beyond raw conversion, the tool snaps your color to the closest Tailwind class (default palette) and the closest CSS named color(all 140) using Euclidean distance in RGB space. Useful when you're reverse-engineering a screenshot, matching a brand color to your design system, or just want a memorable name like rebeccapurple instead of a hex string. Alpha is supported throughout — RGBA, HSLA, and the 8-digit #RRGGBBAA format are all live and copyable. Everything runs in your browser; nothing is uploaded.
How to convert color codes (5 steps)
- Pick a color. Use the native color picker, paste a HEX code, or drag the RGB sliders. The preview updates live as you change values.
- Set alpha. Slide the alpha control to add transparency. RGBA, HSLA, and 8-digit HEX (#RRGGBBAA) values all update together.
- Read all formats. The right panel shows HEX, HEX+Alpha, RGB, RGBA, HSL, HSLA, HSV, and CMYK side by side — always in sync.
- Copy. Click any format to copy that exact string to your clipboard. A 'Copied!' toast confirms.
- Snap to a palette. Click 'Closest Tailwind class' or 'Closest CSS named color' to instantly snap your value to the nearest design-system color.
When to use it
- Converting a brand HEX to a Tailwind class for a quick prototype
- Generating semi-transparent overlays with rgba() or 8-digit HEX
- Picking colors from a screenshot and matching them to your design system
- Translating Figma HSV values into CSS HSL
- Estimating CMYK for a print mockup before sending to a designer
- Finding the shortest CSS-named equivalent of an obscure HEX
- Building accessible palettes (lightness control via HSL)
Frequently asked questions
+−How do I convert HEX to RGB?
Paste your HEX value (e.g. #F28C28) into the input or use the native color picker. RGB, HSL, HSV, and CMYK values update instantly. Click any format to copy it to your clipboard. The math: split the hex into three pairs of two characters, parse each pair as a base-16 number — those are your R, G, and B channels (0-255).
+−What's the difference between HSL and HSV?
Both use Hue (0-360°) and Saturation (0-100%), but the third value differs. HSL uses Lightness — 0% is black, 50% is the pure color, 100% is white. HSV uses Value — 0% is black, 100% is the brightest version of the color (which can still be saturated). HSL is more intuitive for picking tints/shades; HSV is common in design software like Photoshop and Figma.
+−Why does my CMYK value look different from print?
Browser-based RGB-to-CMYK is a naive math conversion — actual print uses ICC color profiles to compensate for ink behavior on specific paper. Use this tool for rough estimates and Tailwind/CSS work; for press-ready files, convert in Adobe Illustrator or Photoshop with a profile like SWOP or FOGRA.
+−How does the closest Tailwind class work?
The tool computes Euclidean distance in RGB space between your color and every default Tailwind palette swatch, then returns the closest match. If the distance is zero, that's an exact match. Use it as bg-{class}, text-{class}, border-{class}, etc.
+−What is alpha and how does it differ from opacity?
Alpha is the transparency channel of the color itself — written as the 4th value in rgba() or as 2 extra hex characters (#RRGGBBAA). CSS opacity is a property that applies to an entire element including its children. Use alpha when you want a translucent fill but the element's content (text, child elements) to stay fully opaque.
+−Is the color converter free? Do my colors get uploaded?
Free, no signup, no upload. All conversion math runs in your browser using plain JavaScript. The tool works offline once the page is loaded.
+−What CSS named colors does the tool recognize?
All 140 standard CSS named colors — from aliceblue to yellowgreen, including rebeccapurple. The tool finds the closest named color even if your input isn't an exact match, so you can quickly find shorter, more readable names for common colors.