Color Converter

A color converter translates colors between different representation formats — primarily HEX, RGB, and HSL. Each format describes the same color in a different way, and different tools, languages, and contexts prefer different formats.

Web designers and developers frequently need to convert between these formats. CSS accepts all three, but design tools often output HEX, programmatic color manipulation is easier in RGB or HSL, and design systems typically define palettes using HSL for systematic variation.

The RGB model defines colors by mixing Red, Green, and Blue light at different intensities (0-255 each). It's an additive color model — combining all three at full intensity produces white. This model matches how screens physically produce color.

The HSL model defines colors using Hue (the color itself, measured in degrees on the color wheel), Saturation (color intensity, from gray to vivid), and Lightness (from black to white). HSL separates the concept of color from its brightness and intensity, making it much more intuitive for humans to work with.

HEX is simply a compact hexadecimal notation for RGB values, packing three channel values into a 6-character string prefixed with '#'.

Enter a color in any format to see it converted to all others. Type a HEX code in the text field, or use the RGB and HSL sliders for visual adjustment. The color preview updates in real-time. Click any 'Copy' button to copy the value in that format to your clipboard.

The HSL sliders are particularly useful for finding related colors: keep the hue fixed and vary saturation and lightness to create consistent tints and shades. Or keep saturation and lightness fixed and vary the hue to create a harmonious palette.

In CSS, you can use any format interchangeably: color: #ff5733, color: rgb(255, 87, 51), or color: hsl(11, 100%, 60%) all produce the same result. Modern CSS also supports the newer oklch() and lch() color functions for perceptually uniform color spaces.

In JavaScript, the Canvas API and WebGL use RGB values. Design tokens in most component libraries use HEX strings. CSS custom properties can store colors in any format. When building a design system, HSL is often preferred because you can create systematic palettes by defining base hues and then generating tints, shades, and tones through saturation and lightness variations.