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.

Elysia Tools

Navigation mobile

Design

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

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.

Exécutions d’exemple préparées

Cliquez sur un exemple pour remplir automatiquement le formulaire. Les fichiers doivent toujours être téléversés.

1 exemples

Convertir un bleu de marque en OKLCH et vérifier le gamut

Affiche HEX/RGB/HSL/OKLCH/Display-P3 avec diagnostic de gamut.

<div>Color converter with OKLCH, P3, and gamut diagnostics.</div>

Entrées

Renseignez les champs nécessaires, puis lancez l’outil.

6 réglages

ContenuCollez ou saisissez les valeurs principales.1

Entrée de couleurtextOptionnel

RéglagesAjustez formats, plages, nombres et modes.5

Format d’entréeselectOptionnelLuminosité L (%)numberOptionnelChroma CnumberOptionnelTeinte H (°)numberOptionnelGamut de référenceselectOptionnel

Résultat

Prêt à exécuter

Après exécution, les fichiers, textes, données structurées ou sorties en flux apparaîtront ici.

Exemples

Exemples adaptés à cet outil

Associé

Convertisseur de Couleur OKLCH

Ce que cet outil vous aide à faire

Exécuter cet outil

Exécutions d’exemple préparées

Entrées

Résultat

Exemples adaptés à cet outil

Continuer avec des outils et dossiers associés

Exécutions d’exemple préparées

Entrées

Résultat

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

Points clés

Aperçu

Quand l’utiliser

Fonctionnement

Cas d’usage

Exemples

1. Conversion et diagnostic d'un bleu de marque

2. Rognage d'un vert ultra-saturé hors-gamut

FAQ

Exemples de codes couleur

Exemples de Traitement d'Images Web Python

Exemples de Traitement d'Images Android Java

Exemples de Traitement d'Images Android Kotlin

Convertisseur d'espaces colorimetriques

Convertisseur de couleur CMYK

Extracteur de palette couleur depuis image

Outil de Couleurs Complémentaires Divisées

Outils de conversion d'espaces colorimetriques pour web et impression

Generateurs d'effets CSS, palettes et design tokens

Outils d audit d accessibilite web et de couleurs accessibles

Outils de Design Couleur et Conversion d'Espaces Colorimétriques