Hex Color Converter

What Is a Hex Colour Converter?

A hex colour converter translates colour values between the three formats used most commonly in digital design and web development: hexadecimal (HEX), red-green-blue (RGB), and hue-saturation-lightness (HSL). Each format describes exactly the same colour using a different mathematical model. HEX and RGB define colour by specifying the intensity of red, green, and blue light on a scale from 0 to 255. HSL instead describes colour using how humans perceive it: the hue (the colour wheel position), the saturation (colour intensity), and the lightness (how bright or dark the colour appears).

Web browsers, CSS specifications, design tools like Figma and Sketch, image editors, and print workflows all accept different colour notation. A designer hands off a brand colour as #FF6B35; the developer needs rgb(255, 107, 53) for a canvas API call; the brand guide specifies hsl(18, 100%, 60%) for programmatic tint generation. The converter moves fluently between all three without rounding errors.

Hexadecimal colour notation is rooted in the same binary-to-hex principle used in computing: each pair of hex digits represents one byte (0 to 255) for one colour channel. The MDN Web Docs CSS colour value reference documents every colour format supported by modern browsers. The W3C CSS Color Level 4 specification defines the exact mathematical relationships between HEX, RGB, HSL, and newer formats like oklch.

How to Use the Hex Colour Converter

1. Click the colour swatch on the left to open your browser's native colour picker and choose any colour visually.
2. Alternatively, type a hex code directly into the HEX field (with or without the # symbol).
3. Or enter red, green, and blue values (0 to 255) into the three RGB fields.
4. Or enter hue (0 to 360), saturation (0 to 100), and lightness (0 to 100) into the HSL fields.
5. All other formats update in real time as you type in any field.
6. The colour preview panel at the top shows the live result of your current values.
7. Copy any format or CSS snippet using the copy icons next to each field.
8. Click one of the common colour swatches at the bottom to load a preset colour instantly.

HEX vs RGB vs HSL: Key Differences

When to Use the Hex Colour Converter

The Web Developer Implementing a Design System

A developer receives a Figma file where brand colours are specified as hex codes: primary #1E40AF, hover #1D4ED8, active #1E3A8A. They need to create CSS custom properties that also include HSL values for programmatic tint generation. They enter #1E40AF and read HSL 224, 72%, 40%. They can now define a CSS custom property for the hue value (224) and generate the full tonal palette by passing it into hsl() with variable lightness values without separately calculating each shade.

The UI Designer Checking Colour Contrast

A designer is reviewing WCAG accessibility compliance for a web application. The background is #F3F4F6 (a light grey) and the text is #374151 (dark grey). They convert both to RGB to feed into a contrast ratio calculation: the background is rgb(243, 244, 246) and the text is rgb(55, 65, 81). The relative luminance formula requires RGB values, making the conversion a necessary step before checking the 4.5:1 minimum ratio for normal text.

The Game Developer Specifying Particle Colours

A Unity game developer uses a particle system that accepts HSL values for dynamic colour cycling. The art director specifies a flame effect that should transition from #FF4500 (orange-red) through #FF8C00 (dark orange) to #FFD700 (gold). The developer converts all three to HSL: hsl(16, 100%, 50%), hsl(33, 100%, 50%), and hsl(51, 100%, 50%). The hue values increase linearly from 16 to 51, confirming the designer intended a smooth hue rotation that can be animated with a single lerp on the H channel.

The Print Designer Converting to Screen Colours

A graphic designer receives a brand colour specified for print as Pantone 286 C. The nearest digital equivalent is approximately rgb(0, 56, 168). They enter those RGB values and get hex #0038A8 for the web team and HSL 221, 100%, 33% for the UI team who are building a dark-mode variant at HSL 221, 100%, 50%. The HSL representation immediately shows that the dark-mode version simply needs the lightness raised by 17 percentage points.

Common Mistakes When Converting Colour Formats

Forgetting that HSL lightness 50% is not a mid-grey confuses many designers who are new to the format. In HSL, lightness 50% at full saturation produces the purest version of the hue. Mid-grey has saturation 0% and lightness 50%. To desaturate a colour without changing its perceived brightness, reduce the saturation rather than the lightness.

Rounding RGB values before converting to hex produces off-by-one errors that compound across a colour palette. If you compute RGB values as floating-point numbers from a formula and round each to the nearest integer before hex conversion, the output hex code may differ slightly from the input you started with. Always convert without intermediate rounding where possible.

Assuming web-safe colours still matter is outdated thinking. Web-safe colours were 216 specific hex codes that displayed consistently on 8-bit monitors in the 1990s. Modern displays support 16.7 million colours (24-bit). There is no need to restrict your palette to multiples of 33 in hex.

Confusing HSL and HSV (also called HSB) is easy because both formats use a hue-saturation model. HSL and HSV define saturation and the third channel differently. In HSL, a fully saturated colour at lightness 100% is white. In HSV, a fully saturated colour at value 100% is the pure hue. Adobe tools typically use HSB; CSS uses HSL. Converting between them requires a formula, not a simple rename.

The Mathematics Behind Colour Format Conversion

Every colour format conversion follows a precise mathematical path. No information is lost in the round trip from HEX to RGB to HSL and back, provided rounding is applied only at the final step. Understanding the formulas helps when you need to automate conversions in code or verify that a tool is producing correct results.

HEX to RGB

Split the six-digit hex code into three pairs. Convert each pair from hexadecimal to decimal. The first pair is red (R), the second is green (G), the third is blue (B). For #3B82F6: 3B = 59 (red), 82 = 130 (green), F6 = 246 (blue). Result: rgb(59, 130, 246).

RGB to HSL

Normalise R, G, B to the range 0 to 1 by dividing each by 255. Find the maximum and minimum of the three values. Lightness L = (max + min) / 2. Saturation S = (max - min) / (1 - |2L - 1|) when L is not 0 or 1. Hue H is calculated from which channel holds the maximum value, using a formula that places it on the 0 to 360 degree circle.

HSL to RGB

The reverse calculation uses the chroma (C = (1 - |2L - 1|) x S) and an intermediate value X to reconstruct R, G, B from the hue quadrant. The final RGB values are obtained by adding the lightness offset m = L - C/2 to each intermediate component.

Colour Contrast and Accessibility

Web Content Accessibility Guidelines (WCAG) 2.1 require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text against their background. Contrast ratio is calculated from the relative luminance of two colours. Relative luminance is derived from the linearised RGB values (applying a gamma correction to each channel) using the formula L = 0.2126 R + 0.7152 G + 0.0722 B.

This means that converting a design's colour to RGB is always the necessary first step before checking WCAG compliance. The HSL lightness value alone is not sufficient, because two colours with the same HSL lightness can have different relative luminance values depending on their hue and saturation.

Common high-contrast pairings that pass WCAG AA: black text (#000000) on white background (#FFFFFF) achieves a 21:1 ratio. Dark blue (#1E40AF) on white achieves approximately 7.2:1. Light grey text (#9CA3AF) on white only achieves 2.5:1, which fails the 4.5:1 threshold for normal text.

Colour Spaces Beyond HEX, RGB, and HSL

HEX, RGB, and HSL are the three colour formats you encounter most often in web development, but they are all representations of the same sRGB (standard Red Green Blue) colour space. Understanding where sRGB fits in the broader landscape of colour science helps when you encounter colour problems that HEX and RGB alone cannot solve.

sRGB was standardised in 1996 for computer monitors and has been the default colour space for the web ever since. It covers a subset of human visual perception called a gamut. Modern displays, particularly wide-gamut monitors and OLED screens on mobile devices, can reproduce colours outside the sRGB gamut. CSS now supports wider gamut formats like Display P3 (used in Apple devices) and rec2020 (used in HDR video). Colours specified in these wider gamuts that fall outside sRGB are automatically mapped back to the nearest sRGB equivalent in browsers that do not support them.

oklch and oklab are newer CSS colour spaces that solve a fundamental problem with HSL: two colours with the same HSL lightness value do not necessarily look equally bright to the human eye. A saturated yellow at HSL 60, 100%, 50% appears much brighter than a saturated blue at HSL 240, 100%, 50%, even though they have identical lightness values. The oklab model was designed to make equal numerical steps in lightness correspond to equal perceived changes in brightness, making it more reliable for generating accessible colour scales.

Colour in Print vs Digital: Understanding the Gap

Digital colour (RGB) and print colour (CMYK) use fundamentally different models. RGB is additive: mixing full red, green, and blue light produces white. CMYK is subtractive: mixing full cyan, magenta, yellow, and black ink produces near-black. Converting between them is not a precise mathematical operation; it requires colour profiles that model the specific behaviour of inks on paper and the rendering intent (relative colorimetric, perceptual, saturation, or absolute colorimetric) chosen for the conversion.

When a brand designer specifies a colour that exists vividly on a printed brochure (a bright orange, a vivid teal), there is a real risk that the nearest RGB equivalent looks duller on screen. The CMYK gamut, while smaller than sRGB for some colours, can actually exceed sRGB for certain highly saturated greens and yellows that are achievable with ink but not with the RGB primaries of standard monitors. Professional print-to-screen colour workflows use ICC colour profiles and specialist software to manage these conversions; a simple hex converter is a starting point for approximation, not a substitute for colour-managed workflows in brand-critical contexts.

For most web and UI work, the HEX to RGB to HSL triangle covers everything needed. When print accuracy matters, consult a professional with calibrated hardware and colour management software.

Frequently Asked Questions