Color Picker — HEX, RGB & HSL from Any Color

← Palette AtollThe Creative Island · Island 09

Pick a color — get HEX, RGB and HSL at once, with a strip of tints and shades beside it.

Or type a HEX code

How to use this tool

1. Click the big color square and choose visually, or type a HEX code.
2. All three web formats update together: HEX, RGB and HSL.
3. The strip shows seven steps from tints to shades of your color — hover any block for its HSL value.

Example

The island brand teal #1d7d78 = rgb(29, 125, 120) = hsl(177, 62%, 30%). Its 40%-lightness shade hsl(177, 62%, 40%) works well for hover states of the same brand color.

The formula

HEX = RGB as base-16 pairs; HSL = hue° (color wheel), saturation% , lightness% of the same color

What the result means

HEX and RGB say exactly which pixels light up; HSL says how the color feels — which is why designers build systems in HSL (one hue, many lightness steps) and ship them as HEX. The tints-and-shades strip is exactly that system, generated from your pick.

Frequently asked questions

Which format should I use in my project?

All three render identically — use HEX for compactness, rgb() when you need CSS opacity (rgba), HSL when you'll derive variants.

Why does my HEX look different on another screen?

Screens differ in gamut and calibration; the code is exact, the display is the variable. Test brand colors on at least one phone and one laptop.

What are tints and shades, exactly?

Tints mix toward white, shades toward black. Keeping the hue constant and stepping only lightness is the simplest way to build a coherent color system.

Is anything uploaded?

No — the picker runs entirely in your browser.

More tools from Palette Atoll

HEX ↔ RGB ConverterConvert any color codeColor Palette GeneratorHarmonies from one colorGradient GeneratorCSS gradients liveContrast CheckerReadable color pairs

Explore the island world

• Palette Atoll — the island where this tool lives.
• The Main Island — drive the boat, explore the whole world.
• The 90s Kids Island — where most of us started.

Privacy & data: this tool runs entirely in your browser — nothing you type is uploaded, saved or sent anywhere. · Disclaimer: color values are computed with standard formulas; final appearance always depends on the display and medium. · Privacy Policy · Disclaimer