Aller au contenu principal
Palette

Convertisseur de couleurs HEX, RGB et HSL

Convertissez des couleurs sRGB opaques entre HEX 3/6 chiffres, RGB entier séparé par virgules et HSL en pourcentage, puis créez des gammes classiques. Utile pour designers, développeurs front-end et créateurs de thèmes qui passent entre formats CSS, Tailwind et outils de design. Conversion instantanée et précise.

#6366f1
SÉLECTIONNER LA COULEUR
Aperçu couleur en direct

Sorties CSS

CODE HEX
#6366f1
VALEUR RGB
rgb(99, 102, 241)
FORMAT HSL
hsl(239, 84%, 67%)
STYLE UTILITAIRE TAILWIND
bg-[#6366f1]

Teintes calculées et poids de base (Wind)

Cliquez sur un échantillon pour l'appliquer comme couleur de base.

50
#eff0fe
100
#d8d9fc
200
#b1b3f8
300
#9294f5
400
#7a7df3
500
#6366f1
600
#595cd9
700
#4a4db5
800
#3b3d91
900
#282960
950
#191a3c

En bref

Traduisez les syntaxes réellement acceptées, copiez une valeur CSS ou une classe Tailwind arbitraire et considérez les nuances 50–950 comme personnalisées, non officielles.

Fonctionnalités prises en charge

  • Entrées hexadécimales opaques #RGB et #RRGGBB.
  • rgb(r, g, b) historique avec entiers de 0 à 255.
  • hsl(h, s%, l%) historique avec teinte 0–360 et pourcentages 0–100.
  • HEX, RGB, HSL et classe arbitraire bg-[#rrggbb] copiables.
  • Onze nuances personnalisées 50 à 950 en modes classique, pastel ou vif.

Comment utiliser Convertisseur de couleurs HEX, RGB et HSL

Réalisez un flux Convertisseur de couleurs HEX, RGB et HSL vérifiable dans ce navigateur.

  1. 1

    Étape 1

    Fournir l’entrée exacte

    Saisissez HEX, RGB ou HSL pris en charge, ou utilisez le sélecteur natif.

  2. 2

    Étape 2

    Régler les contrôles disponibles

    Choisissez l’onglet correspondant ; alpha, syntaxe moderne, noms, HWB, Lab et OKLCH ne sont pas analysés.

  3. 3

    Étape 3

    Exécuter l’opération

    Lancez Convertir ou une couleur aléatoire puis sélectionnez le mode de nuances.

  4. 4

    Étape 4

    Vérifier le résultat

    Comparez HEX/RGB/HSL et l’aperçu ; mesurez le contraste séparément.

  5. 5

    Étape 5

    Continuer ou exporter

    Copiez la valeur ou nuance exacte et documentez que les numéros ne sont pas la palette Tailwind officielle.

Erreurs fréquentes

Saisir rgb(255 128 0 / 50%)

Conséquence: La syntaxe moderne avec alpha est refusée.

Correction: Utilisez rgb(255, 128, 0) ici ou un analyseur CSS complet.

Présenter la gamme comme palette Tailwind officielle

Conséquence: Les couleurs générées diffèrent des tons nommés de Tailwind.

Correction: Nommez-la gamme personnalisée et utilisez la classe arbitraire.

Valider l’accessibilité à l’œil

Conséquence: La différence visuelle ne garantit pas le contraste requis.

Correction: Mesurez avec un outil WCAG dédié.

Bonnes pratiques

  • Gardez la notation originale si la précision est critique.
  • Testez #ff8000 → rgb(255, 128, 0) → hsl(30, 100%, 50%).
  • Étiquetez les nuances comme personnalisées et mesurez leur contraste.
  • Testez le CSS final sur les navigateurs cibles.

Flux de travail liés

Limites du navigateur

  • Aucun alpha ni fonction CSS moderne séparée par espaces.
  • Conversion en sRGB 8 bits et HSL entier avec perte possible de précision.
  • Le sélecteur natif et la gestion des couleurs varient selon navigateur et écran.

Ressources de référence

CSS Color Module Level 4Éditeur: W3C · Révisé: 2026-07-26HTML Standard: Color stateÉditeur: WHATWG · Révisé: 2026-07-26

Exemples concrets

Entrée
#ff8000
Résultat
rgb(255, 128, 0); hsl(30, 100%, 50%); bg-[#ff8000]

Les canaux sRGB opaques valent 255, 128 et 0, puis le HSL est arrondi à 30°, 100 %, 50 %.

Questions fréquentes

Pourquoi un HEX à 8 chiffres est-il refusé ?

Seuls #RGB et #RRGGBB sont acceptés, sans alpha.

rgb(255 128 0) fonctionne-t-il ?

Non, utilisez la forme historique rgb(255, 128, 0).

Les nuances sont-elles celles de Tailwind ?

Non, ce sont des variations calculées localement.

Le contraste WCAG est-il vérifié ?

Non, aucun ratio ni seuil n’est calculé.

Pourquoi HSL change-t-il après aller-retour ?

Les composantes sont arrondies à des entiers.

Les couleurs sont-elles envoyées ?

Non, tout est calculé localement.

Confidentialité et fonctionnement hors ligne

Analyse, conversions, nuances, aperçu et copie restent dans ce navigateur sans téléversement. Le fonctionnement hors ligne est disponible après cache des ressources ; la copie est explicite.