Toolkit Shelf
Find

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.

Catalog QA baseline June 6, 2026Free toolSource note included

Live converter

Color converter

#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.

FormatValue
HEX#336699
RGBrgb(51, 102, 153)
HSLhsl(210 50% 40%)
Relative luminance0.1251
Best text colorWhite
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

  1. Paste a HEX, RGB, or HSL color value.
  2. Review the converted HEX, RGB, and HSL outputs.
  3. Use the swatch and black/white contrast comparison as a quick readability check.
  4. 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.
  • Reviewing the visible conversion method and assumptions before relying on the converted color values.
  • 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 before confirming the visible inputs match the same task and context: hEX color, rGB color, and hSL color.
  • 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

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

HEX: #336699.

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

RGB: rgb(51, 102, 153).

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

HSL: hsl(210 50% 40%).

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

Method and limitations

Methodology and assumptions

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.

Catalog QA baseline

June 6, 2026. This date marks the catalog-wide automated and editorial QA baseline, not a tool-specific expert review.

Cite this page

Toolkit Shelf. Color Converter HEX / RGB / HSL. Page version 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.