Pick a color in any design tool and you'll see it written three different ways: a hex code, an RGB triplet, and an HSL value. They all describe the same color — they just slice it differently. Knowing what each format means makes picking, tweaking, and matching colors far easier.
HEX: the web's shorthand
A hex color looks like #RRGGBB, where each pair of characters is one channel — red, green, blue — written in hexadecimal from 00 to FF. Since FF in hex equals 255 in decimal, each channel ranges from 0 (none) to 255 (full).
#000000= black (no color)#FFFFFF= white (all channels maxed)#FF0000= pure red
Three-digit shorthand like #F00 is just #FF0000 with each digit doubled. If the hex-to-decimal math feels fuzzy, the Number Base Converter shows exactly how FF becomes 255.
RGB: the same color in plain numbers
RGB describes a color as three decimal values from 0 to 255, one per channel. It's the most literal format — it tells the screen how much red, green, and blue light to mix.
Our red example maps cleanly:
| Format | Value |
|---|---|
| HEX | #FF0000 |
| RGB | rgb(255, 0, 0) |
| HSL | hsl(0, 100%, 50%) |
RGB also supports an alpha channel for transparency, written as rgba(255, 0, 0, 0.5) for 50% opacity.
HSL: the designer-friendly format
HSL stands for Hue, Saturation, Lightness and is the most intuitive for adjusting colors:
- Hue is an angle from 0 to 360° on the color wheel (0° red, 120° green, 240° blue).
- Saturation is a percentage — 0% is gray, 100% is vivid.
- Lightness is a percentage — 0% is black, 50% is the pure hue, 100% is white.
So hsl(0, 100%, 50%) is the same pure red as #FF0000. Want a softer pink? Just raise the lightness. Need a muted tone? Lower the saturation. That's why HSL is great for generating tints and shades systematically.
How to use it
Translating between these formats by hand is doable but slow. The Color Converter does it instantly: paste a HEX, RGB, or HSL value and see the other two update live, with a preview swatch and one-tap copy for whichever format your code needs.
Once you've nailed a single color, building a whole scheme is the next step. The Color Palette Generator creates harmonious sets of colors you can drop straight into a website or brand kit. Together they take you from one hex code to a complete, consistent palette without guesswork — and without ever leaving your browser.