Toolkit Shelf
Find

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.

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.

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

  • Browser-side link, file, format, and web utility tasks that need an output now.
  • Generating reusable artifacts such as QR codes, snippets, exports, or cleaned payloads.

Before relying on it

Check first

  • The contrast helper compares black and white text only. Full accessibility checks still depend on font size, weight, state, and surrounding UI.
  • Publishing a generated file or code without testing it in the real destination.
  • Encoding private or sensitive data into an output that other people can scan, copy, or inspect.

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

Formula, inputs, limitations and review record
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.

Review record

Catalog QA baseline on 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. 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.