Guides5 min read
Why HEX to HSL and Back Changes Your Color
Converting HEX to HSL and back can shift a color by up to 5 steps per channel. See why it happens, real examples, and how to avoid it.
Color picker
Pick a color and copy its HEX, RGB, or HSL value. Free, private — nothing leaves your device.
Everything you need to pick a color
Visual color picker
Choose any color from the full range with your browser's built-in picker.
HEX, RGB, and HSL together
Edit any one and the other two update right away.
Pick from screen
In Chrome and Edge, sample a color from any pixel on your display.
One-click copy
Copy the value in the format you need, ready to paste into CSS or a design tool.
Instant results
No waiting and no sign-up. Values update as you pick or type.
100% private
Everything runs in your browser. Nothing is uploaded or stored.
Pick a color in three steps
- 1
Pick your color
Click the color swatch to open the picker and choose any color. In Chrome or Edge you can also use Pick from screen to grab a color from anywhere on your display.
- 2
Or type a value you already have
Paste a HEX, RGB, or HSL code into its field and the other two update to match.
- 3
Copy the format you need
Press the copy button next to HEX, RGB, or HSL and paste it straight into your CSS, design tool, or document.
Built for designers and developers
A color picker turns a color you can see into a code you can paste. PixelTools gives you HEX, RGB, and HSL together, with no upload and no account.
CSS and front-end work
Grab the exact HEX, RGB, or HSL value for a stylesheet, theme file, or design token.
Design handoff
Convert a brand color between formats so designers and developers are using the same value.
Matching a color from an image
Use Pick from screen to sample a color from a photo or screenshot, then copy its code.
Learning color models
See how one color looks as HEX, RGB, and HSL side by side as you change it.
Frequently asked questions
What is a color picker?
+
A color picker lets you choose a color visually and gives you its code, so you can reuse the exact same color in CSS, a design tool, or a document.
What is the difference between HEX, RGB, and HSL?
+
They describe the same color in different ways. HEX is a six-digit code like #1E90FF. RGB gives the red, green, and blue amounts from 0 to 255. HSL gives hue (0 to 360 degrees), saturation, and lightness as percentages, which is easier to adjust by hand.
How do I convert HEX to RGB or HSL?
+
Type or paste the HEX code into the HEX field. The RGB and HSL fields update instantly. It works the other way too: enter RGB or HSL and the HEX code follows.
Which formats can I type in?
+
HEX with or without the # (3 or 6 digits), RGB as rgb(30, 144, 255) or just 30 144 255, and HSL as hsl(210, 100%, 56%) or just 210 100 56.
Can I pick a color from my screen or an image?
+
In Chrome and Edge, Pick from screen lets you click any pixel on your display, including an image open in another window. Other browsers don't support it yet, so the button only appears where it works.
Is my data uploaded anywhere?
+
No. Everything runs in your browser and nothing is sent to a server.
Pick a color now
Free, no account needed.