colorize
ColorKit
CK

Générateur de Couleurs Tailwind CSS

Saisissez la couleur principale de votre marque pour générer instantanément une échelle 50-950 prête pour Tailwind CSS v3 et v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

Comment fonctionne l'échelle de nuances de Tailwind ?

Tailwind CSS s'appuie sur une échelle de clarté 50-950 pour garantir la cohérence des interfaces.

  • 50 - 100 : Arrière-plans très clairs et conteneurs secondaires.
  • 200 - 400 : Bordures discrètes et éléments inactifs.
  • 500 - 600 : Éléments actifs principaux et boutons d'action.
  • 700 - 950 : Textes d'en-tête et surfaces foncées en mode sombre.
Base de Connaissances & FAQ

Foire Aux Questions

Réponses directes et solutions aux questions courantes, défis techniques et normes de l'industrie.

Comment Tailwind CSS calcule-t-il son échelle de nuances de 50 à 950 ?expand_more
L'échelle numérique de Tailwind organise les teintes par clarté progressive :
  • 50–100 : Teintes pastel lumineuses (~90% à 95% de clarté) idéales pour les fonds et bannières.
  • 200–400 : Tons moyens pour bordures, séparateurs et états inactifs.
  • 500–600 : Couleur de marque principale (500) et état survol (600) pour les boutons clés.
  • 700–900 : Teintes sombres pour le texte de lecture et les surfaces sombres contrastées.
  • 950 : Nuance quasi-noire (~5% à 10% de luminosité) pour les fonds profonds en mode sombre.
Comment intégrer des nuances personnalisées dans Tailwind CSS v3 vs Tailwind CSS v4 ?expand_more
Dans Tailwind CSS v3 (configuration JS) : Ajoutez l'échelle dans tailwind.config.js sous theme.extend.colors : 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
Dans Tailwind CSS v4 (CSS pur) : Déclarez-les directement dans votre feuille de style via la directive @theme : 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
Pourquoi le simple ajout de blanc ou de noir affadit-il les couleurs ?expand_more
L'éclaircissement ou l'assombrissement linéaire aplatit la saturation, générant des tons pastel crayeux et des sombres boueux. Les palettes professionnelles de Tailwind emploient le décalage de teinte (hue shifting) : en s'éclaircissant, la teinte glisse légèrement vers les tons chauds solaires, et en s'assombrissant, vers des ombres fraîches bleutées.
Quelle nuance Tailwind privilégier pour les titres, le texte et les bordures ?expand_more
Recommandations types de design system :
  • Titres (H1–H3) : text-slate-900 ou text-neutral-900 pour un contraste optimal.
  • Corps de texte : text-slate-700 ou text-neutral-600 pour un confort de lecture prolongé.
  • Légendes et sous-titres : text-slate-500.
  • Bordures de cartes : border-slate-200 (thème clair) et border-slate-800 (thème sombre).