FROM A SWATCH TO SOMETHING REAL.
Website color
palette preview.
Preview your palette on a website and UI components. Assign semantic roles, swap light/dark surfaces and explore color-vision simulations.
Everyday things.
Extraordinary feeling.
Considered objects for a life well lived.
Explore the collectionIt's in the details.
These are visual specimens, not interactive form controls.
11.16:1
Ink against surface · passes AA normal text.
The sample CTA automatically chooses dark or white text; decorative objects are exempt from text contrast.
Theme toggling swaps the surface and ink for exploration. It does not automatically create a production dark theme. Vision previews are approximate; exports always keep original colors.
FROM A COLOR TO A CLEAR DECISION
Preview colors in context before you export
Assign palette colors to primary, secondary, accent, surface and ink roles. The website and component specimens update together, so you can judge the arrangement before copying semantic tokens.
How to use this tool
- Choose a swatch for each role. The same color may occupy more than one role, but check every pairing you actually use.
- Try the light/dark arrangement and a vision simulation. These are visual explorations, not a complete theme generator or compliance check.
- Inspect the ink/surface ratio, open the full contrast checker, and export the original role colors when the arrangement works.
Roles make a palette easier to evaluate
Five swatches do not explain which color should carry body text or which should decorate a large background. Roles turn that ambiguity into a concrete design decision. A pale accent may work beautifully as a surface while failing as small text.
The preview includes visual specimens rather than a functioning shop or form. Its primary CTA selects readable black or white text automatically. Surface and ink stay under your control, so a failing combination remains visible rather than being silently changed.
Protanopia, deuteranopia and tritanopia previews use severity-1.0 Machado matrices in linear sRGB. They approximate one model of perception; they do not diagnose vision or certify that a design communicates without color. Exported values remain the originals.
Method reference: W3C: Use of Color. Read all calculation methods and limitations.
Common questions
Does dark arrangement generate a complete dark theme?
No. It swaps surface and ink for a quick comparison. Production dark themes still need component, border, focus, hover and error-state review.
Do vision simulations change my exported colors?
No. Simulations only affect the preview. Exports contain the original palette and role assignments.
What should I check besides text contrast?
Check keyboard focus, state indicators, non-text controls and the use of labels or shapes alongside color. The complete product needs broader accessibility testing.