Aller au contenu

Outils couleur en ligne

Sélecteur de couleur, palettes et codes couleur au même endroit

Choisissez n’importe quelle couleur et copiez son code HEX, RGB, HSL ou OKLCH, créez des palettes avec des harmonies, extrayez les couleurs d’une photo et vérifiez le contraste WCAG.

Gratuit et sans inscription. Tout fonctionne dans votre navigateur : vos images ne quittent jamais votre appareil.

Ouvrir le sélecteur de couleurVoir tous les outils

Tout ce qu’il faut pour travailler la couleur

Plus de 900 palettes prêtes à l’emploi

Filtrez par couleur ou par style (pastel, vintage, néon…), enregistrez vos favorites et ouvrez n’importe quelle palette dans la roue chromatique pour l’ajuster.

Explorer les palettes

De la première couleur au code final

HEX
#E4572E
RGB
rgb(228, 87, 46)
HSL
hsl(14, 77%, 54%)
OKLCH
oklch(0.6372 0.1838 36.48)
CMYK
C0 M62 Y80 K11

1. Des codes couleur dans tous les formats

Une même couleur s’écrit différemment selon l’endroit où vous l’utilisez. Testez n’importe quelle couleur ici et copiez le format dont vous avez besoin.

HEX pour le web

Le format le plus courant en CSS et dans les outils de design : six chiffres après le dièse.

RGB et HSL pour ajuster

RGB sépare rouge, vert et bleu de 0 à 255. HSL travaille avec teinte, saturation et luminosité, ce qui rend la création de variantes très simple.

OKLCH pour les échelles modernes

Le format CSS le plus récent : les changements de luminosité sont perçus de façon régulière, idéal pour les échelles de couleurs.

Convertir HEX en RGBConvertir RGB en HEX

2. Des combinaisons qui fonctionnent

Une bonne palette n’est pas une question de chance : elle repose sur les relations entre teintes de la roue chromatique.

Harmonies de couleurs

Analogue pour un résultat calme, complémentaire pour du contraste et triadique pour des designs pleins de vie.

Mélanges et dégradés

Mélangez deux couleurs pour trouver la teinte intermédiaire ou créez des dégradés CSS linéaires, radiaux et coniques.

Couleurs Tailwind et Material

Consultez les échelles officielles et testez-les sur de vrais composants d’interface.

Ouvrir la roue chromatiqueCréer un dégradé

3. Concevez pour tout le monde

Environ 8 % des hommes ont une forme de daltonisme, et beaucoup d’écrans sont consultés avec des reflets. Vérifier la couleur, c’est aussi concevoir.

Contraste WCAG

Calculez le ratio entre texte et fond et vérifiez les niveaux AA et AAA pour le texte normal et le grand texte.

Simulateur de daltonisme

Voyez votre palette comme la voient les personnes atteintes de protanopie, deutéranopie, tritanopie ou achromatopsie.

Vérifier le contrasteSimuler le daltonisme

Tous les outils de Matizly

12 outils gratuits qui fonctionnent dans votre navigateur et vous donnent le code prêt à coller.

  • Sélecteur de couleurChoisissez une couleur et copiez Hex, RGB, HSL ou OKLCH avec teintes et harmonies.
  • Roue chromatiqueExplorez les harmonies sur une roue interactive et créez des palettes équilibrées.
  • Couleurs d’imageExtrayez des couleurs d’une image et créez des palettes à partir d’une photo.
  • Mélangeur de couleursMélangez deux couleurs et obtenez le résultat intermédiaire à copier.
  • Dégradés CSSCréez des dégradés CSS linéaires, radiaux ou coniques en direct.
  • Palettes de couleursExplorez des palettes prêtes à l’emploi et enregistrez vos favorites.
  • Noms de couleursParcourez les couleurs nommées HTML/CSS et copiez Hex, RGB et HSL.
  • Couleurs TailwindExplorez les tables de couleurs Tailwind CSS et Material Design.
  • Couleurs UITestez les familles Tailwind sur de vrais composants UI.
  • Contraste WCAGVérifiez le contraste WCAG entre texte et fond pour une UI accessible.
  • DaltonismeSimulez vos couleurs avec différents types de daltonisme.
  • Hex ↔ RGBConvertissez Hex en RGB instantanément pour le CSS et le design.

Codes couleur par famille

Le code d’une nuance représentative de chaque couleur et des centaines de palettes construites à partir d’elle.

Voir les 148 couleurs HTML nommées

Questions fréquentes

Ouvrez le sélecteur de couleur, ou tapez la couleur dans le champ « Testez une couleur » de cette page (par exemple #E4572E, rgb(228, 87, 46) ou tomato), et vous verrez son code HEX, RGB, HSL, OKLCH et CMJN. Si la couleur se trouve dans une photo, utilisez le sélecteur de couleur d’image.

Ils décrivent la même couleur. HEX utilise six chiffres hexadécimaux (#E4572E) et RGB trois nombres de 0 à 255 (rgb(228, 87, 46)). Vous pouvez convertir de l’un à l’autre sans rien perdre.

Partez d’une couleur de base et utilisez la roue chromatique pour appliquer une harmonie : analogue, complémentaire, triadique… Vous pouvez aussi explorer des palettes toutes faites ou l’extraire d’une photo.

Non. Tous les outils de Matizly fonctionnent directement dans votre navigateur, sans inscription.

Non. Tout le traitement, y compris l’analyse des images, se fait dans votre navigateur. Nous n’envoyons ni ne conservons rien.

Oui. Depuis la roue chromatique et le sélecteur de couleur, vous pouvez exporter des variables CSS Tailwind et des objets Figma, ou simplement copier les codes.

Oui. Le vérificateur de contraste calcule le ratio WCAG entre deux couleurs et vous indique s’il respecte AA et AAA.

Commencez à travailler la couleur

Tous les outils sont gratuits et fonctionnent dans votre navigateur.

Explorer les palettesOuvrir le sélecteur de couleur