Initializing, please wait a moment

How to pick a color

  1. Pick a color with the color input, or click a saved or palette swatch to load it.
  2. Use the one-click Copy button beside each value to paste it straight into your CSS.
  3. Check the contrast readout, which shows whether black or white text gives a higher contrast ratio on your color - a quick accessibility check.
HEX:
RGB:
HSL:

Complementary

Analogous

Shades

Save this color

    No saved colors yet.

    Recent colors

    No recent colors yet.

    Color Picker


    Pick a color and read its HEX, RGB, and HSL values side by side, then explore the complementary, analogous, and shade palettes the tool generates for it - click any swatch to switch the picker to that color.

    Save colors you like to a favorites list, and your recent colors are remembered, both kept in this browser. Everything runs in your browser, with no upload and no account, and your colors never leave the page.

    Read the guide: How to Pick a Color Online - HEX, RGB, and HSL

    ← Back to Developer Tools

    Related tools:

    Tags: #developer

    Loading reviews...

    Frequently Asked Questions

    What does Color Picker do?

    Pick a color and read its HEX, RGB, and HSL values side by side.

    When should I reach for color picker?

    Copy any of the HEX, RGB, or HSL strings with one click.

    What complementary tools work well alongside color picker?

    For converting between color formats in bulk, see the related developer tools.