Color Tester — Realistic Scenes
Flat swatches lie. Test-drive your colors inside realistic scenes — a painted wall under window light, a real UI card, woven fabric with folds — with gradients, shadows and textures that show how the color will actually behave. Free and 100% in your browser.
A wall color under window light, plaster grain and real shadows — how paint actually reads at home.
Tip: colors you picked anywhere on this site sit in the “Colors” dock on the right — the small arrow buttons pull the dock’s current color into a slot.
Check your screen
No page can read your monitor’s brightness, so check it yourself — the two rows below are neutral steps of near-black and near-white.
You should just barely separate the second patch from the first; if three or more merge, your screen is too dark or has glare on it.
You should just barely separate the last two; if they merge, your screen is too bright or a night/warm mode is on.
- Brightness 50–70 % indoors — not maximum, not dimmed.
- Auto-brightness off.
- Night Shift, True Tone, Windows Night Light and f.lux off.
- No lamp or window shining directly on the display.
- Use Proof view: the scene alone on mid gray, nothing else on screen.
Why flat swatches lie
A color is never seen alone. It arrives wrapped in a context — lit from somewhere, textured by a surface, surrounded by neighbors — and perception bends accordingly. Simultaneous contrast shifts a hue toward the opposite of what surrounds it; a matte plaster wall scatters light and mutes chroma; a woven fabric breaks a color into thousands of tiny highlights and shadows that average into something duller and deeper than the dye itself. This is the gap that makes people repaint rooms and return clothes: the swatch was accurate, and still wrong.
What each scene reproduces
- Painted wall — your color under a soft window-light gradient with a darker corner, plaster grain on top, a trim line, a floor and a framed accent. Watch how the same paint reads three shades apart between the lit and shadowed regions — that spread, not the chip, is what you will live with.
- UI card — a page background, a card surface, heading and body text and a primary button with its label. The fastest way to catch a “brand blue” that works as a logo but dies as a button, or body text that quietly loses contrast on your chosen surface.
- Fabric — the color woven into cloth: thread texture, fold shading, a contrast pocket with stitching. Textiles almost always render darker and calmer than their flat color, which is why the fitting-room surprise exists.
- Material swatch — a single color, honestly lit, on a large panel with a selectable surface: smooth, plaster, rough render, woodchip, brick, woven or paper, under even, soft, window or raking light, on a neutral background you choose. Turn on “Compare surfaces” to see the same color across six surfaces at once — the fastest way to feel how much a texture darkens and calms a color.
Same paint, different surface — what changes
The pigment is identical; the surface decides how much of the light comes back to your eye. Every pit, pore, ridge and joint is a tiny shadow, and thousands of tiny shadows average into a darker, calmer color. The material scene models exactly that — the same relief, lit from the upper left, with its pits and joints darkened — and the rough numbers look like this:
| Surface | Reads darker by | Why |
|---|---|---|
| Smooth | ≈ 0 LRV | Nothing to shadow — the paint reflects as on the chip. |
| Fine plaster | 1–2 LRV | Fine grain, shallow micro-shadows. |
| Rough render | 2–4 LRV | Deep pits and ridges; the effect grows under raking light. |
| Woodchip | 2–3 LRV | Chip ridges throw small but frequent shadows. |
| Brick | 3–5 LRV | Recessed mortar joints are pure shadow, and the brick face itself is rough. |
| Woven | 2–4 LRV | Thread crossings split the color into highlights and shadows. |
A few LRV points sounds small, but it is the difference between the “warm white” on the chip and the “slightly gray” wall you get. Turn on “Compare surfaces” to see all of them side by side with the same paint.
Paint on brick and rough render
Painted brick is the extreme case. The mortar joints sit a few millimetres back, so they stay in shadow under almost any light, and the brick face is porous and uneven — a fresh coat of white on brick reads visibly grayer than the same white on a smooth wall, and warm or dark colors gain depth. Rough exterior render behaves the same way at a smaller scale. Both react strongly to raking light (Streiflicht): a low sun in the evening or a wall washer lamp grazes across the surface, every ridge throws a long shadow and the texture becomes the dominant impression. That is why a facade color chosen at noon can look completely different at seven in the evening — the “Raking” light option in the material scene shows the worst case on purpose.
LRV — the number on every paint chip
LRV, the Light Reflectance Value (German: Hellbezugswert, HBW), is the share of visible light a surface reflects — 0 for absolute black, 100 for a perfect white, around 85 for most “white” paints. It is printed on most paint chips and used in specifications: rooms feel bright and airy above roughly 50, dark and enveloping below about 25, and facade insulation systems (ETICS) often require an LRV of 20 or more so a dark render does not overheat and crack. The tester prints L* and LRV under the material scene for the color you are testing — and remember that the surface takes a few points off that number.
A workflow that actually settles decisions
Pick candidate colors anywhere on this site — from a photo with the image picker, from a palette, from the wheel — and they collect in the My colors dock. Open this tester, pull candidates into a slot one after another with the arrow button, and judge them in the scene, not in the abstract. When two finalists remain, put them side by side in the compare tool at zero gap, and check text pairs in the contrast checker. The whole loop runs locally in your browser; export the scene as a PNG when you need to convince someone else.
Set your screen before you decide
A web page cannot know how bright your monitor is — there is no browser API for it, and there never will be one that tells us whether a night mode is warming your whites. So the honest tools are a check and a neutral viewing mode. Before you judge: brightness at 50–70 % indoors, auto-brightness off, Night Shift / True Tone / Windows Night Light / f.lux off, no lamp or window shining on the display. Then open “Check your screen” under the tester: if the darkest patches merge, the screen is too dark or has glare on it; if the lightest patches merge, it is too bright or a warm mode is on. Finally use “Proof view” — the scene alone on mid gray with a neutral wedge, no chrome, nothing colorful nearby — and decide there.
Honest limits
A screen can preview relationships — which candidate is warmer, which combination balances — but it cannot reproduce pigment under your specific lamp, and every monitor differs. For paint, always confirm the shortlisted one or two colors with a physical sample on the actual wall in morning and evening light. The tester’s job is to get you to that shortlist without five trips to the store.
When the colors in a scene work individually but not together, the palette harmonizer aligns them to one scheme around the ones you keep — and hands the result back here for the scene check.
Frequently asked questions
Why test colors in a scene instead of comparing swatches?
Because context changes color. Lighting gradients, surface texture and neighboring colors all shift how a color reads — a paint chip that looks perfect flat can feel completely different on a shadowed, plastered wall. The scenes reproduce those conditions.
How do I get my own colors into the scene?
Type any CSS color into a slot, use the native picker, or press the small arrow button to pull the current color from the My colors dock — where everything you picked from images or converters is waiting.
What do the textures and gradients simulate?
The wall scene adds window light, a corner shadow and plaster grain; the fabric scene adds fold shading and a woven-thread texture; the UI card adds real typography and surfaces. All textures are generated procedurally in your browser — no stock images.
Can I save or share a test?
The scene state lives in the page link — copy the URL to share the exact template and colors — and “Export PNG” downloads the rendered scene for mood boards or client chats.
Is anything uploaded when I test colors?
No. Rendering happens on a canvas in your browser; the page works offline once loaded.
Why does paint look darker on the wall than on the chip?
Three reasons stack up. A wall is big, so the color fills your view and simultaneous contrast with the white chip card is gone. A wall is rarely lit evenly — corners and the side away from the window sit in shadow. And a real surface has texture: every pit, pore and joint is a tiny shadow, so plaster, render or brick reflect a few LRV points less than the same paint on a smooth chip. The material scene reproduces all three; switch the surface and the light to see how far the same color travels.
How does a textured or brick wall change a paint color?
Texture never changes the pigment, it changes the light. Recessed mortar joints, the pits of rough render and the ridges of woodchip wallpaper cast micro-shadows that average into a darker, calmer color — roughly 1–2 LRV points for fine plaster, 2–4 for rough render or a woven surface, 3–5 for painted brick. Under raking light (a low sun or a wall washer) the relief becomes visible and the effect roughly doubles. Pick the surface and light in the material scene, or turn on “Compare surfaces” to see all of them side by side.
Is my screen too bright to judge colors?
No web page can read your monitor’s brightness — there is no such API — so the honest tools are a check and a neutral viewing mode. Open “Check your screen”: if the darkest patches merge, the screen is too dark or has glare on it; if the lightest patches merge, it is too bright or a night/warm mode is on. Then use “Proof view”: the scene alone on mid gray, with a neutral gray wedge to confirm the setting before you decide.
What is LRV / Hellbezugswert?
LRV (Light Reflectance Value, German Hellbezugswert or HBW) is the share of visible light a surface reflects, from 0 (absolute black) to 100 (perfect white). It is printed on most paint chips and specified for facades: exterior insulation systems often require an LRV of 20 or more so the render does not overheat, and rooms feel bright above roughly 50. The tester shows the LRV of your material color under the canvas.