124
Familia · amarilloBluenze · Paletas
Paletas por color
Colores que combinan con el amarillo
137 combinaciones en el libro
El único color que no se puede oscurecer sin dejar de ser él. En cuanto le quitas luz, se convierte en oliva o en mostaza y ya es otra conversación.
Carta · Los 21 amarillos del libroHaishoku Sōkan · 1933
- Amarillo puro#ffed00En 8 combinaciones
- Amarillo limón#fceb30En 15 combinaciones
- Amarillo albaricoque#ffdd00En 10 combinaciones
- Beige marfil#efd8a8En 16 combinaciones
- Canela claro#fcca7fEn 9 combinaciones
- Amarillo crema#fbc263En 14 combinaciones
- Verde limón brillante#cfd23eEn 5 combinaciones
- Verde oliva claro#cdcd9bEn 5 combinaciones
- Amarillo anaranjado#fab400En 8 combinaciones
- Ocre amarillo#e6b730En 8 combinaciones
- Crudo#ccb79aEn 8 combinaciones
- Ocre oliva#dbb62cEn 7 combinaciones
- Amarillo pirita#d1b64aEn 4 combinaciones
- Verde lima#b9b826En 13 combinaciones
- Beige dorado#cfad6fEn 4 combinaciones
- Arce#cea96fEn una combinación
- Amarillo mostaza#c7a308En 5 combinaciones
- Verde oliva amarillento#aca24eEn 4 combinaciones
- Caqui#c28b12En 5 combinaciones
- Verde oliva mostaza#9e8a44En 3 combinaciones
- Verde caqui oscuro#968a59En 4 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 amarillo
El amarillo es el color más claro de todos, y esa es toda su ventaja y todo su problema. Como fondo es luminoso y barato de imprimir; como texto es prácticamente ilegible sobre blanco. Un amarillo limón grita, un amarillo mostaza susurra y un amarillo huevo está justo en medio: elegir el matiz es más importante aquí que en ningún otro color.
Va de maravilla con negro —es la pareja de máximo contraste que existe y por eso la usan las señales de peligro— y con azul marino, que lo convierte en algo náutico y ordenado. Con gris cálido se vuelve elegante. Y con marrón y terracota se convierte en la paleta de los años setenta, que lleva una década volviendo.
La regla dura: el amarillo nunca es texto. Si lo necesitas como acento en un botón, el texto del botón va en negro, no en blanco. Y si lo usas como fondo de una web entera, baja la saturación un veinte por ciento respecto a lo que te parece bien en la muestra: a pantalla completa el amarillo se multiplica.
La tarjeta · Para compartir1200 × 630
Cinco paletas con el amarillo, 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 amarillo
Capítulo 2 · Del libroHaishoku Sōkan · 1933
Capítulo 2 · Por reglaArmonías con nombre
Por regla
Tres láminas construidas desde el amarillo 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 124 de Wada
Las cinco ↑La lámina, tal cualHaishoku Sōkan · 1933
Combinación 124 de Wada
- Granate apagado#862724
- Ocre amarillo#e6b730
- Verde oliva amarillento#aca24e
Contiene un color muy parecido al amarillo de partida (Ocre amarillo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Granate apagado · Ocre amarillo · Verde oliva amarillento. Dos amarillos y un rojo, 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 4,8:1).
3 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 tres colores, mezclados dos a dos
- 3 partes de granate apagado1 de ocre amarillo
- 3 partes de ocre amarillo1 de verde oliva amarillento
- 3 partes de verde oliva amarillento1 de granate apagado
- 3 partes de granate apagado1 de verde oliva amarillento
- 3 partes de ocre amarillo1 de granate apagado
- 3 partes de verde oliva amarillento1 de ocre amarillo
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 #e6b730 de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. De la lámina, tal cual (#e6b730).
- 10 % AcentoSolo lo que se pulsa. El #aca24e 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 4,8:1: AA, se lee.Cumple
- En pantalla, el texto #2f201e sobre el fondo #fef4e4 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 #968d3a 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
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: #fef4e4 en el 60 % de la pantalla, #e6b730 en el 30 % (tarjetas, franjas, cabeceras) y #968d3a 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 #2f201e, 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 #862724, donde el tamaño perdona.
- El botónEl acento #968d3a se separa 3,1:1 del fondo: sirve de botón, con el texto en #2f201e.
- 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ántosTres colores es la medida cómoda: fondo, texto y un acento. No añadas un cuarto salvo que se gane el sitio por contraste o por matiz.
- 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 pálidas: tonos apagados que se llevan bien entre sí; el texto corrido pide una tinta de fuera, casi negra.
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ódigo124
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 124 de Wada — bluenze.com/paletas */
:root {
--fondo: #fef4e4;
--superficie: #e6b730;
--texto: #2f201e;
--tinta: #2f201e;
--texto-suave: #745e5b;
--titular: #862724;
--acento: #968d3a;
--acento-texto: #2f201e;
--enlace: #756f1b;
--borde: #dcd0bb;
/* la lámina de Wada, tal cual */
--lamina-1: #862724;
--lamina-2: #e6b730;
--lamina-3: #aca24e;
--acento-50: #faf7e9;
--acento-100: #f1ebd3;
--acento-200: #e0d8b0;
--acento-300: #c9bf88;
--acento-400: #afa55d;
--acento-500: #968d3a;
--acento-600: #787121;
--acento-700: #5e5911;
--acento-800: #454107;
--acento-900: #2e2b00;
--neutro-50: #f7f6f5;
--neutro-100: #ecebe8;
--neutro-200: #d8d7d3;
--neutro-300: #c0beb8;
--neutro-400: #a5a39b;
--neutro-500: #8b8980;
--neutro-600: #727067;
--neutro-700: #595750;
--neutro-800: #41403a;
--neutro-900: #2b2a26;
--boton: #968d3a;
--boton-encima: #837b28;
--boton-pulsado: #706920;
--boton-apagado: #d5d1c4;
--foco: #968e0e;
--exito: #3b7a3a;
--aviso: #a08a3a;
--error: #ac5240;
--info: #1270b8;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #242215;
--superficie: #312e1e;
--borde: #4b4734;
--texto: #f0eee5;
--tinta: #f0eee5;
--texto-suave: #b3b1a7;
--acento: #a19844;
--acento-texto: #26241b;
}
}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 · 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
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
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Características #862724 · #e6b730
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 #862724 · #aca24e
Amarillo y rojo, con el naranja saltado entre medias. Es la pareja característica que mejor le parece: serena y magnífica. § 820
- Mismo sector #e6b730 · #aca24e
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 126 de Wada
Las cinco ↑La lámina, tal cualHaishoku Sōkan · 1933
Combinación 126 de Wada
- Beige marfil#efd8a8
- Ocre amarillo#e6b730
- Azul ultramar#20397e
Contiene un color muy parecido al amarillo de partida (Ocre amarillo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Beige marfil · Ocre amarillo · Azul ultramar. Dos amarillos y un azul, con un salto de luz grande. Paleta de color franco y con la tensión de mezclar cálidos y fríos. Hay dentro una pareja que aguanta texto pequeño (contraste máximo 7,7:1).
3 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 tres colores, mezclados dos a dos
- 3 partes de beige marfil1 de ocre amarillo
- 3 partes de ocre amarillo1 de azul ultramar
- 3 partes de azul ultramar1 de beige marfil
- 3 partes de beige marfil1 de azul ultramar
- 3 partes de ocre amarillo1 de beige marfil
- 3 partes de azul ultramar1 de ocre amarillo
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 #efd8a8 de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. De la lámina, tal cual (#efd8a8).
- 10 % AcentoSolo lo que se pulsa. El #e6b730 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 7,7:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #22232e sobre el fondo #fdf4e4 da 14,2: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 #ae880e 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: #fdf4e4 en el 60 % de la pantalla, #efd8a8 en el 30 % (tarjetas, franjas, cabeceras) y #ae880e 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 #22232e, 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 #20397e, donde el tamaño perdona.
- El botónEl acento #ae880e se separa 3,0:1 del fondo: sirve de botón, con el texto en #22232e.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #efd8a8, y el acento #ae880e es lo primero que el ojo va a buscar.
- CuántosTres colores es la medida cómoda: fondo, texto y un acento. No añadas un cuarto salvo que se gane el sitio por contraste o por matiz.
- En el diccionarioEn el diccionario está entre las de contraste de tonos: matices enfrentados a propósito. El contraste ya viene puesto; no lo fuerces con sombras ni con negros. 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ódigo126
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 126 de Wada — bluenze.com/paletas */
:root {
--fondo: #fdf4e4;
--superficie: #efd8a8;
--texto: #22232e;
--tinta: #22232e;
--texto-suave: #626271;
--titular: #20397e;
--acento: #ae880e;
--acento-texto: #22232e;
--enlace: #896a02;
--borde: #dcd0bb;
/* la lámina de Wada, tal cual */
--lamina-1: #efd8a8;
--lamina-2: #e6b730;
--lamina-3: #20397e;
--acento-50: #fff5e5;
--acento-100: #fbe9ca;
--acento-200: #eed4a2;
--acento-300: #dbba73;
--acento-400: #c49e40;
--acento-500: #ae880e;
--acento-600: #8a6b04;
--acento-700: #6d5400;
--acento-800: #513d00;
--acento-900: #352803;
--neutro-50: #f7f6f5;
--neutro-100: #ecebe8;
--neutro-200: #d9d7d3;
--neutro-300: #c1beb8;
--neutro-400: #a7a39b;
--neutro-500: #8d8880;
--neutro-600: #746f67;
--neutro-700: #5b5750;
--neutro-800: #433f3a;
--neutro-900: #2c2a26;
--boton: #ae880e;
--boton-encima: #987706;
--boton-pulsado: #836605;
--boton-apagado: #dcd2c1;
--foco: #af8801;
--exito: #157e24;
--aviso: #a28a08;
--error: #be4330;
--info: #1970b7;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #272115;
--superficie: #352d1e;
--borde: #4f4634;
--texto: #f3ede4;
--tinta: #f3ede4;
--texto-suave: #b6b0a6;
--acento: #b8911b;
--acento-texto: #292319;
}
}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 · 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 · azul
El azul retrocede, y a un acento se le pide justo lo contrario. Como enlace basta con que se distinga; como botón principal necesita que el contraste haga el trabajo que el color no hace. § 781
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Mismo sector #efd8a8 · #e6b730
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 #efd8a8 · #20397e
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
- Características #e6b730 · #20397e
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
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
- Acento#e0b52a
- Apoyo#5775ba
- Fondo#f6f3eb
- Texto#1b253f
El amarillo 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 #e0b52a1 de #5775ba
- 3 partes de #5775ba1 de #f6f3eb
- 3 partes de #f6f3eb1 de #1b253f
- 3 partes de #1b253f1 de #e0b52a
- 3 partes de #e0b52a1 de #f6f3eb
- 3 partes de #5775ba1 de #1b253f
- 3 partes de #f6f3eb1 de #e0b52a
- 3 partes de #1b253f1 de #5775ba
- 3 partes de #e0b52a1 de #1b253f
- 3 partes de #5775ba1 de #e0b52a
- 3 partes de #f6f3eb1 de #5775ba
- 3 partes de #1b253f1 de #f6f3eb
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 #f6f3eb de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. El #f6f3eb de la lámina, oscurecido.
- 10 % AcentoSolo lo que se pulsa. El #e0b52a 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 13,6:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #232328 sobre el fondo #f7f5f0 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 #a88605 se separa 3,1:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,5: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: #f7f5f0 en el 60 % de la pantalla, #e5e2da en el 30 % (tarjetas, franjas, cabeceras) y #a88605 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 #232328, 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 #1b253f, donde el tamaño perdona.
- El botónEl acento #a88605 se separa 3,1:1 del fondo: sirve de botón, con el texto en #232328.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #e5e2da, y el acento #a88605 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #e5e2da y #1b253f 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 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
/* Complementaria — bluenze.com/paletas */
:root {
--fondo: #f7f5f0;
--superficie: #e5e2da;
--texto: #232328;
--tinta: #232328;
--texto-suave: #626369;
--titular: #1b253f;
--acento: #a88605;
--acento-texto: #232328;
--enlace: #8a6d03;
--borde: #d3d1ce;
--apoyo-1: #5775ba;
/* la lámina, tal cual */
--lamina-1: #e0b52a;
--lamina-2: #5775ba;
--lamina-3: #f6f3eb;
--lamina-4: #1b253f;
--acento-50: #fff5e3;
--acento-100: #fae9ca;
--acento-200: #edd5a2;
--acento-300: #dabb72;
--acento-400: #c19f3f;
--acento-500: #a88605;
--acento-600: #886c02;
--acento-700: #6b5405;
--acento-800: #4f3e04;
--acento-900: #352902;
--neutro-50: #f7f6f5;
--neutro-100: #ecebe8;
--neutro-200: #d9d7d3;
--neutro-300: #c1beb8;
--neutro-400: #a7a39b;
--neutro-500: #8d8880;
--neutro-600: #736f67;
--neutro-700: #5a5750;
--neutro-800: #42403a;
--neutro-900: #2c2a26;
--boton: #a88605;
--boton-encima: #92750b;
--boton-pulsado: #7d6409;
--boton-apagado: #d9cfbe;
--foco: #a8860c;
--exito: #147e23;
--aviso: #a38a06;
--error: #bf4330;
--info: #1870b7;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #272115;
--superficie: #352d1e;
--borde: #4e4634;
--texto: #f2ede4;
--tinta: #f2ede4;
--texto-suave: #b6b0a6;
--acento: #b5921a;
--acento-texto: #282318;
}
}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.
- 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 · azul
El azul retrocede, y a un acento se le pide justo lo contrario. Como enlace basta con que se distinga; como botón principal necesita que el contraste haga el trabajo que el color no hace. § 781
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Características #e0b52a · #5775ba
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
- Con un neutro #e0b52a · #f6f3eb
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Características #e0b52a · #1b253f
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
- Con un neutro #5775ba · #f6f3eb
Junto al blanco, un color del lado pasivo gana viveza. § 831
- Mismo sector #5775ba · #1b253f
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 #f6f3eb · #1b253f
Junto al blanco, un color del lado pasivo gana viveza. § 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
- Acento#ffd2c4
- Apoyo#e0b52a
- Texto#84a242
- Fondo#f6f3eb
El amarillo 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 #ffd2c41 de #e0b52a
- 3 partes de #e0b52a1 de #84a242
- 3 partes de #84a2421 de #f6f3eb
- 3 partes de #f6f3eb1 de #ffd2c4
- 3 partes de #ffd2c41 de #84a242
- 3 partes de #e0b52a1 de #f6f3eb
- 3 partes de #84a2421 de #ffd2c4
- 3 partes de #f6f3eb1 de #e0b52a
- 3 partes de #ffd2c41 de #f6f3eb
- 3 partes de #e0b52a1 de #ffd2c4
- 3 partes de #84a2421 de #e0b52a
- 3 partes de #f6f3eb1 de #84a242
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 #f6f3eb de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. El #f6f3eb de la lámina, oscurecido.
- 10 % AcentoSolo lo que se pulsa. El #ffd2c4 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 2,6:1: no se lee.No llega
- En pantalla, el texto #22251a sobre el fondo #f7f5f0 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 #aa8175 se separa 3,1:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,8: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: #f7f5f0 en el 60 % de la pantalla, #e5e2da en el 30 % (tarjetas, franjas, cabeceras) y #aa8175 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 2,6:1). Por eso el párrafo va en #22251a, una tinta casi neutra teñida del tono de la paleta: no está en el libro y hace falta.
- El botónEl acento #aa8175 se separa 3,1:1 del fondo: sirve de botón, con el texto en #22251a.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #e5e2da, y el acento #aa8175 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #e5e2da y #5a7818 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: #f7f5f0;
--superficie: #e5e2da;
--texto: #22251a;
--tinta: #22251a;
--texto-suave: #616555;
--titular: #5a7818;
--acento: #aa8175;
--acento-texto: #22251a;
--enlace: #896357;
--borde: #d3d1ce;
--apoyo-1: #e0b52a;
/* la lámina, tal cual */
--lamina-1: #ffd2c4;
--lamina-2: #e0b52a;
--lamina-3: #84a242;
--lamina-4: #f6f3eb;
--acento-50: #fdf5f3;
--acento-100: #f6e8e4;
--acento-200: #e8d3cc;
--acento-300: #d6b8af;
--acento-400: #c09b90;
--acento-500: #aa8175;
--acento-600: #8d675b;
--acento-700: #704f46;
--acento-800: #543a32;
--acento-900: #39251f;
--neutro-50: #f8f6f5;
--neutro-100: #eeeae9;
--neutro-200: #dcd6d4;
--neutro-300: #c5bcba;
--neutro-400: #aba19e;
--neutro-500: #928683;
--neutro-600: #786d6a;
--neutro-700: #5e5552;
--neutro-800: #463e3c;
--neutro-900: #2e2927;
--boton: #aa8175;
--boton-encima: #976f64;
--boton-pulsado: #7f6057;
--boton-apagado: #d6cfcd;
--foco: #c37761;
--exito: #457942;
--aviso: #9e8b48;
--error: #a45747;
--info: #3670ac;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #27201e;
--superficie: #352c2a;
--borde: #504441;
--texto: #f2edeb;
--tinta: #f2edeb;
--texto-suave: #b5afae;
--acento: #b68c80;
--acento-texto: #272321;
}
}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 · 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 · 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
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Vecinas #ffd2c4 · #e0b52a
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 #ffd2c4 · #84a242
Característica por geometría: hay un color saltado entre las dos. Pero Goethe solo juzga cuatro parejas de este grupo, y esta no es una de ellas. § 823
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 #ffd2c4 · #f6f3eb
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Vecinas #e0b52a · #84a242
Vecinas en el círculo, sin color que las separe. Ordinaria y agradable: no dice gran cosa, tampoco molesta. § 829
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 #e0b52a · #f6f3eb
Junto al blanco, un color del lado activo pierde fuerza. § 831
- Con un neutro #84a242 · #f6f3eb
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 05 de 05 · Monocroma con acento
Las cinco ↑La lámina, tal cualRegla de armonía · no está en el libro
Monocroma con acento
- Texto#3a2c00
- Acento#e0b52a
- Fondo#f3e7c6
- Apoyo#5173c7
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 #3a2c001 de #e0b52a
- 3 partes de #e0b52a1 de #f3e7c6
- 3 partes de #f3e7c61 de #5173c7
- 3 partes de #5173c71 de #3a2c00
- 3 partes de #3a2c001 de #f3e7c6
- 3 partes de #e0b52a1 de #5173c7
- 3 partes de #f3e7c61 de #3a2c00
- 3 partes de #5173c71 de #e0b52a
- 3 partes de #3a2c001 de #5173c7
- 3 partes de #e0b52a1 de #3a2c00
- 3 partes de #f3e7c61 de #e0b52a
- 3 partes de #5173c71 de #f3e7c6
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 #f3e7c6 de la lámina, aclarado.
- 30 % SuperficieTarjetas, franjas, cabeceras. Aquí vive el color del libro. De la lámina, tal cual (#f3e7c6).
- 10 % AcentoSolo lo que se pulsa. El #e0b52a 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 11,0:1: AAA, se lee de sobra.Cumple
- En pantalla, el texto #27231d sobre el fondo #fbf5e4 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 #a88605 se separa 3,1:1 del fondo (un botón necesita 3:1) y como enlace llega a 4,5: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: #fbf5e4 en el 60 % de la pantalla, #f3e7c6 en el 30 % (tarjetas, franjas, cabeceras) y #a88605 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 #27231d, 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 #3a2c00, donde el tamaño perdona.
- El botónEl acento #a88605 se separa 3,1:1 del fondo: sirve de botón, con el texto en #27231d.
- La temperaturaHay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #f3e7c6, y el acento #a88605 es lo primero que el ojo va a buscar.
- CuántosCuatro colores piden disciplina: #f3e7c6 y #3a2c00 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 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
/* Monocroma con acento — bluenze.com/paletas */
:root {
--fondo: #fbf5e4;
--superficie: #f3e7c6;
--texto: #27231d;
--tinta: #27231d;
--texto-suave: #67635a;
--titular: #3a2c00;
--acento: #a88605;
--acento-texto: #27231d;
--enlace: #8a6d03;
--borde: #d7d1c1;
--apoyo-1: #5173c7;
/* la lámina, tal cual */
--lamina-1: #3a2c00;
--lamina-2: #e0b52a;
--lamina-3: #f3e7c6;
--lamina-4: #5173c7;
--acento-50: #fff5e3;
--acento-100: #fae9ca;
--acento-200: #edd5a2;
--acento-300: #dabb72;
--acento-400: #c19f3f;
--acento-500: #a88605;
--acento-600: #886c02;
--acento-700: #6b5405;
--acento-800: #4f3e04;
--acento-900: #352902;
--neutro-50: #f7f6f5;
--neutro-100: #ecebe8;
--neutro-200: #d9d7d3;
--neutro-300: #c1beb8;
--neutro-400: #a7a39b;
--neutro-500: #8d8880;
--neutro-600: #736f67;
--neutro-700: #5a5750;
--neutro-800: #42403a;
--neutro-900: #2c2a26;
--boton: #a88605;
--boton-encima: #92750b;
--boton-pulsado: #7d6409;
--boton-apagado: #d9cfbe;
--foco: #a8860c;
--exito: #147e23;
--aviso: #a38a06;
--error: #bf4330;
--info: #1870b7;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #272115;
--superficie: #352d1e;
--borde: #4e4634;
--texto: #f2ede4;
--tinta: #f2ede4;
--texto-suave: #b6b0a6;
--acento: #b5921a;
--acento-texto: #282318;
}
}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 · 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 y Titular · 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
Cómo se lee cada parejaZur Farbenlehre · 1810
Cómo se lee cada pareja en el círculo
- Mismo sector #3a2c00 · #e0b52a
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 #3a2c00 · #f3e7c6
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 #3a2c00 · #5173c7
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
- Mismo sector #e0b52a · #f3e7c6
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 #e0b52a · #5173c7
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
- Características #f3e7c6 · #5173c7
Amarillo y azul, con el verde saltado. A Goethe le parece pobre: falta el rojo, y la cercanía del verde la deja en poca cosa. § 819
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 · 137 combinacionesHaishoku Sōkan · 1933
Las combinaciones de Wada con el amarillo.
Van las 24 con más colores de las 137 que llevan algún amarillo. El resto, en el diccionario.
- Rojo anaranjado · Amarillo limón pálido · Beige dorado · Azul verdoso apagadoCombinación 241
- Siena tostado · Beige marfil · Verde oliva oscuro · Azul pizarraCombinación 243
- Rosa chicle · Rojo ladrillo · Amarillo azufre · Canela claroCombinación 246
- Siena tostado · Amarillo albaricoque · Verde esmeralda vivo · Azul ultramarCombinación 247
- Rosa eosina · Caqui · Lavanda claro · Berenjena oscuroCombinación 248
- Castaño rojizo · Crudo · Ocre oliva · Azul verdoso apagadoCombinación 249
- Amarillo pirita · Rojo anaranjado vivo · Verde mar brillante · Aguamarina pálidoCombinación 250
- Rojo vino · Amarillo puro · Verde césped · Azul pizarraCombinación 251
- Cereza fucsia · Siena tostado · Amarillo mostaza · Verde azuladoCombinación 252
- Amarillo limón · Naranja albaricoque · Púrpura medianoche · Azul pizarraCombinación 253
- Siena tostado · Amarillo pirita · Azul calamina · NegroCombinación 255
- Rojo puro · Amarillo anaranjado · Azul puro · Violeta acónitoCombinación 257
- Amarillo limón · Verde azulado · Azul cobalto · Gris cálidoCombinación 259
- Cereza fucsia · Beige marfil · Verde lima · Verde bosque vivoCombinación 262
- Rosa antiguo · Amarillo albaricoque · Verde oliva amarillento · Azul nocheCombinación 265
- Rojo puro · Beige marfil · Verde esmeralda vivo · Verde manzanaCombinación 266
- Amarillo crema · Naranja amarillento · Verde esmeralda vivo · Azul puroCombinación 267
- 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
- Amarillo crema · Ocre oliva · Verde bosque vivo · Verde botellaCombinación 278
- Siena tostado · Salmón canela · Crudo · Azul marino oscuroCombinación 279
- Cereza fucsia · Arce · Verde menta · LilaCombinación 282
- Rojo frambuesa · Amarillo albaricoque · Verde mar brillante · Verde botellaCombinación 284
- Siena quemado · Amarillo anaranjado · Verde pavo real · Azul violáceo oscuroCombinación 286
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 rojo
- 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.