HEX, RGB, HSL — when is each the right choice?

HEX for design specs and CSS; RGB(A) when you need programmatic alpha; HSL when a human needs to think about color — hue, saturation, and lightness are independent knobs, which makes generating tonal ramps (vary hue) or shade steps (vary lightness) far easier than fiddling with HEX channels.

Why does the same color look different on different screens?

Rendering depends on the panel, calibration, and color gamut: one sRGB value produces different results across devices. Where color fidelity matters (brand, print), work in a color-managed system with a calibrated display; on the web, declare profiles consistently to minimize drift.

How do I keep text contrast accessible?

Check against WCAG contrast: 4.5:1 minimum for body text, 3:1 for large text (18pt+). The tool shows the ratio directly — when styling dark themes, verify gray text against both backgrounds; it is the fastest accessibility win available.

Image Tools

Color Converter

Convert between RGB, HEX and HSL color formats.

#00d4aa

HEX#00d4aa

RGB rgb(0, 212, 170)

HSL hsl(168, 100%, 42%)

HSV hsv(168, 100%, 83%)

Contrast Check (WCAG)

White Background

Contrast: 1.91:1Fail - Poor

Dark Background

Contrast: 11.00:1AAA - Excellent

Color Schemes

HEXEdit

RGBEdit

HSLEdit

H°

HSVEdit

H°

Color Palettes

Material Design

Flat UI

Pastel

Color History

What is Color Converter?

Color converter transforms colors between different formats: HEX, RGB, HSL, and HSV. Essential for web development, design, and CSS styling.

Color Formats

HEX: #RRGGBB format, common in CSS
RGB: Red, Green, Blue values (0-255)
HSL: Hue, Saturation, Lightness
HSV: Hue, Saturation, Value (Brightness)

Features

Visual Color Picker: Select colors visually
Color Preview: See the color you're working with
Contrast Checker: Check color accessibility
Color Schemes: Generate complementary colors

Converts one color between HEX, RGB, HSL and HSV in the browser, alongside a live swatch, WCAG contrast ratios against pure white and black, and hue-rotation schemes built on the rounded HSL. It fits the moment a design token has to be restated in CSS, or a palette color needs its readability checked before shipping.

Every readout is rounded, and HSL does not survive the trip back

The component keeps color as 8-bit RGB and re-derives HEX, HSL and HSV after each edit. HSL and HSV are displayed as integers, so #00d4aa reads as hsl(168, 100%, 42%) although its true lightness is 41.57%. Feed those rounded integers back through the HSL-to-RGB routine and the result is #00d6ab, two units off on green and blue. Sweeping all 24-bit values, the worst drift is 5 per channel, near #02f0ee. The generated schemes inherit the same rounding: they rotate the rounded hue by 30, 90, 120, 180 or 270 degrees, so the complement of #00d4aa comes out as #d6002b, while the swatch standing for the original keeps its exact hex. Treat HEX as the value of record when you copy into a stylesheet.

Why the HEX field refuses shorthand and eight-digit alpha

hexToRgb matches ^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$ and the field carries maxlength="6", so only a full six-digit value parses. Shorthand such as fff fails the match, and an eight-digit value like 00d4aa80 is clipped at six characters, dropping the alpha bytes without a message. Pasting a value that still owns its # also overflows, because the hash is drawn as a separate prefix: the field keeps five characters, the match returns null, and the readout label drops to #000000 while the swatch keeps its last valid color. Toward RGB nothing clamps the numbers either, so rgbToHex(300, 0, 0) yields the malformed #12c0000; the browser discards that declaration and the swatch holds its previous color instead of turning red.

What the contrast ratio actually measures

