Free tool HEX to RGB and back, plus HSL, CMYK and OKLCH
Type a color the way you have it: #3B6BFF, 59 107 255, hsl(225 100% 62%), a CMYK value from the print guide or an oklch() from a design token. You get every format at once, a preview on your background, and the WCAG contrast ratio with a suggested shade when it falls short.
- Six formats in, all out
- WCAG 2.2 contrast
- Runs locally
Convert a color
The sample is #3B6BFF, the brand color used as an example on the TapCub live chat page, on a white background. Use the picker, type any format, or try the other samples.
HEX (#rgb, #rrggbb, #rrggbbaa, with or without #), rgb(), hsl(), hsv() / hsb(), cmyk(), oklch(), oklab(), a CSS color name, or just three numbers such as 59, 107, 255.
Used for the contrast check and the preview. Any format.
Preview
#3B6BFFColor
Normal text at 16 px. Is this easy to read?
Large text at 24 px
Chat with usText on background 4.43:1
All formats
Calculated from the 8-bit RGB value, so every row describes exactly the HEX you copy.
| Format | Value |
|---|---|
| HEX | #3B6BFF |
| RGB | rgb(59, 107, 255) |
| HSL | hsl(225.3, 100%, 61.6%) |
| HSV / HSB | hsv(225.3, 76.9%, 100%) |
| CMYK (approximate) | cmyk(77%, 58%, 0%, 0%) |
| OKLCH | oklch(58.45% 0.2262 265.83) |
| OKLab | oklab(58.45% -0.0165 -0.2256) |
| RGB, CSS space syntax | rgb(59 107 255) |
| Decimal integer | 3894271 |
| Android ARGB | 0xFF3B6BFF |
WCAG 2.2 contrast
Color used as text or an icon on the background.
- FailAA, normal text (WCAG 1.4.3): needs 4.5:1, this pair has 4.43:1.
- PassAA, large text, 24 px or 18.66 px bold (1.4.3): needs 3:1, this pair has 4.43:1.
- FailAAA, normal text (1.4.6): needs 7:1, this pair has 4.43:1.
- FailAAA, large text (1.4.6): needs 4.5:1, this pair has 4.43:1.
- PassIcons, borders and form controls (1.4.11): need 3:1 against what is next to them, this pair has 4.43:1.
- TipNearest shade with the same hue that passes AA for normal text on this background: #3A6AFD (4.50:1). Only OKLCH lightness was changed.
Contrast at a glance
Ratios are truncated, not rounded: 4.499 shows as 4.49 and fails.
| Pair | Ratio | AA text 4.5 | Large / UI 3 | AAA text 7 |
|---|---|---|---|---|
| Color on background | 4.43:1 | Fail | Pass | Fail |
| White text on color | 4.43:1 | Fail | Pass | Fail |
| Black text on color | 4.73:1 | Pass | Pass | Fail |
color: #3B6BFF;
color: rgb(59 107 255);
color: hsl(225.3, 100%, 61.6%);
color: oklch(58.45% 0.2262 265.83);
--brand: #3B6BFF;Share these inputs: the values go after the # in the link, so they never reach a server.
https://tapcub.com/tools/color-converter
Version v1.0Updated Update history
What the results tell you
One color, written six ways, and whether people can read it on your background.
HEX and RGB
The same three 0–255 numbers. HEX writes each one as two base-16 digits: 3B is 3 × 16 + 11 = 59. An 8-digit HEX adds alpha (transparency) at the end.
HSL and HSV
Hue in degrees plus two percentages. HSL is what CSS uses; HSV (also called HSB) is what Photoshop and most color pickers show. They share the hue but not the other two numbers, so do not copy one into the other.
CMYK
A rough print equivalent using the simple formula from CSS Color 5. Real print color depends on the press, paper and ICC profile, so ask your printer for the official CMYK; do not convert it back and expect the same HEX.
Contrast
WCAG compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). 4.5:1 is the AA minimum for body text, 3:1 for large text and icons. A pair that fails gets a suggested shade.
Numbers can differ by one from other tools. This tool rounds RGB to whole numbers first and derives every other format from that, so pasting any row back gives the same HEX.
Three steps
Results update as you type.
-
1
Enter the color
Paste the value from your brand guide, CSS or design file, or click the swatch to pick one. Format is detected automatically.
-
2
Set the background
Usually white or your page background. For a button, the background is the button color and the text color goes in the first field.
-
3
Copy and check
Copy the format you need from the table or the CSS block. If AA fails, try the suggested shade and check again.
How the conversions are calculated
Everything follows the W3C CSS Color specifications and WCAG 2.2. Values were checked against culori, an independent color library.
- HEX ↔ RGB: each pair of hex digits is one channel,
value = 16 × first + second - HSL and HSV: the standard conversions in CSS Color 4 §7; hue is the angle on the color wheel
- CMYK:
K = 1 − max(R, G, B),C = (1 − R − K) / (1 − K), same for M and Y (CSS Color 5 naive conversion) - OKLCH: sRGB is linearised, converted to OKLab with Björn Ottosson's matrices, then
C = √(a² + b²)andh = atan2(b, a) - Contrast:
(L1 + 0.05) / (L2 + 0.05), where L is relative luminance0.2126 R + 0.7152 G + 0.0722 Bon linearised channels
| What | AA | AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 |
| Icons, borders, focus rings, form controls (1.4.11) | 3:1 | — |
| Logos and disabled controls | No requirement | No requirement |
#3B6BFF by hand
The sample color, converted and checked step by step.
| Step | Working | Result |
|---|---|---|
| Split the HEX | 3B · 6B · FF | 3 × 16 + 11 = 59, 6 × 16 + 11 = 107, 15 × 16 + 15 = 255 |
| RGB | — | rgb(59, 107, 255) |
| Linearise | (59 / 255 + 0.055) / 1.055, raised to 2.4, and so on | 0.0437, 0.1470, 1.0000 |
| Relative luminance | 0.2126 × 0.0437 + 0.7152 × 0.1470 + 0.0722 × 1 | 0.1867 |
| Contrast with white | (1 + 0.05) / (0.1867 + 0.05) | 4.43:1: passes for large text and icons, fails AA for body text |
| Suggested shade | Lower OKLCH lightness until the ratio reaches 4.5:1 | #3A6AFD, 4.50:1 |
The difference between #3B6BFF and #3A6AFD is hard to see, but it moves white text from failing to passing AA. For a button label at 16 px, either darken the color this way or make the label large and bold.
Where color values go wrong
Most mix-ups come from formats that look alike.
Pasting HSV into HSL
A picker shows HSB 225°, 77%, 100%; the CSS equivalent is hsl(225 100% 62%). Same hue, very different numbers.
Treating CMYK as exact
Screen-to-print conversion depends on the ICC profile. Use this CMYK as a starting point and get the official value from the printer or brand guide.
Checking contrast by eye
Mid-tone blues, oranges and greens often look readable with white text and still fall below 4.5:1. Measure every text and background pair.
Forgetting transparency
A semi-transparent color looks different on every background. Contrast must be checked on the blended color, which this tool does for you.
Put your brand color on the chat widget
The TapCub live chat widget takes your brand color, logo, corner, welcome message and offline text, so it looks like part of your site.
Brand color and logo
Set the widget color as a HEX value, like the #3B6BFF example on the chat page. Convert your brand RGB or CMYK here first.
Learn moreWorks on phones
The launcher adapts to small screens, so check the color on the backgrounds your mobile pages use.
Learn moreYour brand only
Pro and above can remove the TapCub mark from the widget.
Learn moreColor converter questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each from base 16: #3B6BFF → 3B = 59, 6B = 107, FF = 255, so rgb(59, 107, 255). A three-digit HEX doubles each digit first: #F60 is #FF6600.
How do I convert RGB to HEX?
Write each 0–255 number as two hex digits and join them: 59 → 3B, 107 → 6B, 255 → FF, giving #3B6BFF. Type the three numbers into the color field, even without rgb(), and the HEX appears at the top of the table.
What is an 8-digit HEX color?
The last two digits are alpha (opacity): #3B6BFF80 is the same blue at about 50% opacity. Browsers support it in CSS; some older tools and email clients do not, so use rgba() there.
Is the CMYK value accurate?
It is an approximation. Converting screen color to ink properly needs the ICC profile of the press and paper, which a formula cannot know. Use it for rough work and get the official CMYK from your printer or brand guidelines.
What is OKLCH and why use it?
OKLCH describes color as lightness, chroma and hue in the OKLab space, which tracks how people perceive lightness far better than HSL. Changing L in OKLCH makes a color lighter or darker without shifting its hue, which is why design systems use it for palettes. All current major browsers support oklch() in CSS.
What contrast ratio do I need?
WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for icons and form controls. AAA needs 7:1 and 4.5:1. Logos and disabled controls are exempt.
Why does another converter show a slightly different number?
Rounding. This tool rounds RGB to whole numbers first and calculates HSL, OKLCH and the rest from that, so every row describes the exact HEX you copy. Tools that keep the unrounded value can differ by 0.1–1 in the last digit.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
A chat widget that matches your site
Add TapCub live chat, set your brand color and logo, and talk to visitors with their page and source on screen.