Quel format d'entrée est accepté ?

Tout texte contenant des codes hex — séparés par des espaces, des virgules, ou collés depuis une feuille de style. Le texte non coloré est ignoré.

Prend-il en charge le hex abrégé ?

Oui. Le hex à 3 chiffres comme #abc est automatiquement étendu en #AABBCC.

Puis-je changer les noms des variables ?

Définissez un préfixe pour contrôler le nom de base ; les numéros sont ajoutés automatiquement. Modifiez le résultat pour des noms sémantiques.

Qu'est-ce que la sortie Tailwind ?

Une config module.exports avec les couleurs placées sous theme.extend.colors, prête à être fusionnée dans tailwind.config.js.

Mes couleurs sont-elles téléversées ?

Non. Tout est traité dans votre navigateur et rien ne quitte votre appareil.

Palette en variables CSS

Coller les couleurs

Préfixe du nom de variable

Format de sortie

4 couleurs

Aperçu des couleurs

#1E293B

#0EA5E9

#10B981

#F43F5E

Variables CSS

:root {
  --color-1: #1E293B;
  --color-2: #0EA5E9;
  --color-3: #10B981;
  --color-4: #F43F5E;
}

Sites externes associés

Certains liens sont des liens d'affiliation.

Adobe ColorUn outil en ligne gratuit pour créer et explorer des palettes de couleurs et des thèmes. Utilisez la roue chromatique pour créer des harmonies, ou extrayez des couleurs d'une image. Les palettes se synchronisent directement avec Creative Cloud.CanvaUne plateforme de design populaire en glisser-déposer pour créer des publications sur les réseaux sociaux, des présentations, des affiches et plus encore. Propose une immense bibliothèque de modèles, photos et graphiques gratuits et premium. Aucune expérience en design requise.

Outils associés

Générateur de Palette de CouleursGénérez des palettes de couleurs harmonieuses à partir d'un HEX de base avec des schémas complémentaire, analogue, triadique et plus. Verrouillez des couleurs, régénérez le reste et exportez en CSS, Tailwind ou JSON.Générateur de DégradéCréez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Ajustez l'angle, la forme et le centre, puis copiez le CSS background ou la valeur Tailwind en un clic.Extracteur de Couleurs d'ImageExtrayez la palette de couleurs dominantes de n'importe quelle image dans votre navigateur, sans rien envoyer. Obtenez HEX, RGB et pourcentage (%) de chaque couleur, choisissez le nombre et exportez en CSS/JSON.Outil d'association de policesTrouvez les meilleures combinaisons Google Fonts titre × corps, prévisualisez-les en temps réel et copiez le CSS en un clic.

Collez une palette — ou tout texte contenant des codes hex — et cet outil extrait les couleurs et les écrit comme propriétés CSS personnalisées, variables SCSS ou config Tailwind. Les doublons sont supprimés et chaque couleur reçoit un nom numéroté. Tout se passe dans votre navigateur.

Comment l'utiliser

Collez les couleurs hex (ou un texte les contenant) dans la zone de saisie.
Définissez un préfixe de nom et choisissez la sortie CSS, SCSS ou Tailwind.
Copiez le code généré dans votre feuille de style ou votre fichier de config.

Comment ça fonctionne

L'outil parcourt votre texte à la recherche de codes hex (3 ou 6 chiffres, avec ou sans #), les normalise en majuscules sur 6 chiffres et supprime les doublons en conservant l'ordre d'apparition. Chaque couleur devient une variable numérotée avec votre préfixe, puis est formatée selon la sortie choisie : propriétés CSS :root, variables SCSS $, ou objet Tailwind theme.extend.colors.

Fonctionnalités

Extraction intelligente

Trouve les codes hex dans n'importe quel texte collé et ignore le reste.

Trois formats

Génère des propriétés CSS personnalisées, des variables SCSS ou une config Tailwind.

Sans doublons

Les couleurs répétées sont fusionnées pour que chaque variable soit unique.

Entièrement privé

Les couleurs sont traitées dans votre navigateur et ne sont jamais téléversées.

Cas d'utilisation

Transfert de design

Convertissez rapidement une palette depuis un outil de design en tokens de code.

Thématisation

Créez un ensemble de variables CSS pour le thème d'un site.

Projets Tailwind

Intégrez directement les couleurs de votre marque dans votre config Tailwind.

Guides de style

Documentez un système de couleurs avec des noms de variables cohérents.

Remarques

#RGB et #RRGGBB sont tous deux acceptés et normalisés.
Les couleurs conservent l'ordre de leur première apparition ; les doublons sont supprimés.
Renommez les variables après collage si vous préférez des noms sémantiques.
Tout le traitement s'effectue sur votre appareil ; rien n'est téléversé.

FAQ

Quel format d'entrée est accepté ?: Tout texte contenant des codes hex — séparés par des espaces, des virgules, ou collés depuis une feuille de style. Le texte non coloré est ignoré.
Prend-il en charge le hex abrégé ?: Oui. Le hex à 3 chiffres comme #abc est automatiquement étendu en #AABBCC.
Puis-je changer les noms des variables ?: Définissez un préfixe pour contrôler le nom de base ; les numéros sont ajoutés automatiquement. Modifiez le résultat pour des noms sémantiques.
Qu'est-ce que la sortie Tailwind ?: Une config module.exports avec les couleurs placées sous theme.extend.colors, prête à être fusionnée dans tailwind.config.js.
Mes couleurs sont-elles téléversées ?: Non. Tout est traité dans votre navigateur et rien ne quitte votre appareil.