Color Picker

Key features

• Pick with the native color swatch or type a hex code directly — invalid values are flagged as you type.
• HEX, RGB and HSL readouts with an individual copy button for each format.
• Live preview panel with a soft glow that matches the current color.
• Automatic tint and shade scales: five lighter and five darker steps at 9% lightness increments.
• Click any ramp block to make it the active color — all codes update instantly.
• All conversions run locally with standard color math; nothing is sent anywhere.

How it works

1. 1

   Choose a color

   Click the swatch to open your OS color dialog, or type a six-digit hex like #a855f7 into the field.

2. 2

   Copy the codes you need

   The HEX, RGB and HSL rows each have a copy button, ready to paste into CSS, Figma, or anywhere else.

3. 3

   Build a ramp

   The Tints & Shades panel generates lighter and darker versions of your color in even lightness steps.

4. 4

   Iterate

   Click any block to promote it to the current color and keep refining from there.

Tips for better results

• 💡Hex input must be exactly six digits — shorthand like #fff isn't accepted, so expand it first.
• 💡Tints and shades only change lightness; hue and saturation stay locked, which keeps ramps looking clean.
• 💡Hovering a ramp block reveals its hex underneath, so you can grab a value without clicking.
• 💡Need colors from a photo instead of a dialog? Use the Color Extractor tool.
• 💡Before shipping text in a new color, run the pair through the Contrast Checker.

Frequently asked questions