Color Palettes Generator & Color Shades Generator
Professional color palettes generator, color palette maker from a color, and shades and tints generator. Generate lighter and darker color tints, extract palettes from images, create material color palettes, explore analogous harmonies on the color wheel, and generate ready-to-use CSS color patterns online.
Base Color & Seed
Press Spacebar or click Generate Colour Palette to roll new aesthetic harmonized swatches. Click the lock icon to hold your favorite colors while shuffling the rest!
Color Palette Generator From Words
Type any concept, mood, brand, or feeling. Our semantic word-to-color hashing engine generates a cohesive, 5-stage thematic UI color scheme online.
Generate production-ready Material Design swatches tailored for Android Jetpack Compose, Flutter, Tailwind, and Web UI.
Color Palette Image Generator
Extract dominant color swatches directly from any photograph or design mockup. Drag and drop an image below to extract its palette.
Color Range Generator
Equidistant 12-hue step spectrum around the color wheel at current saturation and lightness.
Color Pattern Generator
The Science of Color Palettes, Tints, and Shades
Whether you are designing a digital design system in Figma or building Tailwind utility classes, understanding the mathematical distinctions between color tints, shades, and tones is paramount for accessibility and aesthetic balance.
1. Tints vs Shades vs Tones: Core Definitions
In traditional color theory and digital imaging, a base pure hue is altered across three core axes:
- Tints (Lighter): Produced by mixing pure white (
#FFFFFF) into the base hue. In digital color spaces (such as HSL), this corresponds to increasing the Lightness component while preserving the Hue angle. Tints are standardly employed for background surfaces, badge backgrounds, and hover illumination. - Shades (Darker): Produced by mixing pure black (
#000000) into the base hue. This reduces Lightness towards 0. In UI engineering, shades provide contrast for active states, pressed button styles, and high-legibility typography on light backgrounds. - Tones (Muted): Produced by adding neutral gray (desaturating). This reduces the Saturation or Chroma without forcing extreme light or dark shifts.
| Term | Mixing Agent | HSL Vector Shift | Common UI Implementation |
|---|---|---|---|
| Tint | Pure White (#FFFFFF) |
Lightness ↑ (toward 100%) | Cards, input backgrounds, subtle borders, chips |
| Base Hue | Unmodified Seed Color | Nominal 500-level standard | Primary buttons, links, brand logos, accents |
| Shade | Pure Black (#000000) |
Lightness ↓ (toward 0%) | Button active states, high-contrast headings, dark mode |
| Tone | Neutral Gray (#808080) |
Saturation ↓ (toward 0%) | Disabled inputs, secondary captions, subtle icons |
2. Generating Accessible Contrast Ratios (WCAG 2.1)
Every swatch calculated in this color shades generator is analyzed against the Web Content Accessibility Guidelines (WCAG 2.1). The relative luminance formula is defined as:
L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Under WCAG AA, normal text requires a minimum contrast ratio of 4.5:1 against its background, while large text (18pt+ or bold 14pt+) requires 3.0:1. Under WCAG AAA, the threshold increases to 7.0:1 for normal text and 4.5:1 for large text.
3. Integrating Color Scales into Tailwind CSS & CSS Variables
When utilizing our exported color variables, you can register them seamlessly in your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: 'var(--brand-50)',
100: 'var(--brand-100)',
200: 'var(--brand-200)',
300: 'var(--brand-300)',
400: 'var(--brand-400)',
500: 'var(--brand-500)',
600: 'var(--brand-600)',
700: 'var(--brand-700)',
800: 'var(--brand-800)',
900: 'var(--brand-900)',
}
}
}
}
}