Générateur et sélecteur de codes de couleur

Génère des codes de couleur, des variations, des harmonies et vérifie les rapports de contraste.

Conversion des couleurs

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variations

Le but de cette section est de produire avec précision des teintes (blanc pur ajouté) et des nuances (noir pur ajouté) de la couleur que tu as choisie, par incréments de 10 %.

Conseil de pro : Utilise des nuances pour les états de survol et les ombres, des teintes pour les hautes lumières et les arrière-plans.

Nuances

Variations plus sombres créées en ajoutant du noir à ta couleur de base.

Teintes

Variations plus légères créées en ajoutant du blanc à ta couleur de base.

Cas d'utilisation courants

  • États des composants de l'interface utilisateur (survol, actif, désactivé)
  • Créer de la profondeur avec les ombres et les lumières
  • Construire des systèmes de couleurs cohérents

Conseil pour le système de conception

Ces variations constituent la base d'une palette de couleurs cohérente. Exporte-les pour maintenir la cohérence dans l'ensemble de ton projet.

Combinaisons de couleurs

Chaque harmonie a sa propre ambiance. Utilise les harmonies pour réfléchir à des combinaisons de couleurs qui fonctionnent bien ensemble.

Comment l'utiliser

Clique sur n'importe quelle couleur pour copier sa valeur hexagonale. Il est mathématiquement prouvé que ces combinaisons créent une harmonie visuelle.

Pourquoi c'est important

Les harmonies de couleurs créent un équilibre et évoquent des émotions spécifiques dans tes dessins.

Complément

Une couleur et son opposé sur le cercle chromatique, +180 degrés de teinte. Contraste élevé .

#ca4e4e
Meilleur pour: Des conceptions, des CTA et des logos à fort impact

Complémentaire adjacente

Une couleur et les deux couleurs adjacentes à sa complémentaire. Audacieux comme une harmonie complémentaire, mais plus polyvalent.

Meilleur pour: Des mises en page vibrantes mais équilibrées

Triadique

Trois couleurs espacées régulièrement le long de la roue des couleurs, chacune à 120 degrés de teinte. Le mieux est de laisser une couleur dominer et d'utiliser les autres comme accents.

Meilleur pour: Des dessins ludiques et énergiques

Analogue

Trois couleurs de même luminance et de même saturation dont les teintes sont adjacentes sur le cercle chromatique, à 30 degrés d'écart. Transitions douces.

Meilleur pour: Interfaces inspirées de la nature et apaisantes

Monochromatique

Trois couleurs de la même teinte avec des valeurs de luminance de +/-50%. Subtil et raffiné.

Meilleur pour: Des conceptions minimalistes et sophistiquées

Tétradique

Deux ensembles de couleurs complémentaires, séparés par 60 degrés de teinte.

Meilleur pour: Des couleurs riches et variées

Principes de la théorie des couleurs

Équilibre

Utilise une couleur dominante, soutiens-la avec une couleur secondaire et accentue-la avec parcimonie.

Contraste

Veille à ce que le contraste soit suffisant pour assurer la lisibilité et l'accessibilité.

Harmonie

Les couleurs doivent fonctionner ensemble pour créer une expérience visuelle unifiée.

Vérificateur de contraste des couleurs

Teste les combinaisons de couleurs pour t'assurer qu'elles respectent les normes d'accessibilité WCAG en matière de lisibilité du texte.

Couleur du texte
Couleur de fond
Contraste
Fail
Petit texte
✖︎
Grand texte
✖︎
Normes WCAG
AA:Rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte en gros caractères. Requis pour la plupart des sites web.
AAA:Rapport de contraste amélioré de 7:1 pour le texte normal et de 4,5:1 pour le texte en gros caractères. Recommandé pour une accessibilité optimale.

Tout le monde est un génie. Mais si tu juges un poisson sur sa capacité à grimper à un arbre, il passera toute sa vie à croire qu'il est stupide.

- Albert Einstein

Formats techniques

Formats pratiques

Analyse des couleurs

Simulateur de cécité

Aspects créatifs