Souus Tools
Sponsoriser

Développement

Explorateur d'espace colorimétrique — OKLCH, OKLab, P3 et plus

Convertisseur d'espace colorimétrique étendu en ligne gratuit. Convertissez entre HEX, RVB, HSL, HWB, OKLab, OKLCH, Linear sRGB et Display P3 avec sortie CSS. Aucune inscription requise.

Gratuit Sans inscription Fonctionne dans votre navigateur

Espace de travail de l’outil

HEX
#3B82F6
#3b82f6
RGB
59, 130, 246
rgb(59 130 246)
HSL
217.2deg, 91.2%, 59.8%
hsl(217.2 91.2% 59.8%)
HWB
217.2deg, 23.1%, 3.5%
hwb(217.2 23.1% 3.5%)
OKLab
L=0.6231, a=-0.0332, b=-0.1851
oklab(62.31% -0.0332 -0.1851)
OKLCH
L=0.6231, C=0.1880, H=259.8deg
oklch(62.31% 0.1880 259.8)
Linear sRGB
0.0437, 0.2232, 0.9216
color(srgb-linear 0.0437 0.2232 0.9216)
Display P3
0.3047, 0.5035, 0.9338
color(display-p3 0.3047 0.5035 0.9338)

Que sont les espaces colorimétriques CSS modernes ?

CSS Color Level 4 introduit plusieurs nouveaux espaces colorimétriques au-delà du sRGB traditionnel. OKLCH et OKLab permettent une manipulation des couleurs perceptuellement uniforme, ce qui signifie que des changements numériques égaux produisent des changements de couleur perçus égaux. Display P3 permet une gamme de couleurs plus large sur les écrans modernes. HWB (Hue, Whiteness, Blackness) offre une alternative intuitive au HSL. Cet outil convertit une seule entrée de couleur en toutes ces représentations avec une syntaxe CSS prête à l'emploi.

Comment utiliser cet explorateur d'espace colorimétrique

  1. 1Entrez une couleur HEX à l'aide du sélecteur de couleurs ou de la saisie de texte.
  2. 2Visualisez la couleur convertie en 8 espaces colorimétriques différents.
  3. 3Cliquez sur Copy CSS à côté de n'importe quel format pour copier la valeur prête pour CSS.
  4. 4Utilisez les valeurs OKLCH pour des palettes de couleurs perceptuellement uniformes dans le CSS moderne.

Cas d'utilisation courants

Conception CSS moderne

Utilisez OKLCH pour créer des palettes de couleurs perceptuellement uniformes en CSS.

Travail couleur à large gamme

Convertissez les couleurs sRGB en Display P3 pour des couleurs plus riches sur les écrans pris en charge.

Éducation aux sciences des couleurs

Comprenez comment la même couleur est représentée dans différents modèles de couleurs.

Questions fréquentes

Quel est l'avantage d'OKLCH par rapport au HSL ?

OKLCH est perceptuellement uniforme, ce qui signifie que des changements égaux de luminosité, de saturation ou de teinte produisent des changements visuellement égaux. HSL n'est pas perceptuellement uniforme, donc deux couleurs avec la même saturation HSL peuvent apparaître très différentes en termes de luminosité perçue.

Les navigateurs peuvent-ils réellement afficher les couleurs du Display P3 ?

Oui, les navigateurs modernes sur les écrans à large gamme (la plupart des Mac, iPhones et de nombreux moniteurs plus récents) peuvent restituer les couleurs Display P3 à l'aide de la fonction CSS color().

Qu'est-ce que OKLab et OKLCH ?

OKLab utilise L (légèreté), a (axe vert-rouge), b (axe bleu-jaune) — un modèle cartésien. OKLCH utilise L (luminosité), C (chrominance/saturation), H (angle de teinte) – un modèle cylindrique. OKLCH est plus intuitif pour choisir les couleurs.