Color Picker
Pick any color and instantly get HEX, RGB, and HSL values. View complementary colors, copy values with a click, and keep a history of your picks.
Pick a Color
HEX
#8b5cf6
RGB
rgb(139, 92, 246)
HSL
hsl(258, 90%, 66%)
Complementary Color
HEX
#74a309
RGB
rgb(116, 163, 9)
HSL
hsl(78, 90%, 34%)
Recently Picked Colors
Pick a color to start building your history
How to Use This Tool
Getting the perfect color value is quick and easy:
- Click the color picker to browse and select any color visually.
- Or type a HEX code directly into the input field and click "Apply".
- The tool instantly displays the color in HEX, RGB, and HSL formats.
- Click any color value card to copy it to your clipboard.
- View the complementary color — the opposite on the color wheel — for design pairing ideas.
- Your color history is saved so you can revisit recently picked colors.
Frequently Asked Questions
What is the difference between HEX, RGB, and HSL?
HEX uses a 6-digit hexadecimal code (e.g., #8b5cf6). RGB defines color as Red, Green, Blue values from 0-255. HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). All three represent the same color — just in different formats for different use cases.
What is a complementary color?
A complementary color is the color directly opposite on the color wheel — a 180° shift in hue. These color pairs create maximum contrast and visual interest, making them ideal for call-to-action buttons, highlights, and accent elements.
How do I copy a color value?
Simply click on any color value card (HEX, RGB, or HSL) to instantly copy it to your clipboard. A toast notification will confirm the copy was successful.
Can I input a specific HEX code?
Yes! Type or paste a HEX code (e.g., #ff6600) into the hex input field and click "Apply" or press Enter. The picker and all values will update to match your input.
Related Tools
Love Our Free Tools?
Explore the full collection of NexaGrowth tools — from SEO analyzers to design utilities, all free and built for speed.