CSS Color Picker

Hex
RGB
HSL
HWB
OKLCH
P3

Compare Colors

Click in a box below, then select a color from the picker above to compare up to 3 colors side-by-side.

Color 1 #3b82f6
Color 2 Click to set
Color 3 Click to set

How to Use this Color Picker

  1. Change the Hue

    Use the slider in the middle to change the hue.

  2. Pick a Color

    Click anywhere in the large square (on the left) to pick a color.

  3. Copy the Color

    Once you're happy with the color, copy any of the color values from the color codes table. For example #FFFFFF for the hex code, or rgb(255, 255, 255) for the RGB decimal equivalent.

  4. Compare Colors (optional)

    You can compare up to three colors by clicking in the Color 1, Color 2, Color 3 fields under the color picker.

    After clicking in one of the fields, select a color from the color picker. The selected color will automatically appear as the background color in the field that you selected. Repeat for the remaining colors.

Named Colors

There's also a named colors chart that you can use to pick colors by name instead of a code. Includes the hex and RGB equivalent for each name.