Éditeur de Couleurs
Ajustez et affinez les couleurs avec précision. Modifiez la teinte, la saturation et la luminosité, générez des échelles de nuances et vérifiez le contraste pour l'accessibilité du texte.
À propos de cet outil
L'Éditeur de Couleurs est un outil complet pour ajuster et affiner n'importe quelle couleur avec précision. Entrez une couleur au format HEX, RGB, HSL, ou même par nom, puis utilisez les curseurs pour modifier la Teinte, la Saturation (l'intensité de la couleur) et la Luminosité (à quel point la couleur est claire ou foncée). Les changements sont appliqués en temps réel, vous permettant de prévisualiser instantanément le résultat et de vérifier la lisibilité par rapport au texte clair et sombre. L'outil convertit également automatiquement la couleur dans les formats les plus courants utilisés en conception et développement web, y compris HEX, RGB, HSL, HSV et OKLCH.
Fonctionnalités Principales
Pourquoi utiliser l'Éditeur de Couleurs
- Créer des palettes cohérentes pour les design systems, les composants et les interfaces web
- Vérifier que les combinaisons de couleurs respectent les seuils d'accessibilité WCAG et APCA avant publication
- Adapter une couleur de marque pour différents contextes tels que le mode sombre, le survol et les états désactivés
- Générer des échelles de nuances de style Tailwind à exporter comme variables CSS ou design tokens
- Convertir les couleurs entre HEX, RGB, HSL et OKLCH lors de l'intégration de différents outils de design et de développement
Comment utiliser l'Éditeur de Couleurs
Entrez la couleur de base
Tapez n'importe quelle valeur HEX, RGB, HSL ou nom de couleur dans le champ Couleur de Base. L'outil charge la couleur instantanément et la convertit dans tous les formats disponibles
Ajustez avec les curseurs
Utilisez les contrôles de Teinte, Saturation et Luminosité pour modifier la couleur en temps réel. Toutes les sorties et l'échelle de nuances se mettent à jour instantanément
Vérifiez le contraste
La section accessibilité affiche le ratio de contraste par rapport au texte blanc et noir en utilisant les modèles WCAG 2.1 et APCA, indiquant si la combinaison réussit ou échoue
Copiez les valeurs
Cliquez sur n'importe quel bloc de format (RGB, HSL, HSV, OKLCH) pour copier directement la valeur. La valeur HEX est affichée dans l'aperçu principal
Exportez l'échelle de nuances
Dans la section Tints & Shades, choisissez le format d'exportation (CSS, SCSS, JSON, Tailwind) et le format de couleur (HEX, RGB, HSL ou OKLCH), puis cliquez sur Copier pour l'utiliser dans votre projet
Foire Aux Questions
WCAG 2.1 utilise une formule mathématique simple pour calculer le contraste entre les couleurs. APCA (Accessible Perceptual Contrast Algorithm) est un modèle plus moderne qui prend en compte la façon dont l'œil humain perçoit la luminosité dans différents contextes de lecture. Pour un texte normal, une valeur APCA de 60 ou plus est considérée comme adéquate.
Sélectionnez le format d'exportation Tailwind et votre format de couleur préféré. Le code généré peut être collé directement dans tailwind.config.js ou dans un fichier CSS comme variables personnalisées. Si vous utilisez OKLCH, il est nativement compatible avec Tailwind 4.
OKLCH est un espace colorimétrique perceptuellement uniforme — ce qui signifie que modifier la luminosité ou le chroma produit des résultats visuellement prévisibles. C'est le format adopté en interne par Tailwind 4 et CSS Color Level 4, ce qui le rend idéal pour générer des échelles de nuances plus cohérentes visuellement que le HSL.