Ratios follow the WCAG relative-luminance definition: each channel is divided by 255, linearised at a 0.03928 knee with gamma 2.4, then weighted 0.2126, 0.7152 and 0.0722, giving (L1 + 0.05) / (L2 + 0.05). Only two partners are tested, pure white and pure black, even though the dark panel is painted #12121a: for #00d4aa the tool prints 11.00:1 against black, while that panel surface really gives 9.76:1. The two thresholds are 4.5:1 under success criterion 1.4.3 and 7:1 under 1.4.6; the extra 3:1 tier labelled A is the 1.4.11 non-text rule, not a body-text pass. One grey step decides it: #767676 scores 4.54:1 on white, #777777 only 4.48:1.

Worked example

Reading the default teal in all four formats

Input

#00d4aa

Output

rgb(0, 212, 170) | hsl(168, 100%, 42%) | hsv(168, 100%, 83%) | 1.91:1 on white | 11.00:1 on black

The hue is really 168.11 degrees and the lightness 41.57%, so display rounding moves one down and the other up. Relative luminance lands near 0.50, which is why white background fails at 1.91:1 while black background clears AAA at 11.00:1. Re-entering hsl(168, 100%, 42%) returns #00d6ab, not the original.

Limits and pitfalls

Only six-digit HEX is parsed: shorthand #fff and eight-digit alpha values are rejected or silently truncated, and alpha is never modelled, so nothing here produces rgba() or #rrggbbaa.
Typed numbers are not clamped, so an R, G or B above 255 or a hue past 360 produces a malformed hex string rather than a warning.
Color history holds 20 entries, deduplicated by exact hex and kept in memory only, so reloading the page starts it empty.
Screen picking needs the EyeDropper API, meaning Chromium 95 or newer in a secure context; elsewhere the button only reports that picking is unsupported, leaving the native input type=color dialog as the way in.
Contrast is measured against pure white and pure black only, so a ratio for your real background or text color has to be computed elsewhere.

Related tools

Where this page stops and something else has to take over

What you are deciding	Color converter on this page	When to reach for this instead
Whether a text color is readable on the surface it will actually sit on	Two endpoints only: white and black, rated at 7, 4.5 and 3, with 21:1 as the ceiling. `#3b82f6` reads 3.68:1 on white (tier A) and 5.71:1 on black (AA). Both numbers are true and both can miss the case that matters, because a mid-grey panel would give 5.07:1 and there is no field here to enter it.	If the text is white or near-black on a page background, the endpoint figure is the answer and this page is enough. When both colors are mid-tone, inspect the element in DevTools and read the ratio inside its color swatch — that one uses the background actually painted behind the text — or take the two relative luminances and compute (L1 + 0.05) / (L2 + 0.05) yourself.
Shipping the same color at 60% opacity	Alpha is never modelled: the component holds 8-bit RGB and writes six hex digits from it, so no readout carries an alpha channel and an eight-digit paste is cut to its first six characters. It gives you the opaque base and stops there.	Add the transparency in CSS, where it costs nothing: `rgb(0 212 170 / 0.6)`, or `color-mix(in srgb, #00d4aa 60%, transparent)` to keep the base as a token. Fix the base color here, then append or mix it in the stylesheet — the arithmetic belongs to the browser, not to this page.
The same color going to Android or Flutter as well as to CSS	Order is fixed: `rgbToHex` writes R, G then B, so the default arrives as `#00d4aa`, six digits, no alpha slot. That is the exact shape CSS wants and one pair short of the shape a mobile theme wants.	Android XML and Flutter both want ARGB: `#FF00D4AA` and `Color(0xFF00D4AA)`. Prepend the alpha pair (`FF` for opaque) and keep the other three bytes in the order this page printed them. Two destination formats means two strings; do not paste the CSS hex into a color resource and assume it parsed.
Hue neighbours that should look like they weigh the same	The scheme swatches keep S and L and rotate the rounded hue by 30, 90, 120, 180 or 270 degrees. Equal HSL lightness is a number, not equal brightness: at `hsl(_, 100%, 42%)` the yellow `#d6d600` scores 1.56:1 against white while the blue `#0000d6` scores 10.65:1.	When the swatches have to carry equal visual weight — chart series, category chips, a 5-step palette — hold lightness in a perceptual space and move only the hue, for example `oklch(0.62 0.16 168)` and its siblings. Stay here when the job is simply a complement, a triad or a tetrad from one known hex.
Converting forty tokens pulled out of a design file	One color at a time, through four mutually exclusive radio modes and a single readout; history holds the last 20 hex values, which is the nearest thing to a batch the page offers. Correct for a handful, wrong for a column, where re-typing is what introduces the typo.	Script the loop: `python3 -c "import colorsys; print(colorsys.rgb_to_hsv(0, 212, 170))"` for one value, or a few lines around `rgb_to_hsv` and `rgb_to_hex` over a list. One trap: colorsys returns HLS from `rgb_to_hls`, with lightness before saturation — swap the two when you compare against this page.
Getting a color off the screen in front of you	The Eye Dropper button checks `window.EyeDropper` and `isSecureContext` first; outside Chromium 95+ on HTTPS it only reports that picking is unsupported and leaves the native color dialog as the way in, which needs the value to exist in a form you can already name.	Elsewhere, take the value with the OS tool: Digital Color Meter on macOS, PowerToys Color Picker on Windows, both of which hand back a hex or an RGB triple. Paste that into the HEX field here for the other three readouts and the scheme preview.

