Sélecteur de Couleur OKLCH et Convertisseur

oklch

hex

rgba

hsl

Luminosité

Chroma

Teinte

Alpha

Nouveau sur OKLCH ? En savoir plus dans notre
FAQ

Comprendre OKLCH : L'Avenir des Couleurs Web

Un guide complet sur l'espace colorimétrique perceptuellement uniforme qui révolutionne le design web

Qu'est-ce qu'OKLCH ?

OKLCH est une représentation cylindrique de l'espace colorimétrique OKLAB, conçu par Björn Ottosson en 2020. Il signifie OK Luminosité, Chroma et Teinte - offrant une façon plus intuitive de travailler avec les couleurs par rapport aux systèmes RGB ou HSL traditionnels.

Contrairement au RGB qui est orienté appareil, ou au HSL qui a des défauts perceptuels, OKLCH est basé sur les principes de la vision humaine. Il garantit que des changements numériques égaux produisent des changements perceptuels égaux.

Pourquoi choisir OKLCH plutôt que RGB et HSL ?

Limitations du RGB

• Valeurs dépendantes de l'appareil
• Mélange de couleurs non intuitif
• Difficile de créer des variations
• Mauvais pour les calculs d'accessibilité

Défauts du HSL

• Fausse uniformité perceptuelle
• La luminosité varie avec la teinte
• La saturation se comporte de manière imprévisible
• Limité à la gamme sRGB

Avantages d'OKLCH

• Véritable uniformité perceptuelle
• Luminosité cohérente entre les teintes
• Relations de couleur prévisibles
• Support de gamme étendue (P3, Rec2020)

Le Pouvoir de l'Uniformité Perceptuelle

L'uniformité perceptuelle signifie qu'un changement de la même quantité numérique produit un changement perceptuel similaire quel que soit la couleur de départ. C'est crucial pour :

Cohérence du Design

Créez des variations de couleur qui maintiennent la même luminosité perçue, essentielle pour les états de survol, les états désactivés et les variations de thème.

Accessibilité

Prédisez avec précision les rapports de contraste et assurez la conformité WCAG en travaillant avec de vraies valeurs de luminosité perceptuelle.

Au-delà du sRGB : Couleurs à Gamme Étendue

Les écrans modernes prennent en charge des gammes de couleurs bien au-delà du sRGB traditionnel. OKLCH gère parfaitement ces espaces colorimétriques étendus :

sRGB

Gamme standard prise en charge par tous les écrans

25% de couleurs en plus, courant dans les appareils Apple

Rec2020

Gamme future pour les écrans HDR

Avec OKLCH, vous pouvez spécifier des couleurs qui tirent pleinement parti des écrans modernes tout en fournissant des alternatives automatiques pour les écrans standard.

OKLCH en Pratique

Création de Palettes de Couleurs

/* Couleur de base */
--primary: oklch(0.6 0.2 250);

/* Variante plus claire - augmentez simplement L */
--primary-light: oklch(0.8 0.2 250);

/* Variante plus sombre - diminuez simplement L */
--primary-dark: oklch(0.4 0.2 250);

/* Complémentaire - ajoutez 180 à la teinte */
--secondary: oklch(0.6 0.2 70);

Design Accessibilité-First

/* Assurer le contraste WCAG AA */
--text-on-light: oklch(0.3 0 0);     /* L=0.3 pour texte sombre */
--text-on-dark: oklch(0.9 0 0);      /* L=0.9 pour texte clair */

/* Luminosité perçue cohérente */
--success: oklch(0.7 0.15 140);      /* Vert */
--warning: oklch(0.7 0.15 90);       /* Jaune */
--error: oklch(0.7 0.15 30);         /* Rouge */

Support des Navigateurs et Migration

Support Actuel

OKLCH est supporté dans tous les navigateurs modernes :

• Chrome 111+ (Mars 2023)
• Firefox 113+ (Mai 2023)
• Safari 15.4+ (Mars 2022)
• Edge 111+ (Mars 2023)

Stratégie de Migration

/* Fournir des alternatives pour les anciens navigateurs */
.element {
  /* Alternative pour les anciens navigateurs */
  background-color: rgb(0, 128, 255);
  
  /* Les navigateurs modernes utiliseront ceci */
  background-color: oklch(0.65 0.2 240);
}

