Free Online Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
What Makes This Color Picker Different
This isn't just a hex code generator. You get a full saturation/lightness picker with a hue slider, plus instant conversion to RGB, HSL, and CMYK formats. The saved palette feature lets you store up to 12 colors while you work — useful when you're iterating on a design and don't want to lose previous versions.
How the Picker Works
The main picker uses a 2D grid where horizontal position controls saturation (0-100%) and vertical position controls lightness (0-100%). The hue slider sets the base color on a 0-360 degree wheel. Behind the scenes, all values convert through HSL as the internal representation, then output to your format of choice.
The color preview updates in real-time as you drag. Click anywhere on the grid to jump to that saturation/lightness combination, or drag to fine-tune.
When You'll Actually Use This
Matching a Brand Color Exactly
A client says their brand is "a teal-ish blue, kind of vibrant." You open this picker, slide the hue to around 200°, crank up saturation, and land on #0EA5E9. They confirm — that's the one. You now have the exact hex, RGB for their print vendor, and CMYK for business cards.
Finding Variations of a Base Color
You have a primary button color but need a hover state. Save the base, then reduce lightness by 10% and save that too. Now you have two related colors that feel cohesive.
Quick CMYK Conversion for Print
Your designer sends a hex code, but the printer needs CMYK percentages. Paste the hex, grab the CMYK values, done. No need to open Photoshop or Illustrator.
Building a Personal Color Reference
You keep coming back to certain colors across projects. Save them to the palette, export as JSON, and you've got a personal color library you can import anywhere.
Understanding the Four Color Formats
HEX (#3B82F6): Six-digit hexadecimal used in CSS and design tools. Compact and easy to recognize. The format Figma, Sketch, and most web developers use by default.
RGB (rgb(59, 130, 246)): Red, Green, Blue values from 0-255. Required for canvas operations, image processing, and CSS rgba() transparency.
HSL (hsl(217, 91%, 60%)): Hue (0-360°), Saturation (0-100%), Lightness (0-100%). More intuitive for humans — you can guess that hsl(200, 90%, 50%) is a vibrant blue without memorizing hex codes.
CMYK (cmyk(76%, 47%, 0%, 4%)): Cyan, Magenta, Yellow, Key (black) percentages for print. Required by professional printers. Note that CMYK has a smaller color gamut than RGB — some bright screen colors can't be reproduced in print.
Frequently Asked Questions
How do I pick a color from somewhere else on my screen?
This picker doesn't have an eyedropper tool. Use your OS color picker first (Windows: Win+Shift+C, Mac: use Digital Color Meter), get the hex code, then paste it here to convert to other formats.
Why does the CMYK value look different from my RGB color?
CMYK is a subtractive color model for ink on paper, while RGB is additive for light on screens. Bright blues and greens often look duller in CMYK because printers can't reproduce the full RGB gamut. This is normal and expected.
Can I save more than 12 colors?
No, the palette is limited to 12 colors by design. If you need more, export your current palette as JSON, clear it, and start a new batch. Or use the Favorite Colors Manager tool for unlimited storage.
What does the "Quick Select" row do?
Those 20 preset colors let you jump to common hues quickly. Click one to load it, then fine-tune from there. Useful when you know you want "something in the red family" but don't have a specific hex in mind.
How do I get the exact same color in both light and dark mode?
Colors appear differently on light vs. dark backgrounds due to simultaneous contrast. If you need a color that looks consistent across themes, test it using the Dark & Light Mode Preview tool after picking it here.
Is there an alpha/transparency option?
This picker doesn't include alpha control. For colors with transparency, pick your base color here, then use the CSS rgba() or hsla() format manually. For example, if you pick #3B82F6, write it as rgba(59, 130, 246, 0.5) for 50% opacity.
Tips for Better Color Picking
Start with hue, then adjust saturation and lightness. Get the base color family right first (red vs. blue vs. green), then fine-tune how vibrant and how light/dark it is.
Save colors before you lose them. It's easy to accidentally drag the picker and lose a color you liked. Hit "Save to Palette" as soon as you land on something you might want later.
Use the keyboard for precision. Click the hue slider to jump to a position, then use arrow keys on the saturation/lightness inputs for fine adjustments.
Test in context. A color that looks great in isolation might clash with your existing palette. Copy the hex and paste it into your actual design to see how it works.
Other Free Color Tools
Advanced Color Picker with RGB, HSL & HSV Sliders
Professional color picker featuring a full color wheel, RGB, HSL, and HSV sliders, alpha transparency control, and a live preview — all in one tool.
Web Safe Color Picker
Pick from the 216 web-safe colors guaranteed to display consistently across all browsers and devices. Ideal for legacy support and cross-platform compatibility.
Interactive Color Wheel
Explore an interactive color wheel to visualize relationships between colors. Understand hue, saturation, and how colors interact for better design decisions.
HEX to RGB Color Converter
Convert HEX color codes to RGB values instantly. Simply enter any hex code and get the exact red, green, and blue values for your CSS or design work.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.