Cómo usar

1. Haz clic en cualquier punto de la rueda cromática para elegir un color, o ajusta los deslizadores de tono, saturación y luminosidad.
2. Visualiza el color seleccionado en los formatos HEX, RGB y HSL debajo de la rueda.
3. Haz clic en una muestra de armonía para ver los esquemas complementario, análogo, triádico y complementario dividido.

Preguntas frecuentes

¿Qué es una armonía de colores?

La armonía de colores designa una combinación agradable de colores basada en su posición en la rueda cromática. Las armonías habituales incluyen complementaria (opuesta), análoga (adyacente) y triádica (equidistante).

¿Cuál es la diferencia entre HEX, RGB y HSL?

El HEX es un código hexadecimal de 6 dígitos (#RRGGBB). El RGB usa los valores rojo, verde y azul (0-255). El HSL usa tono (0-360°), saturación (0-100 %) y luminosidad (0-100 %).

¿Puedo usar estos colores en mis diseños?

¡Sí! Copia cualquier valor y pégalo directamente en tu CSS, software de diseño o aplicación web. Todos los valores son conformes con los estándares y ampliamente admitidos.

A short history of the color wheel

Isaac Newton drew the first one. In Opticks (1704) he reported the prism experiments he had first shown the Royal Society in 1672, demonstrating that white light is a mixture of spectral colors, and arranged the spectrum into a closed circle so the red end could meet the violet end. He named seven colors (red, orange, yellow, green, blue, indigo, violet) picked by analogy to the seven notes of the diatonic musical scale, since he believed colour and harmony shared mathematical structure. Indigo as a separate band from blue is the most famous casualty of that aesthetic choice.

Goethe's Theory of Colours (1810) reframed the wheel around perception rather than physics. He arranged colors symmetrically into "plus" warm and "minus" cool halves and noted that opposite colors "reciprocally evoke each other in the eye", an early articulation of opponent-process theory that anticipated the simultaneous-contrast law Michel Eugène Chevreul would publish in 1839 from the Gobelins tapestry works.

Albert Munsell's A Color Notation (1905) was the first wheel grounded in measured human perception rather than convention, separating hue, value (lightness) and chroma (saturation) into independent dimensions, the direct ancestor of every modern perceptual color space, including CIELAB and OKLCH. The wheel most designers were taught in school is younger: Johannes Itten codified the 12-color RYB wheel at the Bauhaus between 1919 and 1922, identifying three primaries (red, yellow, blue), three secondaries, six tertiaries and seven kinds of color contrast. The wheels actually used on screen are different again: HSL and HSV are cylindrical reparameterisations of RGB invented at PARC and other graphics labs in the 1970s, so a designer could think in three intuitive sliders ("this hue, more vivid, lighter") instead of three opaque RGB channels. The most recent step is OKLCH (Björn Ottosson, December 2020), now in CSS Color Module Level 4, a wheel where equal angular steps look like equal perceptual hue steps.

Three families of wheel

"Color wheel" hides the fact that there are three different kinds, each correct for a different physical situation:

• RYB (red, yellow, blue), the artistic teaching wheel that Itten popularised. It's a convention based on experience with pigments, not a model of physics. No combination of red, yellow and blue paints can mix every visible color.
• RGB (red, green, blue) (additive. Used wherever color is emitted: monitors, phones, projectors, stage lighting. Anchored in physiology) human retinas have three cone types sensitive to long, medium and short wavelengths. Browsers and CSS work in RGB, so this tool's HSL wheel is a polar reparameterisation of sRGB.
• CMY / CMYK (cyan, magenta, yellow + key/black), subtractive. Used wherever color is reflected: print, ink, dye. Mixing decreases brightness; commercial printers add black for true blacks and to save ink.

The practical consequence: the HEX, RGB and HSL values exported by this wheel are screen-accurate. They are not paint-accurate, and a CMYK print run will need its own conversion, a step printers usually handle for you.

How HSL maps to a circle

HSL stands for hue, saturation, lightness. Hue is an angle around a central axis with red at 0°, green at 120°, blue at 240°, wrapping back to red at 360°. Saturation runs from 0% (gray) to 100% (fully vivid). Lightness runs from 0% (black) through the natural hue at 50% to white at 100%. Geometrically the model is a bicone (two cones tip-to-tip) with the most saturated colors at the equator. HSV is similar but uses Value instead of Lightness, with full saturated colors at V=100 and the entire model shaped as a single cone.

CSS's hsl() function takes the same three numbers. The modern syntax is space-separated with an optional alpha after a slash:

hsl(210 80% 50%)
hsl(210 80% 50% / 0.5)
hsl(0.5turn 80% 50%)        /* turns also accepted */

The legacy comma-separated hsl(210, 80%, 50%) and the hsla() alias are still supported for backward compatibility. CSS Color Module Level 4 has been broadly available across browsers since around 2015 for basic HSL, with the modern syntax shipping later.

Honest caveat: HSL is not perceptually uniform. A yellow at L=50% looks much brighter than a blue at L=50% even though both have the same lightness number, and a wheel sliced by hue at constant S and L will have visually heavy yellows and weak blues. For data visualisation and carefully calibrated brand palettes, the new oklch() color space is a better choice, equal angular steps look like equal perceptual hue steps. For picking a colour and grabbing a HEX, HSL is fine.

The classic harmonies, with the math

Every harmony scheme is defined by a set of angular offsets from a base hue. Let B be the hue you've selected:

Scheme	Hues	Mood
Monochromatic	B (vary S and L only)	Subtle, low-contrast, peaceful
Analogous	B − 30°, B, B + 30°	Rich, harmonious, sunsets, foliage
Complementary	B, B + 180°	Dynamic, attention-grabbing
Split-complementary	B, B + 150°, B + 210°	Strong contrast but softer than pure complementary
Triadic	B, B + 120°, B + 240°	Sharp contrast with balance and richness
Tetradic (rectangular)	B, B + 60°, B + 180°, B + 240°	Two complementary pairs, let one dominate
Square	B, B + 90°, B + 180°, B + 270°	Even four-way split, balance is harder

These angles are teaching conventions inherited from Goethe and Itten, not psychophysical laws. They reliably produce contrast and balance, which is why designers reach for them, but they're heuristics rather than rules. Treat the harmony swatches above as starting points to iterate from.

When you'd reach for a wheel

• Web and UI design. Pick a brand primary, derive a complement for the danger / call-to-action accent, derive a triadic third for charts. Then check the contrast against your background and text.
• Brand identity. A logo color plus a documented palette of harmonies for marketing collateral.
• Data visualisation. Categorical palettes (10+ distinct hues at equal perceptual distance) and sequential or diverging scales, better done in OKLCH than HSL once you go past three or four series.
• Interior design. A base wall color, an analogous trim, a complementary accent in cushions or art.
• Photography color grading. Teal-and-orange (a complementary pair) is the modern cinema cliché because warm skin tones against cool shadows read as cinematic.
• Game art and illustration. Hue-keying characters against environments, with complementary accents for focal points.

Color blindness and the wheel

Roughly 8% of men and 0.5% of women of Northern European descent have some form of color vision deficiency (the rate varies by population). The genes for the L- and M-cones sit on the X chromosome, which is why the condition is far more common in men. Several harmonies (particularly red/green complementary pairs) collapse to near-monochrome for the most common forms:

• Deuteranopia / deuteranomaly: non-functional or weak medium-wavelength cones. The most common form (about 6% of men). Red and green are confused.
• Protanopia / protanomaly: non-functional or weak long-wavelength cones (about 2% of men). Reds appear dimmed, sometimes confused with black.
• Tritanopia / tritanomaly: non-functional or weak short-wavelength cones. Very rare. Blues and yellows are confused.

WCAG 2.1's "do not rely on colour alone" principle is directly relevant: never use color as the only carrier of information. Add brightness contrast on top of hue contrast, use patterns or shapes alongside color in charts, and run any harmony you generate through a color-blindness simulator before committing. Also check WCAG contrast, minimum 4.5:1 for normal text at AA, 7:1 at AAA.

More questions

Why are red, yellow and blue called "primary" colors?

In the artistic / RYB tradition (the wheel Itten taught at the Bauhaus) they're the three pigments from which all others were assumed to be mixable. That assumption is convention rather than physics: no combination of real red, yellow and blue pigments can mix every visible color. In additive light the true primaries are red, green and blue (RGB); in subtractive print they're cyan, magenta and yellow (CMY). RYB persists in art education because it's pedagogically simple and gives reasonable results when mixing real-world paints.

Is 16:9 the same as the golden ratio for color?

No, those are two unrelated concepts. The "golden ratio" comes up in proportion (rectangles, layout) and equals roughly 1.618. Color theory's harmonies come from angular geometry on the hue circle: 180° for complementary, 120° for triadic, 90° for square. There's no golden-ratio harmony built into the standard color-wheel teaching.

Will the colors I see here match what gets printed?

Almost certainly not exactly. This wheel is HSL on top of sRGB, additive colour, designed for screens. Print is subtractive CMYK. Vivid blues and bright greens that look fine on a monitor often desaturate dramatically on paper, and out-of-gamut conversions can shift hues. Print designers usually keep a calibrated proof in front of them or work directly in CMYK in the design tool. Use this wheel for the screen mock-up, then convert.

Is "color psychology" (red = passion, blue = calm) based on real evidence?

It has folk strength but weak and culturally variable empirical support. Different cultures associate the same colors with very different ideas (white is a wedding color in Western Europe and a funeral color in parts of East Asia). Use color psychology as a design starting point and a vocabulary for talking to clients, not as a law.

Does anything get sent to a server?

No. The wheel is rendered in an HTML5 canvas; harmony angles are computed in JavaScript locally; HEX, RGB and HSL strings are written to your clipboard via the browser API. The page works offline once it's loaded.

Herramientas relacionadas