Sélecteur de couleur

Choisissez n'importe quelle couleur et convertissez instantanément entre HEX, RGB et HSL. Copiez les codes couleur en un clic. Gratuit, instantané et confidentiel.

GratuitSans inscription100% PrivéDernière mise à jour : Mars 2026
#3498DB
HEX: #3498DB
RGB: rgb(52, 152, 219)
HSL: hsl(204, 70%, 53%)

Qu'est-ce qu'un sélecteur de couleur ?

Un sélecteur de couleur est un outil qui vous permet de choisir une couleur spécifique et d'obtenir sa représentation dans différents formats de couleur utilisés en développement web, design graphique et art numérique. Les trois formats les plus courants sont HEX (hexadécimal), RGB (Rouge, Vert, Bleu) et HSL (Teinte, Saturation, Luminosité). Chaque format décrit la même couleur différemment, et la conversion entre eux est essentielle pour travailler avec différents outils de design et bases de code.

Les codes HEX comme #3498db sont le standard en CSS et design web. Les valeurs RGB comme rgb(52, 152, 219) sont utilisées en CSS, dans les opérations canvas JavaScript et dans la plupart des langages de programmation. Les valeurs HSL comme hsl(204, 70%, 53%) sont de plus en plus populaires car elles correspondent plus intuitivement à la façon dont les humains pensent la couleur : vous pouvez facilement rendre une couleur plus claire en augmentant la valeur L, ou plus atténuée en diminuant S, sans affecter la teinte de base.

Le sélecteur de couleur TweakFiles fonctionne entièrement dans votre navigateur sans dépendances externes. Toutes les conversions utilisent des formules mathématiques pures, garantissant des résultats précis et instantanés. La synchronisation bidirectionnelle signifie que vous pouvez modifier n'importe quel format et tous les autres se mettent à jour en temps réel. Les boutons de copie vous permettent de récupérer rapidement le code exact dont vous avez besoin pour votre CSS, votre projet Figma ou tout autre outil de design.

Les formats de couleur expliqués

Les codes HEX comme #3498db sont le standard en CSS. Les valeurs RGB comme rgb(52, 152, 219) sont utilisées en CSS et dans la plupart des langages de programmation. Les valeurs HSL comme hsl(204, 70%, 53%) sont populaires car elles correspondent intuitivement à la perception humaine de la couleur : la teinte (H) est l'angle sur la roue chromatique (0° = rouge, 120° = vert, 240° = bleu), la saturation (S) contrôle l'intensité de la couleur (0 % = gris, 100 % = couleur pure) et la luminosité (L) contrôle la brillance (0 % = noir, 50 % = couleur pure, 100 % = blanc).

Comment utiliser le sélecteur de couleur en 3 étapes

1

Choisissez ou saisissez une couleur

Utilisez le sélecteur de couleur natif pour choisir visuellement n'importe quelle couleur, ou tapez un code HEX, des valeurs RGB ou HSL directement dans les champs de saisie. Tous les formats sont synchronisés de manière bidirectionnelle, donc modifier l'un met à jour tous les autres instantanément.

2

Consultez tous les formats

L'aperçu de couleur montre votre sélection d'un coup d'oeil. En dessous, vous voyez la couleur exprimée en HEX, RGB et HSL. Ajustez les valeurs individuelles (comme la teinte ou la luminosité uniquement) pour obtenir exactement la nuance souhaitée.

3

Copiez et utilisez

Cliquez sur le bouton « Copier » à côté de n'importe quel format pour copier le code couleur dans le presse-papiers. Collez-le directement dans votre feuille de style CSS, votre outil de design ou votre éditeur de code. Le format copié est prêt à l'emploi sans aucune modification.

TweakFiles vs Autres sélecteurs de couleur

FonctionnalitéTweakFilesGoogle Color PickerColorHexa
PrixGratuit pour toujoursGratuitGratuit (avec publicités)
Confidentialité100 % côté clientServeurs GoogleTraitement serveur
HEX / RGB / HSLLes trois, synchronisésHEX + RGB + HSLTous les formats
Copie dans le presse-papiersUn clic par formatSélection manuelleSélection manuelle
Saisie bidirectionnelleOui (modifier n'importe quel champ)LimitéeURL uniquement
PublicitésAucuneAucuneMultiples
Inscription requiseNonNonNon

Questions fréquentes

Saisissez un code couleur HEX (par ex., #3498db) dans le champ de saisie HEX. Les valeurs RGB se mettent à jour instantanément. Chaque paire de chiffres hexadécimaux correspond à un canal de couleur : les deux premiers sont le Rouge (0–255), les deux suivants le Vert et les deux derniers le Bleu. La formule est : R = parseInt(hex[1..2], 16), G = parseInt(hex[3..4], 16), B = parseInt(hex[5..6], 16).
RGB (Rouge, Vert, Bleu) définit les couleurs en mélangeant trois canaux lumineux, chacun allant de 0 à 255. HSL (Teinte, Saturation, Luminosité) utilise un modèle plus intuitif pour l'humain : la Teinte est l'angle de couleur sur une roue de 360 degrés (0 = rouge, 120 = vert, 240 = bleu), la Saturation contrôle l'intensité (0 % = gris, 100 % = couleur pure), et la Luminosité contrôle la brillance (0 % = noir, 50 % = couleur pure, 100 % = blanc). HSL facilite la création de variations de couleur en ajustant un seul paramètre.
Oui. Vous pouvez coller un code HEX directement dans le champ de saisie HEX, ou saisir des valeurs RGB ou HSL dans leurs champs respectifs. Tous les autres formats se mettent à jour automatiquement. Cela facilite la conversion entre formats lors du transfert de couleurs entre des outils comme Figma, Photoshop, VS Code ou des fichiers CSS.
Oui. Les conversions utilisent des formules mathématiques standard (les mêmes que celles spécifiées dans le CSS Color Module Level 4). Les conversions RGB vers HSL et HSL vers RGB sont précises. Le seul arrondi intervient lors de la conversion de résultats en virgule flottante en valeurs RGB entières (0–255) ou en valeurs HSL en degrés/pourcentages, ce qui est la pratique standard.
Absolument. Tous les calculs de couleur s'effectuent entièrement dans votre navigateur en JavaScript. Aucune donnée de couleur, information d'utilisation ou donnée personnelle n'est jamais envoyée à un serveur. Vos choix de couleurs restent totalement sur votre appareil.

Outils associés

📅Calculateur de Date📊Calculateur de Pourcentage📱Générateur de code QR🎂Calculateur d'Âge⚖️Calculateur d'IMC