← All tools

🎨 Color Picker

Pick a color and get HEX, RGB, HSL — plus complementary, shades, and tints

Click the color above to open the system picker

HEX

RGB

HSL

CSS Var

🎯 Complementary

🌑 Shades (darker)

🌕 Tints (lighter)

Copied!

What is a color picker?

A color picker lets you select a color visually and see its values in different formats — HEX for CSS and design tools, RGB for screen rendering, HSL for intuitive adjustments. A good picker also generates related colors automatically: a complementary color for contrast, shades for darker variations, tints for lighter ones. Together these give designers and developers a starting point for any color palette.

When to use a color picker

Common use cases: picking a brand color and converting it to all formats, exploring shades and tints for a UI design system, finding a complementary accent color for a logo, sampling colors from inspiration screenshots (after using your OS tools), grabbing CSS-ready values for a website, or quickly converting a HEX code from a designer into RGB for a developer.

HEX, RGB, and HSL explained

HEX — six hexadecimal characters representing red, green, blue (e.g. #FF5733). Most common in CSS and design files. RGB — three decimal numbers from 0 to 255, one per channel. Same color space as HEX, just a different notation. HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Designed for human intuition: change the hue to shift the color, change saturation to fade it, change lightness to make it darker or brighter.

Why use FileTools Color Picker?

✅ Free — no signup, no spam
✅ 100% private — runs in your browser
✅ HEX, RGB, HSL, and CSS variable formats
✅ One-click copy on every value
✅ Auto-generated palettes — complementary, shades, tints
✅ Manual HEX entry for precise input

Frequently Asked Questions

What is HEX, RGB, and HSL?

HEX is a 6-character code like #FF5733 used in CSS. RGB expresses red, green, blue channels (0–255). HSL uses hue, saturation, lightness — often easier for designers.

How do I copy a color?

Click any color value (HEX, RGB, HSL, CSS Var) or any palette swatch to copy it instantly.

What palettes are generated?

A complementary color (opposite on the color wheel), shades (mixed with black), and tints (mixed with white).

Is the picker accurate for design work?

Yes. Conversion formulas follow standard CSS specs. Output matches Photoshop, Figma, and Sketch.

Can I enter a color manually?

Yes. Type a HEX value in the input field and the picker, RGB, HSL, and palette update instantly.