Skip to content

Tools — 06

One colour is never one colour.

A brand value on its own cannot carry a hover state, a disabled control and a background tint. A ramp can. These ten steps hold the hue, re-anchor the lightness, and ease the saturation at the pale end so the tints do not turn chalky — and each one arrives with its contrast already measured.

Source colour

Defaults to the Vantra primary, --color-blue.

Palette presets

The ramp

Select a field to copy its hex value. Badges show contrast against white and black.

W is contrast against white, B against black. A value marked in the pass tone clears 4.5:1, so text of that colour is safe on that step.

Copy-ready output

Tailwind config
// tailwind.config — colour ramp
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f2f4fd',
          100: '#e0e5fb',
          200: '#bbc7f7',
          300: '#869cf3',
          400: '#4b6cf2',
          500: '#0c3af3',
          600: '#072eca',
          700: '#0322a0',
          800: '#011874',
          900: '#000e47',
        },
      },
    },
  },
}

Reference

A shade is a colour mixed toward black, a tint is mixed toward white. A usable ten-step ramp is built by holding hue fixed and re-anchoring lightness at set values — 97% down to 14% — rather than by blending the base colour with black and white.

What is the difference between a shade, a tint and a tone?

A shade adds black, a tint adds white, and a tone adds grey. In practice a colour ramp needs both directions from one base, which is why the two are generated together.

Naming matters when the ramp becomes tokens: 50 is the palest tint and 900 the deepest shade, following the convention most design systems and Tailwind use.

Why does mixing with black produce muddy colours?

Because blending toward black drops saturation and shifts perceived hue at the same time, so the dark end of the ramp turns grey-brown instead of staying the same colour.

This tool instead sets each step to a target lightness while holding hue constant, and eases saturation down toward the pale end so the tints do not read as chalky. The result is ten steps that still look like one colour family.

Which steps in a ramp are safe for text?

Check every step rather than assuming. Each step here is measured against both white and black, because the crossover point — where a ramp stops working with white text and starts working with black — is rarely where it looks like it should be.

For body text the step needs 4.5:1 against its background. Mid-ramp steps around 400 and 500 frequently fail against both white and black, which makes them background colours, not text colours.

Common questions

How many steps should a colour ramp have?
Ten, numbered 50 to 900. That gives enough range for backgrounds, borders, text and hover states while keeping adjacent steps visibly different.
Can I use a mid-ramp colour for body text?
Usually not. Steps around 400 and 500 often fall below 4.5:1 against both white and black, which means they pass WCAG AA as neither light nor dark text. Use 600 and above on light backgrounds.
Does this generator export to Tailwind?
Yes. The ramp can be copied as a Tailwind colour config block with the 50–900 keys already in place.

Sources