Choisir et Convertir des Couleurs

Choisissez n'importe quelle couleur et convertissez instantanement entre HEX, RGB, HSL, CMYK et classes Tailwind CSS.

Le Selecteur de Couleurs interactif vous permet de choisir visuellement n'importe quelle couleur ou de saisir une valeur dans un format et de voir instantanement sa conversion en HEX, RGB, HSL, CMYK et classes equivalentes Tailwind CSS. Copiez des valeurs individuelles ou tous les formats à la fois. Tout fonctionne dans votre navigateur sans traitément serveur; vos couleurs restent privées.

Vos données restent dans votre navigateur
Cet outil vous a-t-il été utile ?
Tutoriel

Comment utiliser

1
1

Sélectionnez une couleur

Utilisez le selecteur visuel ou saisissez une valeur HEX pour choisir la couleur que vous souhaitez convertir.

2
2

Visualisez tous les formats

Voyez instantanement votre couleur choisie exprimee en HEX, RGB, HSL, CMYK et notation de classes Tailwind CSS.

3
3

Copiez les valeurs

Cliquez sur n'importe quel format individuel pour le copier, ou utilisez Tout Copier pour obtenir tous les formats.

Guide

Comprendre les Formats de Couleur

HEX et RGB

HEX est un code de six caractères prefixe par # qui représenté les canaux rouge, vert et bleu en hexadecimal. RGB utilisé des valeurs decimales de 0 a 255 pour chaque canal. Les deux decrivent le même espace colorimetrique additif; HEX est simplement une notation compacte du même triplet RGB.

Modèle de Couleur HSL

HSL signifie Teinte, Saturation et Luminosite. La teinte est un degre sur la roue des couleurs (0-360), la saturation est l'intensité en pourcentage et la luminosite contrôle la clarté ou l'obscurite de la couleur. HSL est souvent plus facile a ajuster programmatiquement car vous pouvez modifier la luminosite sans alterer la teinte.

CMYK pour l'Impression

CMYK représenté Cyan, Magenta, Jaune et Clé (noir) et est le modèle standard pour la production d'impression. La conversion de RGB a CMYK implique de mapper les couleurs additives de l'écran en pourcentages d'encre soustractifs. Les résultats peuvent varier selon le profil de l'imprimante et le type de papier.

Utilitaires de Couleur Tailwind CSS

Tailwind CSS inclut une palette curatee de classes de couleur nommees comme bg-blue-500 ou text-emerald-700. Cet outil trouve la classe Tailwind la plus proche de votre couleur sélectionnée, facilitant le respect de la palette du framework tout en correspondant à une couleur spécifique du design.

Examples

Exemples Resolus

Exemple : Convertir un Orange de Marque

Objectif : Convertir la couleur de marque #FF5733 dans tous les formats supportes pour un guide de style.

1

Étape 1 : Saisissez #FF5733 dans le champ de saisie HEX.

2

Étape 2 : Lisez le résultat RGB : rgb(255, 87, 51).

3

Étape 3 : Lisez le résultat HSL : hsl(11, 100%, 60%).

4

Étape 4 : Lisez le résultat CMYK : cmyk(0%, 66%, 80%, 0%).

5

Étape 5 : Notez la classe Tailwind la plus proche affichée.

Résultat : Les cinq formats sont documentes et prets a être colles dans le guide de style de marque.

Exemple : Trouver une Correspondance Tailwind

Objectif : Determiner quelle classe Tailwind CSS est la plus proche du bleu choisi par le designer #3B82F6.

1

Étape 1 : Saisissez #3B82F6 dans l'entrée HEX.

2

Étape 2 : L'outil affiche la classe Tailwind la plus proche : blue-500.

3

Étape 3 : Copiez le nom de la classe et utilisez-le dans le composant.

Résultat : Le composant utilisé maintenant la bonne classe utilitaire Tailwind, maintenant le projet cohérent avec la palette du framework.

Cas d'utilisation

Cas d'utilisation

Documentation des Couleurs de Marque

Lors de la création d'un guide de style de marque, vous avez besoin de chaque couleur exprimee en plusieurs formats. Choisissez votre couleur de marque une fois et obtenez instantanement HEX pour le web, RGB pour les actifs numeriques, CMYK pour les fichiers d'impression et les classes Tailwind pour les bibliotheques de composants.

Flux de Travail en Développement CSS

Les développeurs front-end doivent fréquemment convertir entre formats de couleur lors de l'écriture des feuilles de style. Prenez une couleur d'une maquette de design en HEX, puis convertissez-la en HSL pour des ajustements de luminosite plus faciles ou en valeur RGB pour les calculs d'opacite en CSS.

Correspondance des Couleurs pour l'Impression

Les designers preparant des fichiers pour l'impression ont besoin de valeurs CMYK précises correspondant à leurs couleurs à l'écran. Choisissez la couleur visuellement, vérifiez que le HEX correspond au fichier de design, puis copiez la decomposition CMYK pour la coller directement dans le logiciel de mise en page.

Questions Frequentes

?Quels formats de couleur cet outil prend-il en charge ?

Il prend en charge HEX, RGB, HSL, CMYK et les noms de classes Tailwind CSS. Tous les formats se mettent à jour simultanement lorsque vous choisissez une couleur.

?Quelle est la précision de la conversion CMYK ?

La conversion utilisé des formules standard pour approximer le CMYK à partir des valeurs RGB. Pour l'impression professionnelle, vérifiez avec un profil de couleur calibre.

?Puis-je coller une valeur de couleur au lieu d'utiliser le selecteur ?

Oui; saisissez ou collez n'importe quel code couleur HEX valide dans le champ de saisie et tous les autres formats se mettront à jour instantanement.

?Que sont les classes Tailwind CSS ?

Tailwind CSS utilisé des noms de classes utilitaires comme bg-red-500 pour appliquer des couleurs. Cet outil affiche la classe Tailwind la plus proche de votre couleur.

?Mes données sont-elles privées ?

Oui; tout fonctionne entièrement dans votre navigateur. Aucune donnée de couleur n'est envoyée à un serveur. Vos sélections restent sur votre appareil.

?Cet outil est-il gratuit ?

Oui; entièrement gratuit sans limites, sans inscription requise et sans fonctionnalités premium. Utilisez-le autant que vous le souhaitez sans frais.

Aidez-nous à améliorer

Aimez-vous cet outil ?

Chaque outil Kitmul est construit à partir de vraies demandes d'utilisateurs. Votre note et vos suggestions nous aident à corriger des bugs, ajouter des fonctionnalités manquantes et créer les outils dont vous avez vraiment besoin.

Notez cet outil

Cliquez sur une étoile pour nous dire si cet outil vous a été utile.

Suggérez une amélioration ou signalez un bug

Une fonctionnalité manque ? Vous avez trouvé un bug ? Une idée ? Dites-le-nous et nous l'examinerons.

Outils associés

Lectures Recommandées

Livres Recommandés sur Théorie des Couleurs et Design

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Boostez vos Compétences

Produits Recommandés pour le Travail avec les Couleurs

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Newsletter

Recevez des Conseils Productivité et les Nouveaux Outils en Premier

Rejoignez les créateurs et développeurs qui valorisent la confidentialité. Chaque édition : nouveaux outils, astuces productivité et mises à jour — sans spam.

Accès prioritaire aux nouveaux outils
Désabonnez-vous à tout moment, sans questions