Skip to content
Calcapedia
Menu
Tech & Digital

Color Code Converter

Change a color between HEX, RGB and HSL, see a rough CMYK ink mix, and check how readable white or black text is on it.

Level: Grades 8–9

Printable worksheet

Color Code Converter

Inputs
Convert from

Six hex digits such as #3A7BD5, or three such as #3AD.

Result

RGB

rgb(58, 123, 213)

#3A7BD5 is rgb(58, 123, 213) or hsl(215, 65%, 53%), with contrast 4.22:1 against white and 4.97:1 against black.

HEX (6-digit)
#3A7BD5
HSL
hsl(215, 65%, 53%)Unrounded: 214.8°, 64.9%, 53.1%.
CMYK (approximate, no color profile)
73%, 42%, 0%, 16%
Contrast with white
4.22 : 1WCAG text: AA large text only.
Contrast with black
4.97 : 1WCAG text: AA.
More readable text on this color
Black (AA)

See the step-by-step solution ↓

Step-by-step solution

  1. Red: the hex pair 3A is 3 sixteens plus A ones (A = 10 … F = 15)

    3A=3×16+10=58

  2. Green: the hex pair 7B is 7 sixteens plus B ones (A = 10 … F = 15)

    7B=7×16+11=123

  3. Blue: the hex pair D5 is D sixteens plus 5 ones (A = 10 … F = 15)

    D5=13×16+5=213

  4. Put the three channels together

    RGB=rgb(58, 123, 213)

  5. Find how bright the color looks (its luminance L). Undo the screen's brightness curve, then weight red 0.2126, green 0.7152, blue 0.0722, since eyes see green as brightest

    0.2126×0.0423+0.7152×0.1981+0.0722×0.6654=0.1987

  6. Compare with white, whose luminance is 1. Add 0.05 to both and divide the lighter by the darker

    1.050.1987+0.05=4.22

  7. Compare with black, whose luminance is 0, the same way

    0.1987+0.050.05=4.97

Test yourself

20 quick questions built from this calculator's formula: work out results, predict what happens when an input changes, and work backward from an answer. Every answer comes with the working.

What this calculator does

Turn a color code into its other forms, and see whether white or black text will be easy to read on it. Screens mix every color from red, green and blue light, each at a level from 0 to 255. The same color can be written several ways.

Web pages and design tools use a HEX code like #3A7BD5. Style sheets and code often use rgb(58, 123, 213). There's also hsl(215, 65%, 53%), which describes the color by hue, saturation and lightness. HSL is easier to adjust by hand.

This converter moves between those three forms. It shows the base-16 math behind a HEX code. It also gives a rough CMYK ink mix as a starting point for print. Finally, it works out the WCAG contrast ratio of the color against white and against black. (WCAG is the main set of web accessibility guidelines.) So you can tell at a glance which text color will be readable on it.

Where it's used

Why this math matters outside the classroom:

  • Web design. Designers turn the HEX code #3A7BD5 into rgb(58, 123, 213) to add transparency in a style sheet.
  • Accessibility checks. Developers confirm that gray #767676 on white reaches 4.54:1, just above the 4.5:1 AA minimum.
  • Base-16 practice. Computing students read the pair D5 as 13 × 16 + 5 = 213 to practise place value in base 16.
  • Choosing text color. Interface designers pick black text on a mid-blue button because 4.97:1 beats white's 4.22:1.
  • Theme palettes. Front-end teams lighten a color by raising its HSL lightness from 53% to 70% while keeping hue 215°.

How to use it

  1. Choose the format you have: HEX, RGB or HSL.
  2. Enter the code. That's a 3- or 6-digit HEX value, three RGB values from 0 to 255, or a hue in degrees with saturation and lightness in percent.
  3. Read the other formats, then the contrast ratios. A ratio of at least 4.5:1 meets WCAG level AA for normal-size text.

What the inputs mean

HEX code
The # is optional, and letters can be upper or lower case. A 3-digit code doubles each digit, so #3AD means #33AADD.
Hue
Hue is an angle on the color wheel: 0° is red, 120° green, 240° blue, and 360° is red again.
Saturation
Saturation 0% is a gray, and 100% is the most vivid version of the hue. Lightness 0% is black, 100% is white and 50% is the pure hue.

Formula and method

HEX pair → value = first digit × 16 + second digit   (A = 10 … F = 15)
HSL → RGB: C = (1 − |2L − 1|) × S;  X = C × (1 − |(H ÷ 60) mod 2 − 1|);  m = L − C ÷ 2
RGB → HSL: L = (max + min) ÷ 2;  S = (max − min) ÷ (1 − |2L − 1|)
linear channel = c ÷ 12.92 if c ≤ 0.04045, else ((c + 0.055) ÷ 1.055)^2.4   (c = value ÷ 255)
luminance L = 0.2126 R + 0.7152 G + 0.0722 B   (linear channels)
contrast ratio = (lighter L + 0.05) ÷ (darker L + 0.05)

