Hex Colour Calculator
Enter a hex colour to convert it into RGB, HSL, and CMYK, generate related colours, and check accessibility contrast.
What is a hex colour code?
A hex colour code is a six-digit representation of colour used in web design and digital interfaces. It starts with a # and combines red, green, and blue values in hexadecimal format. For example, #1e73be means:
- 1e for red
- 73 for green
- be for blue
Each pair ranges from 00 to ff, which maps to decimal values from 0 to 255. That gives you over 16 million possible colours.
How to use this hex colour calculator
Step-by-step workflow
- Type any valid 3-digit or 6-digit hex value.
- Choose a positive or negative percentage to lighten or darken the base colour.
- Set a comparison colour (like white or black) to check contrast ratio.
- Click the button to generate complete colour data instantly.
This is useful for designers, developers, content creators, and anyone trying to build clean, consistent visual systems.
Understanding the output
RGB values
RGB is ideal for screen-based work. If you are writing CSS, designing in Figma, or adjusting values in JavaScript canvas tools, RGB gives direct channel-level control.
HSL values
HSL (Hue, Saturation, Lightness) is easier for creative adjustments. Want the same colour family but more muted? Lower saturation. Need a brighter shade? Increase lightness.
CMYK values
CMYK is more relevant to printing. While web-first workflows are RGB-centric, having CMYK estimates can help when preparing brand assets for physical materials like flyers, banners, and business cards.
Why contrast ratio matters
Good colour choices are not only about beauty—they also affect readability and accessibility. The calculator includes a WCAG-style contrast ratio check so you can quickly see if your text/background pairing is strong enough.
- 7:1 or higher → Excellent (AAA for normal text)
- 4.5:1 or higher → Good (AA for normal text)
- 3:1 to 4.49:1 → Acceptable for large text only
- Below 3:1 → Poor contrast, usually fails readability standards
Practical uses for this calculator
1) Building a web palette quickly
Start with a brand colour, then use the generated complementary and analogous colours to define accents, borders, links, and hover states.
2) Improving UI consistency
By converting all ad-hoc colours into a small approved palette, you keep your interface coherent and professional across pages and components.
3) Accessibility-first design
Before launching a landing page, test key text/background combinations and improve weak colour pairings before users struggle to read your content.
Common mistakes to avoid
- Using low-contrast colours for body text.
- Mixing too many unrelated accent colours.
- Choosing colours by eye only, without checking numeric values.
- Forgetting that colour can look different between displays and print outputs.
Final thoughts
A reliable hex colour calculator removes guesswork. Instead of trial-and-error, you get exact values, palette options, and readability checks in one place. Whether you are building a personal blog, a SaaS dashboard, or a brand style guide, this tool helps you make cleaner, more confident colour decisions.