Couleurs : noms, codes et nuances
Retrouvez les couleurs par nom ou par code : HEX, RGB, HSL, OKLCH, nuances claires et foncées, couleurs complémentaires et associées.
Cliquez sur une couleur pour afficher sa fiche.
Teintes de référence
Couleurs nommées du web (CSS)
Ces noms s’utilisent directement en CSS, par exemple color: tomato;
Aucune couleur trouvée. Tapez un code comme #1245B4 pour voir sa fiche.
Collections créées par KSPNAI, libres d’utilisation.
À propos de cet outil
Ce nuancier en ligne gratuit vous aide à trouver une couleur par son nom ou par son code. Il réunit des teintes de référence aux noms courants (terracotta, vert sauge, bleu canard, bordeaux…) et les couleurs nommées du CSS, comme tomato ou navy. Chaque couleur a sa fiche avec ses codes HEX, RGB, HSL et OKLCH, prêts à copier pour un site, un document ou un logiciel de mise en page.
La fiche montre aussi une gamme de nuances plus claires et plus foncées, la couleur complémentaire, les analogues et une triade, ainsi qu’une indication pour choisir un texte clair ou foncé par-dessus. Filtrez par famille (rouges, bleus, bruns…) ou tapez un code HEX quelconque pour afficher sa fiche. Des liens ouvrent ensuite la couleur dans le générateur de palettes, les nuances Tailwind ou le test de contraste.
- Recherche par nom ou par code HEX
- Codes HEX, RGB, HSL et OKLCH à copier
- Nuances claires et foncées de chaque couleur
- Complémentaire, analogues et triade
- Filtre par famille de couleurs
Comment l’utiliser
- Tapez un nom ou un code dans la recherche, ou choisissez une famille.
- Cliquez sur une couleur pour afficher sa fiche.
- Cliquez sur Copier à côté du code HEX, RGB, HSL ou OKLCH voulu.
- Cliquez sur une nuance ou une couleur associée pour afficher sa propre fiche.
Questions fréquentes
Quel est le code HEX d’une couleur comme le vert sauge ou le bleu canard ?
Tapez son nom dans la recherche puis cliquez dessus : la fiche affiche son code HEX et ses équivalents RGB, HSL et OKLCH. Ces valeurs correspondent au choix de teinte retenu par KSPNAI, d’autres nuanciers peuvent proposer un ton un peu différent.
Puis-je voir la fiche d’une couleur qui n’est pas dans la liste ?
Oui. Tapez un code HEX, par exemple #1245B4 : si aucune couleur de la liste ne correspond, sa fiche complète s’affiche quand même.
Que signifient HSL et OKLCH ?
Ce sont d’autres façons d’écrire une couleur en CSS. HSL la décrit par teinte, saturation et luminosité ; OKLCH utilise une luminosité perçue plus régulière, pratique pour créer des nuances cohérentes.
L’outil est-il gratuit et mes recherches restent-elles privées ?
Oui, il est gratuit et sans compte. Les couleurs sont intégrées à la page et la recherche se fait dans votre navigateur, sans rien envoyer.