No es un color de relleno: es el papel. Y la calidad de una paleta se nota más en su papel que en su acento.
Qué combina con el beige
El beige es un naranja o un amarillo con muchísima luz y poquísima carga. Por eso hay tantos y por eso se comportan de forma distinta: un beige con rosa dentro es cálido y amable, un beige con verde es el color del lino sin blanquear, y un beige con gris es lo que la gente llama «greige» y funciona como neutro moderno.
Sirve de fondo para casi cualquier cosa, y ahí está su valor: un blanco puro en pantalla es una linterna, y un beige de fondo baja el brillo sin que nadie note por qué se lee mejor. Con negro y un acento fuerte da una paleta editorial impecable. Con marrón y terracota, una paleta de cerámica. Con verde salvia, una paleta de estudio de diseño — la nuestra tira de ahí.
Su único riesgo es la sosería. Un beige sin nada que lo acompañe no es sobrio, es una web sin terminar. La regla que lo salva: el fondo puede ser suave, pero el texto tiene que ser francamente oscuro y el acento francamente saturado. Los tres términos medios juntos son lo que produce esa sensación de «esto está a medio hacer».
Cinco para empezar
Cinco paletas con el beige, 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.
01/05
Del diccionario de Wada, 1933
Combinación 167 de Wada
Contiene un color muy parecido al tuyo (Crudo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Crudo · Turquesa pálido · Azul marino vivo. Un amarillo, un azul y un turquesa, con un salto de luz grande. Paleta contenida y con la tensión de mezclar cálidos y fríos. Hay dentro una pareja que aguanta texto pequeño (contraste máximo 8.4:1).
La lámina, tal cual
3 colores a partes iguales, como en el libro. Es la inspiración, no la interfaz. Pulsa uno para copiarlo.
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.
Puesta en una web
Pídenos fecha
Novedad
Así se ve tu color 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.
Pídenos fecha
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Y el pie, que casi nadie mira hasta que se ve mal.
Medido, antes y después
En la lámina, el mejor par de colores se lee a 8.4:1: AAA, se lee de sobra.
En pantalla, el texto #21232e sobre el fondo #e1faf7 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.
El acento #958a67 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).
Consejos para usarla
*
El reparto
Reparte, no iguales: #e1faf7 en el 60 % de la pantalla, #abf5ed en el 30 % (tarjetas, franjas, cabeceras) y #958a67 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 texto
El párrafo va en #21232e, 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 #003e83, donde el tamaño perdona.
*
El botón
El acento #958a67 se separa 3.1:1 del fondo: sirve de botón, con el texto en #21232e.
*
La temperatura
Hay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #abf5ed, y el acento #958a67 es lo primero que el ojo va a buscar.
*
Cuántos
Tres 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 diccionario
En 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 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.
La lectura de Goethe
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 · 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 · 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 pareja en el círculo
Vecinas
Vecinas en el círculo, sin color que las separe. Ordinaria y agradable: no dice gran cosa, tampoco molesta. § 829
Características
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
Vecinas
Vecinas en el círculo. Es la única pareja que Goethe despacha con desprecio, y ese juicio hoy no se sostiene: el turquesa gusta. Lo que sí se sostiene es la mitad medible — dos vecinos sin diferencia de luz no producen contraste. § 829
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.
El kit para programarlaNueve luces, estados, avisos y modo oscuro
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.
Las nueve luces del acento
50#f9f6f0
100#efebe0
200#ddd7c6
300#c6bea5
400#ada384
500#958a67
600#796f4e
700#5f573a
800#464029
900#2f2a18
Los grises, teñidos de tu tono
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c0beb8
400#a6a39b
500#8c8980
600#726f67
700#5a5750
800#42403a
900#2b2a26
Los estados del botón
Normal#958a67
Al pasar#837856
Al pulsar#6f674c
Apagado#d3d0ca
Foco#9b8a46
Éxito, aviso, error e info
Éxito#457942
Aviso#9e8b48
Error#a45747
Información#3670ac
Y en oscuro
El mismo color, de noche.
El fondo no es negro puro: lleva un poco de tu tono. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
Contiene un color muy parecido al tuyo (Crudo) y lleva casi un siglo en uso. Sus colores, con nuestros nombres: Castaño rojizo · Crudo · Ocre oliva · Azul verdoso apagado. Dos amarillos, un rojo y un turquesa, con una diferencia de luz clara pero cómoda. Paleta de color franco y con la tensión de mezclar cálidos y fríos. Hay dentro una pareja que aguanta texto normal (contraste máximo 6.3:1).
La lámina, tal cual
4 colores a partes iguales, como en el libro. Es la inspiración, no la interfaz. Pulsa uno para copiarlo.
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.
Puesta en una web
Pídenos fecha
Novedad
Así se ve tu color 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.
Pídenos fecha
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Y el pie, que casi nadie mira hasta que se ve mal.
Medido, antes y después
En la lámina, el mejor par de colores se lee a 6.3:1: AA, se lee.
En pantalla, el texto #2e201e sobre el fondo #fbf5e4 da 14.4:1: AAA, se lee de sobra. En APCA da Lc 97: vale para texto pequeño, del de leer un párrafo entero.
El acento #417777 se separa 4.7:1 del fondo (un botón necesita 3:1) y como enlace llega a 4.7:1 (una palabra necesita 4,5:1).
Consejos para usarla
*
El reparto
Reparte, no iguales: #fbf5e4 en el 60 % de la pantalla, #d1bd19 en el 30 % (tarjetas, franjas, cabeceras) y #417777 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 texto
El párrafo va en #2e201e, 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 #681916, donde el tamaño perdona.
*
El botón
El acento #417777 se separa 4.7:1 del fondo: sirve de botón, con el texto en #f9f6ef.
*
La temperatura
Hay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #d1bd19, y el acento #417777 es lo primero que el ojo va a buscar.
*
Cuántos
Cuatro colores piden disciplina: #d1bd19 y #681916 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
*
En el diccionario
En 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 pálidas: tonos apagados que se llevan bien entre sí; el texto corrido pide una tinta de fuera, casi negra.
La lectura de Goethe
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 · 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 pareja en el círculo
Características
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
Amarillo y rojo, con el naranja saltado entre medias. Es la pareja característica que mejor le parece: serena y magnífica. § 820
Opuestas
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
Mismo sector
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
Vecinas en el círculo, sin color que las separe. Ordinaria y agradable: no dice gran cosa, tampoco molesta. § 829
Vecinas
Vecinas en el círculo, sin color que las separe. Ordinaria y agradable: no dice gran cosa, tampoco molesta. § 829
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.
El kit para programarlaNueve luces, estados, avisos y modo oscuro
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.
Las nueve luces del acento
50#f0f8f8
100#dfeeee
200#c3dcdc
300#a2c5c4
400#7dabab
500#5c9292
600#417777
700#305e5e
800#204646
900#112e2e
Los grises, teñidos de tu tono
50#f5f7f7
100#e8ecec
200#d2d8d8
300#b7c0c0
400#9aa5a5
500#7e8b8b
600#667272
700#4f5959
800#394241
900#252b2b
Los estados del botón
Normal#417777
Al pasar#2f6566
Al pulsar#2b5353
Apagado#abb4b3
Foco#127b7b
Éxito, aviso, error e info
Éxito#457942
Aviso#9e8b48
Error#a45747
Información#3670ac
Y en oscuro
El mismo color, de noche.
El fondo no es negro puro: lleva un poco de tu tono. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
Tu color 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.
La lámina, tal cual
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
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.
Puesta en una web
Pídenos fecha
Novedad
Así se ve tu color 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.
Pídenos fecha
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Y el pie, que casi nadie mira hasta que se ve mal.
Medido, antes y después
En la lámina, el mejor par de colores se lee a 6.3:1: AA, se lee.
En pantalla, el texto #21232c sobre el fondo #f5f5f5 da 14.4:1: AAA, se lee de sobra. En APCA da Lc 97: vale para texto pequeño, del de leer un párrafo entero.
El acento #96896a se separa 3.2:1 del fondo (un botón necesita 3:1) y como enlace llega a 4.5:1 (una palabra necesita 4,5:1).
Consejos para usarla
*
El reparto
Reparte, no iguales: #f5f5f5 en el 60 % de la pantalla, #ffffff en el 30 % (tarjetas, franjas, cabeceras) y #96896a 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 texto
El párrafo va en #21232c, 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 #445f98, donde el tamaño perdona.
*
El botón
El acento #96896a se separa 3.2:1 del fondo: sirve de botón, con el texto en #21232c.
*
La temperatura
Hay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #ffffff, y el acento #96896a es lo primero que el ojo va a buscar.
*
Cuántos
Cuatro colores piden disciplina: #ffffff y #445f98 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
La lectura de Goethe
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 pareja en el círculo
Características
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
Junto al blanco, un color del lado activo pierde fuerza. § 831
Características
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
Junto al blanco, un color del lado pasivo gana viveza. § 831
Mismo sector
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
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.
El kit para programarlaNueve luces, estados, avisos y modo oscuro
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.
Las nueve luces del acento
50#f9f6f1
100#efebe1
200#ded6c7
300#c7bda8
400#aea287
500#96896a
600#7a6e51
700#60563d
800#473f2b
900#2f291a
Los grises, teñidos de tu tono
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c1beb8
400#a6a39b
500#8d8880
600#736f67
700#5a5750
800#42403a
900#2c2a26
Los estados del botón
Normal#96896a
Al pasar#847759
Al pulsar#70664f
Apagado#d2d0ca
Foco#9e8849
Éxito, aviso, error e info
Éxito#457942
Aviso#9e8b48
Error#a45747
Información#3670ac
Y en oscuro
El mismo color, de noche.
El fondo no es negro puro: lleva un poco de tu tono. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
Tu color 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.
La lámina, tal cual
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
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.
Puesta en una web
Pídenos fecha
Novedad
Así se ve tu color 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.
Pídenos fecha
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Y el pie, que casi nadie mira hasta que se ve mal.
Medido, antes y después
En la lámina, el mejor par de colores se lee a 2.0:1: no se lee.
En pantalla, el texto #282221 sobre el fondo #f5f5f5 da 14.4:1: AAA, se lee de sobra. En APCA da Lc 97: vale para texto pequeño, del de leer un párrafo entero.
El acento #96896a se separa 3.2:1 del fondo (un botón necesita 3:1) y como enlace llega a 4.5:1 (una palabra necesita 4,5:1).
Consejos para usarla
*
El reparto
Reparte, no iguales: #f5f5f5 en el 60 % de la pantalla, #ffffff en el 30 % (tarjetas, franjas, cabeceras) y #96896a 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 texto
Ningún par de la lámina se leía como texto (el mejor daba 1.9:1). Por eso el párrafo va en #282221, una tinta casi neutra teñida del tono de la paleta: no está en el libro y hace falta.
*
El botón
El acento #96896a se separa 3.2:1 del fondo: sirve de botón, con el texto en #282221.
*
La temperatura
Toda 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ántos
Cuatro colores piden disciplina: #ffffff y #8b6860 son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
La lectura de Goethe
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 · 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 pareja en el círculo
Con un neutro
Junto al blanco, un color del lado activo pierde fuerza. § 831
Con un neutro
Junto al blanco, un color del lado activo pierde fuerza. § 831
Con un neutro
Un neutro con un color sin lado en el círculo. Aquí Goethe no opina. § 831
Mismo sector
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
Junto al blanco, un color del lado activo pierde fuerza. § 831
Con un neutro
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.
El kit para programarlaNueve luces, estados, avisos y modo oscuro
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.
Las nueve luces del acento
50#f9f6f1
100#efebe1
200#ded6c7
300#c7bda8
400#aea287
500#96896a
600#7a6e51
700#60563d
800#473f2b
900#2f291a
Los grises, teñidos de tu tono
50#f7f6f5
100#ecebe8
200#d9d7d3
300#c1beb8
400#a6a39b
500#8d8880
600#736f67
700#5a5750
800#42403a
900#2c2a26
Los estados del botón
Normal#96896a
Al pasar#847759
Al pulsar#70664f
Apagado#d2d0ca
Foco#9e8849
Éxito, aviso, error e info
Éxito#457942
Aviso#9e8b48
Error#a45747
Información#3670ac
Y en oscuro
El mismo color, de noche.
El fondo no es negro puro: lleva un poco de tu tono. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
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.
La lámina, tal cual
Los colores que da la regla, en crudo y a partes iguales. Es el punto de partida, no la interfaz. Pulsa uno para copiarlo.
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.
Puesta en una web
Pídenos fecha
Novedad
Así se ve tu color 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.
Pídenos fecha
Una tarjeta
Las superficies secundarias van con el color de apoyo. Si no se distingue del fondo, la jerarquía se pierde.
Y el pie, que casi nadie mira hasta que se ve mal.
Medido, antes y después
En la lámina, el mejor par de colores se lee a 3.6:1: solo vale para texto grande.
En pantalla, el texto #28231a sobre el fondo #f5f5f5 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.
El acento #778bb2 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).
Consejos para usarla
*
El reparto
Reparte, no iguales: #f5f5f5 en el 60 % de la pantalla, #ffffff en el 30 % (tarjetas, franjas, cabeceras) y #778bb2 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 texto
Ningún par de la lámina se leía como texto (el mejor daba 3.6:1). Por eso el párrafo va en #28231a, una tinta casi neutra teñida del tono de la paleta: no está en el libro y hace falta.
*
El botón
El acento #778bb2 se separa 3.1:1 del fondo: sirve de botón, con el texto en #28231a.
*
La temperatura
Hay cálidos y fríos: que domine uno y el otro señale. Aquí manda el fondo #ffffff, y el acento #778bb2 es lo primero que el ojo va a buscar.
*
Cuántos
Cuatro colores piden disciplina: #ffffff y #856b2f son la base, los otros dos son detalle. Si dudas, quita antes el de apoyo que el acento.
La lectura de Goethe
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 · 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
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 pareja en el círculo
Mismo sector
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
Junto al blanco, un color del lado activo pierde fuerza. § 831
Características
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
Junto al blanco, un color del lado activo pierde fuerza. § 831
Características
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
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.
El kit para programarlaNueve luces, estados, avisos y modo oscuro
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.
Las nueve luces del acento
50#f4f6fd
100#e6ebf7
200#cfd7eb
300#b2beda
400#93a3c6
500#778bb2
600#5c7095
700#465877
800#324059
900#1f2a3d
Los grises, teñidos de tu tono
50#f6f6f8
100#eaebee
200#d5d7db
300#bcbec4
400#a0a3ab
500#858991
600#6c6f78
700#54575e
800#3e4045
900#282a2e
Los estados del botón
Normal#778bb2
Al pasar#65799f
Al pulsar#586886
Apagado#ced1d7
Foco#5c8cd1
Éxito, aviso, error e info
Éxito#457942
Aviso#9e8b48
Error#a45747
Información#3670ac
Y en oscuro
El mismo color, de noche.
El fondo no es negro puro: lleva un poco de tu tono. Es lo que separa un modo oscuro diseñado de uno que parece una avería.
En 1933 un pintor y diseñador de vestuario japonés, Sanzō Wada, publicó un diccionario de combinaciones de colores: 348 paletas pensadas para tintoreros, tejedores y diseñadores, sacadas de años de trabajar el color de verdad, no de una rueda. Casi un siglo después sigue en la mesa de muchos estudios, incluida la nuestra. Lo hemos leído entero, hemos comprobado cada valor con el original y le hemos puesto nombre en castellano a sus 158 colores.
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.
Si es para tu marca, esto es lo que hacemos: webs a medida que empiezan por el color y acaban en el código.
