Choose a color

Hue

Hex color

Color harmony

Color variations

Tints

Shades

Tones

What this tool does

The Color Picker lets you choose a color through the native color control or a HEX value and view its corresponding RGB and HSL values.

It calculates related color harmonies together with lighter, darker and more neutral variations from the selected color.

How to use the tool

Choose a color with the color control or enter a complete hexadecimal value.
Select a harmony type when you want to see related colors from the same HSL calculation.
Click a color value in a palette to copy it to the clipboard.

Useful applications

Documenting a base color for a design with its associated HEX, RGB and HSL values.
Choosing an initial accent or supporting color for an interface from a complementary or triadic harmony.
Preparing lighter and darker values for states such as backgrounds, borders or emphasized elements.

Notes and limitations

The preview uses ordinary browser color values and does not account for individual monitor, print or ICC profiles.
The calculated palettes do not check contrast or accessibility. Review important text and background combinations separately.

Frequently asked questions

Are the suggested color palettes automatically accessible?

No. Harmonies and variations are calculated from color values. Check the actual contrast of every text and background combination that you plan to use.