Color Picker & Palette Generator

What the colour picker and palette generator does

Choose a colour and the page shows its HEX, RGB and HSL values, then builds a ten-step palette around it: five lighter tints and five darker shades. The palette keeps your colour’s hue and saturation and changes only its HSL lightness, so every swatch reads as part of the same family — useful for hover states, borders, subtle backgrounds and text on coloured surfaces. The picker itself is your browser’s native <input type="color"> control, described on MDN.

How to use it

1. Click the Color box to open your browser’s picker and choose a colour. Its HEX code appears beside the box.
2. Read the HEX, RGB and HSL values in the results card; they update as you drag.
3. Click any swatch under Tints (lighter) or Shades (darker) to copy its HEX code. With a keyboard, Tab to a swatch and press Enter or Space. A brief “Copied” confirms it.

The native picker looks different in each browser and operating system. Some offer a spectrum, others sliders or typed values; Chromium-based browsers’ own picker and the macOS colour panel include an eyedropper for sampling anything on screen. To type a value in RGB, HSL or CMYK instead, use the Color Converter.

How the palette is calculated

The colour is converted to HSL and rounded to whole numbers. Each step then moves lightness by 8 percentage points:

• Tints: lightness + 8, + 16, + 24, + 32 and + 40, capped at 95% so the lightest swatch stays visible on white.
• Shades: lightness − 8 to − 40, never below 5%.

For the default colour, #4f46e5 (hsl(243, 75%, 59%)), the page produced the values below, which we also reproduced in Node.js with the same functions:

Because of the caps, very light or very dark colours produce repeated swatches. Beige #f5f5dc is already at 91% lightness, so all five tints come out as #f9f9eb; green #16a34a (36%) reaches the 5% floor at the fourth shade, so the last two are both #03160a. Pure greys have no saturation, so they give neutral grey steps.

Turning the palette into design tokens

Design systems usually define each brand colour as a scale from very light to very dark. Map the swatches you need to CSS custom properties and refer to those names throughout your stylesheet:

:root {
  --brand-100: #eae9fc;  /* lightest tint: page backgrounds */
  --brand-300: #b6b3f4;  /* tint: borders, disabled states */
  --brand-500: #4f46e5;  /* base: buttons, links */
  --brand-700: #241bc0;  /* shade: hover, pressed */
  --brand-900: #100c55;  /* darkest shade: text on light tints */
}

.button { background: var(--brand-500); color: #fff; }
.button:hover { background: var(--brand-700); }

Pair a light tint background with a dark shade for text, and check the contrast: WCAG 2 asks for at least 4.5:1 for normal body text (Success Criterion 1.4.3).

The limits of HSL lightness

HSL is a simple reshaping of RGB, not a model of how bright colours look. Yellow #ffff00 and blue #0000ff are both hsl(…, 100%, 50%), yet the yellow looks far brighter. That is why steps in this palette can seem uneven, and why mid-lightness shades of yellow look olive. For perceptually even scales, CSS now supports oklch() (CSS Color 4), where equal lightness steps look more equal.

Common problems and fixes

Frequently asked questions

Guides

Related tools