Home

Color Picker

Click to pick color
HEX
RGB
HSL
R 102
G 126
B 234

Recent Colors

No colors yet

Color Palettes

Material Design
Tailwind CSS
Flat UI

About Color Formats

Privacy

All processing happens locally in your browser. Your data is never uploaded to any server.

Frequently Asked Questions

What's the difference between HEX and RGB?
HEX and RGB represent the same color information in different formats. HEX uses hexadecimal (base-16) notation while RGB uses decimal (0-255). #FF0000 and rgb(255, 0, 0) both represent pure red.
When should I use HSL?
HSL is great when you want to create color variations. You can easily make colors lighter/darker (adjust L), more/less saturated (adjust S), or shift hues (adjust H) while keeping other properties constant.
How do I pick accessible colors?
For accessibility, ensure sufficient contrast between text and background colors. WCAG recommends a contrast ratio of at least 4.5:1 for normal text. Use darker colors for text on light backgrounds or vice versa.

Related Tools

Copied!

About Color Picker

Pick and convert colors online free with FreeToolBox — choose any color from the visual color picker and instantly get its HEX, RGB, HSL, HSV, and CMYK values. Whether you're a web developer matching brand colors, a UI/UX designer building a color palette, or a graphic designer who needs to convert between color models, our Color Picker gives you all the formats you need in one place. You can also enter a known HEX or RGB value and see the exact color it represents, making it easy to verify and convert color codes across formats.

The tool runs entirely in your browser — no data is sent anywhere. It includes a color harmonies generator to find complementary, analogous, triadic, and split-complementary colors, helping designers build balanced palettes. Copy any value with a single click. Completely free, no account required.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

HEX (#RRGGBB) is a hexadecimal representation used in CSS and HTML. RGB (Red, Green, Blue) uses values 0–255 for each channel and is widely used in programming and design software. HSL (Hue, Saturation, Lightness) is often more intuitive for designers because adjusting saturation and lightness gives predictable results.

Can I pick a color from my screen?

Modern browsers (Chrome 95+, Edge) support the EyeDropper API, which lets you sample any pixel color from anywhere on your screen. Click the eyedropper icon in the tool if your browser supports it.

What is CMYK used for?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in print design. If you're preparing assets for print media, you'll need CMYK values rather than the RGB/HEX values used for screens.

How do I find complementary colors?

After picking a color, the tool generates a set of color harmonies — complementary (opposite on the color wheel), analogous (adjacent), triadic (equally spaced), and more. Click any swatch to load that color and get its values.

Feedback
Buy Me a Coffee at ko-fi.com