Utility Tools

Color Converter HEX / RGB / HSL

Use this color converter to translate design values between HEX, RGB, and HSL, copy CSS-ready color strings, and quickly check whether black or white text is more readable.

Method shown June 6, 2026Source note includedFree tool

Live converter

Color converter

HEX, RGB, or HSL color

#336699

#336699
rgb(51, 102, 153)
hsl(210 50% 40%)

StatusReady

Parsed as HEX. Best simple text color: White.

Contrast check6 : 1 with white

3.5 : 1 with black. Use full accessibility testing for final UI decisions.

Color values

Copy-ready values for CSS, design notes, issue comments, and implementation specs.

Format	Value
HEX	#336699
RGB	rgb(51, 102, 153)
HSL	hsl(210 50% 40%)
Relative luminance	0.1251
Best text color	White

Color note

HEX, RGB, and HSL are different ways to represent the same sRGB color. The contrast values compare plain black and white text only; final interface colors still need context-specific accessibility review.

Quick answer

Color Converter HEX / RGB / HSL: what it converts

Color Converter HEX / RGB / HSL converts converted color values from hEX color, rGB color and hSL color. The visible conversion method is HEX, RGB, and HSL values are normalized to sRGB channels, then converted with standard hue, saturation, lightness, and luminance formulas.

Converted outputConverted color values

InputsHEX color, RGB color, HSL color

Conversion methodsRGB color conversion method

Conversion method

sRGB color conversion method

HEX, RGB, and HSL values are normalized to sRGB channels, then converted with standard hue, saturation, lightness, and luminance formulas

The contrast helper compares black and white text only. Full accessibility checks still depend on font size, weight, state, and surrounding UI.

How to use

Steps

Paste a HEX, RGB, or HSL color value.
Review the converted HEX, RGB, and HSL outputs.
Use the swatch and black/white contrast comparison as a quick readability check.
Copy the values into CSS, design notes, or implementation specs.

Example

Sample conversion

HEX#336699

RGBrgb(51, 102, 153)

HSLhsl(210 50% 40%)

Converter use

Best for

Use this color converter to translate design values between HEX, RGB, and HSL, copy CSS-ready color strings, and quickly check whether black or white text is more readable.
Converting sRGB color conversion method with the method and assumptions visible.
Comparing the output with the sample conversion and benchmark table before using it elsewhere.
Browser-side link, file, format, and web utility tasks that need an output now.

Before relying on it

Check first

Using the converted color values without checking that hEX color, rGB color and hSL color match the same task and context.
Ignoring that the contrast helper compares black and white text only. Full accessibility checks still depend on font size, weight, state, and surrounding UI.
Skipping the source notes when the formula, benchmark, or warning depends on outside context.
Publishing a generated file or code without testing it in the real destination.

Details

What to know before using the output

These notes make the assumptions explicit, especially where the same search query can mean slightly different things.

Accepted HEX#rgb or #rrggbb

Short and full HEX colors are expanded and normalized to lowercase six-digit HEX output.

Accepted RGBrgb(51, 102, 153)

RGB channels are parsed as 0 to 255 values and converted to HEX and HSL.

Accepted HSLhsl(210 50% 40%)

HSL hue, saturation, and lightness are converted back to sRGB channels.

Source notes

References used for this converter

CSS Color ModuleDefines CSS color syntaxes and color functions used by browsers.WCAG contrastDefines relative luminance and contrast ratio concepts used for text readability checks.

Benchmarks

How to read the output

This converter is a decision aid, not a fixed rule. Use the output to compare scenarios and document your assumptions. Benchmark ranges are broad planning heuristics unless this page names a specific source for the range.

HEX#336699.

Compact and common in CSS, design specs, and brand palettes.

RGBrgb(51, 102, 153).

Useful when editing individual red, green, and blue channels.

HSLhsl(210 50% 40%).

Useful when adjusting hue, saturation, or lightness by intent.

Method and limitations

Methodology and assumptions

The method, inputs, example, and limitations are shown so the conversion is checkable, not just an output in a box.

Conversion method

HEX, RGB, and HSL values are normalized to sRGB channels, then converted with standard hue, saturation, lightness, and luminance formulas

Inputs used

HEX color, RGB color, HSL color

Limitations

Utility outputs depend on the encoded payload, file format, target app, scanner, printer, browser, and real-world testing before sharing.

Last reviewed

June 6, 2026

Cite this page

Toolkit Shelf. Color Converter HEX / RGB / HSL. Last reviewed June 6, 2026. https://toolkitshelf.com/tools/color-converter

FAQ

Common questions

Are HEX, RGB, and HSL different colors?

They can represent the same sRGB color in different notation. This converter normalizes the input and shows equivalent values.

Does the contrast check replace accessibility testing?

No. It only compares black and white text against the color. Real accessibility depends on font size, weight, state, opacity, and nearby UI.

Can I paste CSS rgb() and hsl() values?

Yes. The converter accepts common CSS rgb() and hsl() strings as well as 3-digit and 6-digit HEX colors.

Do utility tools upload my payload?

Use the page notes for each tool. Browser-side utilities can generate outputs locally, but the final file or code may still reveal whatever you encode or share.

Why should I test the generated output?

Scanners, printers, file viewers, apps, and platform previews can behave differently, so test the exact downloaded output before using it publicly.

Why might another converter show a different output?

Different tools may use different rounding, assumptions, default rates, methods, formulas, or input timing. Compare the visible method and inputs before relying on the output.