Colour Converter — Hex, RGB, HSL & CMYK with Live Preview

Colour is one of the most representation-heavy concepts in computing

The same orange button can be described as #FF6B35, rgb(255, 107, 53), hsl(17, 100%, 60%), oklch(68% 0.18 34), or even Tomato. These are all valid representations of colour in CSS — and they're not equally useful in every context. A designer working with colour gradients thinks in HSL. A developer copying a hex code from a design tool needs to convert to RGB for a canvas API. A print designer needs CMYK. A CSS animator benefits from oklch.

A colour converter makes moving between these representations instant.

The Major Colour Representations

Hexadecimal (#RRGGBB)

The most common format in web development. Each colour channel (Red, Green, Blue) is represented as a two-digit hexadecimal value from 00 to FF (0–255 in decimal).

#FF6B35:

• R: FF = 255 (full red)
• G: 6B = 107 (medium green)
• B: 35 = 53 (low blue)

Short form: #F63 is equivalent to #FF6633. With transparency: #FF6B3580 — the last two digits are alpha (80 hex = 128 decimal = 50% opacity).

RGB / RGBA

rgb(255, 107, 53)
rgba(255, 107, 53, 0.5)  /* 50% opacity */

Three integers 0–255 for red, green, blue. Optional alpha 0–1 for opacity. CSS modern syntax also allows rgb(255 107 53 / 50%).

HSL / HSLA

Hue, Saturation, Lightness — a more human-intuitive model:

hsl(17, 100%, 60%)

• Hue: 0–360 degrees on the colour wheel. 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
• Saturation: 0% = grey, 100% = full colour
• Lightness: 0% = black, 100% = white, 50% = full colour

HSL makes sense for programmatic colour manipulation: to lighten a colour, increase L; to desaturate, decrease S; to shift the hue family, adjust H.

HWB (Hue, Whiteness, Blackness)

hwb(17 0% 0%)

Hue plus amounts of white and black mixed in. More intuitive for tinting and shading than HSL.

CMYK (Cyan, Magenta, Yellow, Black)

Used in print and physical design:

cmyk(0%, 58%, 79%, 0%)

Subtractive colour model — starts from white paper and removes colour through ink. Web RGB values need to be converted to CMYK when preparing files for print.

CSS Named Colours

147 named colours in CSS: red, tomato, coral, orange, darkorange, chocolate, etc. Useful for quick prototyping; rarely used in production design systems.

How to Use the Colour Converter on sadiqbd.com

1. Enter the colour — hex code, RGB values, or HSL values
2. Select the source format
3. Read the equivalents — all formats displayed simultaneously
4. Preview the colour — a visual swatch confirms the conversion

Real-World Colour Conversion Scenarios

Design handoff: hex to CSS

A designer provides a colour palette in hex. You need CSS custom properties with RGB and HSL:

#3A86FF →

--primary: #3A86FF;
--primary-rgb: rgb(58, 134, 255);
--primary-hsl: hsl(218, 100%, 61%);

HSL is particularly useful for theming — dark mode can invert or adjust the L component systematically.

Creating colour variations

You have a brand colour hsl(218, 80%, 50%) and need lighter and darker variants:

• Lighter tint: hsl(218, 80%, 70%) — increase L
• Darker shade: hsl(218, 80%, 30%) — decrease L
• Lighter, less saturated: hsl(218, 40%, 70%) — decrease S, increase L

HSL makes this systematic. Doing the same with hex requires converting each variant, which is where the colour converter helps.

Web to print conversion

A website button colour #FF6B35 needs to go on printed brochures. The design software needs CMYK.

CMYK conversion (approximate):

• R=255, G=107, B=53 → C=0%, M=58%, Y=79%, K=0%

Note: RGB and CMYK colour gamuts don't perfectly overlap — some vibrant screen colours cannot be reproduced accurately in print. Always do a print proof before final production.

Accessibility contrast checking

A developer needs to check if text colour #FFFFFF (white) on background #3A86FF (blue) meets WCAG contrast requirements.

The contrast ratio calculation requires both colours in relative luminance (a specific RGB-weighted formula). The colour converter provides the RGB values needed for the contrast calculation.

WCAG requires 4.5:1 for normal text, 3:1 for large text. White on #3A86FF has approximately 3.3:1 contrast — acceptable for large text, not for normal-sized body text.

Colour Spaces Beyond sRGB

Modern CSS introduces perceptual colour spaces:

Lab / LCH: Based on human perception. Equal distance in LCH corresponds to equal perceived colour difference — unlike RGB/HSL where the same numerical distance can look very different in different parts of the colour space.

oklch: An improved version of LCH with better hue uniformity. Increasingly used in design tools and CSS for creating perceptually even colour scales.

oklch(68% 0.18 34)
/* Lightness: 68%, Chroma: 0.18, Hue: 34° */

The colour converter typically handles the traditional spaces (hex, RGB, HSL, CMYK). For okLCH and Lab, dedicated colour management tools are more appropriate.

Tips for Working With Colour

Use CSS variables for your colour palette. Define each colour once in :root as a variable. This makes systematic adjustments (dark mode, theming, accessibility fixes) much easier.

HSL is best for creating colour systems. Design systems benefit from choosing a hue and systematically varying saturation and lightness. The converter makes the hex/RGB output easy once you've designed in HSL.

Keep CMYK in mind for anything that will be printed. RGB colours often appear duller in print. Consult a printer or use print-specific design software for accurate CMYK representation.

Frequently Asked Questions

Why does my screen colour look different when printed? Screens use additive RGB (starts from black, adds light). Print uses subtractive CMYK (starts from white paper, adds ink). Different colour gamuts — some screen colours simply can't be reproduced in print. Soft proofing in design software simulates the print output.

What does the alpha channel do in RGBA? Alpha controls transparency: 0 = fully transparent, 1 = fully opaque. In CSS: rgba(255, 107, 53, 0.5) is 50% transparent orange. In hex: the last two digits of an 8-digit hex code represent alpha (00=transparent, FF=opaque).

Is the colour converter free? Yes — completely free, no sign-up required.

Colour representation is unavoidable in web development and design — and the same colour genuinely looks different in different representations while meaning the same thing. The converter makes all representations immediately accessible.

Try the Colour Converter free at sadiqbd.com — convert between hex, RGB, HSL, CMYK, and more with a live colour preview.