Convert color codes between HEX, RGB and HSL instantly — pick a color visually or type any format. All processing happens in your browser.
A HEX color code is a six-digit hexadecimal number prefixed with # that represents a color in the RGB color model. The first two digits are red, the next two green, and the last two blue. For example #ff6600 is a bright orange.
RGB (Red, Green, Blue) defines a color by mixing three light channels, each from 0 to 255. HSL (Hue, Saturation, Lightness) defines a color by its position on the color wheel (0–360°), how saturated it is (0–100%) and how light or dark it is (0–100%). HSL is often more intuitive when adjusting shades and tints.
All three formats work in CSS. HEX is the most compact and widely used. RGB and HSL are useful when you need to manipulate values in code — for example adjusting lightness in HSL to create hover states or color scales.
The CSS variable output gives you a ready-to-use custom property declaration like --color-primary: #2563eb; that you can paste directly into your :root block or component styles.
HSL makes it easy to create color variations. To get a lighter version, increase the lightness value. To get a more muted version, decrease saturation. This makes HSL ideal for generating consistent color palettes in design systems.
Not directly — type the HEX or RGB value instead. You can look up named color HEX values (e.g. tomato = #ff6347) and paste them into the HEX field.