Comment choisir et convertir les couleurs pour le web design
Passez d’un modèle de couleur à l’autre entre HEX, RGB, HSL et OKLCH ; construisez des paires contrastées accessibles ; exportez une palette fiable pour votre design system.
D’autres utilitaires qui complètent bien ce guide :
Pourquoi c’est important
Un designer transmet un fichier Figma avec #5B2A6F. L’ingénieur la met dans une variable CSS. Deux semaines plus tard la QA signale que le bouton d’appel à l’action échoue au contraste WCAG AA sur le fond atténué. La correction est un bump de luminosité en HSL — mais à l’œil on ne sait pas si le contraste dépasse 4,5:1. Un outil couleur qui affiche les modèles numériques et le score de contraste boucle le cycle entre « joli » et « passe l’audit ».
Trois scénarios réels
Collez premier plan et arrière-plan, lisez le ratio, ajustez la luminosité jusqu’à ≥4,5.
UI accessible
Partez de la couleur marque ; générez des pas plus clairs et plus foncés en OKLCH pour des tons perceptuellement uniformes.
Nuances cohérentes
Convertissez la référence Pantone en RGB et affinez en HSL jusqu’à ce que l’aperçu écran colle à l’épreuve papier.
Campagne alignée marque
Parcours
Ouvrez l’éditeur de couleurs.
Choisir ou coller une couleur
Cliquez la pastille et utilisez le sélecteur, ou collez l’un de
#5B2A6F,rgb(91 42 111),hsl(280 45% 30%),oklch(35.5% 0.12 304).Lire chaque modèle
Champs côte à côte pour HEX, RGB, HSL, HSV, OKLCH. Modifiez n’importe lequel ; les autres suivent.
Construire une paire contrastée
Déposez une seconde couleur dans l’emplacement « arrière-plan ». Le ratio de contraste s’affiche avec badges WCAG AA / AAA.
Générer des variantes
Avec le sélecteur OKLCH, faites varier la luminance en gardant teinte et chroma — la voie la plus propre pour dériver des tokens design system.
Exporter
Copiez en CSS, Sass, JSON ou format design token.
HEX
#5B2A6FAutres modèles
RGB: rgb(91, 42, 111)
HSL: hsl(280, 45%, 30%)
OKLCH: oklch(35.5% 0.12 304)
Conseils avancés
- Utilisez OKLCH pour les tokens design. Faire varier la luminance en HSL donne des pas perceptifs inégaux ; OKLCH se rapproche de la façon dont on perçoit les changements de clarté.
- Ne vous fiez pas à l’écran pour l’impression fidèle. Des écrans étalonnés sont nécessaires pour coller à un Pantone ou un CMYK.
- Générez les paires mode sombre en inversant la luminance en OKLCH en baissant un peu la chroma pour limiter la fatigue visuelle.
- Documentez le HEX et les valeurs perceptuelles dans le design system. Les mainteneurs futurs vous remercieront.
Pièges courants
Piège courant
Le même HEX paraît différent téléphone vs portable
Gammes (sRGB vs Display P3) et luminosité différentes font « ressentir » la couleur autrement. Indiquez explicitement les couleurs destinées à la gamme P3 plus large avec color(display-p3 ...).
Piège courant
Le testeur de contraste dit échec alors que visuellement ça va
Le ratio de contraste est une mesure mathématique. Le contraste optique dépend du contexte. La mesure est la base légale / audit ; visez mieux que 4,5:1 pour le texte courant quand vous le pouvez.
Piège courant
Les couleurs dérivent dans les variables CSS entre composants
Définissez le token canonique une fois et référencez-le partout. Les variantes viennent de dérivés (oklch(from var(--brand) calc(l + 0.1) c h)) plutôt que de ressaisie.
Quand ce n’est pas l’outil adapté
- Gestion couleur print — workflow Adobe étalonné.
- Analyse couleur d’images en masse — script avec
chroma.jsouculori. - Simulation daltonisme — des outils dédiés (ex. analyseur contraste axe DevTools) simulent déutanopie/protanopie au-delà d’un simple ratio.
FAQ
Quelle différence entre HSL et OKLCH ?
HSL n’est pas perceptuellement uniforme : un pas de 10° de teinte peut sembler une autre couleur selon la luminance. OKLCH (forme polaire d’OKLab) corrige cela pour des ajustements plus prévisibles.
L’outil supporte-t-il CSS Color 5 ?
Oui — color-mix() et oklch(from ...) sont gérés sur navigateurs récents. L’outil émet la valeur compatible avec le niveau de fonctionnalités choisi.
Mes couleurs sont-elles stockées ?
Non. Tout est local ; copier dans le presse-papiers reste optionnel.
Étapes suivantes
- Validez les couleurs choisies par rapport à la palette globale de vos visuels avec le convertisseur d’images.
- Exportez un favicon ou logo final avec le convertisseur SVG vers PNG.
- Convertissez les couleurs d’images pour l’embarqué via l’outil Image vers Base64.