# Convertisseur de Couleur OKLCH Conversion bidirectionnelle entre HEX, RGB, HSL, OKLCH et Display-P3 selon CSS Color 4, avec lecture luminosité/chroma/teinte, vérification de gamut sRGB et Display-P3, et suggestion de rognure hors-gamut > Page canonique: https://elysiatools.com/fr/tools/oklch-color-converter - **Catégorie:** Design - **Mots-clés:** oklch, espace colorimétrique, p3, gamut, convertir ## Présentation Collez n’importe quelle couleur (HEX, rgb(), hsl() ou oklch()) ou réglez directement OKLCH L/C/H. L’outil convertit entre tous les espaces modernes à l’aide des matrices CSS Color 4 et indique : - Valeurs HEX, sRGB 8-bit, sRGB linéaire, HSL, XYZ D65, OKLab et OKLCH - Représentation Display-P3 - Si la couleur est à l’intérieur de sRGB, à l’intérieur de Display-P3 mais hors sRGB, ou hors des deux - Une suggestion de rognure par réduction de chroma (le OKLCH dans-gamut le plus proche) quand la couleur est hors sRGB Pourquoi OKLCH : son canal L correspond à la luminosité perçue et ses C/h sont chroma et teinte, donc ajuster luminosité ou saturation ne décale pas la teinte, contrairement à HSL. C’est le meilleur espace pour construire des palettes perceptuellement uniformes. Les sorties sont du CSS prêt à copier, y compris `color(display-p3 ...)` et `oklch()`. ## Entrées - **Entrée de couleur** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256) - **Format d’entrée** (select) - **Luminosité L (%)** (number): 0–100 (OKLCH 0–1) - **Chroma C** (number): e.g. 0.19 (typically 0–0.4) - **Teinte H (°)** (number): 0–360 - **Gamut de référence** (select) ## 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. ## Fonctionnement - 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. ## Questions fréquentes ### 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. ## Outils associés - [Convertisseur d'espaces colorimetriques](https://elysiatools.com/fr/tools/color-space-converter): Convertit une couleur entre HEX, RGB, HSL, CIELAB et Display-P3 avec sortie CSS et verification de gamme. - [Convertisseur de couleur CMYK](https://elysiatools.com/fr/tools/cmyk-converter): Convertit les couleurs entre HEX, RGB, HSL et CMYK. - [Extracteur de palette couleur depuis image](https://elysiatools.com/fr/tools/image-color-palette-extractor): Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste - [Outil de Couleurs Complémentaires Divisées](https://elysiatools.com/fr/tools/color-split-complement): Générer des schémas de couleurs complémentaires divisées avec un contraste harmonieux en utilisant une couleur de base et deux couleurs adjacentes à son complément - [Résolveur de noms de couleurs CSS](https://elysiatools.com/fr/tools/css-color-name-resolver): Résout n'importe quelle couleur hex vers sa couleur CSS nommée la plus proche avec la vraie distance CIEDE2000, puis explore toute sa famille. - [Visualiseur d’Easing et d’Animation CSS](https://elysiatools.com/fr/tools/css-easing-visualizer): Visualise une courbe d’easing cubic-bezier CSS, prévisualise sur position/opacité/échelle, choisit des préréglages et exporte le CSS - [Sync de palette Tailwind](https://elysiatools.com/fr/tools/tailwind-color-palette-sync): Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel. - [Convertisseur Absorbance↔Transmittance (A = −log₁₀T)](https://elysiatools.com/fr/tools/absorbance-transmittance-converter): Convertit dans les deux sens absorbance et transmittance : A = −log₁₀(T), T = 10⁻ᴬ, %T = 100·T et A = 2 − log₁₀(%T). Accepte l'absorbance A, la transmittance en pourcentage %T ou en fraction T et renvoie les trois représentations à la fois. Repères : A=0 → %T=100 ; A=1 → %T=10 ; A=0,301 → %T=50. Une absorbance négative impliquerait %T > 100 %, impossible en spectrophotométrie standard, et est rejetée. ## Exemples - [Exemples de codes couleur](https://elysiatools.com/fr/samples/color-code): Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format