Enter a HEX value or RGB values to convert colour formats, preview the result, and check accessibility contrast.
What is a colour calculator?
A colour calculator is a practical utility that helps you convert and evaluate colours across different systems such as HEX, RGB, HSL, and CMYK. Instead of guessing or manually converting values, you can input one format and instantly see the rest. This is especially useful for web developers, designers, marketers, and anyone who wants visual consistency across screens and print.
In day-to-day work, colours travel through many tools. A brand guide may provide HEX values, a design app may show RGB or HSL sliders, and a print file may need CMYK percentages. A calculator saves time and reduces errors as your colour moves from one platform to another.
How to use this tool
- Enter a HEX value (for example
#1E73BE), or fill all three RGB fields. - Click Calculate Colour.
- Review converted values, luminance, and text readability suggestions.
- Optionally enter a second HEX value to test contrast ratio between two colours.
If both HEX and RGB are entered, HEX is used as the source of truth. This keeps the behaviour predictable and avoids conflicting values.
Understanding the output
HEX
HEX is common in web design and CSS. It represents red, green, and blue channels in base-16 notation. For example, #FF0000 is pure red.
RGB
RGB uses decimal values from 0 to 255 for each channel: red, green, and blue. It is intuitive for digital systems and useful when adjusting channels directly.
HSL
HSL stands for hue, saturation, and lightness. Designers often prefer it because hue captures colour family while saturation and lightness handle intensity and brightness in an easy-to-think-about way.
CMYK
CMYK is mainly used in print production. It represents cyan, magenta, yellow, and black inks. On-screen and printed colours can differ, but CMYK gives a useful baseline for physical materials.
Accessibility and contrast checking
Good colour choice is not only aesthetic; it also affects readability and usability. This calculator estimates contrast ratio so you can quickly assess whether two colours are likely to meet WCAG standards:
- AA (normal text): 4.5:1 or greater
- AA (large text): 3:1 or greater
- AAA (normal text): 7:1 or greater
It also suggests whether black or white text gives better contrast on your selected background colour. This simple check can dramatically improve legibility in buttons, cards, and banners.
Practical use cases
1) Building a consistent brand system
Convert one master brand colour into all necessary formats and share with teams working in code, design, and print.
2) Creating dashboard and chart palettes
Generate variations and quickly evaluate if labels remain readable on coloured backgrounds.
3) Front-end styling
Move quickly from design mockups to production CSS using exact, validated values.
4) Marketing assets
Keep landing pages, ad creatives, and social visuals visually aligned by using one trusted conversion source.
Common mistakes this calculator helps avoid
- Using invalid HEX strings (wrong length or unsupported characters).
- Entering RGB values outside 0–255.
- Choosing beautiful colours that fail readability requirements.
- Forgetting that print workflows need CMYK references.
Final thoughts
A good colour workflow is a small advantage that compounds. A reliable colour calculator removes friction, improves accessibility, and keeps your visual identity sharp across platforms. Use it as a fast, practical checkpoint whenever you pick or deploy colour.