Matching a brand color
Before
Client sent a logo, no hex code
After
Sampled the primary color, got the exact hex
Used the hex in CSS variables. No more guessing.
All Tools
Color Picker & Converter – HEX, RGB, HSL, CSS
I built this because I got tired of switching between three tools for hex, RGB, and HSL. Pick a color, see all formats at once, and grab the shades and tints for building a design system. Nothing gets uploaded.
100% free, no signup
#2F6F5E
rgb(47, 111, 94)
hsl(164, 41%, 31%)
Shades & tints
Your files are processed in your browser and never uploaded to any server.
A note from me
A tip for building design systems: don't pick shades by eye. Generate them programmatically. A common pattern is 10 shades from 50 (lightest) to 900 (darkest), each about 8-10% darker than the one before. It's consistent across colors. The shades here give you a good starting point, but for full design systems, tools like Tailwind's palette generator produce more nuanced scales.
— Mirza Noman Baig
How to use this tool
- 1Pick a color with the picker.
- 2See HEX, RGB, HSL, and CSS values instantly.
- 3Click any format to copy it.
- 4Use the generated shades and tints for your design.
Real results from testing
These are actual measurements from using this tool, not estimates.
Building a button hover state
Before
Original button color, no hover defined
After
Generated a 10% darker shade for hover
Consistent with the base color, no manual adjustment needed.
Converting for a design tool
Before
Design used HSL, code used HEX
After
Converted between formats instantly
Kept design and development in sync without manual math.
Color Picker & Converter features
Pick any color
Native color picker or paste a hex code directly.
All formats at once
HEX, RGB, HSL, and CSS — see everything without switching tools.
Shades and tints
Lighter and darker variations for hover states and design systems.
Runs locally
No uploads, no tracking. Fast even on slow connections.
Frequently asked questions
What formats does it convert between?+
HEX, RGB, HSL, and CSS color values — the four you'll actually use.
Is my color data stored?+
No. Everything runs in your browser. Nothing gets uploaded.
Can it generate a full palette?+
It generates lighter and darker shades of a single color. For full multi-color palettes, pair it with a dedicated palette tool.
Does it support alpha transparency?+
The current version focuses on solid colors. For alpha support, you can add `rgba()` values manually using the RGB output.
Can it sample colors from an image?+
Not directly. Use your operating system's built-in color picker to sample from an image, then paste the hex here for conversion.