Pick a color or type any HEX, RGB or HSL value and get every format instantly, plus copy-ready CSS snippets.
All conversions happen locally in your browser. Nothing leaves your device.
color: #3498db;background-color: rgb(52, 152, 219);background-color: hsl(204, 70%, 54%);Every color on screen is just a set of numbers in a coordinate system. The three systems below describe the same colors in different ways — a HEX code, an RGB triple and an HSL triple for #3498db are the very same blue. Knowing all three makes it easy to read design specs, debug stylesheets and generate variants.
HEX is a compact base-16 notation for RGB values (#rrggbb). RGB mixes red, green and blue channels, each from 0 to 255. HSL describes color by hue, saturation and lightness, which matches how humans think about color and makes it easy to tweak shades and tints.
All three work in every modern browser. HEX is shortest and most common for design handoff. RGB is convenient when you need to build an rgba() value with alpha. HSL is best when you want to adjust a color's brightness or intensity without changing its base hue.
Shortcodes like #f0a are shorthand: each digit is duplicated, so #f0a expands to #ff00aa. This tool accepts both 3-digit and 6-digit HEX, with or without the leading #.
Hue (0–360°) is mapped onto the color wheel, then saturation and lightness scale the color toward gray or black. The standard HSV→RGB formulas do the math, and the result is rounded to the nearest integer 0–255 value for each channel.
Yes. As you type, the tool parses each field and only updates the swatch and the other fields when the value is valid. Out-of-range numbers, malformed formats or missing components simply leave the last valid color in place until you fix the input.
Once you settle on a color, keep the workflow moving: convert the value with the Hex to RGB Converter, pull a palette straight from a photo with the Color Picker from Image, and check how the result reads for everyone in the Color Blindness Simulator before you ship it.
If you just finished with Color Converter, the natural next steps are Color Palette Generator, Color Contrast Checker, CSS Gradient Generator, or browse every tool in Privacy File Tools.