One color, seven written forms: what this page parses, what CSS parses

How the value is written	What this page does with it	Accepted by CSS as-is
`00d4aa` (six digits, no hash)	The intended input: the hash is rendered as a separate prefix and added in code, so all four readouts update as you type.	No — a declaration without the `#` is ignored
`#00d4aa` (six digits with hash)	The field carries `maxlength="6"` and the hash is outside it, so a pasted seven-character string keeps six, the pattern fails, and the readout falls back to `#000000` while the swatch holds.	Yes
`#0da` or `0da` (shorthand)	Rejected: the pattern demands two digits per channel, so shorthand never matches and nothing is converted.	Yes — it expands to `#00ddaa`
`#00d4aa80` (eight digits, alpha)	Truncated to six digits on input; the `80` alpha pair is discarded with no message, and no format is ever printed back with alpha.	Yes (CSS Color 4) — `80` is the alpha byte
`rgb(0, 212, 170)`	Not parsed from text: select the RGB radio, then type 0, 212 and 170 into the three number fields.	Yes
`hsl(168, 100%, 42%)`	Not parsed from text: select the HSL radio and type the three numbers. This value is the rounded readout, so entering it returns `#00d6ab`, not the original.	Yes
`hsv(168, 100%, 83%)`	Printed as a readout and accepted through the HSV radio, but it is a conversion aid only.	No — CSS defines no `hsv()` function; convert to hex, rgb or hsl first

Examples use the default #00d4aa. The middle column is what the input fields really do, the right column whether a browser takes the string unchanged, and the two disagree in both directions: shorthand and eight-digit hex are valid CSS this page cannot read, while hsv() is the opposite — printed here, unknown to CSS.

Frequently Asked Questions

HEX, RGB, HSL — when is each the right choice?: HEX for design specs and CSS; RGB(A) when you need programmatic alpha; HSL when a human needs to think about color — hue, saturation, and lightness are independent knobs, which makes generating tonal ramps (vary hue) or shade steps (vary lightness) far easier than fiddling with HEX channels.
Why does the same color look different on different screens?: Rendering depends on the panel, calibration, and color gamut: one sRGB value produces different results across devices. Where color fidelity matters (brand, print), work in a color-managed system with a calibrated display; on the web, declare profiles consistently to minimize drift.
How do I keep text contrast accessible?: Check against WCAG contrast: 4.5:1 minimum for body text, 3:1 for large text (18pt+). The tool shows the ratio directly — when styling dark themes, verify gray text against both backgrounds; it is the fastest accessibility win available.

Content reviewed: 2026-10-22