Color converter

What this tool does

Type any color value or pick from the system color picker, and see the same color expressed in three formats: HEX, RGB, and HSL. The tool also generates a strip of tints and shades so you can pick related colors that share a hue.

The three formats, briefly

HEX

Six hexadecimal digits prefixed with #. The first two digits encode red (00–FF), the next two green, the last two blue. Compact, ubiquitous in CSS and design tools, but not intuitive to read or modify by hand. The three-digit shorthand (#f00) is an abbreviation for the six-digit form with each digit doubled (#ff0000).

RGB

Three decimal numbers (0–255), one per channel. The same color as #ff8800 is rgb(255, 136, 0). More readable than HEX. CSS supports adding an alpha channel: rgb(255 136 0 / 0.5) for 50% opacity.

HSL

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). HSL is the friendliest format for thinking about color: to make a color darker, lower the lightness; to make it less vibrant, lower the saturation; to shift it to a different color family, change the hue. HSL is the format designers usually want when picking color systems.

When to use each

• HEX — for sharing color values in design tools and code, where compactness matters.
• RGB — when you need to add an alpha channel, or when reasoning about additive light (screens, projectors).
• HSL — when designing a color system, generating tints and shades, or making sense of why two colors look similar.

Tints, shades, and tones

The strip below the swatches shows ten levels of the picked color's hue at progressively lower lightness. A "tint" is a color mixed with white (higher lightness); a "shade" is mixed with black (lower lightness); a "tone" is mixed with gray (lower saturation). HSL lets you generate any of the three by changing a single number.

Accessibility

Don't choose color values purely by appearance — check contrast. The WCAG 2.1 standard requires a contrast ratio of at least 4.5:1 between normal text and its background. The deep forest accent on this site (#14532d) on the off-white background (#faf9f5) gives a contrast ratio of about 9:1, well above the requirement. Free contrast checkers exist online; we may add one to the catalog.

Privacy

All conversions are pure math, in your browser.