Free design & front-end tool
Color Converter
Convert any colour between HEX, RGB, HSL, HSB and CMYK, copy it in the exact format your code needs, and check the contrast ratio against WCAG accessibility thresholds without opening a second tab.
- Eight output formats
- Built-in WCAG checker
- Tint & shade ramp
- Runs entirely offline
RGB
HSL
Tints & shadesClick any swatch
Copy in any format
Contrast checker
Large text sample
Normal body text at around sixteen pixels, which is what most of a page is actually made of and where contrast failures do the most damage.
A converter that also tells you if the colour is usable
Converting a hex code to RGB takes a browser dev tool about a second. The genuinely useful question — whether that colour is readable against the background you are about to pair it with — almost always means opening a second site.
Conversion and contrast in one place
Pick a colour, read it in eight formats, and immediately see its contrast ratio and WCAG pass or fail state against any background you choose.
Every format you actually paste
HEX, 8-digit HEX with alpha, RGB, RGBA, HSL, HSLA, HSB, and CMYK, each with a one-tap copy button, so you are never hand-editing commas into a value.
An instant tint and shade ramp
Eleven steps from near-white to near-black around your base colour. Click any swatch to adopt it, which is usually faster than nudging a lightness value by hand.
You see the text, not just a number
Live large and small text samples render in your actual pair, because a ratio of 4.6 looks very different depending on which two colours produced it.
Two-way editing throughout
Type a hex code, drag the native picker, or nudge an individual RGB or HSL channel. Every field updates the others immediately, in both directions.
No requests, no tracking
All the maths runs in your browser. The page loads no external scripts or fonts, so it works on a plane and sends nothing about your brand palette anywhere.
How to use the colour converter
Four inputs, all of them live. Nothing needs to be submitted and there is no calculate button, because everything recalculates as you change it.
Enter your colour
Paste a hex code, open the native picker, or type raw RGB or HSL channel values. Three-digit shorthand such as #39F is expanded automatically.
Copy the format you need
Every format is listed with its own copy button. Use HSL when you want to adjust a colour by hand later, and CMYK only when the destination is print.
Set the background
In the contrast panel, set the second swatch to whatever the text will actually sit on. The default is white, which is the pairing most often assumed and least often verified.
Read the pass or fail badges
Four checks are shown: AA and AAA at normal and large text sizes. If normal text fails, the usual fix is darkening the text rather than lightening the background.
Colour formats and when to use each one
They describe the same colours; they differ in what they make easy to change. Choosing the right one saves a surprising amount of fiddling later.
| Format | Example | Best for |
|---|---|---|
| HEX | #3B5BDB | The default in CSS and design tools. Compact, but you cannot reason about it by eye |
| HEX with alpha | #3B5BDBCC | Transparency where a single token is required, such as design system variables |
| RGB | rgb(59, 91, 219) | Canvas and image work, and anywhere you manipulate channels programmatically |
| RGBA | rgba(59, 91, 219, 0.8) | Overlays, shadows, and any colour that needs opacity in CSS |
| HSL | hsl(228, 69%, 55%) | Building palettes by hand. Change lightness alone to get a coherent tint or shade |
| HSB / HSV | hsb(228, 73%, 86%) | What the colour pickers in Figma, Photoshop and Sketch actually show you |
| CMYK | cmyk(73%, 58%, 0%, 14%) | Print only. Screen colours frequently sit outside what ink can reproduce |
The CMYK values here use the standard arithmetic conversion. Commercial printing uses colour profiles that account for paper and ink, so treat the output as a starting point rather than a press-ready spec.
What the WCAG contrast thresholds mean
Contrast ratios run from 1:1, two identical colours, to 21:1, pure black on pure white. The Web Content Accessibility Guidelines set minimums for each combination of conformance level and text size.
| Applies to | AA | AAA | Notes |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | Anything under 18pt, or under 14pt bold. Most of your page |
| Large text | 3:1 | 4.5:1 | 18pt and above, or 14pt bold and above — roughly 24px and 18.66px |
| UI components | 3:1 | 3:1 | Input borders, icons, focus rings and other non-text indicators |
| Incidental | None | None | Disabled controls, decorative elements, and logos are exempt |
AA is the level most legislation references, including the European Accessibility Act and the standards US agencies apply under Section 508. AAA is worth reaching for in body copy but is not expected across an entire interface.
Where colour conversion actually bites
Most of the time you want a different notation for the same colour. The problems start when the notation change quietly changes the colour, or when nobody checks the result against a background.
Brand colours arriving as CMYK
Print-first brand guidelines often specify CMYK only. Converting gives you a usable screen starting point to sign off against.
Grey text that fails at 3.9:1
Light grey on white is the single most common accessibility failure on the web, and it always looks fine to the person who chose it.
Building a scale from one colour
The tint and shade ramp gives you a coherent set of hover, border, and background variants without inventing each one separately.
Design tools speaking HSB, CSS speaking HSL
They are different models with confusingly similar names. Reading both side by side stops the mismatch becoming a bug report.
Buttons that pass but borders that do not
Non-text UI elements have their own 3:1 threshold, and input borders are the control that fails it most often.
Dark mode inverting your assumptions
A pair that passes comfortably on white can fail badly on a dark surface. Swapping the two swatches takes one click.
Colour converter FAQ
How do I convert a HEX code to RGB?
Paste the hex value into the field above and the RGB channels fill in immediately. A hex code is simply three pairs of hexadecimal digits, one per channel, so #3B5BDB is 3B red, 5B green and DB blue.
To do it by hand, convert each pair from base 16 to base 10: 3B is 3 × 16 + 11, which is 59. Shorthand like #39F expands by doubling each digit, giving #3399FF.
What is the difference between HSL and HSB?
Both start with the same hue angle, but they treat the other two values differently. In HSL, 100% lightness is always pure white and 50% is the most saturated version of the hue. In HSB, 100% brightness is the vivid colour itself, and you get white only by also dropping saturation to zero.
Design tools such as Figma and Photoshop show HSB in their pickers, while CSS uses HSL. Copying a saturation number from one into the other is a common and confusing source of colour drift.
What is a good contrast ratio?
For normal body text, 4.5:1 meets WCAG AA and 7:1 meets AAA. Large text, meaning 18pt and up or 14pt bold and up, needs 3:1 for AA and 4.5:1 for AAA. Non-text elements such as input borders and icons need 3:1.
AA is the practical target for most projects and the level referenced by most accessibility legislation. If a pairing lands just under 4.5:1, darkening the text usually costs less design-wise than changing the background.
Why does my CMYK conversion look different in print?
Screens emit light and can produce colours that ink on paper physically cannot, particularly vivid blues, greens and oranges. The straightforward arithmetic conversion used here ignores that gamut limit entirely.
Real print work applies an ICC colour profile matched to the specific press, ink and paper stock. Treat these CMYK numbers as a reference point and let your printer supply the profiled values for anything that matters.
What does the alpha value in an 8-digit hex do?
The last two digits set opacity, from 00 for fully transparent to FF for fully opaque. So #3B5BDB80 is the same blue at roughly 50% opacity.
It is supported in every current browser and is convenient when a design token has to be a single string. For anything hand-edited, rgba() tends to be easier to read at a glance.
Are colour names like “tomato” the same as hex codes?
Yes. CSS defines around 148 named colours, each an exact alias for a specific hex value, so tomato and #FF6347 render identically. When your colour matches one exactly, the name appears in the output list.
Names are convenient in prototypes but poor in production, because they are a fixed and fairly arbitrary set that will not match a brand palette and cannot be adjusted.
Does this tool send my colours anywhere?
No. Every conversion and contrast calculation runs in JavaScript in your own browser, and the page loads no external scripts, fonts or trackers.
That also means it keeps working with no connection at all once the page has loaded, which is occasionally useful when you are reviewing a palette somewhere with bad wifi.
How is the contrast ratio calculated?
Each colour’s relative luminance is computed by linearising the three sRGB channels and weighting them 0.2126 red, 0.7152 green and 0.0722 blue, reflecting how much each contributes to perceived brightness. The ratio is then the lighter luminance plus 0.05, divided by the darker plus 0.05.
That weighting is why green text fails far more often than its lightness suggests, and why pure yellow on white is close to unreadable despite looking bright and bold.
Check the pairing before it ships
Converting a colour takes seconds. Discovering six months later that your body copy has been sitting at 3.8:1 the whole time takes considerably longer to fix. Pick your colour, set the background, and read the badges.