Los colores del arcoíris son los siete tonos en los que se descompone la luz blanca al atravesar gotas de agua: rojo, naranja, amarillo, verde, azul, índigo y violeta (el famoso acrónimo ROYGBIV en inglés). Si trabajas en diseño, desarrollo web o ilustración digital, ese dato de manual no basta: necesitas el código HEX exacto de cada tono, su equivalente en RGB y una calculadora de colores online que convierta esos valores en segundos. Esta guía reúne esa información técnica junto con las herramientas prácticas para aplicarla hoy mismo en tu proyecto.
Contenidos
¿Cuáles son exactamente los 7 colores del arcoíris?
El orden es siempre el mismo: rojo, naranja, amarillo, verde, azul, índigo y violeta. Isaac Newton fijó esta secuencia en el siglo XVII a partir de sus experimentos con prismas, cuando dividió la luz solar en su espectro visible según la longitud de onda de cada color (el rojo tiene la onda más larga, el violeta la más corta).
Esta base de teoría del color básica se aplica de forma directa en el diseño: cada tono transmite una sensación distinta y esa carga simbólica pesa a la hora de construir una marca o una interfaz.
- Rojo: energía, urgencia, llamadas a la acción.
- Naranja: cercanía, entusiasmo, botones secundarios.
- Amarillo: atención inmediata, alertas, optimismo.
- Verde: crecimiento, confirmación, naturaleza.
- Azul: confianza, calma, la elección más usada en marcas tecnológicas.
- Índigo: profundidad, misterio, poco frecuente en interfaces por su cercanía visual con el azul.
- Violeta: creatividad, lujo, innovación en el sentido creativo del término.
Actividad práctica: elige tres colores de esta lista y piensa en una marca real que los use como color principal. Comprobarás que la elección casi nunca es casual.
Herramientas esenciales
Conocer el nombre de un color sirve de poco si tu editor de código o tu programa de diseño solo aceptan valores numéricos. Aquí entra en juego el conversor de colores web, una herramienta que traduce un tono entre sus distintos formatos sin errores de cálculo manual.
Conversores de código HEX a RGB
Cada color del arcoíris tiene un código HEX de referencia habitual:
- Rojo:
#FF0000(255, 0, 0) - Naranja:
#FF7F00(255, 127, 0) - Amarillo:
#FFFF00(255, 255, 0) - Verde:
#00FF00(0, 255, 0) - Azul:
#0000FF(0, 0, 255) - Índigo:
#4B0082(75, 0, 130) - Violeta:
#8F00FF(143, 0, 255)
Una calculadora de conversión te permite pegar cualquiera de estos códigos HEX colores arcoíris y obtener de inmediato su versión RGB, HSL o CMYK, algo imprescindible cuando un mismo proyecto combina CSS, impresión y aplicaciones móviles con distintos perfiles de color.
Actividad práctica: copia el código #8F00FF en una calculadora de conversión de color y comprueba que el resultado en RGB coincide con (143, 0, 255). Repite el ejercicio con el resto de la tabla hasta memorizar los valores que uses con más frecuencia.
Generadores de paletas y gradientes
Un segundo tipo de herramienta, el generador de gradientes arcoíris, sirve para crear transiciones suaves entre estos siete tonos sin que se noten cortes bruscos de color. El proceso habitual es fijar el color de inicio y el de fin (por ejemplo, rojo y violeta) y dejar que la calculadora reparta los tonos intermedios de forma proporcional.
Esto da lugar a una paleta de colores RGB lista para copiar en CSS con una sola línea:
css
background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #4B0082, #8F00FF);Con este código obtienes un gradiente tipo arcoíris que se puede aplicar a un fondo, un botón o un borde decorativo sin diseñar nada a mano.
Cómo usar una calculadora de contraste para los colores del arcoíris
El espectro completo del arcoíris incluye colores muy claros (amarillo, verde) que fallan en accesibilidad cuando se usan como texto sobre fondo blanco. Las pautas WCAG piden una relación de contraste mínima de 4.5:1 para texto normal, y comprobarlo a ojo casi nunca funciona.
Una calculadora de contraste online (como la de WebAIM) resuelve esto en un paso: introduces el color de texto y el de fondo, y la herramienta indica si la combinación aprueba o suspende la norma. Antes de publicar un diseño con estos tonos, comprueba en concreto dos combinaciones:
- Texto amarillo (
#FFFF00) sobre fondo blanco: no pasa el contraste mínimo. - Texto verde (
#00FF00) sobre fondo blanco: tampoco cumple.
La solución habitual pasa por oscurecer el tono (por ejemplo, un amarillo mostaza en lugar del amarillo puro) o por reservar esos colores para elementos grandes y decorativos, nunca para párrafos de lectura.
Preguntas frecuentes sobre los colores del arcoíris
El índigo se representa habitualmente como #4B0082, equivalente a (75, 0, 130) en RGB. Al ser un tono poco estandarizado, distintas fuentes de diseño ofrecen variantes cercanas a este valor.
Sí. Los mezcladores de color online funcionan con el modelo RGB o HSL y permiten combinar dos tonos del espectro (por ejemplo, azul y amarillo) para obtener el color resultante junto con su código exacto, algo que resulta mucho más preciso que mezclar pintura física.
Basta con usar la propiedad color o background-color seguida del código HEX o de la función rgb():
css.arcoiris { color: #4B0082; background-color: #FFFF00; }
También puedes definir variables CSS con cada tono del arcoíris para reutilizarlos en toda una hoja de estilos sin repetir el código HEX en cada regla.
Prueba nuestra calculadora de conversión de colores gratuita aquí y guarda los siete códigos de esta guía en un solo clic. Si ya tienes claros los tonos, el siguiente paso lógico es visitar el generador de paletas para construir una combinación propia, o el selector de color si necesitas ajustar un tono concreto pixel a pixel. Nuestra guía de CSS amplía el ejemplo del gradiente con casos reales de botones y fondos.
Fuentes y referencias
- NASA Science, sobre el espectro visible de la luz: https://science.nasa.gov/
- Science Learning Hub (Nueva Zelanda), sobre la luz visible y el color: https://www.sciencelearn.org.nz/
- WebAIM Contrast Checker, para comprobar el contraste WCAG de cualquier combinación de color: https://webaim.org/resources/contrastchecker/
