HEX is only the starting point.
A HEX color code describes a color using red, green and blue channels. Use this picker to explore a color, copy its values and see how it works across interface components.
Tints mix your color with white; shades mix it with black. The Pro scale uses OKLCH to adjust perceptual lightness and chroma. Check text contrast before using any palette in a finished design.
- Pick a color. Enter three or six HEX digits, drag in the color field, or use the hue, saturation and brightness sliders.
- Explore the variations. Copy a tint, choose a harmony, or try your color in the interactive examples.
- Bring it into your project. Export CSS or JSON for free, or create a complete theme with Pro.