# Cómo usar una rueda de color para elegir una paleta [Canonical HTML page](https://gradiently.design/es/guide/color-wheel) La rueda de color es la herramienta más antigua del color y sigue siendo la más útil. Cómo leer una, por qué la rueda del pintor y la de pantalla no coinciden y cómo convertirla en una paleta. ## The short version - Una rueda de color ordena los tonos en un círculo para que las relaciones entre ellos, como opuestos y vecinos, se vean con facilidad. - La rueda del pintor usa rojo, amarillo y azul como primarios, mientras que la de pantalla usa rojo, verde y azul, así que sus colores opuestos difieren. - Las armonías de color, como complementaria, análoga y triádica, son posiciones fijas en la rueda. - Una rueda solo muestra el tono, así que toda paleta sacada de ella sigue necesitando versiones claras y oscuras para el texto y los fondos. - Las ruedas digitales sencillas no son uniformes a la vista: con el mismo ajuste, el amarillo se ve mucho más claro que el azul. Una **rueda de color** (o círculo cromático) ordena los tonos en un círculo, en el orden en que aparecen en un arcoíris, con los extremos unidos. Su valor es que las relaciones se vuelven geometría: los colores opuestos contrastan con fuerza, los colores contiguos se mezclan con facilidad y los colores espaciados por igual alrededor del círculo se equilibran. Para usarla, eliges un tono de partida y después escoges los acompañantes por su posición. Esta guía cubre cómo está construida la rueda, en qué rueda confiar, cómo leer las armonías en ella y cómo pasar de unos pocos tonos a una paleta utilizable. Para ver el panorama más amplio, empieza por la [teoría del color básica](https://gradiently.design/es/guide/color-theory-basics). ## Colores primarios, secundarios y terciarios Toda rueda empieza con tres primarios. Mezclar dos primarios da un secundario, y mezclar un primario con un secundario contiguo da un terciario. Tres primarios, tres secundarios y seis terciarios forman la conocida rueda de doce segmentos. La rueda del pintor (RYB): `conic-gradient(from 0deg, #d7263d, #e8572a, #f28c28, #f6b82f, #f4e04d, #9bc53d, #3a9d4a, #1b8a8f, #2156a5, #4b3a9a, #7b2d8e, #b0266f, #d7263d)` Doce tonos de la rueda tradicional de rojo, amarillo y azul, dibujados con un [degradado cónico](https://gradiently.design/es/guide/conic-gradient). El rojo está arriba y el círculo avanza en el sentido de las agujas del reloj. ## La rueda del pintor y la rueda de pantalla Hay dos ruedas de uso común, y no coinciden. La rueda del pintor se basa en rojo, amarillo y azul (RYB), de la mezcla de pigmentos. Las pantallas crean el color con luz roja, verde y azul (RGB), y una rueda hecha con ellos tiene primarios, secundarios y opuestos distintos. | Propiedad | Rueda del pintor (RYB) | Rueda de pantalla (RGB) | | --- | --- | --- | | Primarios | Rojo, amarillo, azul | Rojo, verde, azul | | Secundarios | Naranja, verde, violeta | Amarillo, cian, magenta | | Opuesto del rojo | Verde | Cian | | Opuesto del azul | Naranja | Amarillo | | Opuesto del amarillo | Violeta | Azul | | La usan | Pintores, educación artística, muchas guías de paletas | Selectores de color, valores de tono en CSS, la mayoría del software de diseño | La misma idea, distinta geometría. Comprueba qué rueda usa una guía antes de seguirla. La rueda de pantalla (RGB): `conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)` El círculo de tonos detrás de los selectores de color y de HSL. El amarillo está a una sexta parte del giro, el cian frente al rojo. ¿Cuál usar? Para el trabajo digital, la rueda de pantalla coincide con tus herramientas, así que los números de tono que escribes concuerdan con lo que ves. La rueda del pintor suele dar opuestos más agradables, como azul y naranja, porque reparte los colores cálidos con más generosidad. Muchos diseñadores leen las armonías en la rueda del pintor y luego eligen los valores exactos en pantalla. Cualquiera sirve mientras seas coherente. ## Leer las armonías de color en la rueda Las armonías son formas superpuestas a la rueda. Gira la forma y obtienes una paleta nueva con el mismo equilibrio. - **Complementaria:** dos tonos justo opuestos. Contraste máximo. Mira los [colores complementarios](https://gradiently.design/es/guide/complementary-colors). - **Análoga:** de tres a cinco vecinos seguidos. Tranquila y natural. Mira los [colores análogos](https://gradiently.design/es/guide/analogous-colors). - **Triádica:** tres tonos separados un tercio del círculo. Atrevida pero equilibrada. Mira los [colores triádicos](https://gradiently.design/es/guide/triadic-colors). - **Complementaria dividida:** un tono más los dos que hay a cada lado de su opuesto. Contraste con menos tensión. - **Cuadrada o tetrádica:** cuatro tonos a igual distancia, o dos pares complementarios. Rica y difícil de controlar. - **Monocromática:** un tono en muchas luminosidades. Mira las [paletas monocromáticas](https://gradiently.design/es/guide/monochromatic-color-scheme). - Azul: #2156a5 - Naranja (complementario): #f28c28 - Azul verdoso (vecino): #1b8a8f - Azul violáceo (vecino): #4b3a9a - Rojo (tríada): #d7263d - Amarillo (tríada): #f4e04d Partiendo del azul en la rueda del pintor: su complementario, sus dos vecinos y los otros dos puntos de su tríada. ## Lo que la rueda de color no muestra Una rueda muestra el tono. No dice nada de la luminosidad ni de la saturación, y eso decide la mayor parte de cómo se ve de verdad una paleta. El azul y el naranja a plena intensidad juntos resultan duros. Un azul marino profundo con un albaricoque suave usa los mismos dos tonos y se ve refinado. Toda paleta que leas en una rueda sigue necesitando un oscuro, un claro y versiones más suaves de sus colores. - Azul y naranja, a plena intensidad: `linear-gradient(90deg, #0000ff 0%, #0000ff 50%, #ff8000 50%, #ff8000 100%)` - Mismos tonos: marino y albaricoque: `linear-gradient(90deg, #14213d 0%, #14213d 50%, #f4b183 50%, #f4b183 100%)` La rueda te da los tonos. La luminosidad y la saturación deciden si combinan bien. ### Las ruedas digitales sencillas son desiguales En HSL, el amarillo puro y el azul puro comparten el mismo valor de luminosidad, y aun así el amarillo se ve mucho más brillante. Eso pasa porque HSL se basa en los canales de la pantalla, no en cómo perciben el brillo los ojos. Los espacios de color perceptuales como OKLCH lo corrigen: los mismos valores de luminosidad se ven igual de claros en todos los tonos, lo que los hace mejores para construir paletas y [degradados suaves](https://gradiently.design/es/guide/css-gradient-oklch). ## Cómo construir una paleta con la rueda de color 1. **Elige tu tono ancla** Empieza con el color que tiene que estar: un color de marca, de producto o uno sacado de una foto. 2. **Elige una armonía según el ambiente** Análoga o monocromática para la calma; complementaria, complementaria dividida o triádica para la energía. 3. **Deja que un color lidere** Usa el ancla para la mayor parte del diseño y los demás en cantidades menores. Cantidades iguales de todos los colores pocas veces parecen intencionadas. 4. **Varía la luminosidad y la saturación** Añade una versión oscura y otra clara y suaviza los colores de apoyo. Esto es lo que convierte tonos en una paleta. 5. **Prueba en una composición real** Ponle texto encima, comprueba el contraste y míralo al tamaño con que lo verá la gente. Cuando una paleta funciona como muestras, pruébala como degradado. Los tonos vecinos se mezclan de maravilla; los tonos opuestos necesitan un color intermedio. Las [combinaciones de colores para degradados](https://gradiently.design/es/guide/gradient-color-combinations) tienen ejemplos probados. ## FAQ ### ¿Qué es una rueda de color? Una rueda de color es un círculo de tonos en orden espectral que muestra cómo se relacionan los colores: los opuestos contrastan, los vecinos arman armonía y los tonos a igual distancia se equilibran. ### ¿Cuáles son los colores primarios en la rueda de color? En la rueda tradicional del pintor son rojo, amarillo y azul. En la rueda de pantalla que usan las herramientas digitales son rojo, verde y azul. ### ¿Por qué los colores complementarios son distintos en ruedas distintas? La rueda del pintor y la de pantalla tienen primarios distintos, así que el círculo se reparte de otra forma. En la rueda del pintor el opuesto del azul es el naranja; en la de pantalla es el amarillo. ### ¿Qué rueda de color deben usar los diseñadores? Para el trabajo digital, la rueda de pantalla coincide con tus herramientas. Muchos diseñadores leen las armonías en la rueda del pintor y eligen los valores exactos en pantalla. La coherencia importa más que la elección.