Convertisseur de couleurs

Convertir les couleurs entre HEX, Formats RVB et HSL

Choisissez une couleur

Ou entrez les valeurs ci-dessous

HEX

RVB

HSL

Compréhension Formats de couleurs

Les couleurs numériques peuvent être représentées dans plusieurs formats, chacun présentant des avantages différents. Cet outil convertit de manière transparente entre les trois formats de couleurs Web les plus courants : HEX, RVB et HSL. Tout le traitement s'effectue dans votre navigateur : vos choix de couleurs ne sont jamais suivis ni stockés.

#️⃣ HEX (Hexadécimal)

Format : #RRGGBB (6 caractères) ou #RGB (raccourci à 3 caractères)
Exemple : #2563EB ou #F00 (rouge)
Idéal pour : CSS, attributs HTML, outils de conception. Format le plus compact pour développement web.

🔴🟢🔵 RVB (Rouge, Vert, Bleu)

Format : rgb(R, G, B) où chaque valeur est comprise entre 0 et 255
Exemple : rgb(37, 99, 235)
Idéal pour : Fonctions CSS, manipulation des couleurs JavaScript, programmation génération de couleurs. Facile à comprendre comme un mélange de lumière.

🌈 HSL (Teinte, Saturation, Luminosité)

Format : hsl(H, S%, L%) où H est de 0 à 360°, S et L sont de 0 à 100 %
Exemple : hsl(221, 83%, 53%)
Idéal pour : Création de jeux de couleurs, réglage de la luminosité/saturation. La plupart intuitif pour la perception humaine.

Cas d'utilisation courants

Style CSS : Conversion entre formats pour différentes propriétés CSS et compatibilité du navigateur
Transfert de conception : Traduire les couleurs de outils de conception (souvent HEX) vers des formats faciles à coder
Schémas de couleurs : Utilisez HSL pour créer variations (ajuster la luminosité pour les états de survol)
Accessibilité : Calculer le contraste ratios utilisant les valeurs RVB
Directives de la marque : Documentez les couleurs en plusieurs formats pour différents cas d'utilisation

Conseils rapides sur la théorie des couleurs

Création États de survol

Utiliser HSL : diminuer la luminosité de 10 à 15 % pour des effets de survol plus sombres, ou augmenter pour des effets de survol plus clairs. ceux. Beaucoup plus facile que de calculer les changements RVB.

Assurer Contraste

Pour la conformité WCAG AA, le texte nécessite un rapport de contraste de 4,5:1. HSL Différences de légèreté de Plus de 40 % répondent généralement à cette exigence.

Questions fréquemment posées

Quel format dois-je utiliser en CSS ?

Tous les trois fonctionnent dans les navigateurs modernes. HEX est le plus courant et le plus compact. Utilisez RVB/HSL lorsque vous en avez besoin transparence (rgba() ou hsla()) ou manipulation dynamique des couleurs.

Que signifie le # en HEX veux dire ?

Le symbole # indique une valeur de couleur hexadécimale. C'est obligatoire en CSS mais souvent facultatif dans outils de conception. Les 6 caractères suivants représentent le Rouge, le Vert et le Bleu en base 16 (00-FF = 0-255).

Comment fonctionne HSL Hue ?

La teinte est un degré sur la roue chromatique : 0° = Rouge, 60° = Jaune, 120° = Vert, 180° = Cyan, 240° = Bleu, 300° = Magenta, 360° = retour au Rouge. Il permet de sélectionner des couleurs complémentaires (180° à part) intuitif.

Puis-je ajouter de la transparence ?

Oui ! Utilisez rgba(R, G, B, A) ou hsla(H, S%, L%, A) où A est 0-1. Le CSS moderne prend également en charge les 8 caractères HEX : #RRGGBBAA.

Référence des couleurs CSS

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);