Color picker
Choose a color, fine-tune it, and copy its code in the format you need.
Sealed on this device
Runs in your browser. Nothing is uploaded.
Sealed
Pick a color
Color codes
Tints and shades
Lighter tints on one side, darker shades on the other. Select one to use it.
How it works
-
Choose a color
Drag in the color area and the hue slider, type a code you already have, or pick a color from your screen.
-
Fine-tune it
Adjust opacity, or explore the tints and shades of your color to find a lighter or darker variant.
-
Copy the code
Copy the HEX, RGB, HSL, OKLCH or CMYK value and paste it into your design, code or document.
Frequently asked questions
How do I pick a color from my screen?
Select “Pick from screen”, then click anywhere on your screen to capture that color. This eyedropper is available in Chrome, Edge and other Chromium-based browsers on computers. In other browsers, the color swatch opens your system’s color picker, which often has its own eyedropper.
Which color format should I use?
HEX is the most common in web design and works everywhere. RGB and HSL are handy in CSS when you want to tweak values by hand. OKLCH is the modern CSS format that keeps lightness consistent across hues. CMYK is a starting point for print.
What’s the difference between a tint and a shade?
A tint is your color mixed with white, so it gets lighter. A shade is your color mixed with black, so it gets darker. The picker mixes them in a perceptual color space so that each step looks evenly spaced.
Can I use the picker with the keyboard?
Yes. Focus the color area and use the arrow keys to change saturation and brightness, holding Shift for bigger steps. The hue and opacity sliders also work with the arrow keys.
Can I share a color?
Yes. The page address updates with the color you pick, so you can bookmark it or send the link to someone.