ToolWren logo ToolWren
ToolWren › Color

Color Converter

Convert any color between HEX, RGB and HSL. Type into any field and the other two update instantly, with a live preview swatch.

100% client-side · nothing is uploaded

Loading tool…

How to use the Color

  1. Enter a color in any field — HEX, RGB or HSL — or use the color picker / eyedropper.
  2. The other formats (including CMYK) update instantly, with a live preview swatch.
  3. Check the closest CSS color name and the WCAG contrast ratings against white and black.
  4. Click any swatch in Shades & tints to copy that variation.

Privacy: this tool runs entirely in your browser. Your input is never sent to, received by, or stored on any server — there are no uploads and no tracking of what you enter.

About Color

HEX, RGB and HSL

HEX (#3b82f6) and RGB (59, 130, 246) describe a color by its red, green and blue components. HSL (217, 91%, 60%) describes it by hue, saturation and lightness, which is often more intuitive for tweaking.

Converting between them

HEX and RGB are two notations for the same values, so conversion is exact. HSL is a different model, computed from the RGB values — handy for creating lighter/darker variants by adjusting lightness.

Where you'll use it

CSS, design tools and brand palettes mix all three formats. This converter saves you from manual math when a spec gives you one format but you need another.

Frequently asked questions

Do you support 3-digit HEX?
Yes — short HEX like #39f is expanded to #3399ff automatically.
Is alpha/opacity supported?
This tool focuses on opaque colors (HEX/RGB/HSL). For transparency, append an alpha channel in your CSS (e.g. rgba).
Are conversions exact?
HEX↔RGB is exact. HSL is rounded to whole degrees/percentages, which is standard for CSS.

Related tools