Color Picker
Pick a color visually and get every format you need - HEX, RGB, HSL and more - plus a palette of tints and shades, all ready to copy.
Updated September 2026 · Written and verified by Akash Pandey
Color Picker
How to use the color picker
- Use the native color input to choose any color, or type a HEX / RGB / HSL value directly.
- All formats update together and each has its own Copy button.
- The palette below shows lighter and darker variations of your color plus complementary and analogous suggestions.
- Switch between a light and dark preview swatch to sanity-check contrast.
The picker stays in sync in every direction: change the HEX box and RGB and HSL follow; pull the saturation slider and the swatch updates live.
Frequently asked questions
Which color formats are supported?
HEX (with and without alpha), RGB/RGBA, HSL/HSLA, and CMYK approximations for print-minded designers.
Can I pick a color from my screen?
The native color input supports the browser's own eyedropper where available (right-click the swatch in Chrome/Edge, or use the picker's screen selector).
How do I copy a color value?
Each format row has a copy button; clicking writes the value to your clipboard and shows a confirmation.
Does this work on mobile?
Yes. The color input is touch-friendly, and all values are shown as plain copyable text on small screens.
Where do the suggested shades come from?
Shades are computed by interpolating lightness with the same hue, and the accent suggestions rotate the hue mathematically - no server involved.
What color formats can I copy from this color picker?
You can copy HEX, RGB, RGBA, HSL, and HSLA color codes with one click for easy insertion into CSS or design software.
Can I pick a color directly from my screen or another window?
In Chromium-based browsers that support the native EyeDropper API, you can use the eyedropper tool to sample colors from any visible pixel on your screen.
What is the difference between HSL and RGB?
RGB defines colors via red, green, and blue light channels, while HSL represents hue (color family on the wheel), saturation (intensity), and lightness, making color adjustments more intuitive for designers.