Tints & Shades

A 10-step scale — 50 through 900 — for design-system tokens. Tints lighten toward white; shades darken toward black. Two distinct operations, never swapped.

Base colour

50#FFFFFFLightest tint — subtle backgrounds, hover states

100#D8E6FDLight tint — card and section backgrounds

200#B1CDFBTint — disabled surfaces, dividers

300#89B4FATint — muted accents

400#629BF8Light-mid — secondary actions

500#3B82F6Base colour — primary CTAs and brand momentsBASE

600#0A59DBShade — hover on primary actions

700#073C92Shade — active/pressed states

800#031E49Dark shade — text on light surfaces

900#000000Darkest shade — high-contrast text

Export

:root {
  --primary-50: #FFFFFF;
  --primary-100: #D8E6FD;
  --primary-200: #B1CDFB;
  --primary-300: #89B4FA;
  --primary-400: #629BF8;
  --primary-500: #3B82F6;
  --primary-600: #0A59DB;
  --primary-700: #073C92;
  --primary-800: #031E49;
  --primary-900: #000000;
}

Related tools

Color Converter

One value in — HEX, RGB, HSL, HSV, CMYK, Lab, OKLCH, CSS name and Tailwind out. Copy any format.

Contrast Checker

WCAG 2.1 ratio and WCAG 3.0 APCA Lc side by side, with a live preview and a fix suggestion when a pair fails.

Palette Generator

6 harmony modes from one base colour, including double-complementary. Export as CSS, SCSS, Tailwind or JSON.

Gradient Generator

Linear, radial and conic CSS gradients with a live preview and 22 curated presets.

Color Picker

A canvas hue/saturation/lightness picker with keyboard control and your last 10 colours.

Color Blindness Simulator

See any palette or image through 8 types of colour vision deficiency.

Image Color Extractor

Upload an image, get its 5 dominant colours — nothing leaves your browser.

Tailwind Color Mapper

Find the nearest Tailwind CSS v3 token for any colour, with the full family scale.

CSS Variables Exporter

Turn a list of named colours into CSS custom properties, SCSS, Tailwind config or JSON.