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.
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.
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.
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.
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.