Couleurs et dégradés

HEX, RGB, HSL, OKLCH, contraste et dégradés

Aucune base de données : AIMRAN ne conserve ni vos fichiers, ni vos textes, ni vos résultats

Qu’est-ce que Couleurs et dégradés ?

Choisissez ou collez une couleur et vous verrez son code dans tous les formats utilisés par les designers et développeurs web : HEX, RGB, HSL, HWB et OKLCH. L’outil génère aussi une gamme de nuances plus claires et plus foncées de la même couleur.

Il vérifie également si un texte de cette couleur est lisible sur un fond selon les normes d’accessibilité, et vous aide à créer des dégradés CSS prêts à copier.

Mode d’emploi

  1. Saisissez une couleur dans n’importe quel format (#0071e3, rgb(…), hsl(…), oklch(…) ou un nom CSS) ou utilisez le sélecteur.
  2. Copiez le format voulu dans « Formats ».
  3. Choisissez une couleur de fond dans « Contraste WCAG » pour voir si elle passe AA et AAA.
  4. Cliquez sur une nuance pour l’utiliser comme couleur principale.
  5. Dans « Dégradé CSS », choisissez linéaire, radial ou conique, réglez l’angle et les arrêts, puis copiez le CSS.

Avantages

Détails techniques

L’outil accepte le HEX à 3, 4, 6 ou 8 chiffres, rgb()/rgba(), hsl()/hsla(), hwb(), oklch() et les noms de couleurs CSS, avec canal alpha. Les conversions HSL et HWB sont celles de CSS Color Module Level 4 ; OKLCH est calculé à partir du sRGB linéaire via l’espace Oklab de Björn Ottosson. Le contraste suit les WCAG 2.x : luminance relative L = 0,2126 R + 0,7152 G + 0,0722 B sur les composantes linéarisées et rapport (L1 + 0,05) / (L2 + 0,05) ; il faut 4,5:1 pour AA en texte normal, 3:1 pour AA en grand texte, 7:1 pour AAA normal et 4,5:1 pour AAA grand. Les couleurs semi-transparentes sont composées sur le fond avant la mesure. Les nuances s’obtiennent en mélangeant avec du blanc et du noir par pas de 15 %. Les dégradés génèrent linear-gradient, radial-gradient ou conic-gradient avec arrêts et positions modifiables.

Questions fréquentes

Comment convertir une couleur HEX en RGB ?

Collez le code HEX et l’outil affiche aussitôt son équivalent en RGB, HSL, HWB et OKLCH. Par exemple, #0071e3 correspond à rgb(0, 113, 227).

Quel contraste minimum exige l’accessibilité web ?

Les WCAG demandent un rapport de 4,5:1 entre texte et fond pour le niveau AA en texte normal et de 3:1 en grand texte. Le niveau AAA exige 7:1 et 4,5:1.

Qu’est-ce que OKLCH ?

Un format de couleur CSS moderne fondé sur la luminosité, la chroma et la teinte perçues. Il facilite la création de palettes cohérentes, car modifier la luminosité ne change pas la teinte visible.

Comment faire un dégradé en CSS ?

Dans « Dégradé CSS », choisissez le type, l’angle et la couleur de chaque arrêt, puis copiez la propriété background générée.

Quelle différence entre HSL et HEX ?

Les deux décrivent la même couleur. Le HEX l’exprime en hexadécimal sous forme de rouge, vert et bleu ; le HSL utilise teinte, saturation et luminosité, plus intuitifs à ajuster.

Plus d’outils : Développeurs