Générateur de teintes et nuances, gratuit

Teintes et nuances

Les teintes sont obtenues en mélangeant une couleur avec du blanc, la rendant progressivement plus claire. Les nuances sont obtenues en mélangeant avec du noir, la rendant plus foncée. Ensemble, elles forment une échelle tonale complète, utile pour le design d'interface, les dégradés, les états de survol et les systèmes de couleurs accessibles.

Questions fréquentes

Comment utiliser ces nuances ?

Utilisez les teintes claires pour les arrière-plans, les états de survol et les bordures. Utilisez les nuances foncées pour le texte, les états actifs et la mise en valeur. Cliquez sur « Tout copier comme variables CSS » pour obtenir un extrait CSS prêt à l'emploi.

Puis-je copier les couleurs individuellement ?

Oui ! Cliquez sur un échantillon pour copier sa valeur HEX dans le presse-papiers.

Tint, Shade, and Tone, the Formal Definitions

Three terms get used loosely; classical colour theory distinguishes them precisely:

• Tint = base colour + white. Lighter and paler. Pink is a tint of red; sky blue is a tint of blue.
• Shade = base colour + black. Darker and deeper. Maroon is a shade of red; navy is a shade of blue.
• Tone = base colour + grey. Less saturated, more muted. Adds nuance without changing brightness much.

This generator produces tints (lighter than the base) and shades (darker). Tones (adding grey rather than white or black) are useful for muted, sophisticated palettes (think 1970s interior design colour systems) but rarely needed for typical UI work.

Why Modern Design Systems Use Numeric Scales

Tailwind CSS popularised the 50-100-200-…-900-950 numeric scale per colour, with the "500" stop conventionally treated as the base. Material Design uses a parallel 50-100-…-900 system; Bootstrap 5 uses 100-…-900; IBM Carbon uses 10 stops per swatch. The shared idea: a single brand colour is rarely enough, UIs need consistent variants for hover states, backgrounds, borders, focus rings, disabled states, badges, and dark-mode equivalents. A predictable numeric scale gives you those variants in a way that's portable across components, refactorable when the brand evolves, and discoverable to anyone reading the codebase.

How Different Algorithms Compute the Scale

There are three common ways to compute a tint/shade scale, with different visual results:

• RGB mixing with white / black. The art-theory definition. Produces faithful tints and shades but doesn't account for perceptual uniformity, yellows desaturate quickly, blues stay rich.
• HSL lightness adjustment. Fast and easy: nudge the L channel up for tints, down for shades. The most common approach in older tools. The downside is HSL's lightness isn't perceptually uniform, yellow at 50% L looks much brighter than blue at 50% L, so a palette built by HSL stepping looks uneven across hues.
• OKLCH or CIELAB lightness scaling. The modern, perceptually-uniform approach. The L in OKLCH is calibrated so that "200 → 300 → 400" feels like the same step regardless of hue. Tailwind v4 (released January 2025) rebuilt all its default palettes around OKLCH for exactly this reason.

If your scale ever looks "flat" (yellow steps that wash out, blue steps that all read as the same dark blue) it's almost always because the underlying maths is HSL-based rather than OKLCH-based. Modern CSS (CSS Color Module Level 4) exposes oklch(), lab(), and color-mix(in oklch, …) directly, making perceptually-uniform scales a one-liner without any external tool.

Use Cases

• Bootstrapping a design system from a single brand colour. Pick the brand HEX, generate the scale, copy the CSS variables, ship.
• Customising a Tailwind colors map. Replace the default brand colour with your own scale of 11 stops.
• UI hover and focus states. A common pattern: button background uses the 500, hover uses the 600, active uses the 700, focus ring uses the 400 at low opacity.
• Backgrounds and elevation. Card backgrounds use the 50; subtle borders use the 200; disabled text uses the 400.
• Dark-mode equivalents. Many systems generate a parallel dark-mode scale rather than mathematically inverting the light one, colours that look balanced on white don't always look balanced on near-black.
• Mockup variations. Quickly compare three brand candidates by generating the scale for each and dropping them into the same UI mockup.
• Print swatch books. Pre-flight a print palette to see how subtle the steps actually appear when adjacent.

Accessibility and Contrast

A generated scale is only as useful as the text-on-background pairs it produces. The WCAG 2.1 minimums to keep in mind:

• Normal body text: 4.5:1 against its background (Level AA).
• Large or bold text (18 pt / 14 pt bold and up): 3:1 (Level AA).
• UI components and graphical objects: 3:1 (Level AA, SC 1.4.11).

Reliable rules across most well-built scales: the 50 + 900 pair always passes for body text, the 100 + 800 pair almost always does. The 400 + 500 pair almost never does. Test the specific pairs you intend to use, the Vérificateur de contraste de couleurs, gratuit tool computes WCAG ratios for any two HEX values.

Wiring the Output Into Your Codebase

Three common ways to consume a generated scale:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Common Mistakes

1. Generating too many stops. Tailwind's 11 is a sweet spot. 20 stops is overkill, most are visually indistinguishable, and you'll never use them.
2. Using HSL-based scales for yellow / orange / fluorescent colours. They wash out at light stops and don't darken cleanly. Reach for OKLCH-based generation if your brand colour falls into the "tricky" hue range.
3. Treating the scale as final without checking text contrast. Beautiful colour relationships sometimes pair white text with the 400 stop and fail WCAG 4.5:1. Test every pairing you'll actually use.
4. Inverting the light palette to make a dark-mode palette. Mathematically tempting, visually wrong, colours that feel balanced on white feel garish on near-black. Generate or hand-tune a parallel dark-mode scale.
5. Using the base colour as "500" when it perceptually matches another stop better. If your brand colour is genuinely dark, it might be the 700 of its scale; let the perceptual relationship dictate which slot it occupies, not the convention.
6. Forgetting the 50 stop. The lightest tint is the most useful for backgrounds and subtle highlights. Don't truncate your scale at 100.

More Frequently Asked Questions

Why does my scale look flat, all stops feel similar?

Two common causes: (1) too many steps in too narrow a range, try fewer steps, especially if the colour is already mid-luminance; (2) HSL-based scaling on a hue where HSL is poorly calibrated (yellows, oranges, neon colours). Reaching for an OKLCH-based palette generator usually fixes both.

How do I generate a dark-mode palette from a light-mode scale?

Don't simply invert. The naïve invert (flip light and dark stops) produces dark-mode palettes that feel garish or wash out. The convention in Material 3, Radix Colors, and Tailwind's dark variants is to generate a parallel scale tuned for the dark background, usually with slightly reduced saturation and shifted hue to compensate for how colours perceive against dark surfaces. Most large design systems publish both palettes side by side.

Can I use the generated colours commercially?

Yes. Colour values aren't copyrightable; HEX codes are facts about pixels. Use the generated palette anywhere, open-source projects, commercial sites, brand systems, print, packaging.

What's a good number of steps?

For UI design, 9 to 11 stops per colour is the established convention (Tailwind, Bootstrap, Carbon all sit in that range). Material Design uses 13. Below 7 stops the scale feels under-resolved; above 13 the stops become hard to distinguish from each other.

Is anything sent to a server?

No. The colour-mathematics runs in your browser; the input HEX, the generated stops, and the copied CSS never touch a server. Useful when the brand colour is unreleased or under embargo.

How does this differ from a colour-palette generator?

A palette generator picks several distinct colours that work together (complementary, analogous, triadic, etc.), different hues entirely. A shades generator (this one) keeps a single hue and produces lighter and darker variants of it. Different jobs: palette generators give you the brand-primary plus accents; shade generators give you the variations of one of those colours.

Outils associés