Color Picker

Choose a color and copy its HEX, RGB, HSL, or OKLCH code.

All color tools

Find your color

Drag to choose a shade, or use the sliders below.

261°
36%
71%
Transparency
100%
Pick from an image

#8B74B5
Dahlia Purple

HEX, RGB, HSL, OKLCH, or a CSS color name.

On lightOn dark

Keep creating with this color

How to use the color picker
  1. Drag in the color area to choose a shade. Change Hue to move through color families, Saturation to make the color more vivid or muted, and Brightness to make it brighter or darker. The sliders also support keyboard input.
  2. For a specific color, paste a HEX, RGB, HSL, OKLCH, or CSS color name into Enter a color. Open Transparency to adjust opacity. Colors outside the sRGB range are mapped to an sRGB color for this picker.
  3. Choose Copy HEX or copy a code row. HEX is a compact way to specify a color in web and design software; RGB expresses its red, green, and blue components. Transparent HEX values include an extra pair of digits for opacity.
  4. Use the device color picker for native controls. Pick from screen samples a displayed color when supported by your browser; Pick from an image opens the image tool for sampling a photo.
  5. Use Undo and Redo to revisit changes, or Share color to create a link to your selection. Continue with Build a palette, Find harmonies, Explore shades, or Find its name. These tools receive the solid color without transparency.

Paste #336699, then lower Saturation to create a more muted blue. Copy its code for a design, or build a palette around it. Choosing a shade creates a color; sampling an image or screen finds a color that is already there.