Convertisseur de format de couleur

Saisissez une couleur dans n'importe quelle syntaxe CSS et voyez-la en HEX, RGB, HSL, HWB, LAB, LCH, OKLCH et OKLAB en une fois, avec un échantillon en direct. Tout se convertit dans votre navigateur.

Le convertisseur de format de couleur analyse et convertit chaque couleur localement dans votre navigateur. Les valeurs que vous tapez ou collez ne quittent jamais votre appareil et rien n'est téléversé vers ArrayKit.

Ouvrir le convertisseur de couleurs CSS

À propos de Convertisseur de format de couleur

Le convertisseur de format de couleur prend une seule couleur écrite dans n'importe quelle syntaxe CSS — un HEX comme #7c3aed, une valeur rgb() ou hsl(), hwb(), lab(), lch(), oklch(), oklab(), ou une couleur nommée comme rebeccapurple — et l'affiche simultanément dans toutes les autres notations. Vous obtenez HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH et OKLAB, plus la couleur CSS nommée la plus proche et un échantillon en direct, chacun prêt à copier. Il est conçu pour les designers et développeurs front-end qui migrent une palette vers des espaces modernes comme OKLCH, font correspondre une couleur entre un outil de design et une feuille de style, ou vérifient l'apparence d'une valeur dans un espace perceptuellement uniforme. L'alpha est préservé de bout en bout. Chaque analyse et conversion s'exécute localement dans votre navigateur, donc les couleurs que vous saisissez ne quittent jamais votre appareil.

Fonctionnalités

Comment utiliser Convertisseur de format de couleur

  1. Tapez ou collez une couleur dans la zone de saisie dans n'importe quel format CSS
  2. Regardez l'échantillon en direct pour confirmer que vous avez saisi la bonne couleur
  3. Copiez la notation dont vous avez besoin — HEX, RGB, HSL, HWB, LAB, LCH, OKLCH ou OKLAB
  4. Récupérez la couleur nommée la plus proche quand vous voulez une étiquette lisible

Exemple

Entrée

#7c3aed

Sortie

rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)

Un HEX se déploie dans chaque notation de couleur CSS en une fois.

Erreurs courantes et dépannage

Foire aux questions

Quels formats de couleur ce convertisseur produit-il ?
Il affiche HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH et OKLAB simultanément, plus la couleur CSS nommée la plus proche, pour toute couleur que vous saisissez.
Qu'est-ce que l'OKLCH et pourquoi convertir vers lui ?
OKLCH est un espace de couleur perceptuellement uniforme où la luminosité, la chroma et la teinte se comportent de façon prévisible. Les designers y migrent leurs palettes car interpoler et éclaircir des couleurs en OKLCH paraît plus régulier qu'en HSL ou RGB.
Comment la couleur nommée la plus proche est-elle choisie ?
Votre couleur est comparée aux 148 couleurs CSS nommées par distance en RGB, et la correspondance la plus proche est renvoyée. Quand rien n'est vraiment proche, l'outil le dit plutôt que de suggérer un nom trompeur.
Le convertisseur conserve-t-il le canal alpha ?
Oui. Une couleur translucide est affichée en HEXA (#rrggbbaa), en rgba()/hsla(), et avec une queue alpha `/ 0.5` sur HWB, LAB, LCH, OKLCH et OKLAB. Les couleurs opaques omettent entièrement l'alpha.
Puis-je coller une valeur oklch() ou lab() en entrée ?
Oui. L'entrée accepte toute syntaxe de couleur CSS, y compris oklch(), oklab(), lab(), lch() et hwb(), et la convertit dans chaque autre format de la même façon qu'elle gère HEX ou rgb().
Les couleurs que je saisis sont-elles envoyées à un serveur ?
Non. L'analyse et chaque conversion s'exécutent localement dans votre navigateur, donc les couleurs que vous tapez ou collez ne quittent jamais votre appareil et ne sont pas téléversées vers ArrayKit.

Outils associés

Tous les outils ArrayKit