Color Picker
Design ToolsHEX / RGB / HSL with tints
FreePrivateInstant
Color Picker & Converter
Click
#
Color Values
HEX
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
Quick Swatches
Similar tools you may like
History
All history →Color Picker — at a glance
Pick any color visually and get its HEX, RGB and HSL codes, plus lighter and darker shades.
● (color swatch)
Pick
HEX: #6366F1
RGB: 99, 102, 241
HSL: 239, 84%, 67%
How to use it — step by step
Great for web designers, developers and anyone choosing brand colors.
1
Choose a color
Click the color box and select any color you like.
2
See the codes
HEX, RGB and HSL values appear instantly.
3
Explore shades
Check tints (lighter) and shades (darker) of the same color.
4
Copy
Click copy next to the code you need.
Pro tips
Small things that make the result better.
✦HEX is the most common in CSS: #6366F1.
✦Use tints and shades to build a matching palette.
✦Dark text needs a light background for easy reading.
Quick facts
16.7Mpossible colors in RGB
3 formatsHEX, RGB, HSL
Tintsand shades included
1 clickcopy any code
Frequently Asked Questions
What is HEX?+
A 6-character code starting with # that describes a color, like #FF0000 for red.
HEX vs RGB vs HSL?+
They are different ways to write the same color. HSL is easiest for tweaking lightness.
Is this tool really free?+
Yes — completely free, no signup, no watermark and no usage limit.
More Free Tools
Guides you might like
All guides →Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to useColor Contrast CheckerIs your text readable? The contrast ratio, explainedPX to REM Converterpx vs rem: why your font sizes should be allowed to scaleAspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises