HEX RGB HSL Color Converter
Enter a color code to see HEX, RGB and HSL side by side, then check text and background contrast against WCAG on the same page.
Convert a color code
e.g. #0E6E5C
Please check the color code, e.g. #0E6E5C
RGB (0~255)
HSL (H° / S% / L%)
HSL values are rounded to whole numbers, so converting back to RGB can drift by 1–2 steps.
Web accessibility contrast check (WCAG)
Please check the color code, e.g. #0E6E5C
Please check the color code, e.g. #FFFFFF
6.16 : 1
Sample text AaBb 123
Sample text AaBb 123
Large text means 18 pt (about 24 px) or bigger, or 14 pt (about 18.66 px) and bold.
WCAG sets a minimum, not a guarantee. Always check the result with your own eyes on a real screen.
How to use
How the color converter works
This color converter turns a HEX code into RGB and HSL (and back again) the moment you type. Paste a code such as #0E6E5C, drag the color swatch, or type numbers into the RGB or HSL boxes, and the other two notations, the large preview and the copy-ready code lines all update together. Underneath the converter sits a WCAG contrast checker, so one page covers both jobs web designers do all day: translating colors between formats and making sure the text on top of them can actually be read.
HEX, RGB and HSL are three ways to write one color
A screen mixes red, green and blue light. RGB writes each channel as a number from 0 to 255. HEX writes the same three numbers in base 16, two digits per channel, with a leading #. HSL describes the same color with three more human-friendly numbers: hue (an angle on the color wheel from 0 to 360 degrees), saturation (how vivid it is, 0 to 100 percent) and lightness (how close it is to black or white, 0 to 100 percent).
#RRGGBB → R = hex(RR), G = hex(GG), B = hex(BB)
Worked example with #0E6E5C. The first pair, 0E, is 0 × 16 + 14 = 14. The middle pair, 6E, is 6 × 16 + 14 = 110. The last pair, 5C, is 5 × 16 + 12 = 92. So the color is rgb(14, 110, 92). To get HSL the tool divides each channel by 255, finds the largest and smallest channel, and derives hue from which channel dominates, saturation from the spread between them, and lightness from their average. For this color that gives hsl(169, 77%, 24%): a deep, fairly saturated teal-green that is a little darker than a medium tone.
Why designers like HSL for adjusting colors
RGB and HEX are good for storing a color but awkward for editing one. If you want a slightly lighter version of a brand color, there is no obvious way to nudge three RGB numbers and keep the same hue. In HSL you keep H and S fixed and change only L. Raise lightness by 10 points for a hover state, lower it by 10 for a pressed state, drop saturation for a muted background. This is why many CSS theme systems define a base hue and derive every shade from lightness steps.
How the contrast ratio is calculated
The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between the relative luminance of the lighter and the darker color. Relative luminance is a weighted sum of the linearized red, green and blue channels, with weights that reflect how sensitive the eye is to each: about 21 percent red, 72 percent green and 7 percent blue.
L = 0.2126 × R + 0.7152 × G + 0.0722 × B | ratio = (Llighter + 0.05) ÷ (Ldarker + 0.05)
The ratio runs from 1:1 (identical colors) to 21:1 (black on white). Your starting color, #0E6E5C on white, comes out at about 6.2:1, comfortably above the 4.5:1 line. A well-known edge case is mid-gray text on white. #777777 measures 4.48:1 and fails AA for normal text by a hair, while #767676 measures 4.54:1 and just passes. That single digit of difference is why checking by eye is unreliable.
What the four badges mean
- AA normal text (4.5:1) – the level most organizations and accessibility policies target for body copy.
- AA large text (3:1) – for text at 18 pt (about 24 px) or larger, or 14 pt (about 18.66 px) and bold.
- AAA normal text (7:1) – the stricter, enhanced level. Useful for long-form reading and for audiences with low vision.
- AAA large text (4.5:1) – the enhanced level for large text.
In the United States, WCAG is the reference most accessibility requirements point to. Section 508 for federal agencies incorporates WCAG 2.0 Level AA, and the Department of Justice’s 2024 rule for state and local government websites adopts WCAG 2.1 Level AA. Europe’s accessibility standard EN 301 549 also builds on WCAG 2.1 AA. None of this is legal advice, but it explains why 4.5:1 is the number you will see in design reviews and audits.
Writing colors in CSS
All three notations work in every current browser: color: #0E6E5C;, color: rgb(14, 110, 92); and color: hsl(169, 77%, 24%); are the same color. Modern CSS also accepts the space-separated form rgb(14 110 92 / 50%) for transparency, and eight-digit HEX such as #0E6E5C80, where the last pair is the alpha channel. This converter handles opaque colors only, so add the alpha part yourself after copying a code.
Common mistakes
- Shortening a HEX code that cannot be shortened.
#AABBCCcan be written#ABCbecause each pair repeats a digit.#A1B2C3cannot. Shortening it silently gives a different color. - Giving HSL saturation and lightness as decimals. In CSS they are percentages.
hsl(169, 0.77, 0.24)is invalid; writehsl(169, 77%, 24%). - Trusting your own eyes for light gray text. Pale gray placeholder and caption text often looks fine on a good monitor and fails badly on a phone in sunlight.
- Forgetting non-text elements. WCAG 2.1 also asks for at least 3:1 contrast on icons, input borders and focus indicators. Use the checker with those colors too.
Frequently asked questions
Are a HEX code and an RGB value the same color?
Yes. HEX and RGB are two ways of writing the same three numbers, one in base 16 and one in base 10. #0E6E5C and rgb(14, 110, 92) are identical, and converting between them never changes the color.
What does the # in a color code mean, and can I use three digits?
The # tells the browser that what follows is a hexadecimal color. When both digits in every pair are the same, you can shorten the code to three digits, so #00ff88 can be written #0f8. If any pair has two different digits, it cannot be shortened.
Why does converting HSL back to RGB sometimes change a value by one or two?
HSL is shown as whole numbers, so the hue, saturation and lightness are rounded. Rounding throws away a small fraction, and when the color is turned back into RGB the result can land one or two steps away from where you started. Keep the HEX or RGB value as your source of truth and use HSL for adjusting.
What contrast ratio do I need for text on a website?
For WCAG Level AA, body text needs at least 4.5:1 and large text needs at least 3:1. For the stricter Level AAA, the numbers are 7:1 and 4.5:1. If you are not sure which level your project requires, aim for AA on everything and AAA for long reading passages.
What counts as large text?
Text that is at least 18 point (roughly 24 pixels), or at least 14 point (roughly 18.66 pixels) and bold. Everything smaller is normal text and needs the higher ratio.
Does the converter support transparency?
No. It works with solid colors. If you need transparency, copy the RGB or HSL code and add an alpha value yourself, for example rgba(14, 110, 92, 0.5) or hsl(169 77% 24% / 50%). Remember that the contrast ratio of a semi-transparent color depends on whatever sits behind it.
Is anything I enter stored or uploaded?
No. The conversions and contrast checks run in your browser. The only thing saved is the short list of recent colors, which lives in your own browser storage and can be cleared with one click.