← Back to list

El sistema de color detrás de Revista SIX

Cómo transformamos los seis colores de la bandera arcoíris en un sistema cromático flexible para marca, comunicación y producto digital

Alejandro Castro Medina · 2026-05-17 07:15 · 2 claps · 4.1 min read
#design #colors #rainbow #lgbtq #art-direction
Open on Medium ↗
Wiki topics: DSN · Design · General ✊ · Equality & Identity

El sistema de color detrás de Revista SIX

Cómo transformamos los seis colores de la bandera arcoíris en un sistema cromático flexible para marca, comunicación y producto digital

El 17 de mayo se celebra el Día Internacional contra la LGTBIfobia. Una fecha que no solo sirve para señalar la discriminación que todavía existe hacia las personas LGTBIQ+, sino también para reivindicar la importancia de los espacios culturales, editoriales y digitales que contribuyen a generar representación.

Uno de los principales retos de diseño para la Revista SIX consistía en construir un sistema visual reconocible, flexible y coherente que pudiera funcionar en distintos soportes. Desde el producto digital hasta redes sociales, piezas editoriales y comunicación de marca.

La decisión fue partir del elemento más universalmente reconocible de la cultura queer: los seis colores básicos de la bandera arcoíris.

No queríamos utilizar la bandera únicamente como un recurso gráfico. El objetivo era convertirla en un sistema operativo de diseño.

El punto de partida: seis colores en estado puro

Definimos seis colores base. Cada uno representa una tonalidad principal de la bandera y funciona como el valor máximo de saturación dentro del sistema.

Estos valores se establecieron como nivel 100, es decir, su estado puro.

Colores de la bandera arcoíris en su estado puro

Colores de la bandera arcoíris en su estado puro

A partir de aquí, el objetivo ya no era diseñar una colección de colores, sino construir una lógica.

Construir profundidad a partir de la luminosidad

Para cada color establecimos seis niveles de luminosidad: 100 para su estado puro, 80 para 20% de blanco, 60 para 40% de blanco, 40para 60% de blanco, 20 para 80% de blanco y 10 para 90% de blanco.

Seis colores por seis niveles de luminosidad

Seis colores por seis niveles de luminosidad

Este proceso nos permitió generar una escala cromática homogénea y predecible.

El resultado final fueron 36 colores organizados dentro de un mismo sistema matemático y visual.

Dividir la paleta para crear reglas

Una vez construida la escala completa, el siguiente paso consistió en establecer relaciones entre colores.

Primero trazamos un eje horizontal que dividía la paleta en dos grandes grupos:

Colores cálidos

Rojo, naranja y amarillo.

Colores fríos

Verde, azul y morado.

División de la paleta en dos grandes grupos: cálidos y fríos.

División de la paleta en dos grandes grupos: cálidos y fríos.

A partir de esta división establecimos la primera regla del sistema:

Un color frío puede combinarse con cualquiera de los tres colores cálidos, y viceversa.

Esto nos permitía mantener contraste, tensión visual y riqueza cromática sin perder coherencia. Por ejemplo, morado con rojo, azul con naranja o verde con amarillo.

Separar tonos claros y oscuros

Después añadimos un segundo eje vertical para dividir la paleta según luminosidad.

Tonos oscuros

100, 80 y 60.

Tonos claros

40, 20 y 10.

Una seguda división vertical para separar tonos claros y oscuros

Una seguda división vertical para separar tonos claros y oscuros

Esta segunda división generaba cuatro cuadrantes:

  • Cálidos oscuros: rojos, naranjas y amarillos, 100, 80 y 60
  • Cálidos claros: rojos, naranjas y amarillos, 40, 20 y 10
  • Fríos oscuros: verdes, azules y morados, 100, 80 y 60
  • Fríos claros: verdes, azules y morados, 40, 20 y 10

En este punto la paleta dejaba de ser únicamente un conjunto de colores y se convertía en una herramienta de composición.

El sistema final de combinaciones

La última decisión fue establecer un sistema de emparejamiento cruzado entre cuadrantes opuestos.

Las reglas finales quedaron así:

  • Colores cálidos claros con colores fríos oscuros.
  • Colores cálidos oscuros con colores fríos claros.

Por ejemplo, amarillos claros con azules saturados, rojos intensos con verdes suaves o naranjas luminosos con morados profundos.

Emparejamiento cruzado entre cuadrantes opuestos

Emparejamiento cruzado entre cuadrantes opuestos

Este cruce permitía mantener contraste visual, evitar combinaciones planas y generar una identidad dinámica sin necesidad de definir composiciones cerradas.

El sistema podía crecer y adaptarse a distintos formatos manteniendo siempre la misma lógica interna.

Una paleta pensada como lenguaje

La mayoría de sistemas cromáticos se construyen buscando consistencia visual. En SIX queríamos además construir significado.

Partir de la bandera arcoíris no era solamente una decisión estética. Era una forma de integrar la identidad queer dentro de la estructura misma del producto.

La paleta no funciona como decoración. Funciona como lenguaje.

Y precisamente por eso necesitaba reglas, relaciones y límites.

Porque cuando un sistema visual está bien construido, la identidad no depende de repetir siempre las mismas piezas, sino de mantener coherencia incluso cuando cambia el contexto.

Paleta de colores completa

Paleta de colores completa

Nota sobre accesibilidad Somos conscientes de que muchas de las combinaciones resultantes no cumplen los estándares de contraste establecidos por las WCAG para interfaces digitales. Por ese motivo, estas combinaciones no se utilizaron para representar información crítica ni elementos funcionales esenciales dentro del producto digital. La paleta se aplicó principalmente en contextos editoriales, gráficos, expresivos y de comunicación de marca, mientras que los componentes de interfaz y lectura priorizaron combinaciones accesibles y contrastes validados.


메타데이터
post_id
d7a7037e7ca9
slug
el-sistema-de-color-detrás-de-revista-six-d7a7037e7ca9
url
https://medium.com/@aa.castro.medina/el-sistema-de-color-detr%C3%A1s-de-revista-six-d7a7037e7ca9
canonical_url
https://medium.com/@aa.castro.medina/el-sistema-de-color-detr%C3%A1s-de-revista-six-d7a7037e7ca9
author_url
https://medium.com/@aa.castro.medina
status
ok
fetched_at
2026-06-09 15:37:30