Convertir des couleurs
Convertisseur de couleur en ligne gratuit qui reconnaît HEX (3, 4, 6, 8 chiffres), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), la nouvelle syntaxe CSS Color 4 (séparée par espaces), les 147 couleurs nommées CSS et n'importe laquelle d'entre elles avec alpha. Sortie de chaque format à la fois, copiable individuellement. Une palette intégrée génère des nuances foncées (pas plus sombres), claires (pas plus clairs), complémentaire, analogue, triadique et tétradique. Un vérificateur de contraste WCAG indique si la couleur répond aux exigences AA / AAA contre blanc et noir pour texte normal et large. Ouvrez la pipette du système (Chrome / Edge) pour choisir n'importe quelle couleur à l'écran.
Comment utiliser
N'importe quel format : HEX, RGB, HSL, OKLCH, même des noms CSS comme tomato.
Les onze apparaissent à la fois, copiez d'un seul clic.
Nuances et harmonies dérivées de votre couleur.
Contraste WCAG contre blanc et noir avec verdict AA/AAA.
Convertissez entre 11 formats de couleur, construisez des palettes, vérifiez le contraste WCAG — tout en un seul endroit
Tous les formats
Contraste (WCAG)
Palette
Récents
Fonctionnalités
Utilisations typiques
- Chercher l'OKLCH d'une couleur HEX de marque pour un système de design CSS Color 4.
- Convertir des valeurs de pixel RGB d'une capture d'écran en HSL pour un axe de graphique.
- Trouver une couleur complémentaire pour un état hover de bouton.
- Vérifier si le texte du corps répond à WCAG AA contre un arrière-plan choisi.
- Choisir une couleur d'un autre onglet ou fenêtre via la pipette du système.
Pourquoi celui-ci
Beaucoup de convertisseurs font seulement HEX↔RGB↔HSL. Nous incluons OKLab et OKLCH — les nouveaux espaces CSS Color 4 qui correspondent à la perception humaine bien mieux que HSL (pas de sauts surprenants en luminosité quand on change la teinte). La génération de palette tourne en OKLab pour que les étapes paraissent perceptuellement uniformes, pas mathématiquement uniformes. Le contraste est calculé dans l'espace de luminance WCAG 2 avec les seuils 4.5:1 et 3:1 épelés.
Questions fréquentes
Qu'est-ce que OKLCH ?
Un espace colorimétrique perceptuellement uniforme introduit dans le cadre de CSS Color 4. Contrairement à HSL — où la luminosité à 50% peut paraître très différente selon les teintes — la luminosité OKLCH est cohérente sur tout le spectre, ce qui rend les tokens de design prévisibles. Si vous construisez un système de design moderne, OKLCH vaut la peine d'être appris.
Ma couleur inclut-elle alpha ?
Oui — n'importe lequel des HEX à huit chiffres, rgba(), hsla(), ou syntaxe d'espace avec suffixe alpha (rgb(255 0 0 / 50%)) est parsé et reflété dans chaque format de sortie qui supporte alpha.
Pourquoi ma palette de nuances paraît "en escalier" plutôt que lisse ?
Les nuances foncées et claires sont interpolées en OKLab puis projetées vers votre espace cible, donc chaque étape est perceptuellement égale — cela produit souvent des résultats visuellement plus lisses qu'un changement naïf de luminosité HSL, mais des couleurs de départ très sombres ou très claires clipent près des extrémités.
CMYK — précis pour l'impression ?
Non — la sortie CMYK est une conversion rapide dans l'espace écran, pas consciente du profil ICC. Pour l'impression, prenez le CMYK que vous voyez ici comme point de départ et vérifiez dans les outils Adobe / Affinity contre le profil d'impression réel.
La pipette ne fonctionne pas — pourquoi ?
L'API EyeDropper n'est disponible que dans les navigateurs basés sur Chromium (Chrome, Edge, Brave) actuellement. Firefox et Safari masqueront le bouton avec une infobulle si non supporté.
Les noms HEX sont-ils sensibles à la casse ?
Non, HEX est hex (0-9, a-f ou A-F). Nous émettons des minuscules par défaut pour correspondre à la recommandation CSS Color 4 ; la sortie reste valide peu importe comment vous la recollez.
Mobile ?
Oui. La pipette n'est pas disponible sur les navigateurs mobiles — utilisez le sélecteur de couleur natif à la place.
Nous le pouvons — et c'est gratuit ! Envoyez-nous simplement un message rapide avec votre idée. Si vous voulez en discuter en détail, laissez votre e-mail et nous reviendrons vers vous. Vous pouvez rester anonyme.
