Palette UI sémantique

Saisissez une couleur de marque, obtenez primaire / secondaire / succès / avertissement / danger — exporté en configuration Tailwind et variables CSS.

Primaire de marque

2F6FED · L 57%

Primaire

Dérivés automatiquement, clarté et chroma de marque conservées

#010101Base

#010101Clair

#000101Sombre

Secondaire

Dérivés automatiquement, clarté et chroma de marque conservées

#010101Base

#010101Clair

#010101Sombre

Succès

Dérivés automatiquement, clarté et chroma de marque conservées

#000101Base

#010101Clair

#000100Sombre

Avertissement

Dérivés automatiquement, clarté et chroma de marque conservées

#010100Base

#010101Clair

#010100Sombre

Danger

Dérivés automatiquement, clarté et chroma de marque conservées

#010101Base

#010101Clair

#010000Sombre

Exporter le code

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

Comment construire un système sémantique — une primaire, cinq rôles.

Saisissez une couleur de marque, obtenez les cinq ensembles sémantiques nécessaires à toute interface, exportés sous forme de code.

01
Saisir la primaire
Collez votre HEX de marque ; les couleurs sémantiques héritent de sa luminosité et de son caractère chromatique.
02
Lire les rôles
Le succès se situe dans la plage de teinte verte, l’avertissement dans l’ambre, le danger dans le rouge — la teinte est sémantique, le caractère reste celui de la marque.
03
Exporter
Copiez en tant que configuration Tailwind, variables CSS ou JSON, directement dans votre système de design.

FAQ sur la palette sémantique

Trois questions fréquentes lors de l’intégration dans un système de design.

Les teintes sémantiques sont-elles fixes ?: Les teintes s’ancrent à des plages sémantiques (succès=vert, avertissement=ambre, danger=rouge) tandis que la luminosité et la chromaticité héritent de la couleur principale de la marque — chaque marque génère sa propre identité.
Pourquoi trois étapes par couleur sémantique ?: Base pour l’état par défaut, clair pour les survols/teintes, foncé pour les états actifs/bordures ; la couleur du texte est automatiquement choisie en noir ou blanc selon le contraste.
Le code exporté est-il prêt pour la production ?: Le bloc Tailwind se colle directement dans tailwind.config ; le bloc de variables CSS fonctionne avec n’importe quel framework ou en CSS brut.

Après la palette sémantique

Ouvrez l’éditeur de planche et testez-la comme une véritable interface.

Éditeur OKLCH

Ajustez L / C / H dans l’espace OKLCH perceptuellement uniforme avec aperçu en direct et sortie oklch() / HEX / RGB.

Générateur d'échelles

Transformez n'importe quelle couleur en une échelle de système de design à 11 niveaux, perceptuellement uniforme en OKLCH, avec contraste WCAG par niveau, export vers Tailwind/CSS/SCSS/JSON.

Vérificateur de contraste

Validation du contraste selon WCAG 2.1 entre n'importe quelle couleur de premier plan et de fond.

Studio de palettes IA

Décrivez une scène ou une ambiance en une ligne — obtenez une palette de cinq tons avec sa justification.

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "#010101", light: "#010101", dark: "#000101", foreground: "#ffffff", }, secondary: { DEFAULT: "#010101", light: "#010101", dark: "#010101", foreground: "#ffffff", }, success: { DEFAULT: "#000101", light: "#010101", dark: "#000100", foreground: "#ffffff", }, warning: { DEFAULT: "#010100", light: "#010101", dark: "#010100", foreground: "#ffffff", }, danger: { DEFAULT: "#010101", light: "#010101", dark: "#010000", foreground: "#ffffff", }, }, }, }, };

Comment construire un système sémantique — une primaire, cinq rôles.

Saisissez une couleur de marque, obtenez les cinq ensembles sémantiques nécessaires à toute interface, exportés sous forme de code.

Saisir la primaire

Collez votre HEX de marque ; les couleurs sémantiques héritent de sa luminosité et de son caractère chromatique.

Lire les rôles

Le succès se situe dans la plage de teinte verte, l’avertissement dans l’ambre, le danger dans le rouge — la teinte est sémantique, le caractère reste celui de la marque.

Exporter

Copiez en tant que configuration Tailwind, variables CSS ou JSON, directement dans votre système de design.

FAQ sur la palette sémantique

Trois questions fréquentes lors de l’intégration dans un système de design.

Les teintes sémantiques sont-elles fixes ?

Les teintes s’ancrent à des plages sémantiques (succès=vert, avertissement=ambre, danger=rouge) tandis que la luminosité et la chromaticité héritent de la couleur principale de la marque — chaque marque génère sa propre identité.

Pourquoi trois étapes par couleur sémantique ?

Base pour l’état par défaut, clair pour les survols/teintes, foncé pour les états actifs/bordures ; la couleur du texte est automatiquement choisie en noir ou blanc selon le contraste.

Le code exporté est-il prêt pour la production ?

Le bloc Tailwind se colle directement dans tailwind.config ; le bloc de variables CSS fonctionne avec n’importe quel framework ou en CSS brut.