Tu as choisi une couleur pour ton site, et maintenant le design dit HEX mais ton code veut du RGB. Ou tu as fait un joli bouton et tu n'es pas sûr que quelqu'un puisse lire le texte dessus. Les Outils CSS et Couleur GetPlugzz font les deux, et deux autres choses : ils créent des dégradés et génèrent du CSS box-shadow et border-radius. Tout est sur une seule page, se met à jour en direct pendant que tu tapes et tourne dans ton navigateur, donc pas de compte et rien n'est envoyé.
Les quatre outils, en une minute
Ouvre les Outils CSS et Couleur et choisis un onglet :
- Convertisseur de Couleurs. Tape une couleur en HEX, RGB ou HSL, et les deux autres se mettent à jour d'un coup. Tu peux aussi cliquer sur la pastille pour choisir une couleur.
- Dégradé. Choisis tes couleurs (tu peux en ajouter), décide entre linéaire ou radial, règle l'angle, puis appuie sur Copier le CSS.
- Vérificateur de Contraste. Choisis une couleur de texte et une couleur de fond, et vois si des personnes malvoyantes peuvent le lire, avec un résultat pour WCAG AA et AAA.
- Ombre et Arrondi. Fais glisser le décalage, le flou et l'étendue pour construire un box-shadow, et arrondis les coins avec border-radius. Copie le CSS quand ça te plaît.
HEX, RGB et HSL : une couleur, trois façons de la dire
Pense à une même couleur de peinture écrite sur trois étiquettes différentes. C'est la même peinture, seule la recette est écrite autrement :
- Le HEX est le code court : un # suivi de six lettres ou chiffres, comme #2563EB.
- Le RGB est la recette : trois nombres qui disent combien de rouge, de vert et de bleu mélanger.
- Le HSL est la série de boutons : teinte, saturation et luminosité. C'est le plus simple à ajuster à la main. Tu veux la même couleur un peu plus claire ? Tu tournes juste un bouton.
Les maquettes te donnent souvent l'un de ceux-là et ton code en a besoin d'un autre, et c'est précisément là qu'un convertisseur te fait gagner quelques minutes.
Comment convertir du HEX en RGB
- Ouvre le Convertisseur de Couleurs. C'est le premier onglet.
- Tape ou colle le code HEX dans le champ HEX.
- Lis le résultat. Les valeurs RGB et HSL se remplissent toutes seules, avec la pastille.
Ça marche aussi dans l'autre sens. Tape dans n'importe lequel des trois champs et les deux autres suivent.
Ton texte est-il vraiment lisible ? (le problème du murmure)
Un texte gris clair sur fond blanc paraît élégant sur ton écran. Pour quelqu'un qui voit mal, ou avec un téléphone en plein soleil, c'est un murmure dans une pièce bruyante. Le Vérificateur de Contraste mesure à quel point la couleur du texte et celle du fond diffèrent et te dit si ça passe.
Il utilise les WCAG, les Web Content Accessibility Guidelines, qui fixent un contraste minimum pour que le texte reste lisible pour les personnes malvoyantes. Il y a deux niveaux : AA est celui que visent la plupart des sites, et AAA est plus strict. Ce qu'il te faut :
- Texte normal : au moins 4,5:1 pour AA et 7:1 pour AAA.
- Texte large : 3:1 suffit pour AA. Large veut dire 18pt ou plus, ou 14pt ou plus en gras.
L'outil affiche le ratio et un résultat pour le texte normal et large aux deux niveaux, donc tu n'as aucun calcul à faire.
Des dégradés et des ombres sans écrire le CSS à la main
Pour un dégradé, choisis tes couleurs, décide entre linéaire ou radial, règle l'angle et appuie sur Copier le CSS. C'est tout le travail.
Pour une ombre, pense à une lampe au-dessus d'une boîte. Le décalage change l'endroit où tombe l'ombre, un flou plus grand la rend plus douce, et l'étendue la rend plus grande. Tu peux régler la couleur et l'opacité de l'ombre, ou la mettre à l'intérieur. Ensuite, arrondis les coins avec border-radius, tous à la fois, et copie le CSS quand ça te plaît.
Quand tu en as vraiment besoin
- Une maquette te donne un code HEX et ton code veut du RGB ou du HSL.
- Un bouton ou un titre dont tu veux vérifier la lisibilité du texte.
- Un fond de page ou de carte qui a besoin d'un joli dégradé.
- Une carte qui doit se détacher de la page avec une ombre douce et des coins arrondis.
- Un contrôle d'accessibilité pour un client, un projet scolaire ou ton propre site.
Bon à savoir avant de commencer
- Les couleurs sont totalement opaques : pas de transparence (alpha) ni de codes hex à 8 chiffres.
- Les valeurs HSL sont arrondies à des nombres entiers, une conversion en retour peut donc différer de 1 sur un canal de couleur.
- Réussite ou échec du contraste utilise les couleurs exactes ; le rapport affiché est arrondi à deux décimales, 4,496 s'affiche donc 4.50:1 mais n'atteint pas 4,5.
- Les dégradés acceptent jusqu'à 6 couleurs, régulièrement espacées, en angle linéaire ou en radial circulaire.
Questions fréquentes
Oui. Il n'y a pas de compte et rien à installer.
Non. Tout est calculé en direct dans ton navigateur.
Tape ou colle le code HEX dans le champ HEX du Convertisseur de Couleurs. Les valeurs RGB et HSL se remplissent automatiquement.
Pour du texte normal, vise au moins 4,5:1 (AA). Pour du texte large, 3:1 suffit. Le niveau AAA, plus strict, demande 7:1 pour du texte normal.
HSL veut dire teinte, saturation et luminosité. C'est plus facile à ajuster à la main que le HEX ou le RGB, par exemple pour éclaircir une couleur.
Outils CSS et Couleur gratuits — sans envoi, sans inscription
Convertis des couleurs, crée des dégradés, vérifie le contraste et génère du CSS d'ombre. Créé par GetPlugzz, traité entièrement dans ton navigateur.
