Points clés
- Catégorie
- Design et couleur
- Types d’entrée
- text, select, number
- Type de sortie
- html
- Couverture des échantillons
- 1
- API disponible
- Yes
Vue d’ensemble
Ce convertisseur de couleur OKLCH permet de traduire instantanément vos codes couleur entre HEX, RGB, HSL, OKLCH et Display-P3 selon les formules de CSS Color 4. Il analyse la conformité aux gamuts sRGB et Display-P3 et propose une correction automatique par réduction de chroma pour les couleurs hors-gamut.
Quand l’utiliser
- •Lors de la création de palettes de couleurs modernes et accessibles nécessitant une luminosité perçue uniforme.
- •Pour convertir des couleurs classiques comme HEX, RGB ou HSL vers le format CSS moderne oklch() ou Display-P3.
- •Pour vérifier si une couleur vive dépasse les limites du gamut sRGB standard et trouver la couleur dans-gamut la plus proche.
Comment ça marche
- •Saisissez votre couleur dans le champ d'entrée (HEX, RGB, HSL ou OKLCH) ou ajustez directement les curseurs de luminosité (L), chroma (C) et teinte (H).
- •L'outil applique les matrices de conversion CSS Color 4 pour calculer les équivalents dans tous les espaces colorimétriques supportés.
- •Il effectue un test de gamut pour déterminer si la couleur est compatible avec les écrans sRGB et Display-P3.
- •Si la couleur est hors-gamut, il génère une suggestion de rognure par réduction de chroma pour conserver la teinte et la luminosité d'origine.
Cas d’usage
Migration de chartes graphiques HEX/RGB vers des systèmes de design modernes basés sur OKLCH.
Optimisation de palettes de couleurs pour les écrans larges gamuts (Display-P3) des appareils récents.
Ajustement de contrastes et de luminosité perçue pour l'accessibilité web sans altérer la teinte.
Exemples
1. Conversion et diagnostic d'un bleu de marque
Designer UI- Contexte
- Un designer souhaite utiliser le bleu de sa marque (#3b82f6) dans un projet CSS moderne utilisant OKLCH tout en vérifiant sa compatibilité avec les écrans standards.
- Problème
- Convertir le code HEX en OKLCH et s'assurer qu'il ne dépasse pas le gamut sRGB.
- Comment l’utiliser
- Saisir #3b82f6 dans le champ d'entrée de couleur et laisser le format d'entrée sur Auto.
- Configuration d’exemple
-
colorInput: "#3b82f6", inputFormat: "auto", clipMode: "auto" - Résultat
- L'outil affiche la valeur OKLCH correspondante et confirme que la couleur est bien située à l'intérieur du gamut sRGB.
2. Rognage d'un vert ultra-saturé hors-gamut
Développeur Front-End- Contexte
- Un développeur reçoit une valeur OKLCH très saturée qui s'affiche mal sur les écrans sRGB classiques.
- Problème
- Trouver la version sRGB la plus proche sans modifier la teinte ni la luminosité perçue.
- Comment l’utiliser
- Saisir oklch(0.85 0.3 140) dans le champ d'entrée et sélectionner le gamut de référence sRGB (rognure).
- Configuration d’exemple
-
colorInput: "oklch(0.85 0.3 140)", inputFormat: "oklch", clipMode: "srgb" - Résultat
- L'outil indique que la couleur est hors-gamut sRGB et propose une suggestion de rognure avec une chroma réduite, prête à être copiée en CSS.
Tester avec des échantillons
designHubs associés
Outils de conversion d'espaces colorimetriques pour web et impression
Des outils reunis pour conversion d'espaces colorimetriques entre web et impression dans un seul hub.
Generateurs d'effets CSS, palettes et design tokens
Des outils reunis pour effets visuels CSS, creation de palettes et generation de design tokens dans un seul hub.
Outils d audit d accessibilite web et de couleurs accessibles
Regroupez dans un meme hub les controles WCAG, l ordre de lecture des lecteurs d ecran, les problemes de contraste, les risques lies a la vision des couleurs et le choix de palettes accessibles.
Outils de Design Couleur et Conversion d'Espaces Colorimétriques
Comparer des convertisseurs de couleur, des générateurs de palettes, des outils d'harmonie, des vérificateurs d'accessibilité et des utilitaires d'ajustement de couleur dans un seul hub pour designers et développeurs.
FAQ
Qu'est-ce que l'espace colorimétrique OKLCH ?
C'est un espace basé sur la perception humaine où L représente la luminosité, C la chroma (pureté) et H la teinte, évitant les dérives de teinte lors des ajustements.
Comment l'outil gère-t-il les couleurs hors-gamut ?
Il calcule la couleur la plus proche dans le gamut cible en réduisant uniquement la chroma (C) pour préserver la teinte et la luminosité.
Puis-je utiliser directement les codes générés dans mon code CSS ?
Oui, l'outil fournit des formats CSS prêts à l'emploi comme oklch() et color(display-p3).
Quelle est la différence entre sRGB et Display-P3 ?
Display-P3 offre un espace de couleur environ 25 % plus large que le sRGB, permettant d'afficher des couleurs beaucoup plus vives et saturées.
Pourquoi ma couleur HEX change-t-elle après une rognure de gamut ?
Si la couleur OKLCH d'origine dépasse les limites physiques du sRGB, elle doit être atténuée en chroma pour être représentée en HEX.