Rueda de colores
Arrastra por la rueda para elegir un color base y ve al instante sus armonías complementaria, análoga, triádica y otras. Cambia entre la rueda RGB de pantalla y la rueda RYB del pintor y copia los códigos HEX.
Última actualización:
Arrastra por la rueda (o usa las teclas de flecha cuando esté seleccionada) para mover el color base. La distancia al centro define la saturación.
Cómo usar Rueda de colores
- Elige un color base arrastrando por la rueda, escribiendo un código HEX o usando el selector de color; el control de brillo oscurece toda la rueda.
- Elige una armonía, como Complementaria, Triádica o Análoga; los colores correspondientes aparecen como marcadores en la rueda.
- Cambia la rueda a RYB si mezclas pintura o quieres las relaciones de color tradicionales de las clases de arte.
- Ajusta el ángulo para los esquemas análogo, complementario dividido y tetrádico.
- Copia un color haciendo clic en su muestra, o pulsa Copiar paleta o Exportar CSS para llevarte todos.
Las armonías de color de un vistazo
| Armonía | Ángulos de tono desde la base | Rojo en la rueda RGB | Rojo en la rueda RYB |
|---|---|---|---|
| Complementaria | 0°, 180° | #ff0000, #00ffff | rojo, verde |
| Análoga | −30°, 0°, +30° | #ff0080, #ff0000, #ff8000 | rojo violeta, rojo, rojo anaranjado |
| Triádica | 0°, 120°, 240° | #ff0000, #00ff00, #0000ff | rojo, amarillo, azul |
| Complementaria dividida | 0°, 150°, 210° | #ff0000, #00ff80, #0080ff | rojo, amarillo verdoso, azul verdoso |
| Tetrádica (rectángulo) | 0°, 60°, 180°, 240° | #ff0000, #ffff00, #00ffff, #0000ff | rojo, naranja, verde, azul |
| Cuadrada | 0°, 90°, 180°, 270° | #ff0000, #80ff00, #00ffff, #8000ff | rojo, amarillo anaranjado, verde, azul violeta |
| Monocromática | 0° con distinta saturación y brillo | tintes y sombras de un mismo tono | |
Cómo se construye la rueda
La rueda usa el modelo HSV: el ángulo es el tono (0° rojo arriba, aumentando en el sentido de las agujas del reloj), la distancia al centro es la saturación (gris en el centro, color pleno en el borde) y el control deslizante define el brillo (valor). Un color de la armonía se obtiene girando el ángulo de tono y manteniendo la saturación y el brillo, y luego convirtiéndolo de nuevo a RGB. Por ejemplo, el tono 90° con saturación y brillo máximos da R = 255 × 0.5 = 128, G = 255, B = 0, es decir, #80ff00.
En el modo RYB, los ángulos se miden en la rueda del pintor, que luego se traslada a tonos de pantalla: rojo 0° → 0°, naranja 60° → 35°, amarillo 120° → 60°, verde 180° → 120°, azul 240° → 240° y morado 300° → 285°, con una interpolación suave entre ellos. Por eso, en RYB el complementario del rojo es el verde y el del amarillo es el morado, como se enseña en clase de arte.
Consejos para usar las armonías
- Sigue la regla 60-30-10: un color dominante para aproximadamente el 60% del diseño, un color secundario para el 30% y un acento para el 10%.
- Los colores complementarios vibran cuando se colocan uno junto a otro con saturación máxima; baja la saturación o el brillo de uno de ellos para textos y fondos.
- Comprueba el contraste antes de usar colores de la armonía para texto; un comprobador de contraste te dice si una pareja cumple las pautas WCAG.
- Usa el esquema monocromático en paneles y formularios donde importa más un color tranquilo y coherente que la variedad.
Preguntas frecuentes
¿Cuál es el color complementario del rojo?
En la rueda RGB de pantalla, el opuesto del rojo (#ff0000) es el cian (#00ffff). En la rueda RYB tradicional del pintor, el complementario del rojo es el verde. Cambia el menú Rueda para ver ambos.
¿Qué diferencia hay entre las ruedas de colores RGB y RYB?
La rueda RGB se basa en cómo mezclan la luz las pantallas, con rojo, verde y azul como primarios; es la adecuada para el diseño web y de apps. La rueda RYB es la rueda del artista, con rojo, amarillo y azul como primarios, y se usa para pintura y en las clases de teoría del color. Las armonías usan los mismos ángulos, pero los colores resultantes son distintos.
¿Qué son los colores triádicos?
Tres colores separados 120 grados en la rueda. En la rueda RGB, la tríada del rojo es verde y azul; en la rueda RYB es amarillo y azul. Las tríadas resultan llamativas, así que usa uno como color principal y los otros dos como acentos.
¿Cuándo debo usar colores análogos?
Los colores análogos están uno junto a otro en la rueda, por ejemplo a 30 grados. Crean diseños tranquilos y coherentes y son habituales en la naturaleza, como los naranjas y amarillos de una puesta de sol. Añade un neutro o un pequeño acento complementario para dar contraste.
¿Qué es un esquema complementario dividido?
En lugar del color directamente opuesto a la base, usa los dos colores situados a cada lado de él (por defecto a 30 grados). Mantienes un contraste fuerte, pero con menos tensión que un par complementario puro.
¿Por qué los colores de la armonía comparten saturación y brillo?
Las armonías se definen por ángulos de tono, así que la herramienta mantiene la saturación y el brillo de tu color base en todos los colores. Usa el esquema monocromático para variaciones más claras y más oscuras, o ajusta cualquier color en un generador de tonalidades.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.