Color Converter
Convert colors between HEX, RGB and HSL with live preview, picker and one-click copy
HSL Sliders
Color Harmony
Complementary
Analogous
The Three Color Formats
HEX (hexadecimal)
A HEX color starts with # followed by six hexadecimal digits (e.g. #3b82f6); each pair encodes the red, green and blue channel from 00 to ff. The three-digit shorthand (e.g. #f00 for #ff0000) is also supported. HEX is the most common notation in CSS and design tools, handy for pasting straight into stylesheets.
RGB (red, green, blue)
RGB describes a color with three integers from 0 to 255 for the red, green and blue channels, written in CSS as rgb(59, 130, 246). It maps directly to how screens emit light, which makes it a good fit for programmatic work such as Canvas drawing and image processing.
HSL (hue, saturation, lightness)
HSL describes a color by hue (an angle of 0-360° on the color wheel), saturation (0-100%) and lightness (0-100%), written in CSS as hsl(217, 91%, 60%). It matches human intuition about color, so it is the most convenient model for building palettes — darkening a tone or deriving a complementary color is a simple numeric tweak.
Common Color Reference
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
How to Use
Type a color into any field — HEX accepts the #rgb shorthand and a missing #; RGB accepts both the rgb() function and plain comma-separated values; the % signs in HSL are optional — or use the color picker and the HSL sliders, and every other format updates in real time. The copy button next to each format copies that value to the clipboard. The harmony section suggests a complementary and two analogous colors; click a swatch to apply it. All processing happens locally in your browser.