A HEX code is the three RGB values written in base 16, two digits each. The first digit counts sixteens and the second counts ones. So the pair D5 is 13 × 16 + 5 = 213. To go the other way, divide by 16. The whole-number answer is the first digit, and the remainder is the second.

In the HSL formulas, H is the hue in degrees, and S and L are saturation and lightness as fractions (65% is 0.65). Max and min are the strongest and weakest of the three channels. |…| means "ignore any minus sign", and "mod 2" means the remainder after dividing by 2.

To get back to RGB, C (the chroma) is the spread between the strongest and weakest channel. X is the middle channel. The hue's 60° slice of the color wheel decides which channel gets which. Adding m lifts all three to the right lightness. RGB values are rounded to whole numbers. So a round trip through rounded HSL can shift a channel by one.

For contrast, each channel c (its value ÷ 255) is first turned from its screen value into linear light, the actual amount of light. Screens store values on a curve, which this step undoes. Then each channel is weighted by how bright the eye sees red (R), green (G) and blue (B). That gives the relative luminance L, from 0 for black to 1 for white.

The WCAG contrast ratio compares two luminances, with 0.05 added to each. It runs from 1:1 (no contrast) to 21:1 (black on white).

CMYK (cyan, magenta, yellow and black ink) uses the simple textbook formula. Black is K = 1 − max(R, G, B). Then C = (1 − R − K) ÷ (1 − K), and the same for M and Y. Real printing uses color profiles, so treat it as an approximation.

Worked example

A designer has the brand blue #3A7BD5. They want its RGB and HSL values, and the better text color for a button.

  1. 3A = 3 × 16 + 10 = 58, 7B = 7 × 16 + 11 = 123 and D5 = 13 × 16 + 5 = 213, so the color is rgb(58, 123, 213).
  2. Max 213/255 = 0.835 and min 58/255 = 0.227, so L = 0.531, S = 0.608 ÷ 0.937 = 0.649 and the hue is about 215°: hsl(215, 65%, 53%).
  3. Linearised channels 0.0423, 0.1981 and 0.6654 give luminance 0.2126 × 0.0423 + 0.7152 × 0.1981 + 0.0722 × 0.6654 ≈ 0.1987.
  4. Against white: 1.05 ÷ 0.2487 ≈ 4.22:1. Against black: 0.2487 ÷ 0.05 ≈ 4.97:1.

Result: #3A7BD5 is rgb(58, 123, 213) and hsl(215, 65%, 53%). Black text (4.97:1) meets WCAG AA for normal text. White text (4.22:1) passes only for large text.

Understanding the result

WCAG 2 asks for at least 4.5:1 between normal body text and its background for level AA, and 7:1 for AAA. Large text (about 24 px regular or 19 px bold and up) needs 3:1 for AA.

Mid-tone colors, such as many brand blues and oranges, often land between 3:1 and 4.5:1 against both white and black. Then a darker or lighter shade of the color is usually the fix.

Two colors with the same HSL lightness can have very different luminance. That's because the eye is far more sensitive to green than to blue.

Assumptions and limitations

  • Colors are in the sRGB color space with 8 bits per channel, the standard for the web.
  • Contrast follows the WCAG 2 definitions of relative luminance and contrast ratio.
  • CMYK values are a basic conversion without a print profile, so printed colors will differ.
  • Transparency (alpha), 8-digit HEX codes and wide-gamut color spaces (which hold more colors than sRGB) aren't handled.
  • Contrast is checked only against pure white and pure black, not against another color you choose.

Frequently asked questions

How do I convert HEX to RGB by hand?

Split the code into three pairs and convert each from base 16. Multiply the first digit by 16 and add the second, with A to F standing for 10 to 15. #FFA500 becomes 255, 165 and 0.

What contrast ratio do I need for accessible text?

Under WCAG 2, level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 for normal text. The calculator labels each ratio with the level it reaches.

Why does my HSL value change slightly after converting back?

RGB channels are whole numbers from 0 to 255, while HSL is usually rounded to whole degrees and percents. Rounding in either direction can move a channel by one step, which you can't see on screen.

Is the CMYK result right for my printer?

Only roughly. Printers convert colors using profiles for the specific inks and paper. Use the CMYK figures as a starting point, and confirm with a proof or your print shop's profile.

How this calculator is checked

Method: sRGB hexadecimal notation; standard HSL–RGB conversion as used in CSS; WCAG 2 relative luminance and contrast ratio; naive RGB-to-CMYK formula. The calculation is covered by automated tests with known reference values and edge cases. Last updated 2026-10-18. Found a problem? Tell us.

Embed this calculator

Put this Color Code Converter on your own website or blog for free. Paste this code where you want it to appear: