Color Picker
Design ToolsHEX / RGB / HSL with tints
Color Picker & Converter
Color Values
HEX
#6366F1
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
Quick Swatches
Embed this tool on your websiteFree
- Choose how tall the frame should be.
- Press Copy code.
- Paste it into your page, blog, WordPress or Notion HTML block.
The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.
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.
How to use it — step by step
Great for web designers, developers and anyone choosing brand colors.
Choose a color
Click the color box and select any color you like.
See the codes
HEX, RGB and HSL values appear instantly.
Explore shades
Check tints (lighter) and shades (darker) of the same color.
Copy
Click copy next to the code you need.
Pro tips
Small things that make the result better.
Quick facts
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.