Elysia Tools

Parcourez outils, exemples, explications visuelles et guides thématiques dans un espace clair.

Catégories populaires

Dossiers

Langue
ZHESPTRUFRDEEN

Elysia Tools

Navigation mobile

Design

Convertisseur de Couleur OKLCH

· Dernière mise à jour：2026-06-18

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

Détails

Ce que cet outil vous aide à faire

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().

Exécution

Exécuter cet outil

Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.

Exemples

Exemples adaptés à cet outil

Associé

Continuer avec des outils et dossiers associés

Rédigé par l'équipe Elysia Tools
Mathématiques502
Couleur214
HTML/CSS86
Hue55
Espace colorimétrique53
RGB50
CSS48
HEX40
Lightness34
HSL26
sRGB22
Chroma21

Guide d'utilisation de l'outil

Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.

Points clés

Catégorie
Design
Types d’entrée
text, select, number
Type de sortie
html
Exemples associés
4
API disponible
Oui

Aperçu

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.

Fonctionnement

  1. 1Saisissez 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).
  2. 2L'outil applique les matrices de conversion CSS Color 4 pour calculer les équivalents dans tous les espaces colorimétriques supportés.
  3. 3Il effectue un test de gamut pour déterminer si la couleur est compatible avec les écrans sRGB et Display-P3.
  4. 4Si 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.

Utilisation

Saisir #3b82f6 dans le champ d'entrée de couleur et laisser le format d'entrée sur Auto.

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.

Utilisation

Saisir oklch(0.85 0.3 140) dans le champ d'entrée et sélectionner le gamut de référence sRGB (rognure).

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.

Accueil
Outils3197
Exemples593
Visualisations461
Visionneuses de fichiers103
Dossiers229
Étiquettes333
Images, audio et vidéo655

Outils de traitement, conversion et optimisation d’images, d’audio et de vidéo

Maths, dates et finance644

Calculateurs, outils numériques, logique de dates, statistiques et finance

Design et couleur296

Outils de couleur, mise en page, graphisme, style visuel et assistance design

Texte et rédaction209

Outils de rédaction, nettoyage, formatage, extraction et analyse de texte

Développement et Web193

Utilitaires développeur, réseau, débogage Web et assistants d’automatisation

Conversion et encodage175

Outils de conversion de formats, fichiers, archives, unités et encodages

Structurer une capture d'interface, la relire et la transmettre au développement
Esquisse au piano, contrôle MIDI et livraison d'une maquette d'écoute
Revue de textures rétro et remise des ressources
Revue et remise d’un guide opératoire illustré par captures
Revue visuelle d’une refonte responsive et remise des preuves

© 2026 Elysia Tools. Tous droits réservés.

DocumentationTarifsÀ proposConditions d'utilisationPolitique de confidentialitéCookiesContact
Validation

Exemples de codes couleur

Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation

Python

Exemples de Traitement d'Images Web Python

Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format

Java

Exemples de Traitement d'Images Android Java

Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format

Kotlin

Exemples de Traitement d'Images Android Kotlin

Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format

Design

Convertisseur d'espaces colorimetriques

Convertit une couleur entre HEX, RGB, HSL, CIELAB et Display-P3 avec sortie CSS et verification de gamme.

Design

Convertisseur de couleur CMYK

Convertit les couleurs entre HEX, RGB, HSL et CMYK.

Design

Extracteur de palette couleur depuis image

Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste

Design

Outil de Couleurs Complémentaires Divisées

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

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.