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.

Ferramenta Gratuita

Gerador de Tema de Cores

Gere paletas de cores complementares, análogas, triádicas e monocromáticas a partir de qualquer cor hex. Exporte para Tailwind, variáveis CSS, SCSS, Material UI e muito mais.

Escolha uma Cor Base

Cor Hex

RGB

0, 82, 204

HSL

216°, 100%, 40%

Predefinições rápidas

Esquemas de Harmonia de Cores

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%

Tons e Matizes

Mesma tonalidade do mais claro ao mais escuro — útil para escalas de sistema de design.

#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%

Exportação de Framework

Exporte sua escala de cores pronta para colar em seu projeto.

Nome da cor:Usado em nomes de variáveis/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;
}

Escala gerada (11 steps)

100

200

300

400

500

600

700

800

900

950

Todos os Esquemas em um Relance

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Monochromatic

Harmonia de cores explicada

Os esquemas de harmonia de cores são derivados das relações entre cores na roda de cores. Cores complementares ficam uma em frente à outra e criam alto contraste. Cores análogas ficam adjacentes e parecem coesas. Esquemas triádicos usam três cores espaçadas uniformemente para equilíbrio vibrante.

Exportação de sistema de design

A aba Framework Export gera uma escala de cores pronta para colar no Tailwind CSS v3/v4, Material UI, Chakra UI, shadcn/ui, propriedades customizadas CSS e variáveis SCSS.

Como usar

Digite ou escolha uma cor hex.
Navegue pelos esquemas de harmonia — Complementar, Análoga, Triádica, etc.
Mude para Exportação de Framework para baixar ou copiar a escala para seu sistema de design.

Todos os cálculos de cor acontecem em seu navegador — nada é enviado para nenhum servidor.

Perguntas Frequentes

Quais formatos de cor são suportados?: A entrada aceita hex (#RRGGBB ou #RGB). A saída mostra hex, RGB e HSL para cada amostra.
Posso exportar para Tailwind CSS?: Sim. A seção Framework Export gera escalas de cores Tailwind v3 e v4, além de variáveis CSS, SCSS, Material UI, Chakra UI e formatos shadcn/ui.
A ferramenta é gratuita?: Sim, completamente gratuita sem necessidade de cadastro.

Ferramentas Relacionadas

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