Pigmentoria
El Léxico Cromático
Donde el ultramar de Vermeer se encuentra con tus variables CSS. Un vocabulario que tiende puentes entre el pigmento antiguo y el lenguaje del diseño digital moderno.
Pigmento y Material
Aprende el vocabulario del taller: qué son los pigmentos, cómo se comportan y por qué sus propiedades físicas definieron las paletas de los grandes maestros.
Pigmento
Una sustancia finamente molida e insoluble que confiere color. A diferencia de los tintes, los pigmentos no se disuelven: quedan en suspensión.
Entrada completa →/* From the earth to the screen */ --pigment-sienna: #C4623A; --pigment-ultramarine: #2B3F8E;
Matiz
La identidad pura del color —rojo, azul, amarillo— independiente de la luminosidad o la saturación. El ADN de un color.
Entrada completa →/* Hue as a design token */ --hue-primary: 215; /* ultramarine */ color: hsl(var(--hue-primary), 65%, 42%);
Tinte, Sombra, Tono
Las tres maneras de modificar un matiz puro: añadir blanco (tinte), añadir negro (sombra) o añadir gris (tono).
Entrada completa →/* Tint/shade scale */ --sienna-100: #F2DDD2; /* tint */ --sienna-500: #C4623A; /* pure */ --sienna-900: #5C2E1A; /* shade */
Fondo
La superficie preparada bajo la pintura. Una imprimación cálida altera cada color que se aplica encima. La influencia invisible.
Entrada completa →“Usa una imprimación marfil cálida como la de un lienzo antiguo — todos los colores de la interfaz deben parecer asentados sobre lino envejecido, no sobre blanco estéril.”
Claroscuro
La interacción dramática de luz y sombra. Del italiano: chiaro (claro) + oscuro (oscuro).
Entrada completa →“Aplica un contraste de claroscuro — usa sombras profundas y puntos focales brillantes para guiar la mirada, como una composición de Caravaggio.”
Imprimación
Una capa fina y transparente de color aplicada sobre la preparación. Establece la atmósfera antes de cualquier trabajo de detalle.
Entrada completa →/* Digital imprimatura */
body {
background: #FAF7F2;
/* warm imprimatura unifies all elements */
}Laca
Un pigmento creado al fijar un tinte soluble sobre una partícula insoluble. Transparente y luminoso, pero a menudo fugitivo.
Entrada completa →Fugitivo
Un color que se desvanece con el tiempo al exponerse a la luz. Bello pero impermanente: la antítesis de la resistencia a la luz.
Entrada completa →Teoría del Color
Entiende las reglas del color: temperatura, valor, armonía y contraste — la base de toda decisión cromática, del lienzo a la pantalla.
Temperatura del color
La calidez o frialdad percibida de un color. No es temperatura física, sino un fenómeno psicológico con implicaciones espaciales.
Entrada completa →“Usa ocre cálido y siena para las acciones principales, ultramar frío para los fondos — como un pintor veneciano creando profundidad a través de la temperatura.”
Saturación / Croma
La intensidad o pureza de un color. Una saturación alta grita; una baja, susurra. También llamado croma.
Entrada completa →/* Saturation scale for one hue */ --blue-vivid: hsl(215, 85%, 50%); --blue-muted: hsl(215, 25%, 50%); --blue-ghost: hsl(215, 8%, 92%);
Valor
Cuán claro u oscuro es un color, independientemente del matiz. La propiedad más importante para la legibilidad y la jerarquía.
Entrada completa →“Asegura que la estructura de valores funcione primero en escala de grises — como un grabado de Rembrandt. Si la jerarquía es clara sin color, los matices solo la reforzarán.”
Complementarios
Colores opuestos en la rueda cromática. Máximo contraste, máxima vibración al colocarse uno junto al otro.
Entrada completa →Análogos
Colores adyacentes en la rueda. Armónicos, unificados, de bajo contraste — como un almiar de Monet al atardecer.
Entrada completa →Contraste simultáneo
Un color se percibe de forma diferente según lo que le rodea. El descubrimiento de Chevreul en 1839 que transformó tanto el arte como el diseño.
Entrada completa →Armonía cromática
El efecto placentero de los colores en combinación. No es aleatorio: está gobernado por relaciones geométricas en la rueda cromática.
Entrada completa →Digital e Interfaz
Domina el color en pantalla: design tokens, espacios de color, accesibilidad WCAG y sistemas CSS escalables para productos modernos.
Design Token
Un valor reutilizable con nombre que almacena una decisión de diseño. No es solo un color, sino la razón de un color.
/* Raw values → semantic tokens */ --sienna-500: #C4623A; --color-action-primary: var(--sienna-500); --color-text-warning: var(--sienna-500);
Espacio de color
Un modelo matemático que define cómo se representan los colores. sRGB, P3, Lab, OKLab — cada uno con gamas diferentes.
/* Modern color spaces in CSS */ color: oklch(65% 0.15 30); /* perceptual */ color: color(display-p3 0.8 0.3 0.2);
Ratio de contraste
La diferencia de luminancia entre primer plano y fondo. WCAG exige 4,5:1 para texto y 3:1 para texto grande.
“Genera una paleta con siena tostado como color primario que cumpla el contraste WCAG AA tanto sobre fondo crema claro como sobre fondo carbón oscuro.”
Color semántico
Color asignado por significado, no por apariencia: éxito (verde), advertencia (ámbar), peligro (rojo), información (azul).
Dark Mode
Un esquema de color de interfaz que usa texto claro sobre fondos oscuros. No es una inversión, sino una reevaluación completa de cada color.
/* Dark mode token swap */
@media (prefers-color-scheme: dark) {
--surface: #1A1714;
--text: #FAF7F2;
--accent: #E8A88A; /* desaturated */
}Gama
El rango de colores que un dispositivo o sistema puede reproducir. sRGB es estrecho; Display P3 es más amplio; la visión humana es la más amplia de todas.
CSS Custom Properties
Variables declaradas con el prefijo -- que se propagan en cascada a través del DOM. La columna vertebral de cualquier sistema de color escalable.
/* A minimal Pigmentoria-inspired system */
:root {
--color-ground: #FAF7F2;
--color-ink: #1A1714;
--color-pigment: #C4623A;
--color-lapis: #2B3F8E;
}Prompting con IA
Mejora tus prompts de color para IA: técnicas narrativas, restricciones creativas y referencias materiales que producen resultados superiores.
Historia de color
Una narrativa que conecta las elecciones cromáticas con un significado. No «usa azul», sino «el azul del turbante de Vermeer, molido de lapislázuli afgano».
“Crea una paleta inspirada en un bodegón holandés del siglo XVII — luz cálida de vela sobre madera oscura, con una puntuación de ultramar costoso en el mantel.”
Identidad cromática
La firma cromática única de un artista, una época o una marca. Reconocible de un vistazo, incluso sin contexto.
“Define una identidad cromática para una app fintech premium — inspirada en la paleta contenida de un interior de Hammershøi: grises plateados, azules apagados y un acento cálido.”
Paleta de época
Un conjunto de colores históricamente fieles a una época concreta, restringido por los pigmentos disponibles en aquel momento.
“Usa una paleta de la era impresionista — amarillos de cadmio de alto croma, azul cobalto, verde viridián y rosa de granza. Sin tierras. Captura la luz al aire libre.”
Atmósfera visual
La atmósfera emocional que evoca una combinación de colores. La sensación antes del análisis.
“La atmósfera es crepúsculo contemplativo — como el último atardecer de Turner, donde el ámbar dorado se disuelve en violeta profundo. Aplícalo al esquema de color de una app de meditación.”
Extracción de paleta
Derivar una paleta de color utilizable a partir de una imagen, pintura o fotografía. Convertir inspiración visual en design tokens.
/* From Vermeer's Girl with a Pearl Earring */ --vermeer-ground: #2C2418; --vermeer-skin: #D4A574; --vermeer-turban: #3D5A99; --vermeer-pearl: #E8DFD0;
Prompt restrictivo
Decirle a la IA qué NO usar, igual que una paleta limitada restringe a un pintor. La exclusión agudiza los resultados.
“Diseña una paleta de UI usando solo colores disponibles para un pintor renacentista: ocres, sienas, sombras, blanco de plomo y un precioso ultramar. Sin tonos sintéticos.”
Referencia material
Describir el color a través de su fuente física en lugar de su apariencia. Anclar las decisiones digitales en la realidad tangible.
“Usa el verde de cobre oxidado de un tejado parisino, la piedra caliza cálida de una fachada haussmanniana y el carbón del hierro forjado de los balcones.”
El Puente
Descubre cómo el conocimiento clásico del color se traduce directamente en mejores decisiones de diseño digital — los mismos principios, distintas herramientas.
Valor → Ratio de contraste
Cuando Caravaggio mapeaba la luz y la sombra sobre un lienzo, estaba resolviendo el mismo problema que aborda el WCAG AA: hacer la información legible mediante la diferencia de luminancia. Su claroscuro es tu ratio de contraste 4,5:1.
Armonía → Design tokens
Un pintor barroco mezclaba una paleta limitada de 6-8 pigmentos para obtener variaciones infinitas. Un sistema de diseño hace lo mismo con tokens: entradas restringidas, resultados armónicos. La misma disciplina, distinto medio.
Temperatura → Jerarquía espacial
Los pintores renacentistas usaban tonos cálidos para avanzar y tonos fríos para retroceder, creando profundidad en una superficie plana. Los diseñadores de UI aplican el mismo principio: los CTA cálidos se adelantan, los fondos fríos se retraen.
Estudio
Términos nacidos en el taller del pintor — pigmentos, materiales y técnicas desarrollados a lo largo de siglos de práctica en el estudio.
Digital
El vocabulario de las pantallas y los sistemas — espacios de color, tokens de diseño, estándares de accesibilidad y CSS.
Puente
Conceptos que conectan ambos mundos — donde el conocimiento histórico del color informa directamente el diseño digital moderno.
Cada código hex tiene una historia.
Cada paleta cuenta una historia.
Entradas completas
Los términos de taller y de teoría que tienen entrada larga propia: de dónde viene la palabra, qué significaba con un pincel en la mano y en qué acabó.