Toolantern
Home › Color Picker
Updated October 9, 2026

Color Picker

Pick any color with the visual picker or type a hex code. You get its HEX, RGB and HSL values with one-click copy, plus five darker shades and five lighter tints.

#3B82F6HEX
RGB
HSL

Darker shades

Lighter tints

What this tool does

The color picker shows one color three ways at once: HEX for the web, RGB for screens, and HSL for design work. Click any value to copy it. Below the values you get ten related colors: five shades (the same hue, progressively darker) and five tints (the same hue, progressively lighter).

How shades and tints are made

The tool converts your color to HSL, then steps the lightness down by 10 points for each shade and up by 10 points for each tint, keeping hue and saturation (mostly) fixed. Tints also ease saturation down slightly so very light steps do not look washed out.

Worked example

Pick #3B82F6 (a medium blue). Its values are rgb(59, 130, 246) and hsl(217, 91%, 60%). One shade down is #1D66E5; one tint up is #6CA3F8.

When to use which format

Use HEX in CSS and HTML, RGB when an API or tool asks for channel values, and HSL when you want to adjust a color by feel (nudge the hue to shift the color family, or the lightness for dark mode variants).

Limitations

The picker works in the sRGB color space, which covers standard web and screen use. Wide-gamut formats like Display P3 are not represented.

Planning estimate only. Results use the list prices shown and may differ from your actual bill. Terms

Frequently asked questions

How do I copy a color code?

Click any HEX, RGB or HSL value, or any shade/tint swatch. It is copied to your clipboard instantly, ready to paste.

What is the difference between HEX, RGB and HSL?

They describe the same color three ways. HEX is a compact web notation (#RRGGBB). RGB gives the red, green and blue channels from 0 to 255. HSL gives hue (the color's position on the wheel), saturation (intensity) and lightness.

What are shades and tints?

Shades are your color mixed toward black (darker), tints are your color mixed toward white (lighter). Designers use them for hover states, gradients and layered interfaces.

Can I enter a color by hex code?

Yes. Type a 3-digit or 6-digit hex code (with or without the #) into the hex field and the picker, values and shades update to match.

More free tools