Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK and OKLCH with a live picker, alpha, shades and harmonies.
Color
Adjust
RGB
HSL
Alpha
Shades & harmonies
Tints
Shades
Complementary
Analogous
Triadic
Split complementary
Tetradic
Formats
— — — — — — Contrast (WCAG)
Best readable text on this color: #000000
About the Color Converter
This color converter turns any color into every common format at once. Paste or pick a color in HEX, RGB(A), HSL(A), HSV, CMYK, OKLCH or a CSS color name, and you instantly get all the others side by side, each with a one-click copy button. A live picker, large preview and interactive R/G/B, H/S/L and alpha sliders let you nudge the value until it's exactly right, while transparency (alpha) is carried through every format that supports it.
Everything runs entirely in your browser — your colors are never uploaded to a server, so the conversions are instant and completely private. Beyond plain conversion you also get an eyedropper to grab a color from anywhere on screen (where the browser supports it), a random-color button, ready-made tints and shades, color harmonies like complementary, analogous and triadic, and a WCAG contrast readout against black and white so you can check that text will stay readable.
Frequently asked questions
Answers to the questions we hear most about this tool.
How do I convert HEX to RGB?
Type or paste your hex code (for example #3B82F6) into the input and the RGB value appears instantly in the results list — here that's rgb(59, 130, 246). Each channel is just the matching pair of hex digits read as a number: 3B is 59, 82 is 130 and F6 is 246. You can copy the full rgb() string with one click, and a 4- or 8-digit hex with alpha (like #3B82F680) converts straight to rgba() the same way.
How do I convert RGB back to HEX?
Enter an rgb() or rgba() value and the converter shows the hex equivalent right away, because hex is simply each channel written in base-16. For example rgb(255, 99, 71) becomes #FF6347. If your color has an alpha value, you'll also get an 8-digit hex (RRGGBBAA) that encodes the transparency, which is handy for CSS and most design tools.
What are HSL, HSV and OKLCH for, and when should I use them instead of RGB?
They're alternative ways to describe the same color that map better to how people think about it. HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, value) make it easy to keep a hue and just lighten, darken or desaturate it — which is why they power the tints, shades and harmonies here. OKLCH is a newer, perceptually uniform model where equal numeric steps look like equal visual steps, so it's great for building accessible palettes and smooth gradients. The converter shows all of them at once, so you can read or copy whichever your CSS or design app expects.
Is the CMYK conversion accurate for print?
Treat the CMYK values as a close approximation, not a press-ready spec. Screens use RGB light while printers use CMYK ink, and the exact result depends on your paper, inks and ICC color profile — none of which a browser can know. The numbers here are a standard mathematical RGB-to-CMYK conversion that's perfect for a quick reference or a starting point, but for a real print job confirm colors with your printer's profile or a physical proof.
Are my colors private, and does the tool work with transparency?
Yes on both counts. Every conversion runs locally in your browser with JavaScript, so the colors you enter are never sent to or stored on any server — you can even use the tool offline once the page has loaded. Alpha (transparency) is fully supported: enter an RGBA, HSLA or 8-digit hex value, or use the alpha slider, and the transparency carries through to every format that can represent it, including rgba(), hsla() and 8-digit hex.
Related tools
JSON Formatter
Developer
Format, beautify, validate, minify, repair and explore JSON in a tree view — with key sorting, escaping and pinpoint error locations.
Open toolColor Palette Generator
Developer
Generate harmonious color palettes and CSS gradients from any base color, then copy HEX, CSS variables or gradient code.
Open toolBase64 Encode / Decode
Developer
Encode and decode Base64 for text, files and data URIs — with URL-safe, padding and line-wrap options.
Open tool