Hex, RGB, HSL and OKLCH
Use one picker to compare common CSS color formats and copy the value your codebase or design tool expects.
Pick a color
Color Picker
Pick a color visually or enter Hex, RGB and HSL values to explore matching OKLCH output, shades, tints, tones and harmony suggestions for CSS, UI components and brand palettes.
Pick a color
Values
RGB
HSL
Shades
Click a shade to use it as the base color.
Harmonies
Complementary
Analogous
Triadic
Split complementary
Next steps
What you can do here
Shades, tints and tones
Turn one base color into lighter and darker variations for hover states, borders, backgrounds and design tokens.
Start a color system
After picking a base color, check contrast, convert formats or open the color wheel to build a complete palette.