Convertisseur de couleurs
Web et développementComment écrire une couleur en HEX, RGB ou HSL ?
Choisissez ou saisissez une couleur, copiez-la en HEX, RGB, HSL, HWB ou OKLCH et trouvez son nom CSS le plus proche.
Votre saisie reste sur votre appareil pendant l’utilisation de cet outil. Ouvrir un lien partagé envoie les réglages de son adresse à HowToolbox pour préparer la page.
Un nom, hex, rgb(), hsl(), hwb() ou oklch(), comme en CSS.
HEX
#2563eb
Nom CSS le plus proche : royalblue (#4169e1).
La même couleur dans d’autres formats
- RGB
- rgb(37 99 235)
- HSL
- hsl(221.2 83.2% 53.3%)
- HWB
- hwb(221.2 14.5% 7.8%)
- OKLCH
- oklch(54.61% 0.2152 262.88)
Nuances claires et sombres
- Clarté 95 %
- #e6efff
- Clarté 85 %
- #b4ceff
- Clarté 75 %
- #82adff
- Clarté 65 %
- #4f89ff
- Clarté 55 %
- #2664ec
- Clarté 45 %
- #0543ca
- Clarté 35 %
- #002b93
- Clarté 25 %
- #00185c
- Clarté 15 %
- #00062a
Liens sponsorisés
Choisissez ou saisissez une couleur, copiez-la en HEX, RGB, HSL, HWB ou OKLCH et trouvez son nom CSS le plus proche.
Mode d’emploi
- Saisissez une couleur CSS, comme tomato, #1a73e8, rgb(26 115 232) ou oklch(60% 0.2 260), ou appuyez sur l’échantillon pour la choisir.
- Copiez le format souhaité. HEX apparaît en premier, puis RGB, HSL, HWB et OKLCH.
- Explorez la rangée de nuances pour trouver des versions plus claires ou sombres.
Couleurs CSS courantes en HEX et RGB
| Nom CSS | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0 0 0) |
| white | #ffffff | rgb(255 255 255) |
| red | #ff0000 | rgb(255 0 0) |
| lime | #00ff00 | rgb(0 255 0) |
| blue | #0000ff | rgb(0 0 255) |
| yellow | #ffff00 | rgb(255 255 0) |
Comment ça marche
Un écran mélange lumières rouge, verte et bleue. RGB et HEX décrivent directement ce mélange : HEX écrit les trois quantités en base 16, donc #1a73e8 signifie rouge 26, vert 115, bleu 232. HSL et HWB décrivent cette même couleur par sa teinte sur le cercle chromatique et son caractère pâle, sombre ou gris.
OKLCH est une représentation plus récente dont la clarté se rapproche de la perception : deux couleurs de même clarté paraissent aussi claires, ce que HSL fondé sur sRGB ne garantit pas (CSS Color Module Level 4 ; Ottosson, 2020). Les nuances gardent teinte et chroma et ne changent que la clarté OKLCH pour une progression régulière. Si une couleur sort de la gamme à cette clarté, son chroma est réduit jusqu’à pouvoir l’afficher.
Le nom CSS le plus proche est celui des 148 couleurs nommées présentant le plus faible écart dans OKLab, espace où des distances égales paraissent aussi différentes. Une couleur hors de la gamme sRGB est ramenée à la couleur représentable la plus proche.
Liens sponsorisés
Questions fréquentes
Que signifie un code hexadécimal à 8 chiffres ?
Les deux derniers chiffres sont l’opacité, de 00 (invisible) à ff (opaque). Ils apparaissent pour les couleurs partiellement transparentes, présentées sur un damier.
Pourquoi deux couleurs de même clarté HSL semblent-elles différentes ?
La clarté HSL est calculée sur les composantes rouge, verte et bleue, pas sur la perception. À valeur égale, le jaune paraît bien plus clair que le bleu. Les nuances utilisent donc OKLCH.
Quel format utiliser en CSS ?
Tous fonctionnent dans les navigateurs actuels. HEX est courant et court, HSL facile à ajuster à la main. OKLCH convient aux palettes régulières et peut dépasser sRGB sur les écrans à large gamut.
Le nom CSS le plus proche correspond-il exactement à ma couleur ?
Pas toujours. L’outil distingue une correspondance exacte de la couleur nommée la plus proche.
Peut-il convertir des couleurs de peinture ou des profils ICC ?
Non. Il traite les couleurs CSS, pas les nuanciers de peinture ni les profils colorimétriques ICC.
Pour aller plus loin
- Formatage JSONColler du JSON pour repérer les erreurs, le mettre en forme ou le rendre compact., confidentiel, fonctionne sur votre appareilWeb et développementVérificateurConvertisseurEncodage
- Encoder et décoder une URLEncodez du texte pour une adresse web avec des codes %, ou redonnez à %20 et ses semblables leur forme lisible., confidentiel, fonctionne sur votre appareilWeb et développementConvertisseurEncodage
- Recherche DNSRecherchez adresses, serveurs de messagerie et autres enregistrements DNS., confidentiel, fonctionne sur votre appareilWeb et développementVérificateurRéseaux
- Calculateur de temps de téléchargementSaisissez taille du fichier et débit pour estimer la durée d’un téléchargement ou d’un envoi., confidentiel, fonctionne sur votre appareilWeb et développementCalculateurRéseaux
- Générateur d’empreintesDes empreintes SHA-256, SHA-512, SHA-1 et MD5 de tout texte, calculées dans votre navigateur., confidentiel, fonctionne sur votre appareilWeb et développementGénérateurEncodage
- Codes de statut HTTPRetrouvez n’importe quel code de statut HTTP : ce que signifient 200, 301, 404, 429 ou 503, quand un serveur l’envoie, si les caches le gardent et quel RFC le définit., confidentiel, fonctionne sur votre appareilWeb et développementRéférencesRéseaux
Autres outils de la catégorie Web et développement
Les 18 outils de la catégorie Web et développement- Générateur de mots de passeUn mot de passe aléatoire créé sur votre appareil, avec sa robustesse en bits, sans aucun envoi., confidentiel, fonctionne sur votre appareil
- Générateur d’UUIDUUID aléatoires, version 4 ou version 7 ordonnée par date, créés sur votre appareil., confidentiel, fonctionne sur votre appareil
- Infos du navigateurDonnées déclarées du navigateur, du moteur et de l’appareil., confidentiel, fonctionne sur votre appareil
- Quelle est mon IP ?Votre IP publique et le réseau qui lui correspond.
- Recherche WHOISRetrouvez le bureau d’enregistrement, les dates et les serveurs de noms indiqués par WHOIS.
- Site inaccessible ?Vérifier la réponse d’un site web depuis notre serveur.
Populaires en ce moment
Liens sponsorisés
Liens sponsorisés
Liens sponsorisés