Convertisseur de couleurs OKLCH

• Conversion OKLCH instantanée : le convertisseur OKLCH met à jour tous les formats de sortie à chaque mouvement du curseur - aucun bouton sur lequel appuyer. Ajustez la luminosité, la chrominance et la teinte et obtenez instantanément les valeurs HEX, RVB, HSL et OKLab. L'échantillon de couleur en temps réel montre exactement comment la couleur OKLCH apparaîtra à l'écran.
• Espace colorimétrique perceptuellement uniforme : OKLCH est un espace colorimétrique perceptuellement uniforme - des pas numériques égaux correspondent à des différences de couleur perçues égales, contrairement au HSL ou au RVB. Le convertisseur OKLCH facilite le travail avec ce format CSS Color Level 4 moderne pour de meilleurs dégradés, échelles de couleurs et choix de couleurs accessibles.
• 100 % privé - Pas de téléchargement : toutes les conversions s'effectuent localement dans votre navigateur en utilisant du JavaScript pur. Vos valeurs de couleurs ne quittent jamais votre appareil et ne sont jamais envoyées à un serveur - sans danger pour les projets clients et les systèmes de conception propriétaires.
• Gratuit et sans limites : convertissez des couleurs OKLCH illimitées sans inscription, sans abonnement et sans limite d'utilisation. Le convertisseur OKLCH est entièrement gratuit pour toujours, aucune publicité ne bloque l'interface. Comprend la détection de gamme et les suggestions de gamme les plus proches.

• Développement CSS moderne : les développeurs frontend utilisent le convertisseur OKLCH pour créer et vérifier les couleurs dans le CSS moderne. Avec oklch() désormais pris en charge dans tous les principaux navigateurs, le convertisseur OKLCH vous aide à écrire un code couleur plus propre et plus maintenable en utilisant l'espace colorimétrique perceptuellement uniforme.
• Création de dégradés fluides : OKLCH produit des dégradés nettement plus fluides et visuellement plus précis que sRGB ou HSL. Utilisez le convertisseur OKLCH pour trouver les bonnes valeurs de luminosité, de saturation et de teinte pour les arrêts de dégradé qui effectuent une transition naturelle sans points médians boueux.
• Échelles de couleurs accessibles : les spécialistes de l'accessibilité utilisent le convertisseur OKLCH car son uniformité de perception le rend idéal pour générer des échelles de couleurs accessibles. Des niveaux égaux de luminosité OKLCH correspondent à des niveaux de contraste perçus égaux, ce qui rend les rampes de couleurs conformes aux WCAG beaucoup plus faciles à créer.
• Jetons de couleur du système de conception : les ingénieurs du système de conception utilisent le convertisseur OKLCH pour définir les jetons de couleur d'une manière perceptuellement significative. L'espace colorimétrique OKLCH facilite la création d'échelles de couleurs systématiques où chaque étape a un poids visuel cohérent dans toutes les teintes.
• Science et recherche des couleurs : les chercheurs et les scientifiques des couleurs utilisent le convertisseur OKLCH pour explorer l'espace colorimétrique OKLab/OKLCH. L'outil fournit des valeurs OKLab brutes ainsi que les formats de sortie standard, ce qui le rend utile pour comprendre les mathématiques de l'espace colorimétrique et les modèles de perception.
• Migration CSS héritée vers moderne : lors de la migration des anciens systèmes de couleurs hexadécimaux ou rgb() vers oklch() moderne, utilisez le convertisseur OKLCH pour comprendre quelles sont les valeurs OKLCH équivalentes. Cela vous aide à développer votre intuition pour le nouvel espace colorimétrique tout en adoptant progressivement la syntaxe CSS Color Level 4.

OKLCH (Lightness-Chroma-Hue) est un espace colorimétrique moderne introduit par Björn Ottosson en 2020. Il fait partie du CSS Color Level 4 et est conçu pour être perceptuellement uniforme, ce qui signifie que des changements numériques égaux dans les valeurs OKLCH produisent des différences de couleur perçues égales. Il s’agit d’une amélioration significative par rapport aux anciens espaces colorimétriques comme HSL et sRGB, qui ne sont pas perceptuellement uniformes et peuvent produire des résultats visuels incohérents lors de l’interpolation des couleurs.

