HEX to RGB / RGB to HEX Converter
Type any colour in HEX (#FF6B35) or RGB (rgb(255, 107, 53)) and see it converted to every other common format — HEX, RGB, HSL and CMYK. Includes a colour swatch.
HEX, RGB, HSL, CMYK — what each one is for
Colour values can be written in several formats, and each has a job it does best. This tool converts all of them at once so you can grab the format you need without doing the maths.
HEX
The most concise way to write a colour. Six hexadecimal digits, two per channel: #FF6B35 means red=255, green=107, blue=53. Standard in CSS, HTML, design tools and most code that deals with colour. Three-digit shorthand (#F63) is also valid — each digit doubles to form the full pair.
RGB
The same information as HEX but in decimal: rgb(255, 107, 53). Easier to read at a glance and what most programming languages use internally. Modern CSS supports a comma-less syntax with optional alpha: rgb(255 107 53 / 0.7). Designers find RGB intuitive for thinking in additive light terms.
HSL
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Far more intuitive for design: H tells you which colour, S how vivid it is, L how light or dark. To darken a colour you just lower L; to find a complementary colour you add 180 to H. CSS, JS and most design tools speak HSL natively.
CMYK
Cyan, Magenta, Yellow, Key (black). Subtractive colour model used in print. The CMYK values shown here are a basic RGB-to-CMYK approximation, fine for reference but not for press-perfect colour matching — production print needs a colour-managed workflow using ICC profiles.
When to use each format
- CSS / HTML — HEX or RGB. HEX is more compact; RGB lets you set alpha.
- Design tools (Figma, Sketch, Photoshop) — all support HEX and HSL; HSL is great for picking variations.
- JavaScript code — RGB for arithmetic, HSL for hue rotation.
- SCSS/SASS — HSL because it composes well with
lighten(),darken(),adjust-hue(). - Print — CMYK for offset / press; HEX for digital proofs.
Examples
- Pure red:
#FF0000=rgb(255,0,0)=hsl(0,100%,50%) - Tailwind blue-500:
#3B82F6=rgb(59,130,246)=hsl(217,91%,60%) - Slate-900 (Tailwind):
#0F172A=rgb(15,23,42)=hsl(222,47%,11%)
Tips
- Always check colour contrast for text using a WCAG contrast checker — convert your HEX, but check accessibility separately.
- For dark-mode design, work in HSL: lower the L from your light-mode value, leave H and S alone.
- For a "darker by 10%" variant of a colour, drop L by 8–12 in HSL.
- To find a colour's complement, add 180° to H.
FAQs
Is HSL more accurate than RGB?
Same accuracy — just a different mathematical representation of the same colour space.
Why does CMYK look different from screen?
Print colours look different by nature — pigment vs. light. For exact print colours, use a colour-managed workflow.
Is anything uploaded?
No. Conversion runs in your browser.
Can I paste any format?
Yes — HEX (with or without #), RGB, RGBA, HSL all parse.