Qu'est-ce que l'espace colorimétrique OKLCH ?

OKLCH est un espace colorimétrique perceptuellement uniforme qui correspond mieux à la vision humaine que HSL ou RGB. Il produit des dégradés de luminosité plus cohérents et des palettes accessibles.

Puis-je extraire les couleurs d'une image ?

Oui. Glissez-déposez n'importe quelle image dans la zone d'extraction de palette pour obtenir les couleurs dominantes. Vous pouvez aussi simuler les déficiences de vision des couleurs (protanopie, deutéranopie, tritanopie).

Convertisseur et sélecteur de couleurs - HEX, RGB, HSL, OKLCH

Aucune donnée envoyée aux serveurs — Tout le traitement se fait dans votre navigateur

Vision:

HEX

RGB

HSL

HSV

CMYK

LAB

OKLCH

HSV est indiqué à titre de référence. CSS n'a pas de fonction hsv(), utilisez HSL.

Variable CSS

--color-primary: #06d6a0;

Utilitaire Tailwind

bg-[#06d6a0]

Tailwind v4 @theme

@theme {
  --color-primary: oklch(78% 0.16 167);
}

Le Convertisseur de couleur est un outil gratuit en ligne pour convertir entre HEX, RGB, HSL, OKLCH et d'autres espaces colorimétriques. Inclut un sélecteur visuel, l'extraction de palette d'image, le vérificateur de contraste WCAG et l'aperçu du daltonisme. Fonctionne entièrement dans votre navigateur.

Qu'est-ce que l'outil Couleur ?

Un utilitaire de couleur complet qui convertit entre 7 espaces colorimétriques (HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH), génère des harmonies, vérifie les rapports de contraste pour l'accessibilité, simule les déficiences de vision des couleurs et extrait des palettes d'images.

Cas d'utilisation courants

Sélectionner et convertir des couleurs pour le développement web — obtenez la valeur HEX, RGB, HSL ou OKLCH exacte pour CSS ou Tailwind.

Vérifier le contraste du texte par rapport à une couleur de fond pour respecter les guidelines d'accessibilité WCAG (AA/AAA) ou le standard APCA plus récent.

Extraire les couleurs dominantes d'une image pour construire une palette de design cohésive, puis générer des harmonies complémentaires, analogues ou triadiques.

Espaces colorimétriques

Cet outil de couleur convertit entre 7 espaces colorimétriques, génère des harmonies, vérifie les rapports de contraste (WCAG et APCA), simule le daltonisme et extrait des palettes d'images. Voir le [convertisseur de base numérique](/numbase) pour les calculs hex, ou le [compresseur d'image](/image) pour le traitement d'images.

Espaces colorimétriques

HEX — notation RGB compacte à 6/8 chiffres. Le format par défaut en CSS.

RGB — primaires additives de 0 à 255. Correspond directement aux pixels de l'écran.

HSL — teinte/saturation/luminosité. Plus facile à appréhender que RGB pour les humains.

HSV — teinte/saturation/valeur. Courant dans les outils de design mais pas une fonction CSS.

CMYK — primaires soustractives utilisées en impression. Approximatif lors de la conversion depuis RGB.

LAB — perceptuellement uniforme ; une distance numérique égale correspond à une distance visuelle égale.

OKLCH — espace perceptuel moderne ; préféré par Tailwind v4 et CSS Color Module Level 4.

Contraste (WCAG vs APCA)

WCAG 2.1 utilise un ratio de luminance (de 1:1 à 21:1) avec des seuils pour AA/AAA. Il est largement supporté mais ne prend pas pleinement en compte la perception des petits textes ou du mode sombre.

APCA est un candidat pour WCAG 3 avec un score Lc sensible à la polarité. Il corrèle mieux avec la lisibilité pour les textes fins ou de petite taille.

Conseils

Utilisez la pipette pour sélectionner la couleur d'un pixel de votre écran (navigateurs Chromium).
Déposez une image dans l'onglet Palette pour extraire ses 6 couleurs dominantes par quantification médiane.
Tailwind v4 émet les couleurs en OKLCH pour une fluidité perceptuelle — copiez le bloc @theme pour vous aligner sur ce flux de travail.

Questions fréquentes

Outils associés

Redimensionneur d'Images Compresseur d'Images Convertisseur d'Images Convertisseur de base Convertisseur d'unités CSS Filigrane

Cas d'utilisation courants

Sélectionner et convertir des couleurs pour le développement web — obtenez la valeur HEX, RGB, HSL ou OKLCH exacte pour CSS ou Tailwind.

Vérifier le contraste du texte par rapport à une couleur de fond pour respecter les guidelines d'accessibilité WCAG (AA/AAA) ou le standard APCA plus récent.

Extraire les couleurs dominantes d'une image pour construire une palette de design cohésive, puis générer des harmonies complémentaires, analogues ou triadiques.