Le convertisseur OKLCH prend en charge le pipeline OKLCH complet : il convertit entre les formats OKLCH, OKLab (l'espace de coordonnées rectangulaires sous-jacent), sRGB linéaire et sRGB standard, notamment HEX, RVB et HSL. Toutes les conversions utilisent les mathématiques matricielles exactes d'Ottosson sans approximations.

1. Ajustez les curseurs OKLCH : définissez la luminosité (L : 0-1), la chrominance (C : 0-0,4+) et la teinte (H : 0-360°) à l'aide des curseurs interactifs ou des entrées numériques. Vous pouvez également cliquer sur n’importe quel échantillon de couleur pour charger instantanément une valeur OKLCH prédéfinie. La transparence alpha est prise en charge pour les couleurs semi-transparentes.
2. La conversion s'effectue en temps réel : lorsque vous ajustez un curseur, la valeur OKLCH est convertie via OKLab en sRGB linéaire, puis aux formats HEX, RVB et HSL. Toutes les valeurs sont mises à jour instantanément sans aucun bouton sur lequel appuyer. L'échantillon de couleur montre un aperçu visuel de la couleur convertie.
3. Vérification de la gamme effectuée automatiquement : le convertisseur OKLCH détecte automatiquement si la couleur sort de la gamme sRGB. Si c’est le cas, un avertissement s’affiche avec la couleur la plus proche obtenue en réduisant la saturation tout en gardant la luminosité et la teinte constantes.
4. Copiez n'importe quelle valeur : cliquez sur le bouton Copier à côté de n'importe quelle ligne de sortie ou carte de format pour copier cette valeur spécifique, ou utilisez « Copier toutes les valeurs » pour copier les données de couleur complètes, y compris les composants bruts OKLab.

• Luminosité (L) : varie de 0 (noir) à 1 (blanc). Contrairement à la légèreté HSL, la légèreté OKLCH correspond étroitement à la perception humaine. Une luminosité de 0,5 semble visuellement à mi-chemin entre le noir et le blanc, quelle que soit la teinte ou la saturation.
• Chroma (C) : contrôle l’intensité ou la saturation des couleurs. La plupart des couleurs sRVB ont des valeurs de chrominance comprises entre 0 et 0,25, bien que certains violets et cyans profonds puissent atteindre jusqu'à 0,3. Les valeurs supérieures à 0,3 sont de plus en plus susceptibles de se trouver en dehors de la gamme sRGB. Le maximum théorique pour la chrominance OKLCH est illimité.
• Teinte (H) : L'angle de couleur de 0 à 360 degrés, correspondant aux mêmes angles de teinte qu'OKLab. 0° = rouge/rose, 90° = jaune, 180° = vert, 270° = bleu. Les teintes OKLCH sont perceptuellement uniformes : des pas angulaires égaux produisent des différences de teinte perçues égales.
• Alpha (A) : contrôle la transparence de 0 (entièrement transparent) à 1 (entièrement opaque). La valeur alpha est transmise via le pipeline de conversion à tous les formats de sortie, vous pouvez donc utiliser la couleur résultante dans n'importe quel contexte CSS nécessitant de la transparence.

OKLCH vs HSL : HSL n'est pas perceptuellement uniforme - deux couleurs avec la même luminosité HSL peuvent sembler radicalement différentes en termes de luminosité (par exemple, le jaune à L=50 % semble beaucoup plus brillant que le bleu à L=50 %). OKLCH résout ce problème fondamental. HSL produit également des points médians boueux lors de l'interpolation entre deux couleurs, tandis que les dégradés OKLCH maintiennent une saturation et une qualité visuelle constantes.

OKLCH vs LCH : LCH (basé sur CIE L*a*b*) est disponible en CSS depuis plus longtemps mais présente un défaut important : il peut produire des couleurs invalides lors de la mesure de la linéarité des teintes. OKLCH a été spécialement conçu pour être plus robuste et pour mieux représenter la façon dont le système visuel humain perçoit la couleur. Les deux sont pris en charge dans les CSS modernes, mais OKLCH est le choix recommandé pour les nouveaux projets.

OKLCH vs sRGB : sRGB est l'espace colorimétrique standard pour le contenu Web, mais il dépend de l'appareil et n'est pas uniforme sur le plan perceptuel. OKLCH est un espace colorimétrique indépendant du périphérique qui peut représenter des couleurs en dehors de la gamme sRGB (écrans à large gamme). Le convertisseur OKLCH vous aide à comprendre quand vos couleurs dépassent sRGB et vous montre l'alternative la plus proche dans la gamme.