Pigmentoria
The Chromatic Lexicon
Where Vermeer’s ultramarine meets your CSS variables. A vocabulary that bridges ancient pigment with the language of modern digital design.
Pigment & Material
Learn the studio vocabulary: what pigments are, how they behave, and why their physical properties shaped the palettes of the great masters.
Pigment
A finely ground insoluble substance that imparts color. Unlike dyes, pigments don't dissolve — they suspend.
Full entry →/* From the earth to the screen */ --pigment-sienna: #C4623A; --pigment-ultramarine: #2B3F8E;
Hue
The pure color identity — red, blue, yellow — independent of lightness or saturation. The DNA of a color.
Full entry →/* Hue as a design token */ --hue-primary: 215; /* ultramarine */ color: hsl(var(--hue-primary), 65%, 42%);
Tint, Shade, Tone
The three ways to modify a pure hue: add white (tint), add black (shade), or add gray (tone).
Full entry →/* Tint/shade scale */ --sienna-100: #F2DDD2; /* tint */ --sienna-500: #C4623A; /* pure */ --sienna-900: #5C2E1A; /* shade */
Ground
The prepared surface beneath the paint. A warm ground shifts every color above it. The invisible influence.
Full entry →“Use a warm ivory ground like old canvas — all interface colors should feel like they sit on aged linen, not sterile white.”
Chiaroscuro
The dramatic interplay of light and shadow. Italian: chiaro (light) + oscuro (dark).
Full entry →“Apply chiaroscuro contrast — use deep shadows and bright focal points to guide the eye, like a Caravaggio composition.”
Imprimatura
A thin, transparent wash of color applied over the ground. Sets the mood before any detail work begins.
Full entry →/* Digital imprimatura */
body {
background: #FAF7F2;
/* warm imprimatura unifies all elements */
}Lake
A pigment made by fixing a soluble dye onto an insoluble particle. Transparent and luminous, but often fugitive.
Full entry →Fugitive
A color that fades over time when exposed to light. Beautiful but impermanent — the antithesis of lightfastness.
Full entry →Color Theory
Understand the rules of color: temperature, value, harmony and contrast — the foundation for every chromatic decision, from canvas to screen.
Color Temperature
The perceived warmth or coolness of a color. Not physical temperature — a psychological phenomenon with spatial implications.
Full entry →“Use warm ochre and sienna for primary actions, cool ultramarine for backgrounds — like a Venetian painter creating depth through temperature.”
Saturation / Chroma
The intensity or purity of a color. High saturation screams; low saturation whispers. Also called chroma.
Full entry →/* Saturation scale for one hue */ --blue-vivid: hsl(215, 85%, 50%); --blue-muted: hsl(215, 25%, 50%); --blue-ghost: hsl(215, 8%, 92%);
Value
How light or dark a color is, independent of hue. The most important property for readability and hierarchy.
Full entry →“Ensure the value structure works in grayscale first — like a Rembrandt etching. If the hierarchy is clear without color, the hues will only enhance it.”
Complementary
Colors opposite each other on the color wheel. Maximum contrast, maximum vibration when placed side by side.
Full entry →Analogous
Colors adjacent on the wheel. Harmonious, unified, low-contrast — like a Monet haystack at sunset.
Full entry →Simultaneous Contrast
A color looks different depending on what surrounds it. Chevreul's 1839 discovery that changed both art and design.
Full entry →Color Harmony
The pleasing effect of colors in combination. Not random — governed by geometric relationships on the color wheel.
Full entry →Digital & Interface
Master color on screen: design tokens, color spaces, WCAG accessibility and scalable CSS systems for modern products.
Design Token
A named, reusable value that stores a design decision. Not just a color — the reason for a color.
/* Raw values → semantic tokens */ --sienna-500: #C4623A; --color-action-primary: var(--sienna-500); --color-text-warning: var(--sienna-500);
Color Space
A mathematical model that defines how colors are represented. sRGB, P3, Lab, OKLab — each with different gamuts.
/* Modern color spaces in CSS */ color: oklch(65% 0.15 30); /* perceptual */ color: color(display-p3 0.8 0.3 0.2);
Contrast Ratio
The luminance difference between foreground and background. WCAG requires 4.5:1 for text, 3:1 for large text.
“Generate a palette with burnt sienna primary that passes WCAG AA contrast on both light cream and dark charcoal backgrounds.”
Semantic Color
Color assigned by meaning, not appearance: success (green), warning (amber), danger (red), info (blue).
Dark Mode
A UI color scheme that uses light text on dark backgrounds. Not an inversion — a complete re-evaluation of every color.
/* Dark mode token swap */
@media (prefers-color-scheme: dark) {
--surface: #1A1714;
--text: #FAF7F2;
--accent: #E8A88A; /* desaturated */
}Gamut
The range of colors a device or system can reproduce. sRGB is narrow; Display P3 is wider; human vision is widest of all.
CSS Custom Properties
Variables declared with -- prefix that cascade through the DOM. The backbone of any scalable color system.
/* A minimal Pigmentoria-inspired system */
:root {
--color-ground: #FAF7F2;
--color-ink: #1A1714;
--color-pigment: #C4623A;
--color-lapis: #2B3F8E;
}AI Prompting
Improve your AI color prompts: narrative techniques, creative constraints and material references that produce superior results.
Color Story
A narrative that connects color choices to meaning. Not "use blue" — but "the blue of Vermeer's turban, ground from Afghan lapis lazuli."
“Create a palette inspired by a 17th-century Dutch still life — warm candlelight on dark wood, with one punctuation of expensive ultramarine in the tablecloth.”
Chromatic Identity
The unique color signature of an artist, era, or brand. Recognizable at a glance, even without context.
“Define a chromatic identity for a premium fintech app — inspired by the restrained palette of a Hammershøi interior: silver grays, muted blues, and one warm accent.”
Period Palette
A set of colors historically accurate to a specific era, constrained by the pigments that were available at the time.
“Use an Impressionist-era palette — high-chroma cadmium yellows, cobalt blue, viridian green, and rose madder. No earth tones. Capture outdoor light.”
Visual Mood
The emotional atmosphere evoked by a color combination. The feeling before the analysis.
“The mood is contemplative dusk — like the last Turner sunset, where golden amber dissolves into deep violet. Apply this to a meditation app's color scheme.”
Palette Extraction
Deriving a usable color palette from an image, painting, or photograph. Turning visual inspiration into design tokens.
/* From Vermeer's Girl with a Pearl Earring */ --vermeer-ground: #2C2418; --vermeer-skin: #D4A574; --vermeer-turban: #3D5A99; --vermeer-pearl: #E8DFD0;
Constraint Prompt
Telling AI what NOT to use, just as a limited palette constrains a painter. Exclusion sharpens results.
“Design a UI palette using only colors available to a Renaissance painter: ochres, siennas, umbers, lead white, and one precious ultramarine. No synthetic hues.”
Material Reference
Describing color through its physical source rather than its appearance. Grounding digital decisions in tangible reality.
“Use the oxidized copper green of a Parisian rooftop, the warm limestone of a Haussmann facade, and the charcoal of wrought-iron balconies.”
The Bridge
See how classical color knowledge translates directly into better digital design decisions — the same principles, different tools.
Value → Contrast ratio
When Caravaggio mapped light-to-dark across a canvas, he was solving the same problem WCAG AA addresses: making information readable through luminance difference. His chiaroscuro is your 4.5:1 contrast ratio.
Harmony → Design tokens
A Baroque painter mixed a limited palette of 6-8 pigments into infinite variations. A design system does the same with tokens: constrained inputs, harmonious outputs. Same discipline, different medium.
Temperature → Spatial hierarchy
Renaissance painters used warm tones to advance and cool tones to recede — creating depth on a flat surface. UI designers use the same principle: warm CTAs come forward, cool backgrounds fall back.
Studio
Terms born in the painter’s workshop — pigments, materials, and techniques developed over centuries of studio practice.
Digital
The vocabulary of screens and systems — color spaces, design tokens, accessibility standards, and CSS.
Bridge
Concepts that connect both worlds — where historical color knowledge directly informs modern digital design.
Every hex code has a history.
Every palette tells a story.
Full entries
The studio and theory terms that carry a longform entry of their own — where the word came from, what it meant with a brush in hand, and what became of it.