246
Familia · rojoBluenze · Paletas
Paletas por color
Colores que combinan con el rojo
114 combinaciones en el libro
Es el color que más rápido llega al ojo, y por eso el más fácil de estropear: puesto en todas partes deja de significar nada.
Carta · Los 24 rojos del libroHaishoku Sōkan · 1933
- Rosa fresa#f29381En una combinación
- Coral vivo#f28f87En 4 combinaciones
- Rosa orquídea#d097adEn 4 combinaciones
- Malva envejecido#be9f9eEn 10 combinaciones
- Rosa eosina#ef7e96En 14 combinaciones
- Rosa granadina#ef7d64En 10 combinaciones
- Lila#c088b2En 4 combinaciones
- Rosa chicle intenso#ed6d8fEn 7 combinaciones
- Rosa antiguo#d56878En 4 combinaciones
- Rojo anaranjado vivo#e94e24En 8 combinaciones
- Rojo jaspe#e44511En 4 combinaciones
- Magenta violáceo#c2518dEn 3 combinaciones
- Rojo anaranjado#d83416En 5 combinaciones
- Rojo puro#dc0c15En 4 combinaciones
- Fucsia violáceo#c73463En 2 combinaciones
- Escarlata#cb2438En 3 combinaciones
- Púrpura magenta#b9366cEn 6 combinaciones
- Carmín#c8082dEn 8 combinaciones
- Rojo ladrillo#ab3c16En 5 combinaciones
- Púrpura berenjena#93495fEn 4 combinaciones
- Granada oscuro#ba164fEn 2 combinaciones
- Vino tinto apagado#844859En 7 combinaciones
- Rojo pompeyano#ad1e31En 6 combinaciones
- Berenjena oscuro#713d51En 2 combinaciones
De claro a oscuro. Pulsa uno y el libro se rehace desde ese color.
Capítulo 1 · Qué combinaEscrito, no generado
Qué combina con el rojo
El rojo es el que menos superficie necesita para hacerse notar. Un rojo ocupando media pantalla no es intenso, es agotador; el mismo rojo en el 5 % de la superficie es una marca. Hay dos familias que se comportan distinto: los rojos cálidos, con naranja dentro, que dicen energía y comida; y los rojos fríos, con azul, que dicen lujo y drama.
Lo mejor que se le puede poner al lado es un neutro grande: crema, hueso, gris piedra, negro. Después, si hace falta un tercero, el verde oliva y el azul marino son las dos apuestas seguras — la primera porque es su complementario suavizado, la segunda porque le da profundidad sin discutirle el protagonismo. Wada casi nunca pone dos rojos juntos, y es un buen consejo.
En pantalla hay una trampa: el rojo también es el color de los errores. Si tu acento es rojo, tus mensajes de error necesitan otro rojo distinto —más oscuro o más apagado— o la gente no sabrá si algo ha fallado. Y el rojo puro sobre negro vibra: si tu marca es de fondo oscuro, tira a coral o a teja.
La tarjeta · Para compartir1200 × 630
Cinco paletas con el rojo, con su porqué.
Dos salen del diccionario de Wada y tres de reglas de armonía con nombre. Cada una viene con los papeles puestos —qué color es el fondo, cuál el texto y cuál el botón—, pintada a tamaño de página y con el contraste medido. Si quieres tu tono exacto, cámbialo en la herramienta.
Ver las cinco ↓Todas las combinaciones del diccionario →Ir a la herramienta →
Capítulo 2 · Cinco láminas con el rojo
Capítulo 2 · Del libroHaishoku Sōkan · 1933
Capítulo 2 · Por reglaArmonías con nombre
Por regla
Tres láminas construidas desde el rojo con una regla que se puede explicar: la opuesta, las vecinas o un solo tono con acento. Ninguna sale de un dado.
R·01
R·02
R·03
Tira: los colores a partes iguales, como en los muestrarios de kimono. Es la lectura más rápida para comparar.
Lámina 01 de 05 · Combinación 246 de Wada
Las cinco ↑La lámina, tal cualHaishoku Sōkan · 1933
Combinación 246 de Wada
- Rosa chicle#f7bdc3
- Rojo ladrillo#ab3c16
- Amarillo azufre#f8f0c8
- Canela claro#fcca7f
Contiene un color muy parecido al rojo de partida (Rojo ladrillo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Rosa chicle · Rojo ladrillo · Amarillo azufre · Canela claro. Dos amarillos, un rojo y un rosa, con una diferencia de luz clara pero cómoda. Paleta de color franco y toda cálida. Hay dentro una pareja que aguanta texto normal (contraste máximo 5,4:1).
4 colores a partes iguales, como en el libro. Es la inspiración, no la interfaz. Pulsa uno para copiarlo.
Carta · MezclasTres partes y una
Los cuatro colores, mezclados dos a dos
- 3 partes de rosa chicle1 de rojo ladrillo
- 3 partes de rojo ladrillo1 de amarillo azufre
- 3 partes de amarillo azufre1 de canela claro
- 3 partes de canela claro1 de rosa chicle
- 3 partes de rosa chicle1 de amarillo azufre
- 3 partes de rojo ladrillo1 de canela claro
- 3 partes de amarillo azufre1 de rosa chicle
- 3 partes de canela claro1 de rojo ladrillo
- 3 partes de rosa chicle1 de canela claro
- 3 partes de rojo ladrillo1 de rosa chicle
- 3 partes de amarillo azufre1 de rojo ladrillo
- 3 partes de canela claro1 de amarillo azufre
De aquí salen los intermedios que la lámina no trae: bordes, fondos de tarjeta, estados apagados. La mezcla se hace en OKLab, que se parece más a mezclar pintura que a promediar números. Pulsa el resultado para copiarlo.
En pantalla · el reparto60 · 30 · 10
Adaptada a pantalla
El mismo matiz que la lámina con la luz movida a donde una interfaz la necesita: el fondo descansa, la superficie se queda con el color del libro y el acento se gana el botón. Cada papel dice de qué color sale y qué se le hizo. Pulsa cualquiera para copiarlo.
- 60 % FondoDonde descansa la vista: la mayor parte de la pantalla. El #f8f0c8 de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. El #f8f0c8 de la lámina, oscurecido.
- 10 % AcentoSolo lo que se pulsa. El #fcca7f de la lámina, oscurecido.
Los papeles que la lámina no trae
Medido, antes y después
- En la lámina, el mejor par de colores se lee a 5,4:1: AA, se lee.Cumple
- En pantalla, el texto #2e211c sobre el fondo #f9f5e4 da 14,2:1: AAA, se lee de sobra. En APCA da Lc 96: vale para texto pequeño, del de leer un párrafo entero.Cumple
- El acento #b0853d se separa 3,0:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,6:1 (una palabra necesita 4,5:1).Cumple
- Con deuteranopia, tu acento y tu fondo se quedan en 2,9:1. El botón deja de despegarse: dale un borde, cambia la luz o no confíes solo en el color para señalarlo.No llega
Puesta en el mundoAdaptada
Así se ve esta lámina cuando ocupa una pantalla entera.
Este párrafo está aquí para que veas el texto de verdad sobre el fondo de verdad, que es donde se cae la mitad de las paletas bonitas. Si te cuesta leerlo, ya lo sabes. Y así se ve un enlace.
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Cómo usarla
- El repartoReparte, no iguales: #f9f5e4 en el 60 % de la pantalla, #e7dfb7 en el 30 % (tarjetas, franjas, cabeceras) y #b0853d en el 10 %, solo en botones y enlaces. Un color pierde fuerza cuanta más superficie ocupa; lo que en la lámina se ve intenso, a pantalla completa se suaviza.
- El textoEl párrafo va en #2e211c, una tinta casi neutra teñida del tono de la paleta, aunque en la lámina hubiera un par que se leía: un color saturado como texto cansa a la tercera línea. El color del libro entra por el titular, en #ab3c16, donde el tamaño perdona.
- El botónEl acento #b0853d se separa 3,0:1 del fondo: sirve de botón, con el texto en #2e211c.
- La temperaturaToda cálida: da cercanía y unidad, pero para destacar algo no cuentes con el color, cuenta con la luz: lo importante, más oscuro o más claro que lo que lo rodea.
- CuántosCuatro colores piden disciplina: #e7dfb7 y #ab3c16 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
- En el diccionarioEn el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las de varios niveles de luz: ya trae jerarquía. Respétala en la pantalla: el más claro detrás, el más oscuro delante.
El kit · rampas y estadosPara el sistema de diseño
El kit
Una marca necesita cuatro colores; una interfaz necesita bastante más. Esto es lo que hay que inventarse a mano cuando te llevas cuatro hexadecimales y llegas al editor.
Cada muestra se copia al pulsarla.
Las luces del acento
Los neutros, teñidos del acento
Estados de un botón y avisos
El kit · noche y código246
La misma lámina, de noche
El mismo color, de noche.
El fondo no es negro puro: lleva un poco del tono del acento. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
Un botónLlévatela
/* Combinación 246 de Wada — bluenze.com/paletas */
:root {
--fondo: #f9f5e4;
--superficie: #e7dfb7;
--texto: #2e211c;
--tinta: #2e211c;
--texto-suave: #735f58;
--titular: #ab3c16;
--acento: #b0853d;
--acento-texto: #2e211c;
--enlace: #8e671f;
--borde: #d6d2be;
--apoyo-1: #f7bdc3;
/* la lámina de Wada, tal cual */
--lamina-1: #f7bdc3;
--lamina-2: #ab3c16;
--lamina-3: #f8f0c8;
--lamina-4: #fcca7f;
--acento-50: #fff5e9;
--acento-100: #fae8d3;
--acento-200: #eed3b1;
--acento-300: #dbb988;
--acento-400: #c59c5e;
--acento-500: #b0853d;
--acento-600: #8f6923;
--acento-700: #725114;
--acento-800: #553b09;
--acento-900: #392701;
--neutro-50: #f7f6f5;
--neutro-100: #edebe8;
--neutro-200: #dad7d3;
--neutro-300: #c2bdb8;
--neutro-400: #a8a29c;
--neutro-500: #8e8880;
--neutro-600: #756f67;
--neutro-700: #5b5650;
--neutro-800: #433f3a;
--neutro-900: #2d2926;
--boton: #b0853d;
--boton-encima: #9c732c;
--boton-pulsado: #876323;
--boton-apagado: #dbd1c5;
--foco: #b9820d;
--exito: #3b7a3a;
--aviso: #a08a3a;
--error: #ad5240;
--info: #1270b8;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #282015;
--superficie: #372d1f;
--borde: #514535;
--texto: #f3ede5;
--tinta: #f3ede5;
--texto-suave: #b7afa7;
--acento: #ba8e46;
--acento-texto: #29231b;
}
}La lectura de GoetheQué transmite
Qué transmite esta combinación, y por qué.
Wada dice qué colores van juntos. Goethe, cien años antes, explica por qué una combinación significa algo o no significa nada, y qué hace cada color según cuánta pantalla ocupe. Su círculo tiene seis colores y tres oposiciones, y cada veredicto de aquí abajo lleva el parágrafo del libro donde está.
Qué transmite, según dónde cayó cada color
Toda la paleta cae en el lado activo del círculo: los colores que avanzan, calientan y empujan hacia fuera.
- Superficie · amarillo
El amarillo en superficie grande es una apuesta. Es el color que menos perdona: un desvío mínimo hacia el verde lo pasa de oro a sucio, y en pantalla ese desvío lo pone una compresión o un degradado. § 770
- Acento · amarillo
El amarillo señala, pero pierde en cuanto el soporte deja de ser liso y brillante. En pantalla eso son las sombras, los degradados y la letra pequeña encima. § 771
- Titular · naranja
El naranja en mancha pequeña es el acento que menos hay que explicar: avanza, se ve, y no necesita tamaño para hacerlo. § 775
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Vecinas #f7bdc3 · #ab3c16
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
- Características #f7bdc3 · #f8f0c8
Amarillo y rojo, con el naranja saltado entre medias. Es la pareja característica que mejor le parece: serena y magnífica. § 820
- Características #f7bdc3 · #fcca7f
Amarillo y rojo, con el naranja saltado entre medias. Es la pareja característica que mejor le parece: serena y magnífica. § 820
- Vecinas #ab3c16 · #f8f0c8
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
- Vecinas #ab3c16 · #fcca7f
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
- Mismo sector #f8f0c8 · #fcca7f
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
Criterio tomado de Zur Farbenlehre (1810), en la traducción de Eastlake de 1840, que es de dominio público. Las explicaciones son nuestras: del libro se toma la sustancia, no la redacción. Los valores de luz que suelen atribuirse a Goethe para calcular proporciones de superficie no están en la Farbenlehre — son de Itten, 1961, y así se acreditan en las reglas de adaptación.
Lámina 02 de 05 · Combinación 322 de Wada
Las cinco ↑La lámina, tal cualHaishoku Sōkan · 1933
Combinación 322 de Wada
- Rojo puro#dc0c15
- Rojo ladrillo#ab3c16
- Azul violeta vivo#674696
- Magenta violáceo#c2518d
Contiene un color muy parecido al rojo de partida (Rojo ladrillo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Rojo puro · Rojo ladrillo · Azul violeta vivo · Magenta violáceo. Dos rojos, un magenta y un violeta, con poca diferencia de luz entre ellos. Paleta muy encendida y con la tensión de mezclar cálidos y fríos. Ninguna pareja se lee encima de otra: pide un blanco o un negro de fuera (contraste máximo 1,7:1).
4 colores a partes iguales, como en el libro. Es la inspiración, no la interfaz. Pulsa uno para copiarlo.
Carta · MezclasTres partes y una
Los cuatro colores, mezclados dos a dos
- 3 partes de rojo puro1 de rojo ladrillo
- 3 partes de rojo ladrillo1 de azul violeta vivo
- 3 partes de azul violeta vivo1 de magenta violáceo
- 3 partes de magenta violáceo1 de rojo puro
- 3 partes de rojo puro1 de azul violeta vivo
- 3 partes de rojo ladrillo1 de magenta violáceo
- 3 partes de azul violeta vivo1 de rojo puro
- 3 partes de magenta violáceo1 de rojo ladrillo
- 3 partes de rojo puro1 de magenta violáceo
- 3 partes de rojo ladrillo1 de rojo puro
- 3 partes de azul violeta vivo1 de rojo ladrillo
- 3 partes de magenta violáceo1 de azul violeta vivo
De aquí salen los intermedios que la lámina no trae: bordes, fondos de tarjeta, estados apagados. La mezcla se hace en OKLab, que se parece más a mezclar pintura que a promediar números. Pulsa el resultado para copiarlo.
En pantalla · el reparto60 · 30 · 10
Adaptada a pantalla
El mismo matiz que la lámina con la luz movida a donde una interfaz la necesita: el fondo descansa, la superficie se queda con el color del libro y el acento se gana el botón. Cada papel dice de qué color sale y qué se le hizo. Pulsa cualquiera para copiarlo.
- 60 % FondoDonde descansa la vista: la mayor parte de la pantalla. El #674696 de la lámina, oscurecido.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. De la lámina, tal cual (#674696).
- 10 % AcentoSolo lo que se pulsa. De la lámina, tal cual (#dc0c15).
Los papeles que la lámina no trae
Medido, antes y después
- En la lámina, el mejor par de colores se lee a 1,6:1: no se lee.No llega
- En pantalla, el texto #f7ebf0 sobre el fondo #261f2d da 13,7:1: AAA, se lee de sobra. En APCA da Lc 94: vale para texto pequeño, del de leer un párrafo entero.Cumple
- El acento #dc0c15 se separa 3,1:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,7:1 (una palabra necesita 4,5:1).Cumple
- Con protanopia, tu acento y tu fondo se quedan en 2,0:1. El botón deja de despegarse: dale un borde, cambia la luz o no confíes solo en el color para señalarlo.No llega
Puesta en el mundoAdaptada
Así se ve esta lámina cuando ocupa una pantalla entera.
Este párrafo está aquí para que veas el texto de verdad sobre el fondo de verdad, que es donde se cae la mitad de las paletas bonitas. Si te cuesta leerlo, ya lo sabes. Y así se ve un enlace.
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Cómo usarla
- El repartoReparte, no iguales: #261f2d en el 60 % de la pantalla, #674696 en el 30 % (tarjetas, franjas, cabeceras) y #dc0c15 en el 10 %, solo en botones y enlaces. Un color pierde fuerza cuanta más superficie ocupa; lo que en la lámina se ve intenso, a pantalla completa se suaviza.
- El textoNingún par de la lámina se leía como texto (el mejor daba 1,6:1). Por eso el párrafo va en #f7ebf0, una tinta casi neutra teñida del tono de la paleta: no está en el libro y hace falta.
- El botónEl acento #dc0c15 se separa 3,1:1 del fondo: sirve de botón, con el texto en #f9f5fc.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #674696, y el acento #dc0c15 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #674696 y #f7ebf0 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
- En el diccionarioEn el diccionario está entre las de tono sobre tono: colores de una misma familia. La jerarquía la da la luz, no el matiz, así que ordena los elementos de más claro a más oscuro. Es de las densas: colores cargados que necesitan mucho aire alrededor; menos es más.
El kit · rampas y estadosPara el sistema de diseño
El kit
Una marca necesita cuatro colores; una interfaz necesita bastante más. Esto es lo que hay que inventarse a mano cuando te llevas cuatro hexadecimales y llegas al editor.
Cada muestra se copia al pulsarla.
Las luces del acento
Los neutros, teñidos del acento
Estados de un botón y avisos
El kit · noche y código322
La misma lámina, de día
El mismo color, de día.
La paleta nace oscura; esta es su versión clara. El fondo no es blanco puro: lleva un poco de su tono, igual que el oscuro no era negro.
Un botónLlévatela
/* Combinación 322 de Wada — bluenze.com/paletas */
:root {
--fondo: #261f2d;
--superficie: #674696;
--texto: #f7ebf0;
--tinta: #f7ebf0;
--texto-suave: #beacb4;
--titular: #d4619d;
--acento: #dc0c15;
--acento-texto: #f9f5fc;
--enlace: #fc4d39;
--borde: #4c4355;
--apoyo-1: #ab3c16;
/* la lámina de Wada, tal cual */
--lamina-1: #dc0c15;
--lamina-2: #ab3c16;
--lamina-3: #674696;
--lamina-4: #c2518d;
--acento-50: #f6f6f6;
--acento-100: #ebebeb;
--acento-200: #d7d7d7;
--acento-300: #ffa896;
--acento-400: #fc7e67;
--acento-500: #ff3e2e;
--acento-600: #dc0c15;
--acento-700: #b10a0f;
--acento-800: #840608;
--acento-900: #580a01;
--neutro-50: #f8f6f5;
--neutro-100: #eeeae9;
--neutro-200: #dcd6d4;
--neutro-300: #c5bcba;
--neutro-400: #aba19f;
--neutro-500: #928684;
--neutro-600: #786d6b;
--neutro-700: #5f5553;
--neutro-800: #463e3d;
--neutro-900: #2e2927;
--boton: #dc0c15;
--boton-encima: #f33026;
--boton-pulsado: #ff5842;
--boton-apagado: #4e332d;
--foco: #db1016;
--exito: #4ec251;
--aviso: #d3b41c;
--error: #fd8b74;
--info: #6baefe;
}
@media (prefers-color-scheme: light) {
:root {
--fondo: #fff2ef;
--superficie: #fde3dd;
--borde: #e9cbc4;
--texto: #2f201d;
--tinta: #2f201d;
--texto-suave: #725f5a;
--acento: #dc0c15;
--acento-texto: #fff4f2;
}
}La lectura de GoetheQué transmite
Qué transmite esta combinación, y por qué.
Wada dice qué colores van juntos. Goethe, cien años antes, explica por qué una combinación significa algo o no significa nada, y qué hace cada color según cuánta pantalla ocupe. Su círculo tiene seis colores y tres oposiciones, y cada veredicto de aquí abajo lleva el parágrafo del libro donde está.
Qué transmite, según dónde cayó cada color
La paleta cruza los dos lados del círculo, el activo y el pasivo. Es la que más tensión tiene y la que más necesita que uno de los dos mande.
- Superficie · violeta
Goethe lo dice sin rodeos: una superficie grande de violeta puro sería insoportable. Aquí aguanta porque la adaptación a pantalla le ha bajado el croma. En la lámina, a plena saturación, no aguantaría. § 790
- Acento · naranja
El naranja en mancha pequeña es el acento que menos hay que explicar: avanza, se ve, y no necesita tamaño para hacerlo. § 775
- Titular · rojo
El rojo es el punto más alto del lado activo. En mancha pequeña hace exactamente lo que se le pide a un acento: detener la vista una vez. § 793
Qué le pasa a esta paleta
#dc0c15 y #c2518d son vecinos en el círculo y solo los separan 5 puntos de luz. Es el fallo que Goethe describe sin ponerle nombre: colores bien elegidos puestos en el valor equivocado. Vibran, y ninguno se puede leer encima del otro. § 899
#ab3c16 y #c2518d son vecinos en el círculo y solo los separan 10 puntos de luz. Es el fallo que Goethe describe sin ponerle nombre: colores bien elegidos puestos en el valor equivocado. Vibran, y ninguno se puede leer encima del otro. § 899
No hay ningún sitio donde el ojo descanse: ni un neutro, ni un color apagado, ni un verde. La paleta entera pide atención a la vez. § 802
Entre el color más claro y el más oscuro hay 14 puntos de luz. Sin escalón de claridad no hay jerarquía: la paleta se apoya entera en el tono, y el tono solo no ordena una pantalla. § 849
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Mismo sector #dc0c15 · #ab3c16
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Características #dc0c15 · #674696
Naranja y violeta, con el rojo saltado. Excita porque deja presentir el rojo puro sin llegar a enseñarlo. § 822
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Vecinas #dc0c15 · #c2518d
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Características #ab3c16 · #674696
Naranja y violeta, con el rojo saltado. Excita porque deja presentir el rojo puro sin llegar a enseñarlo. § 822
- Vecinas #ab3c16 · #c2518d
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Vecinas #674696 · #c2518d
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
Criterio tomado de Zur Farbenlehre (1810), en la traducción de Eastlake de 1840, que es de dominio público. Las explicaciones son nuestras: del libro se toma la sustancia, no la redacción. Los valores de luz que suelen atribuirse a Goethe para calcular proporciones de superficie no están en la Farbenlehre — son de Itten, 1961, y así se acreditan en las reglas de adaptación.
Lámina 03 de 05 · Complementaria
Las cinco ↑La lámina, tal cualRegla de armonía · no está en el libro
Complementaria
- Apoyo#b4271f
- Acento#003b3e
- Texto#fbf1ef
- Fondo#002d30
El rojo de partida y el que tiene enfrente en la rueda, más un neutro claro y una versión oscura para fondo y texto. Para marcas que quieren llamar la atención: el acento salta porque el ojo lo lee como lo contrario del resto.
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
Carta · MezclasTres partes y una
Los cuatro colores, mezclados dos a dos
- 3 partes de #b4271f1 de #003b3e
- 3 partes de #003b3e1 de #fbf1ef
- 3 partes de #fbf1ef1 de #002d30
- 3 partes de #002d301 de #b4271f
- 3 partes de #b4271f1 de #fbf1ef
- 3 partes de #003b3e1 de #002d30
- 3 partes de #fbf1ef1 de #b4271f
- 3 partes de #002d301 de #003b3e
- 3 partes de #b4271f1 de #002d30
- 3 partes de #003b3e1 de #b4271f
- 3 partes de #fbf1ef1 de #003b3e
- 3 partes de #002d301 de #fbf1ef
De aquí salen los intermedios que la lámina no trae: bordes, fondos de tarjeta, estados apagados. La mezcla se hace en OKLab, que se parece más a mezclar pintura que a promediar números. Pulsa el resultado para copiarlo.
En pantalla · el reparto60 · 30 · 10
Adaptada a pantalla
- 60 % FondoDonde descansa la vista: la mayor parte de la pantalla. El #002d30 de la lámina, oscurecido.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. El #002d30 de la lámina, aclarado.
- 10 % AcentoSolo lo que se pulsa. El #003b3e de la lámina, aclarado.
Los papeles que la lámina no trae
Medido, antes y después
- En la lámina, el mejor par de colores se lee a 13,3:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #efeded sobre el fondo #182424 da 13,6:1: AAA, se lee de sobra. En APCA da Lc 94: vale para texto pequeño, del de leer un párrafo entero.Cumple
- El acento #437577 se separa 3,0:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,6:1 (una palabra necesita 4,5:1).Cumple
- Con deuteranopia, tu acento y tu fondo se quedan en 2,9:1. El botón deja de despegarse: dale un borde, cambia la luz o no confíes solo en el color para señalarlo.No llega
Puesta en el mundoAdaptada
Así se ve esta lámina cuando ocupa una pantalla entera.
Este párrafo está aquí para que veas el texto de verdad sobre el fondo de verdad, que es donde se cae la mitad de las paletas bonitas. Si te cuesta leerlo, ya lo sabes. Y así se ve un enlace.
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Cómo usarla
- El repartoReparte, no iguales: #182424 en el 60 % de la pantalla, #103a3d en el 30 % (tarjetas, franjas, cabeceras) y #437577 en el 10 %, solo en botones y enlaces. Un color pierde fuerza cuanta más superficie ocupa; lo que en la lámina se ve intenso, a pantalla completa se suaviza.
- El textoEl párrafo va en #efeded, una tinta casi neutra teñida del tono de la paleta, aunque en la lámina hubiera un par que se leía: un color saturado como texto cansa a la tercera línea. El color del libro entra por el titular, en #fbf1ef, donde el tamaño perdona.
- El botónEl acento #437577 se separa 3,0:1 del fondo: sirve de botón, con el texto en #f0f8f9.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #103a3d, y el acento #437577 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #103a3d y #efeded son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
El kit · rampas y estadosPara el sistema de diseño
El kit
Una marca necesita cuatro colores; una interfaz necesita bastante más. Esto es lo que hay que inventarse a mano cuando te llevas cuatro hexadecimales y llegas al editor.
Cada muestra se copia al pulsarla.
Las luces del acento
Los neutros, teñidos del acento
Estados de un botón y avisos
El kit · noche y códigoR·01
La misma lámina, de día
El mismo color, de día.
La paleta nace oscura; esta es su versión clara. El fondo no es blanco puro: lleva un poco de su tono, igual que el oscuro no era negro.
Un botónLlévatela
/* Complementaria — bluenze.com/paletas */
:root {
--fondo: #182424;
--superficie: #103a3d;
--texto: #efeded;
--tinta: #efeded;
--texto-suave: #b2b0b0;
--titular: #fbf1ef;
--acento: #437577;
--acento-texto: #f0f8f9;
--enlace: #629396;
--borde: #3b494a;
--apoyo-1: #b4271f;
/* la lámina, tal cual */
--lamina-1: #b4271f;
--lamina-2: #003b3e;
--lamina-3: #fbf1ef;
--lamina-4: #002d30;
--acento-50: #f0f8f8;
--acento-100: #e0eeee;
--acento-200: #c5dcdc;
--acento-300: #a3c4c5;
--acento-400: #80abac;
--acento-500: #5f9193;
--acento-600: #437577;
--acento-700: #335e60;
--acento-800: #234547;
--acento-900: #132e2f;
--neutro-50: #f5f7f7;
--neutro-100: #e8ecec;
--neutro-200: #d2d8d9;
--neutro-300: #b7c0c0;
--neutro-400: #9aa5a6;
--neutro-500: #7e8b8c;
--neutro-600: #657272;
--neutro-700: #4e5959;
--neutro-800: #394142;
--neutro-900: #252b2b;
--boton: #437577;
--boton-encima: #558789;
--boton-pulsado: #729799;
--boton-apagado: #343a3a;
--foco: #00797d;
--exito: #83b87e;
--aviso: #cbb570;
--error: #ea9582;
--info: #7daef0;
}
@media (prefers-color-scheme: light) {
:root {
--fondo: #eff7f7;
--superficie: #dfeaeb;
--borde: #c6d4d5;
--texto: #1f2525;
--tinta: #1f2525;
--texto-suave: #5d6565;
--acento: #437577;
--acento-texto: #f2f7f7;
}
}La lectura de GoetheQué transmite
Qué transmite esta combinación, y por qué.
Wada dice qué colores van juntos. Goethe, cien años antes, explica por qué una combinación significa algo o no significa nada, y qué hace cada color según cuánta pantalla ocupe. Su círculo tiene seis colores y tres oposiciones, y cada veredicto de aquí abajo lleva el parágrafo del libro donde está.
Qué transmite, según dónde cayó cada color
Toda la paleta cae en el lado activo del círculo: los colores que avanzan, calientan y empujan hacia fuera.
- Superficie · verde
El verde es donde el ojo descansa. Goethe dice que quien lo mira no desea ni puede imaginar nada más allá, y por eso era el color de las habitaciones en que se vive de continuo. En una interfaz eso es exactamente un fondo. § 802
- Acento · verde
El verde es el color del reposo, así que como acento no señala: el ojo lo acepta y sigue de largo. Si esta paleta necesita que algo detenga la vista, no es este color. § 802
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Opuestas #b4271f · #003b3e
Opuestas en el círculo: juntas completan lo que el ojo pide por su cuenta. Es la única categoría que Goethe aprueba sin matices. § 810
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Con un neutro #b4271f · #fbf1ef
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Opuestas #b4271f · #002d30
Opuestas en el círculo: juntas completan lo que el ojo pide por su cuenta. Es la única categoría que Goethe aprueba sin matices. § 810
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Con un neutro #003b3e · #fbf1ef
Un neutro con un color sin lado en el círculo. Aquí Goethe no opina. § 831
- Mismo sector #003b3e · #002d30
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Con un neutro #fbf1ef · #002d30
Un neutro con un color sin lado en el círculo. Aquí Goethe no opina. § 831
Criterio tomado de Zur Farbenlehre (1810), en la traducción de Eastlake de 1840, que es de dominio público. Las explicaciones son nuestras: del libro se toma la sustancia, no la redacción. Los valores de luz que suelen atribuirse a Goethe para calcular proporciones de superficie no están en la Farbenlehre — son de Itten, 1961, y así se acreditan en las reglas de adaptación.
Lámina 04 de 05 · Análoga
Las cinco ↑La lámina, tal cualRegla de armonía · no está en el libro
Análoga
- Apoyo#ce5a83
- Acento#b4271f
- Texto#613900
- Fondo#fbf1ef
El rojo de partida y sus dos vecinos en la rueda, más un neutro que los deja respirar. Para marcas serenas: todo parece de la misma familia y nada grita.
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
Carta · MezclasTres partes y una
Los cuatro colores, mezclados dos a dos
- 3 partes de #ce5a831 de #b4271f
- 3 partes de #b4271f1 de #613900
- 3 partes de #6139001 de #fbf1ef
- 3 partes de #fbf1ef1 de #ce5a83
- 3 partes de #ce5a831 de #613900
- 3 partes de #b4271f1 de #fbf1ef
- 3 partes de #6139001 de #ce5a83
- 3 partes de #fbf1ef1 de #b4271f
- 3 partes de #ce5a831 de #fbf1ef
- 3 partes de #b4271f1 de #ce5a83
- 3 partes de #6139001 de #b4271f
- 3 partes de #fbf1ef1 de #613900
De aquí salen los intermedios que la lámina no trae: bordes, fondos de tarjeta, estados apagados. La mezcla se hace en OKLab, que se parece más a mezclar pintura que a promediar números. Pulsa el resultado para copiarlo.
En pantalla · el reparto60 · 30 · 10
Adaptada a pantalla
- 60 % FondoDonde descansa la vista: la mayor parte de la pantalla. El #fbf1ef de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. El #fbf1ef de la lámina, oscurecido.
- 10 % AcentoSolo lo que se pulsa. De la lámina, tal cual (#b4271f).
Los papeles que la lámina no trae
Medido, antes y después
- En la lámina, el mejor par de colores se lee a 9,0:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #2a221a sobre el fondo #faf4f2 da 14,3:1: AAA, se lee de sobra. En APCA da Lc 97: vale para texto pequeño, del de leer un párrafo entero.Cumple
- El acento #b4271f se separa 5,9:1 del fondo (un botón necesita 3:1) y como enlace llega a 5,9:1 (una palabra necesita 4,5:1).Cumple
Puesta en el mundoAdaptada
Así se ve esta lámina cuando ocupa una pantalla entera.
Este párrafo está aquí para que veas el texto de verdad sobre el fondo de verdad, que es donde se cae la mitad de las paletas bonitas. Si te cuesta leerlo, ya lo sabes. Y así se ve un enlace.
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Cómo usarla
- El repartoReparte, no iguales: #faf4f2 en el 60 % de la pantalla, #eae0de en el 30 % (tarjetas, franjas, cabeceras) y #b4271f en el 10 %, solo en botones y enlaces. Un color pierde fuerza cuanta más superficie ocupa; lo que en la lámina se ve intenso, a pantalla completa se suaviza.
- El textoEl párrafo va en #2a221a, una tinta casi neutra teñida del tono de la paleta, aunque en la lámina hubiera un par que se leía: un color saturado como texto cansa a la tercera línea. El color del libro entra por el titular, en #613900, donde el tamaño perdona.
- El botónEl acento #b4271f se separa 5,9:1 del fondo: sirve de botón, con el texto en #f8f6f6.
- La temperaturaToda cálida: da cercanía y unidad, pero para destacar algo no cuentes con el color, cuenta con la luz: lo importante, más oscuro o más claro que lo que lo rodea.
- CuántosCuatro colores piden disciplina: #eae0de y #613900 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
El kit · rampas y estadosPara el sistema de diseño
El kit
Una marca necesita cuatro colores; una interfaz necesita bastante más. Esto es lo que hay que inventarse a mano cuando te llevas cuatro hexadecimales y llegas al editor.
Cada muestra se copia al pulsarla.
Las luces del acento
Los neutros, teñidos del acento
Estados de un botón y avisos
El kit · noche y códigoR·02
La misma lámina, de noche
El mismo color, de noche.
El fondo no es negro puro: lleva un poco del tono del acento. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
Un botónLlévatela
/* Análoga — bluenze.com/paletas */
:root {
--fondo: #faf4f2;
--superficie: #eae0de;
--texto: #2a221a;
--tinta: #2a221a;
--texto-suave: #6d6157;
--titular: #613900;
--acento: #b4271f;
--acento-texto: #f8f6f6;
--enlace: #b4271f;
--borde: #d5d0cf;
--apoyo-1: #ce5a83;
/* la lámina, tal cual */
--lamina-1: #ce5a83;
--lamina-2: #b4271f;
--lamina-3: #613900;
--lamina-4: #fbf1ef;
--acento-50: #f6f6f6;
--acento-100: #ffe5e0;
--acento-200: #feccc1;
--acento-300: #fda998;
--acento-400: #fe7d67;
--acento-500: #ea5946;
--acento-600: #c83e30;
--acento-700: #b4271f;
--acento-800: #7c1b14;
--acento-900: #570c05;
--neutro-50: #f8f6f5;
--neutro-100: #eeeae9;
--neutro-200: #dcd6d5;
--neutro-300: #c5bcbb;
--neutro-400: #aba19f;
--neutro-500: #928684;
--neutro-600: #786d6b;
--neutro-700: #5f5553;
--neutro-800: #463e3d;
--neutro-900: #2e2927;
--boton: #b4271f;
--boton-encima: #9e0a10;
--boton-pulsado: #810409;
--boton-apagado: #b59b95;
--foco: #bf0714;
--exito: #0f7f22;
--aviso: #a38a00;
--error: #c53b29;
--info: #0070bb;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #2e1e1a;
--superficie: #3e2925;
--borde: #59413c;
--texto: #f8ebe8;
--tinta: #f8ebe8;
--texto-suave: #bcadaa;
--acento: #f96652;
--acento-texto: #2f201d;
}
}La lectura de GoetheQué transmite
Qué transmite esta combinación, y por qué.
Wada dice qué colores van juntos. Goethe, cien años antes, explica por qué una combinación significa algo o no significa nada, y qué hace cada color según cuánta pantalla ocupe. Su círculo tiene seis colores y tres oposiciones, y cada veredicto de aquí abajo lleva el parágrafo del libro donde está.
Qué transmite, según dónde cayó cada color
Toda la paleta cae en el lado activo del círculo: los colores que avanzan, calientan y empujan hacia fuera.
- Acento · rojo
El rojo es el punto más alto del lado activo. En mancha pequeña hace exactamente lo que se le pide a un acento: detener la vista una vez. § 793
- Titular · naranja
El naranja en mancha pequeña es el acento que menos hay que explicar: avanza, se ve, y no necesita tamaño para hacerlo. § 775
Qué le pasa a esta paleta
#b4271f y #613900 son vecinos en el círculo y solo los separan 12 puntos de luz. Es el fallo que Goethe describe sin ponerle nombre: colores bien elegidos puestos en el valor equivocado. Vibran, y ninguno se puede leer encima del otro. § 899
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Mismo sector #ce5a83 · #b4271f
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Vecinas #ce5a83 · #613900
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
- Con un neutro #ce5a83 · #fbf1ef
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Vecinas #b4271f · #613900
Vecinas en el círculo, sin color intermedio que las separe. Se salvan por proporción: una tiene que mandar y la otra acompañar. § 828
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Con un neutro #b4271f · #fbf1ef
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Con un neutro #613900 · #fbf1ef
Junto al blanco, un color del lado activo pierde fuerza. § 831
Criterio tomado de Zur Farbenlehre (1810), en la traducción de Eastlake de 1840, que es de dominio público. Las explicaciones son nuestras: del libro se toma la sustancia, no la redacción. Los valores de luz que suelen atribuirse a Goethe para calcular proporciones de superficie no están en la Farbenlehre — son de Itten, 1961, y así se acreditan en las reglas de adaptación.
Lámina 05 de 05 · Monocroma con acento
Las cinco ↑La lámina, tal cualRegla de armonía · no está en el libro
Monocroma con acento
- Fondo#55110d
- Apoyo#b4271f
- Texto#ffdfda
- Acento#003b3e
Un solo tono en tres luces y un acento pequeño enfrente. La que más usan los estudios: la marca se reconoce por un color y el acento hace el trabajo de señalar botones y enlaces.
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
Carta · MezclasTres partes y una
Los cuatro colores, mezclados dos a dos
- 3 partes de #55110d1 de #b4271f
- 3 partes de #b4271f1 de #ffdfda
- 3 partes de #ffdfda1 de #003b3e
- 3 partes de #003b3e1 de #55110d
- 3 partes de #55110d1 de #ffdfda
- 3 partes de #b4271f1 de #003b3e
- 3 partes de #ffdfda1 de #55110d
- 3 partes de #003b3e1 de #b4271f
- 3 partes de #55110d1 de #003b3e
- 3 partes de #b4271f1 de #55110d
- 3 partes de #ffdfda1 de #b4271f
- 3 partes de #003b3e1 de #ffdfda
De aquí salen los intermedios que la lámina no trae: bordes, fondos de tarjeta, estados apagados. La mezcla se hace en OKLab, que se parece más a mezclar pintura que a promediar números. Pulsa el resultado para copiarlo.
En pantalla · el reparto60 · 30 · 10
Adaptada a pantalla
- 60 % FondoDonde descansa la vista: la mayor parte de la pantalla. El #55110d de la lámina, oscurecido.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. De la lámina, tal cual (#55110d).
- 10 % AcentoSolo lo que se pulsa. El #003b3e de la lámina, aclarado.
Los papeles que la lámina no trae
Medido, antes y después
- En la lámina, el mejor par de colores se lee a 11,4:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #f1edec sobre el fondo #301d19 da 13,7:1: AAA, se lee de sobra. En APCA da Lc 94: vale para texto pequeño, del de leer un párrafo entero.Cumple
- El acento #437577 se separa 3,0:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,6:1 (una palabra necesita 4,5:1).Cumple
- Con deuteranopia, tu acento y tu fondo se quedan en 2,9:1. El botón deja de despegarse: dale un borde, cambia la luz o no confíes solo en el color para señalarlo.No llega
Puesta en el mundoAdaptada
Así se ve esta lámina cuando ocupa una pantalla entera.
Este párrafo está aquí para que veas el texto de verdad sobre el fondo de verdad, que es donde se cae la mitad de las paletas bonitas. Si te cuesta leerlo, ya lo sabes. Y así se ve un enlace.
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Cómo usarla
- El repartoReparte, no iguales: #301d19 en el 60 % de la pantalla, #55110d en el 30 % (tarjetas, franjas, cabeceras) y #437577 en el 10 %, solo en botones y enlaces. Un color pierde fuerza cuanta más superficie ocupa; lo que en la lámina se ve intenso, a pantalla completa se suaviza.
- El textoEl párrafo va en #f1edec, una tinta casi neutra teñida del tono de la paleta, aunque en la lámina hubiera un par que se leía: un color saturado como texto cansa a la tercera línea. El color del libro entra por el titular, en #ffdfda, donde el tamaño perdona.
- El botónEl acento #437577 se separa 3,0:1 del fondo: sirve de botón, con el texto en #fff4f2.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #55110d, y el acento #437577 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #55110d y #f1edec son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
El kit · rampas y estadosPara el sistema de diseño
El kit
Una marca necesita cuatro colores; una interfaz necesita bastante más. Esto es lo que hay que inventarse a mano cuando te llevas cuatro hexadecimales y llegas al editor.
Cada muestra se copia al pulsarla.
Las luces del acento
Los neutros, teñidos del acento
Estados de un botón y avisos
El kit · noche y códigoR·03
La misma lámina, de día
El mismo color, de día.
La paleta nace oscura; esta es su versión clara. El fondo no es blanco puro: lleva un poco de su tono, igual que el oscuro no era negro.
Un botónLlévatela
/* Monocroma con acento — bluenze.com/paletas */
:root {
--fondo: #301d19;
--superficie: #55110d;
--texto: #f1edec;
--tinta: #f1edec;
--texto-suave: #b4afaf;
--titular: #ffdfda;
--acento: #437577;
--acento-texto: #fff4f2;
--enlace: #629396;
--borde: #59413d;
--apoyo-1: #b4271f;
/* la lámina, tal cual */
--lamina-1: #55110d;
--lamina-2: #b4271f;
--lamina-3: #ffdfda;
--lamina-4: #003b3e;
--acento-50: #f0f8f8;
--acento-100: #e0eeee;
--acento-200: #c5dcdc;
--acento-300: #a3c4c5;
--acento-400: #80abac;
--acento-500: #5f9193;
--acento-600: #437577;
--acento-700: #335e60;
--acento-800: #234547;
--acento-900: #132e2f;
--neutro-50: #f5f7f7;
--neutro-100: #e8ecec;
--neutro-200: #d2d8d9;
--neutro-300: #b7c0c0;
--neutro-400: #9aa5a6;
--neutro-500: #7e8b8c;
--neutro-600: #657272;
--neutro-700: #4e5959;
--neutro-800: #394142;
--neutro-900: #252b2b;
--boton: #437577;
--boton-encima: #558789;
--boton-pulsado: #729799;
--boton-apagado: #343a3a;
--foco: #00797d;
--exito: #83b87e;
--aviso: #cbb570;
--error: #ea9582;
--info: #7daef0;
}
@media (prefers-color-scheme: light) {
:root {
--fondo: #eff7f7;
--superficie: #dfeaeb;
--borde: #c6d4d5;
--texto: #1f2525;
--tinta: #1f2525;
--texto-suave: #5d6565;
--acento: #437577;
--acento-texto: #f2f7f7;
}
}La lectura de GoetheQué transmite
Qué transmite esta combinación, y por qué.
Wada dice qué colores van juntos. Goethe, cien años antes, explica por qué una combinación significa algo o no significa nada, y qué hace cada color según cuánta pantalla ocupe. Su círculo tiene seis colores y tres oposiciones, y cada veredicto de aquí abajo lleva el parágrafo del libro donde está.
Qué transmite, según dónde cayó cada color
Toda la paleta cae en el lado activo del círculo: los colores que avanzan, calientan y empujan hacia fuera.
- Superficie · rojo
El rojo a plena superficie no deja sitio para nada más. Es el color de la gravedad y la dignidad, y en un fondo eso se lee como peso constante. § 790
- Acento · verde
El verde es el color del reposo, así que como acento no señala: el ojo lo acepta y sigue de largo. Si esta paleta necesita que algo detenga la vista, no es este color. § 802
- Titular · rojo
El rojo es el punto más alto del lado activo. En mancha pequeña hace exactamente lo que se le pide a un acento: detener la vista una vez. § 793
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Mismo sector #55110d · #b4271f
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Mismo sector #55110d · #ffdfda
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Opuestas #55110d · #003b3e
Opuestas en el círculo: juntas completan lo que el ojo pide por su cuenta. Es la única categoría que Goethe aprueba sin matices. § 810
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Mismo sector #b4271f · #ffdfda
Las dos caen en el mismo sector del círculo. No hay contraste de tono, así que lo que las separe tendrá que ser la luz. § 832
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Opuestas #b4271f · #003b3e
Opuestas en el círculo: juntas completan lo que el ojo pide por su cuenta. Es la única categoría que Goethe aprueba sin matices. § 810
Este veredicto es nuestro. Goethe juzga cuatro de las seis parejas de este grupo y lo dice él mismo, o alguno de los dos colores cae justo entre dos sectores del círculo.
- Opuestas #ffdfda · #003b3e
Opuestas en el círculo: juntas completan lo que el ojo pide por su cuenta. Es la única categoría que Goethe aprueba sin matices. § 810
Criterio tomado de Zur Farbenlehre (1810), en la traducción de Eastlake de 1840, que es de dominio público. Las explicaciones son nuestras: del libro se toma la sustancia, no la redacción. Los valores de luz que suelen atribuirse a Goethe para calcular proporciones de superficie no están en la Farbenlehre — son de Itten, 1961, y así se acreditan en las reglas de adaptación.
Índice · 114 combinacionesHaishoku Sōkan · 1933
Las combinaciones de Wada con el rojo.
Van las 24 con más colores de las 114 que llevan algún rojo. El resto, en el diccionario.
- Rojo anaranjado · Amarillo limón pálido · Beige dorado · Azul verdoso apagadoCombinación 241
- Rosa eosina · Siena quemado · Verde césped · NegroCombinación 242
- Malva envejecido · Terracota vinoso · Verde bosque apagado · Azul pavo oscuroCombinación 244
- Rosa chicle · Rojo ladrillo · Amarillo azufre · Canela claroCombinación 246
- Rosa eosina · Caqui · Lavanda claro · Berenjena oscuroCombinación 248
- Amarillo pirita · Rojo anaranjado vivo · Verde mar brillante · Aguamarina pálidoCombinación 250
- Rosa chicle · Amarillo azufre · Oliva · Rosa orquídeaCombinación 254
- Rojo puro · Amarillo anaranjado · Azul puro · Violeta acónitoCombinación 257
- Rosa antiguo · Salmón canela · Verde agua · Verde mar brillanteCombinación 260
- Rosa chicle · Rojo anaranjado · Verde salvia claro · Azul petróleoCombinación 264
- Rosa antiguo · Amarillo albaricoque · Verde oliva amarillento · Azul nocheCombinación 265
- Rojo puro · Beige marfil · Verde esmeralda vivo · Verde manzanaCombinación 266
- Malva envejecido · Siena tostado · Verde negro · Aguamarina pálidoCombinación 268
- Granada oscuro · Verde menta · Verde azulado · Verde negro azuladoCombinación 271
- Rojo anaranjado vivo · Verde caqui oscuro · Azul cielo · Malva violáceoCombinación 274
- Rojo etrusco · Crudo · Marrón rojizo oscuro · Vino tinto apagadoCombinación 275
- Rosa eosina · Rosa concha · Verde lima brillante · NegroCombinación 276
- Rosa chicle intenso · Púrpura magenta · Oliva · Azul nocheCombinación 277
- Cereza fucsia · Verde bosque · Rosa orquídea · Vino tinto apagadoCombinación 280
- Cereza fucsia · Arce · Verde menta · LilaCombinación 282
- Malva envejecido · Siena quemado · Rojo anaranjado vivo · Verde menta claroCombinación 285
- Rosa eosina · Amarillo pirita · Turquesa pálido · Azul calaminaCombinación 287
- Naranja amarillento · Sepia · Vino tinto apagado · NegroCombinación 288
- Siena tostado · Amarillo limón · Rojo anaranjado vivo · NegroCombinación 298
Todas las combinaciones del diccionario →Ir a la herramienta →
Las otras onceColores que combinan con…
Los otros colores
Y si tu color es otro.
- Colores que combinan con el verde
- Colores que combinan con el azul
- Colores que combinan con el gris
- Colores que combinan con el marrón
- Colores que combinan con el amarillo
- Colores que combinan con el naranja
- Colores que combinan con el rosa
- Colores que combinan con el morado
- Colores que combinan con el beige
- Colores que combinan con el negro
- Colores que combinan con el blanco
Las doce familias, en una carta →
Combinaciones a partir del sistema de Sanzō Wada (Haishoku Sōkan, 1933-34; selección de Seigensha, 2010). Los valores están cotejados con esa edición; los nombres en castellano, el carácter de cada combinación y las explicaciones son nuestros.
Colofón
El color es el principio, no el encargo
Si es para tu marca, esto es lo que hacemos: webs a medida que empiezan por el color y acaban en el código.