Pick any color and convert between HEX, RGB, HSL, and CMYK formats instantly.
Pick a color visually and convert between HEX, RGB, HSL, and CMYK color formats. Copy any format to clipboard. Includes a color wheel and shade picker.
Upload your file using the tool above.
Adjust any settings to your preference.
Click the process button and wait for results.
Download your output using the download button.
HSL is far easier to reason about when building a palette. Because hue, saturation and lightness are separate, you can generate a hover state by dropping lightness 10%, or a whole tonal scale by varying one number. HEX is compact and universal, but adjusting it means guessing at three interdependent values.
RGB is additive light and CMYK is subtractive ink, and RGB covers a wider gamut. Vivid screen colours — bright cyans, intense greens, neons — simply have no ink equivalent and shift when converted. For print work, always proof against the actual press profile rather than trusting a screen preview.
Alpha sets opacity from 0 (invisible) to 1 (solid). In CSS you can express it as an 8-digit HEX, or with rgba() and hsla(). Worth remembering that alpha blends against whatever is behind the element, so the same value looks different over a white page than a dark one — check both if your site has themes.
Yes, Color Picker & Converter is completely free. No signup, no account, and no watermark on outputs. A Pro tier is available for 100 AI ops/day and larger file sizes.
Color Picker & Converter runs entirely in your browser. Your file is never uploaded — it is read, processed and saved locally, so it never reaches our servers or anyone else's. You can disconnect from the internet after the page loads and it still works.
#6366f1#6366f1ffrgb(99, 102, 241)rgba(99, 102, 241, 1.00)hsl(239, 84%, 67%)hsla(239, 84%, 67%, 1.00)hsv(239, 59%, 95%)cmyk(59%, 58%, 0%, 5%)Tip: HEX8 and RGBA/HSLA formats use the opacity value set by the alpha slider above.
8 color formats: HEX, HEX8 (8-digit with alpha), RGB, RGBA, HSL, HSLA, HSV (Photoshop/Figma), and CMYK (print) — all calculated in real time. The alpha slider controls opacity across RGBA and HSLA formats.
Color harmonies: 6 harmony schemes (complementary, analogous, triadic, split-complementary, tetradic, monochromatic) computed by rotating the HSL hue value. Click any harmony color to use it as the new base.
WCAG accessibility: Contrast ratios are computed using the official WCAG 2.1 relative luminance formula. AA (4.5:1) and AAA (7:1) badges show at a glance whether your color combination meets accessibility standards.
Tailwind-style shades: 11 shades from 50 to 950 are generated by varying HSL lightness while keeping the hue — the same approach Tailwind CSS uses to build its color palette.