Color Converter
Pick a color or type a HEX, RGB, or HSL value and the other formats update instantly. Copy any one with a click, and grab a ready-made row of tints and shades built from your color.
edit any field below.
About this color converter
A quick bridge between the three color formats every front-end developer and designer uses: HEX (#147C7C), RGB (rgb(20, 124, 124)), and HSL (hsl(180, 72%, 28%)). Change any one and the rest follow, so you can paste a hex code from a mockup and read out the HSL you need for a CSS hover state, or nudge RGB channels and watch the swatch shift. The tint and shade strip gives you lighter and darker steps for hover, border, and background variants.
How to use it
- Open the native picker to choose visually, or type into any field.
- HEX accepts both
#abcshorthand and full#aabbcc; output is always canonical 6-digit uppercase. - RGB takes three values 0–255, with or without the
rgb(...)wrapper. - HSL takes hue 0–360 and saturation/lightness as percentages.
- Click Copy on a format, or click any swatch in the tints and shades row to load it as the new base color.
Is my data private?
Yes. All conversion happens in your browser with JavaScript. No colors, clipboard contents, or anything else are sent to a server or stored — the page makes no network requests at all.
How does HEX relate to RGB?
They're the same thing written differently. Each pair of hex digits is one channel in base 16: #147C7C is red 0x14 = 20, green 0x7C = 124, blue 0x7C = 124. The converter just translates between base 16 and base 10.
Why does HSL sometimes show a different hue after a round trip?
RGB has 256 steps per channel, so converting to HSL and back rounds to the nearest representable color. For grays (zero saturation) the hue is arbitrary and is reported as 0. The visible color stays the same; only the stated hue may shift by a degree.
How are the tints and shades made?
Tints mix your color toward white and shades mix it toward black, in even steps, by interpolating the RGB channels. It's a simple, predictable scale that's handy for building hover states and subtle background variants from one base color.