🎨 Color Picker Tool
Pick a color and instantly get HEX, RGB, and HSL values, plus complementary, analogous, and triadic color harmonies.
About the Color Picker Tool
This color picker runs entirely in your browser. Use the native color control to choose a color visually, or type a HEX, RGB, or HSL value directly — every field stays in sync. The tool also computes common color harmonies (complementary, analogous, and triadic) so you can build palettes quickly.
HEX, RGB, and HSL — what's the difference?
HEX encodes a color as a six-digit hexadecimal string such as #0ea5e9, where each pair of digits represents the red, green, and blue channels (0–255). RGB expresses the same three channels as decimal numbers, for example rgb(14, 165, 233). Both HEX and RGB describe which color you see on screen.
HSL describes a color by hue (0–360° around the color wheel), saturation (0–100%, how intense the color is), and lightness (0–100%, how light or dark). Designers often prefer HSL because tweaking a single property — say, making a color lighter — is intuitive and predictable.
What are color harmonies?
Color harmonies are combinations of colors that sit at fixed angles from each other on the color wheel and tend to look pleasing together. Complementary colors are 180° apart and offer maximum contrast. Analogous colors sit 30° apart on either side and feel harmonious and calm. Triadic colors are 120° apart and produce a balanced, vibrant palette.
How to use this tool
- Click the native color swatch to open your system's color picker, or type a value into any field.
- HEX, RGB, and HSL inputs update each other in real time.
- Click any harmony swatch to make it the active color.
- Use the copy buttons to copy the current color in the format you need.
Frequently asked questions
Does this tool upload my colors anywhere? No. Everything happens locally in your browser.
Can I enter three-digit HEX like #abc? The tool expects six-digit HEX. Please expand shorthand notation to the full six digits.
Why does the HSL value differ slightly from another tool? HSL is computed from the same RGB numbers, but rounding to whole numbers can cause a ±1 difference in hue, saturation, or lightness.