Color Picker
Select any color and get its HEX, RGB, HSL, HSV and CMYK values. Generate complementary, analogous and triadic palettes — all processed locally.
#3B82F5#3B82F5FFrgb(59, 130, 245)rgba(59, 130, 245, 1)hsl(217, 90%, 60%)hsla(217, 90%, 60%, 1)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)Color Harmonies
Complementary
Analogous
Triadic
Split Complementary
🔒 All color calculations happen locally in your browser
100% secure
Your files are never shared
Ultra-fast
Processing in seconds
Privacy
Automatic deletion after 1h
How to use the Color Picker
Pick a color
Use the visual picker to select a color by clicking on the saturation/lightness square and adjusting the hue slider. Or type a HEX, RGB, or HSL value directly in the input field.
Copy the format you need
All color formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK) are displayed simultaneously. Click the copy button next to any format to copy it to your clipboard.
Explore harmonies
Scroll down to see automatically generated color harmonies: complementary, analogous, triadic, and split-complementary palettes based on your selected color.
Understanding Color Formats
HEX is the most common format for web development, using a 6-character hexadecimal code preceded by #. For example, #3B82F6 represents a blue color. An 8-character version adds alpha transparency.
RGB defines colors by their Red, Green, and Blue components, each ranging from 0 to 255. RGBA adds an alpha channel (0-1) for transparency. This format is widely used in CSS and graphic design.
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are more intuitive for color manipulation. CMYK is essential for print design, representing colors in terms of Cyan, Magenta, Yellow, and Key (black) ink percentages.
Color Harmonies
Color harmonies are combinations of colors that look pleasing together. They are based on the color wheel: complementary colors sit opposite each other, analogous colors are neighbors, and triadic colors form an equilateral triangle.
Using harmonious color combinations in your designs creates visual balance and appeal. Our tool generates these palettes automatically, so you can quickly find colors that work well together for websites, apps, or graphic design projects.
Common CSS Colors
| Name | HEX | RGB |
|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) |
| Blue | #0000FF | rgb(0, 0, 255) |
| Green | #008000 | rgb(0, 128, 0) |
| White | #FFFFFF | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
Privacy & Security
This color picker runs entirely in your browser. No data is sent to any server. Your color history exists only in memory and is cleared when you close the page.
Color Picker — Frequently asked questions
How do I find the HEX code of a color?
Use the visual color picker to select your desired color, or type a color name or code in the input field. The HEX code is displayed immediately and can be copied with one click.
How do I convert RGB to HEX?
Enter your RGB values in the input field (e.g., rgb(59, 130, 246)) and the tool will instantly show the equivalent HEX code along with all other color formats.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is used for digital screens and mixes light. CMYK (Cyan, Magenta, Yellow, Key/Black) is used for printing and mixes inks. Colors may look slightly different between the two systems.
How do I choose complementary colors?
Our tool automatically generates complementary colors (opposite on the color wheel), analogous colors (adjacent), triadic colors (evenly spaced), and split-complementary colors. Simply pick a base color and the palettes appear.
How do I use the eyedropper?
Click the eyedropper button to activate your browser's native color picker. You can then click anywhere on your screen to capture that exact color. Note: this feature requires a modern browser that supports the EyeDropper API.
What is HSL?
HSL stands for Hue, Saturation, Lightness. It's an alternative to RGB that's more intuitive for humans: Hue is the color angle (0-360°), Saturation is how vivid the color is (0-100%), and Lightness is how light or dark it is (0-100%).
Can I use named CSS colors?
Yes! You can type any CSS color name (like 'tomato', 'cornflowerblue', 'darkseagreen') in the input field and the picker will update to show that color with all its format values.
Is my data stored?
No. All color calculations happen entirely in your browser. Nothing is sent to a server. The color history is stored only in memory and is cleared when you leave the page.