Qu'est-ce que l'outil Couleur ?

L'outil Couleur est un utilitaire complet qui prend en charge les modèles de couleur HEX, RGB, HSL et OKLCH avec un sélecteur visuel, des conversions et une vérification du contraste.

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.

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.

À propos de la conversion de couleur

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.

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

Outils associés

Compresseur d'images Convertisseur de base