English
How to convert HEX to RGB (and back)
This color converter turns a HEX code into RGB, HSL, HSV, CMYK and OKLCH as you type, and it works the other way too: paste rgb(255, 99, 71) into any box and you get #FF6347. Every box accepts every format, so you never have to hunt for the right field.
If you want to do it by hand, a HEX code is just three numbers written in base 16. Take #3B82F6, split it into pairs, and convert each pair:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Going from RGB to HEX is the reverse. Divide each channel by 16: the whole number is the first digit and the remainder is the second. 255 is 15 remainder 15, so FF. 99 is 6 remainder 3, so 63. That is why tomato red, rgb(255, 99, 71), comes out as #FF6347.
Common color codes in HEX, RGB and HSL
These are worth recognising on sight. All of them are also valid CSS color names, and the tool shows the nearest name for any color you enter (#3B82F6 is closest to dodgerblue, though not the same).
| Name | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Short, long and transparent HEX codes
HEX comes in four lengths. Three digits is shorthand where every digit is doubled, so #F60 means #FF6600. Six digits is the normal form. Eight digits adds an alpha channel at the end: #3B82F680 is the same blue at 128 out of 255, roughly 50% opacity. Four digits is the short version of that. Browsers have understood all four for years, but some design apps and email clients still only take six, so when in doubt paste the six-digit code and set opacity separately.
Which format should you use?
- HEX for anything you paste into a design tool, a brand guide or a CMS. It is short and nobody misreads it.
- RGB / RGBA when you need transparency in older CSS or in JavaScript canvas code.
- HSL when you want to tweak a color by reasoning about it. Lowering the last number makes it darker, lowering the middle one makes it greyer. Hover states are much easier to write this way.
- OKLCH for new CSS design systems. Its lightness value matches what your eye sees, so two colors with the same L really look equally light, which HSL does not manage (yellow at 50% lightness looks far brighter than blue at 50%).
- CMYK only as a rough guide for print. The numbers here come from the plain formula, not from a printer profile, so the brochure will not match your screen exactly. Ask the print shop which profile they use.
- HSV / HSB mostly to match the picker in Photoshop or Figma, which use it.
Color contrast checker: what passes WCAG?
WCAG 2 compares the relative brightness of text and background and expresses it as a ratio from 1:1 (identical) to 21:1 (black on white). The thresholds are fixed:
| Level | Normal text | Large text (24px, or 18.66px bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Icons, input borders and focus rings need 3:1 under WCAG 2.1. Here is how some real colors score as text on white:
| Text color on #FFFFFF | Ratio | Result |
|---|---|---|
| #949494 | 3.03:1 | Large text only |
| #777777 | 4.48:1 | Fails AA for body text, by a hair |
| #767676 | 4.54:1 | Passes AA |
| #595959 | 7.00:1 | Passes AAA |
| #3B82F6 | 3.68:1 | Large text and buttons only |
| #008080 | 4.77:1 | Passes AA |
The #777777 row is the classic trap. It looks identical to #767676, and a checker that shows one decimal will display 4.5, but the rule is "at least 4.5" and 4.48 is not. This tool never rounds a failing ratio up to the threshold.
When a color fails, the checker searches for the closest shade with the same hue that passes. For #3B82F6 on white it suggests #1E6FF5 for AA (4.52:1) and #0950C5 for AAA (7.08:1). Press Use to load it, or copy it straight into your stylesheet. Bright yellows and oranges usually need a much darker shade before they work as text on white; for those, keep the bright color for backgrounds and put dark text on top.
Build a palette and pick colors from an image
The palette panel builds a tint and shade scale from 50 to 950 (the naming Tailwind uses), plus complementary, analogous, triadic, split-complementary, square and monochrome sets. Click any swatch to copy it, then export the whole set as CSS custom properties, SCSS variables, JSON or a Tailwind color block, or download a PNG strip to drop into a slide or send to a client.
To match a color from a logo or photo, load the image and tap the spot. A single pixel in a JPG can be a few shades off from what you see because of compression noise, so for photos switch to the 3×3 or 5×5 average. In Chrome and Edge the Pick from screen button can grab a color from anywhere on your display, including other windows. Nothing is uploaded; the image is read in your browser.
Frequently asked questions
How do I convert HEX to RGB?
Split the six digits into three pairs and turn each pair from base 16 into a number from 0 to 255. #3B82F6 becomes 3B = 59, 82 = 130 and F6 = 246, so the RGB value is rgb(59, 130, 246).
How do I convert RGB to HEX?
Write each channel as a two-digit hexadecimal number and join them after a #. rgb(255, 99, 71) gives FF, 63 and 47, so the HEX code is #FF6347, which is the CSS color tomato.
What contrast ratio do I need to pass WCAG AA?
Normal text needs at least 4.5:1 and large text (24px, or 18.66px bold) needs 3:1. Gray #767676 on white is 4.54:1, the lightest gray that still passes for body text.
What does an 8-digit hex color code mean?
The last two digits are the alpha (opacity) channel. #3B82F680 is the same blue at 128/255 opacity, about 50%, which is rgba(59, 130, 246, 0.5) in CSS.
What does a 3-digit hex code like #F60 mean?
Each digit is doubled, so #F60 is #FF6600. The short form only works when both digits of every pair are the same, which is why #3B82F6 has no 3-digit version.
Is the CMYK value accurate enough for printing?
It is a starting point, not a print proof. The tool uses the standard formula, so #3B82F6 becomes cmyk(76%, 47%, 0%, 4%), but the real ink mix depends on the printer's color profile and paper, so ask your print shop for their values.
How can I get the HEX code of a color in a photo?
Load the image in the panel above and tap the spot you want; the tool reads that pixel. For photos switch to a 3×3 or 5×5 average, because a single pixel is often noisier than the color you see.
What is the difference between HSL and HSV?
Both start with the same hue, but HSL lightness 100% is always white while HSV value 100% is the brightest version of the color. Pure red is hsl(0, 100%, 50%) and hsv(0, 100%, 100%).