/* Ou utiliser @supports */
@supports (color: oklch(0 0 0)) {
  .element {
    color: oklch(0.7 0.15 180);
  }
}

L'Avenir est Perceptuellement Uniforme

OKLCH représente un changement de paradigme dans notre façon de penser la couleur sur le web. En s'alignant sur la perception humaine plutôt que sur les capacités de l'appareil, il permet :

✓ Sélection et manipulation de couleur plus intuitives
✓ Meilleure accessibilité grâce à une luminosité prévisible
✓ Designs à l'épreuve du futur qui évoluent avec la technologie d'affichage
✓ Relations de couleur cohérentes entre différentes teintes

Commencez à utiliser OKLCH dès aujourd'hui avec notre sélecteur de couleur ci-dessus et découvrez la différence que fait l'uniformité perceptuelle dans vos designs.

FAQ

OKLCH : Questions Fréquemment Posées

En savoir plus sur OKLCH et comment utiliser efficacement ce sélecteur de couleur.

Qu'est-ce qu'OKLCH et pourquoi devrais-je l'utiliser ?

OKLCH est un espace colorimétrique perceptuellement uniforme qui facilite la création de palettes de couleurs harmonieuses. Contrairement à RGB ou HSL, l'ajustement de la luminosité dans OKLCH maintient la luminosité perçue constante à travers toutes les teintes.

Que sont les espaces colorimétriques P3 et Rec2020 ?

P3 et Rec2020 sont des espaces colorimétriques à large gamme qui peuvent afficher des couleurs plus vibrantes que le sRGB standard. P3 est couramment pris en charge sur les appareils Apple modernes et les écrans haut de gamme.

Pourquoi certaines couleurs s'affichent comme 'non disponibles' ?

Lorsque vous sélectionnez des couleurs hautement saturées, elles peuvent être en dehors de la gamme de couleurs que votre écran peut afficher. Le sélecteur affiche une couleur de remplacement qui approxime la couleur visée.

Comment utiliser les couleurs OKLCH en CSS ?

Vous pouvez utiliser les couleurs OKLCH directement dans les navigateurs modernes avec la syntaxe CSS : color: oklch(0.7 0.1 180). Pour le support des anciens navigateurs, fournissez toujours une couleur de remplacement au format RGB ou HEX.

Quelle est la différence entre chroma et saturation ?

Le chroma dans OKLCH représente la colorimétrie ou l'intensité d'une couleur de manière perceptuellement uniforme. Contrairement à la saturation HSL, les valeurs de chroma restent cohérentes à travers différents niveaux de luminosité.

Puis-je sauvegarder ou marquer des couleurs spécifiques ?

Oui ! Chaque sélection de couleur met automatiquement à jour le hash de l'URL. Vous pouvez marquer n'importe quelle couleur ou partager l'URL avec d'autres pour charger la même configuration de couleur.

Que fait le bouton 'Alternative' ?

Lorsque vous sélectionnez une couleur en dehors de la capacité de votre écran, le sélecteur affiche à la fois la couleur visée et une version alternative qui peut être affichée.

Pourquoi y a-t-il parfois deux blocs d'aperçu de couleur ?

Lorsque vous sélectionnez une couleur en dehors de l'espace colorimétrique sRGB, le sélecteur affiche deux aperçus : le gauche montre la couleur réelle (si votre écran la prend en charge), et le droit montre l'alternative sRGB.

Comment travailler avec des couleurs transparentes ?

Utilisez le curseur Alpha pour contrôler la transparence. Le canal alpha est affiché sur un motif de fond en damier.

Puis-je taper des valeurs de couleur directement au lieu d'utiliser les curseurs ?

Absolument ! Vous pouvez taper ou coller des couleurs dans n'importe quel format (OKLCH, HEX, RGB ou HSL) dans les champs de saisie de format.

Comment savoir si mon écran prend en charge P3 ou Rec2020 ?

Le sélecteur détecte automatiquement les capacités de votre écran. Si vous voyez 'P3 n'est pas disponible sur ce moniteur' ou des messages similaires, votre écran ne prend pas en charge ces gammes de couleurs plus larges.

Quel est le meilleur workflow pour créer des palettes de couleurs accessibles ?

Commencez par définir votre teinte souhaitée, puis ajustez la luminosité pour répondre aux exigences de contraste WCAG.