Convertisseur de Couleurs en ligne | HEX, RGB, HSL, OKLCH | Awesome Toolkit

Convertisseur de Couleurs

Convertissez des couleurs entre HEX, RGB, HSL et OKLCH instantanément. Pipette de couleur visuelle intégrée. Copiez n'importe quel format.

Par Marshkalk

Comment utiliser le convertisseur de couleurs

  1. Cliquez sur l'échantillon de couleur ou sur la pipette pour choisir une couleur visuellement.
  2. Ou tapez directement une valeur dans un champ de format, HEX, RGB, HSL ou OKLCH, et les autres se mettent à jour instantanément.
  3. Cliquez sur Copier à côté de n'importe quel format pour le copier dans le presse-papiers.

HEX, RGB, HSL, OKLCH, quelles différences ?

HEX (#RRVVBB) est le format de couleur le plus répandu sur le web. Chaque paire de chiffres est une valeur hexadécimale de 00 (0) à FF (255), représentant les canaux rouge, vert et bleu. Exemple : #3498db est un bleu moyen. La forme abrégée #RVB existe pour les couleurs où chaque paire se répète (ex. #fff = #ffffff).

RGB (rouge, vert, bleu) exprime chaque canal de 0 à 255. Il correspond directement au HEX : R=52, V=152, B=219 équivaut à #3498db. CSS accepte à la fois rgb(52, 152, 219) et la syntaxe moderne rgb(52 152 219).

HSL (teinte, saturation, luminosité) est le format le plus intuitif pour les designers. La teinte est un angle sur la roue chromatique (0-360°). La saturation contrôle l'intensité (0% = gris). La luminosité ajuste la brillance (0% = noir, 100% = blanc). Incrémenter ou décrémenter la luminosité crée des teintes et des nuances de la même couleur.

OKLCH (luminosité, chroma, teinte) est l'espace colorimétrique perceptif moderne défini dans CSS Color Level 4. Sa valeur de luminosité est perceptivement uniforme, des pas égaux produisent des changements visuellement identiques. OKLCH couvre aussi une gamme de couleurs plus large, incluant les couleurs P3 disponibles sur les écrans modernes.

Quel format utiliser en CSS ?

  • Utilisez HEX pour les références rapides et les tokens de design, compact et universellement compris
  • Utilisez HSL pour les systèmes de thèmes où vous générez des variantes en ajustant une seule valeur
  • Utilisez OKLCH pour les design systems CSS modernes ; il permet des rampes de couleurs cohérentes et supporte les gamuts larges
  • Utilisez RGB pour le canvas, WebGL ou les bibliothèques qui attendent des canaux numériques