ToolWren logo ToolWren
ToolWrenColor › 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…

Quick answer

Color is a free, private online tool that lets you convert colors between HEX, RGB and HSL with a live swatch. It runs entirely in your browser, so nothing you enter is uploaded to a server.

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.

Understanding Color in depth

What a color converter does

A color converter translates a single color between the different notations used across design and code - HEX, RGB, HSL and CMYK. They all describe the same color, but different tools and contexts expect different formats, so converting between them is a constant task for designers and developers. Edit any field and the others update to match, with a live preview swatch.

HEX and RGB explained

Screens build color from red, green and blue light. RGB writes each channel as a number from 0 to 255, like rgb(59, 130, 246). HEX is the same three values packed into a six-digit hexadecimal string, two digits per channel, like #3b82f6. They are interchangeable - HEX is just a compact way to write RGB - which is why conversion between them is exact.

HSL: a more human model

HSL describes color as Hue (which color, 0-360 degrees around the color wheel), Saturation (how vivid) and Lightness (how light or dark). It is far more intuitive for tweaking: to make a color lighter you raise the lightness, to mute it you lower the saturation, all without touching the hue. That is why HSL is popular for building tints, shades and themes.

CMYK and print

CMYK (Cyan, Magenta, Yellow, Key/black) is the subtractive model used in printing, where inks absorb light rather than emit it. Because screens (RGB) and print (CMYK) work in opposite ways, not every bright screen color can be reproduced in print, so this conversion is an approximation - useful for a guide, but always check a proper proof for critical print work.

Everyday uses

Convert a brand HEX into RGB for a CSS gradient, into HSL to derive hover and active states, or into CMYK for a print spec; match a color picked from a design tool; and keep a palette consistent across web and print. Everything runs in your browser, with a live preview so you can see exactly what each value produces.

Related & complementary tools

More Color tools