Color Picker

CSS Color

About Color Picker

Color Picker

Use the color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. Input Hex, RGB, HSL or CMYK values to search for a particular color in the fields below the color swatch; click the swatch to add it to your palette. After selecting a color, experiment with different harmonies by using the dropdown below the color picker.

The generated colors you create above can be used anywhere color is used in CSS and HTML, unless otherwise noted.

Color Harmonies

Color harmonies are particularly pleasing combinations of two or more colors derived from their relationship on a color wheel. Also known as color chords, color harmonies are useful when exploring a possible color palette, or can be used as a standalone color scheme.

Color Shades, Tints and Tones

Color shades, tints and tones are created by adding black, white and gray respectively to a chosen color. They can be very useful in web design for backgrounds and typography, and are often paired with a complementary color for contrast. Try them with your own color using the dropdown menu below the color picker.

Colors Shades

Adding black in varying levels to a color produces gradually darker variants, or 'shades', of that particular color. Shades work well for link hover effects, or as footer and header backgrounds.