Design

Colour Tints

Generate tints and shades from any colour. Simulate colour blindness, generate palettes, and export as CSS, Tailwind, or SCSS.

Export

:root {
  --color-primary-50: #ffffff;
  --color-primary-100: #edf2f3;
  --color-primary-200: #dae6e7;
  --color-primary-300: #c8d9dc;
  --color-primary-400: #b5cdd0;
  --color-primary-500: #468189;
  --color-primary-600: #90b3b8;
  --color-primary-700: #7ea7ac;
  --color-primary-800: #6b9aa1;
  --color-primary-900: #598e95;
  --color-primary-950: #468189;
}

About this tool

Generate tint and shade scales for any colour. Add multiple colours to build a full design system palette. Use the palette generator to create complementary, analogous, and triadic harmonies from your base colour. Simulate colour blindness to check accessibility. Export as CSS custom properties, Tailwind config, or SCSS variables.