Color Picker

Pick a color and generate palettes, shades, tints, and harmonies.

HEX
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
Complementary
#3b82f6
#f6af3c
Analogous
#3ce0f6
#3b82f6
#523cf6
Triadic
#3b82f6
#f63c83
#83f63c
Split Complementary
#3b82f6
#f6523c
#e0f63c
#3c83f6
#0b64f4
#0950c3
#073c92
#052861
#021431
#000000
#3c83f6
#5e99f7
#7bacf9
#9ec1fa
#c0d7fc
#dde9fd
#ffffff

What is a color picker?

A color picker lets you select a color visually and see its values in different formats (HEX, RGB, HSL). This tool goes further by generating color harmonies, shades, and tints — helping you build complete color palettes for your designs.

How to use this tool

Click the color picker to choose a color, or type a HEX value directly. The tool instantly generates complementary, analogous, triadic, and split-complementary harmonies, plus a range of shades and tints. Click the copy button next to any color value to copy it.

Common use cases

Building color palettes for websites and apps, finding harmonious color combinations for branding, generating shades for UI component states (hover, active, disabled), and exploring color theory relationships for design projects.