What is the difference between RGB and HEX?

RGB and HEX represent the same colours in different formats. RGB uses three numbers from 0 to 255 for red, green, and blue — for example rgb(67, 209, 188). HEX converts those same numbers into a base-16 format — #43D1BC. Both work identically in CSS. Designers often prefer HEX for its brevity. Developers working with JavaScript often prefer RGB for easier calculation.

What is WCAG contrast ratio?

WCAG stands for Web Content Accessibility Guidelines. The contrast ratio measures how visible text is against its background. A ratio of 4.5:1 or higher is required for normal text to pass WCAG AA, the standard for most websites. A ratio of 7:1 or higher passes WCAG AAA, the highest accessibility level. Poor contrast makes text unreadable for people with low vision.

CMYK stands for Cyan, Magenta, Yellow, and Key (Black). It is the colour model used in print design and physical printing. CMYK cannot represent all colours that screens display in RGB. When converting from RGB or HEX to CMYK, some bright colours will appear slightly muted in print. Always check CMYK conversions with your printer before producing physical materials.

Architecting Authority

Groew / Free Tools / Color Code Converter

Free Utility Tool

Free Color Code Converter

Convert any colour between HEX, RGB, HSL and CMYK instantly. Live preview, one-click copy, and WCAG contrast ratio checker. No signup.

Enter any colour — HEX, RGB, or HSL Accepts: #HEX, #HHH, rgb(), rgba(), hsl(), hsla(), or any CSS colour name

Pick

WCAG Contrast Checker

Enter two colours to see the contrast ratio and whether they pass accessibility standards. Required for any text on a website.

Text colour (foreground)

Background colour

Sample Text — How Readable Is This?

0:1 Contrast ratio

Alokk's perspective

Alokk Founder and Lead Growth Architect, Groew

The most common accessibility mistake we see on B2B landing pages is light grey text on a white background. Founders choose colours they find aesthetically clean without checking whether visitors can actually read them. In a conversion rate audit for a B2B SaaS client, we found that their body copy was failing WCAG AA at a 2.4:1 ratio against the page background. Fixing the text colour to pass at 5.1:1 was a ten-minute change. It contributed to a measurable improvement in scroll depth and time on page within two weeks. Contrast is not a design opinion. It is a performance variable.

Common questions

Colour code questions answered

A HEX colour code is a six-character combination of letters and numbers prefixed with a hash symbol, for example #43D1BC. Each pair of characters represents the red, green, and blue values of the colour on a scale from 00 to FF. HEX codes are the most common colour format used in web design and CSS.

RGB and HEX represent the same colours in different formats. RGB uses three numbers from 0 to 255 for red, green and blue — for example rgb(67, 209, 188). HEX converts those same numbers to base-16 format — #43D1BC. Both work identically in CSS. Designers often prefer HEX for its brevity. Developers working with JavaScript often prefer RGB for calculations.

HSL stands for Hue, Saturation and Lightness. Hue is the colour angle on a 360-degree wheel. Saturation controls how vivid the colour is from 0% (grey) to 100% (full colour). Lightness goes from 0% (black) to 100% (white). HSL is preferred by designers because adjusting lightness or saturation produces more predictable and intuitive results than editing HEX or RGB values directly.

WCAG contrast ratio measures how readable text is against its background. A ratio of 4.5:1 or higher passes WCAG AA, the standard required for most websites. A ratio of 7:1 or higher passes WCAG AAA, the highest accessibility level. Large text (18px bold or 24px regular) only needs 3:1 to pass AA. Poor contrast fails accessibility checks and also reduces conversion rates because visitors struggle to read your content.

CMYK stands for Cyan, Magenta, Yellow and Key (Black). It is the colour model used in physical printing. Screens use RGB but printers use CMYK. When you design for print and specify a colour in RGB or HEX, it must be converted to CMYK for the printer. Some bright screen colours cannot be accurately reproduced in print. Always verify CMYK conversions with your printer before producing physical materials.

From Groew's Narrative Architecture Team

Colour codes in web design — what every business owner needs to know

Colour choices directly affect conversion rates, readability and how trustworthy a website feels. This guide explains the formats and the practical decisions behind them.

Why colour consistency matters for brand authority

Every time a visitor encounters your brand across different platforms, their brain is deciding whether to trust it. Inconsistent colours between your website, your social profiles, your email templates and your printed materials create a subconscious signal of low professionalism. The solution is a defined colour palette with exact HEX and RGB values documented and shared with every designer, developer and tool used to produce brand materials. One primary colour, one secondary colour, one accent, and defined neutrals. This tool converts between formats so you can use the right value in any medium.

Read the complete guide

Contrast ratios and conversion rates

Accessibility and conversion are the same problem. Text that fails WCAG contrast checks is also text that visitors cannot comfortably read. Readability directly affects time on page, scroll depth and whether visitors understand your offer well enough to take action. The WCAG AA threshold of 4.5:1 is not an arbitrary bureaucratic standard. It is the point at which most people with impaired vision can read text without strain. For a B2B landing page where the goal is a high-value consultation or demo request, making your copy harder to read is a measurable conversion rate reduction. Use the contrast checker on this page before finalising any text and background colour combination.

When to use HEX, RGB and HSL in CSS

Use HEX for static colour values in CSS — it is the most readable and widely supported format and takes fewer characters. Use RGB or RGBA when you need to add transparency to a colour, for example rgba(67, 209, 188, 0.15) for a tinted overlay or background. Use HSL when you are building a design system and need to programmatically adjust lightness or saturation — HSL makes it straightforward to create a range of tints and shades from a single base colour. CSS custom properties (variables) let you define your colours once in HEX and reference them everywhere, which means a single update changes the colour across the entire site.

Colour and the B2B conversion system

At Groew, every Narrative Architecture engagement includes a review of colour use on landing pages. The most common issue is call-to-action buttons that do not stand out from the surrounding design. A CTA button needs sufficient contrast against the page background to draw the eye without the visitor having to search for it. The second most common issue is using too many accent colours, which dilutes the visual hierarchy and makes it unclear what action the visitor should take. Two or three intentional colours with defined roles outperforms a palette of six colours used interchangeably. Use this converter to audit every colour in your current design against its purpose.

Good design is a conversion system, not a style choice.

Groew reviews your full landing page design, copy and conversion architecture as part of a free growth audit. We show you exactly what a 90-day infrastructure sprint would fix in your market.