Convertisseur de couleurs

Convertissez entre les codes de couleur HEX, RVB et HSL, puis regroupez le résultat dans des extraits faciles à copier que vous pouvez partager.

Entrée de couleur

Entrez la couleur

Sélecteur de couleurs

Couleur sélectionnée #7C3AED

Effacer

Aperçu de la palette

Texte recommandé

#FFFFFF

Vérification de l'accent de l'interface utilisateur est normalisé en extraits de code HEX, RVB, HSL et de jeton faciles à copier.

Préréglage prêt à partager #7C3AED

Vérification de l'accent de l'interface utilisateur est normalisé en extraits de code HEX, RVB, HSL et de jeton faciles à copier.

Entrée active #7C3AED

Texte recommandé #FFFFFF

Sorties normalisées

HEX

Compact pour CSS, les outils de navigateur et les documents de conception.

#7C3AED

RGB

Précision du canal pour le transfert de conception, le travail sur canevas et l'outillage d'image.

rgb(124, 58, 237)

HSL

Pratique lorsque vous devez modifier la teinte, la saturation ou la luminosité séparément.

hsl(262, 83%, 58%)

Canaux R, V, B

Canaux numériques simples pour les tickets, les spécifications et les jetons.

124, 58, 237

Contexte de lisibilité

Utilisez texte blanc sur cet échantillon pour obtenir le contraste de petit texte le plus fort.

Texte blanc

#FFFFFF

5,70:1

Aperçu du texte

Un corps de copie

Texte normal: Passer

Grand texte: Passer

Texte sombre

#111827

3,11:1

Aperçu du texte

Un corps de copie

Texte normal: A besoin de plus de contraste

Grand texte: Passer

Extraits de transfert

Variable CSS

:root {
  --brand-accent: #7C3AED;
  --brand-accent-rgb: 124 58 237;
}

Jeton de conception JSON

{
  "color": {
    "accent": {
      "value": "#7C3AED",
      "rgb": "124 58 237",
      "hsl": "hsl(262, 83%, 58%)"
    }
  }
}

Style en ligne

background-color: #7C3AED;
color: #FFFFFF;

Exemples de préréglages

Transfert du jeton de marque

#0EA5E9

Commencez par un échantillon de marque principal et copiez les valeurs CSS ou les jetons de conception pour la mise en œuvre.

Nettoyage RVB à partir de la conception

#FF5733

Normalisez une valeur RVB collée à partir de notes de conception dans des extraits HEX, HSL et réutilisables.

Vérification de l'accent de l'interface utilisateur

#7C3AED

Examinez une couleur d’accent avec des conseils de lisibilité rapides avant de l’envoyer dans un bouton ou un badge.

Que sont les formats de couleur ?

Les couleurs sur le Web peuvent être représentées dans plusieurs formats. HEX utilise la notation hexadécimale (#RRGGBB), RVB spécifie les composants rouge, vert et bleu (0-255) et HSL utilise la teinte (0-360), la saturation et la luminosité (0-100 %). Chaque format présente des avantages pour différents cas d'utilisation comme le travail de conception ou la manipulation programmatique des couleurs.

Détails du format de couleur

Les couleurs HEX codent les valeurs RVB en hexadécimal (16-255 par canal). RVB spécifie directement l'intensité de la couleur (0-255). HSL sépare la couleur (teinte) de l'intensité (saturation/luminosité), ce qui le rend plus intuitif pour créer des variations de couleur. Tous les formats peuvent représenter les mêmes 16,7 millions de couleurs.

Cas d'utilisation courants

Conversion des couleurs des outils de conception en CSS
Création de thèmes et de palettes de couleurs
Ajustement de la luminosité et de la saturation des couleurs
Faire correspondre les couleurs de la marque sur toutes les plateformes
Tests d'accessibilité pour le contraste des couleurs

Comparaison des formats

HEX #RRGGBB – Compact, largement pris en charge, facile à copier/coller

RGB rgb(R, G, B) - Intuitif pour la manipulation programmatique

HSL hsl(H, S%, L%) - Création facile de variations en ajustant les composants

Foire aux questions

Quand dois-je utiliser HSL sur RVB ?

HSL est préférable lorsque vous devez créer des variations de couleurs (plus claires, plus foncées, plus/moins saturées) car vous pouvez ajuster un seul composant. RVB est meilleur pour le mélange des couleurs et lorsque vous travaillez avec le traitement d'images.

Qu’est-ce que le raccourci HEX ?

Le raccourci HEX utilise 3 chiffres au lieu de 6 (#RGB au lieu de #RRGGBB). Chaque chiffre est doublé : #F00 devient #FF0000 (rouge). Ne fonctionne que lorsque chaque paire a des chiffres identiques.