What is color harmony?

Color harmony refers to colors that look pleasing together based on their positions on the color wheel. Common harmony schemes include complementary (opposite colors), analogous (adjacent colors), triadic (evenly spaced), and monochromatic (same hue, different lightness).

What is a complementary color?

A complementary color is the color directly opposite another on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and are used to make designs pop. For example, the complement of blue is orange.

What is an analogous color scheme?

An analogous color scheme uses three colors that are adjacent to each other on the color wheel (typically ±30°). These schemes feel harmonious and natural, and are common in nature. They work well for backgrounds and gradients.

What is a triadic color scheme?

A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). It creates vibrant, high-contrast palettes that maintain balance. Good for designs that need energy and variety.

What is a monochromatic color palette?

A monochromatic palette uses a single hue at different lightness and saturation levels. It looks clean and professional, and is common in minimalist design systems. All colors naturally work together since they share the same underlying hue.

What are shades and tints?

Shades are created by adding black to a color (decreasing lightness), making it darker. Tints are created by adding white (increasing lightness), making it lighter. Design systems like Tailwind CSS use numbered scales (100–900) to represent these gradations.

Outil Gratuit

Générateur de thème de couleur

Générez des palettes de couleurs complémentaires, analogues, triadiques et monochromatiques à partir de n'importe quelle couleur hexadécimale. Exportez vers Tailwind, les variables CSS, SCSS, Material UI, et plus.

Choisissez une couleur de base

Couleur Hex

RGB

0, 82, 204

HSL

216°, 100%, 40%

Présets rapides

Schémas d'harmonie des couleurs

Two colors opposite on the color wheel — high contrast, bold pairings.

#0052CC

0,82,204

216°,100%,40%

#CC7A00

204,122,0

36°,100%,40%

Nuances et teintes

Même teinte du plus clair au plus foncé — utile pour les échelles de systèmes de conception.

#E5F0FF

229,240,255

215°,100%,95%

#B3D1FF

179,209,255

216°,100%,85%

#80B3FF

128,179,255

216°,100%,75%

#3385FF

51,133,255

216°,100%,60%

#005CE6

0,92,230

216°,100%,45%

#003D99

0,61,153

216°,100%,30%

#002966

0,41,102

216°,100%,20%

#001433

0,20,51

216°,100%,10%

Export pour framework

Exportez votre échelle de couleurs prête à coller dans votre projet.

Nom de la couleur :Utilisé dans les noms de variables/classes

brand-colors.css

@import "tailwindcss";

@theme {
  --color-brand-50: #F0F6FF;
  --color-brand-100: #DCEAFE;
  --color-brand-200: #B4D1FD;
  --color-brand-300: #74AAFB;
  --color-brand-400: #2E80FA;
  --color-brand-500: #065FE5;
  --color-brand-600: #054AB3;
  --color-brand-700: #033886;
  --color-brand-800: #02275E;
  --color-brand-900: #02193C;
  --color-brand-950: #010E23;
  --color-brand: #0052CC;
}

Échelle générée (11 steps)

100

200

300

400

500

600

700

800

900

950

Tous les schémas en un coup d'œil

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic

L'harmonie des couleurs expliquée

Les schémas d'harmonie des couleurs sont dérivés des relations entre les couleurs sur la roue chromatique. Les couleurs complémentaires sont opposées et créent un contraste élevé. Les couleurs analogues sont adjacentes et se sentent cohésives. Les schémas triadiques utilisent trois couleurs régulièrement espacées pour un équilibre vibrant.

Export du système de conception

L'onglet Framework Export génère une échelle de couleurs prête à coller pour Tailwind CSS v3/v4, Material UI, Chakra UI, shadcn/ui, les propriétés CSS personnalisées et les variables SCSS.

Comment utiliser

Entrez ou sélectionnez une couleur hexadécimale.
Parcourez les schémas d'harmonie — Complémentaire, Analogues, Triadique, etc.
Basculez vers Framework Export pour télécharger ou copier l'échelle de votre système de conception.

Tous les calculs de couleurs se font dans votre navigateur — rien n'est envoyé à aucun serveur.

Questions Fréquemment Posées

Quels formats de couleur sont pris en charge ?: L'entrée accepte hex (#RRGGBB ou #RGB). La sortie affiche hex, RGB et HSL pour chaque échantillon.
Puis-je exporter vers Tailwind CSS ?: Oui. La section Framework Export génère les échelles de couleurs Tailwind v3 et v4, ainsi que les formats variables CSS, SCSS, Material UI, Chakra UI et shadcn/ui.
L'outil est-il gratuit ?: Oui, complètement gratuit sans inscription requise.

Outils Connexes

Color Contrast

Check WCAG AA and AAA color contrast ratios for web accessibility

Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CSS named colors instantly

CSS Gradient Generator

Build linear, radial, and conic CSS gradients visually — drag color stops, share via URL