Clear hierarchy
Give important actions a visual home.
Live color context
Preview Your Color Palette on a Website
Change five color roles and see hierarchy, cards, CTAs, and body text update on a realistic sample site.
Live light landing preview
This sample uses your five roles only. It does not recolor Colortion itself.
A clearer product experience
Design systems that make the next move feel obvious.
Preview how your colors create hierarchy, guide attention, and make everyday interface decisions easier to read.
Start a project See the process
5
color roles
1
clear system
∞
ways to explore
Built for real decisions
Every color has a job to do.
Thoughtful detail
Let quiet surfaces support your content.
Made to share
Keep every decision easy to understand.
A simple next step
Build a system your whole team can use.
A practical place for a primary message, supporting copy, and a high-attention action.
View the guide
“A cleaner system makes every decision feel easier.”
A sample content block for checking long-form text
Flexible options
Choose the level of support you need.
Essentials
A practical foundation for focused work.
- Thoughtful foundations
- Clear next steps
- Simple handoff
Momentum
RecommendedMore room to bring a complete system together.
- Thoughtful foundations
- Clear next steps
- Simple handoff
Contrast in this preview
Checks cover the text and UI role pairs rendered above. Passing results are helpful, but they are not a full accessibility audit.
Text on backgroundPass
15.55:1 · AA text needs 4.5:1
Text on secondaryPass
13.20:1 · AA text needs 4.5:1
Action text on primaryPass
6.29:1 · AA text needs 4.5:1
Supporting text on primaryPass
4.55:1 · AA text needs 4.5:1
Text on accentPass
5.18:1 · AA text needs 4.5:1
Primary on backgroundPass
6.01:1 · UI needs 3:1
Component border on backgroundPass
3.57:1 · UI needs 3:1
Component border on secondaryPass
3.03:1 · UI needs 3:1
Muted text on backgroundPass
5.31:1 · AA text needs 4.5:1
Muted text on secondaryPass
4.51:1 · AA text needs 4.5:1
bg=F8FAFC&text=172033&primary=4F46E5&secondary=E0E7FF&accent=C2410C
How to Preview a Website Color Palette
- 1. Set the five roles. Start with a background and text color, then give primary, secondary, and accent colors specific visual jobs.
- 2. Compare color and type contexts. Switch between the Landing and Dashboard samples, then open Typography preview to test headings, body copy, cards, actions, navigation, and dense UI together.
- 3. Review contrast results. Fix combinations that make normal text or essential UI boundaries difficult to perceive.
- 4. Copy or share the theme. Export named CSS variables for implementation or send the exact preview URL to a collaborator.
Need the full testing workflow? Read how to test a website color palette before launch for the screens and states worth reviewing.
What Each Website Color Does
Background
The page canvas and spacious sections. It needs to make Text and surfaces easy to distinguish.
Text
Headings, paragraphs, and labels on canvas and card surfaces. Its contrast determines much of the interface’s readability.
Primary
The main call to action, selected states, and key emphasis. It should lead attention without overwhelming the page.
Secondary
Cards, quiet panels, and supporting actions. It creates structure without competing with the primary action.
Accent
Badges, small highlights, and attention signals. Use it sparingly so it remains meaningful.
Check Contrast Before You Ship
A palette can look cohesive and still create unreadable paragraphs, button labels, or card boundaries. This preview checks the pairs it displays and points out failures. For a detailed AA/AAA breakdown or to test any other pair, open the Color Contrast Checker.
From Palette to CSS Variables
The CSS button uses stable names for the five roles and selected typography, so you can bring a previewed direction into a prototype or a real codebase without translating unlabeled swatches. Load the selected font files in your project before using the font stacks.
:root {
--color-background: #F8FAFC;
--color-text: #172033;
--color-primary: #4F46E5;
--color-secondary: #E0E7FF;
--color-accent: #C2410C;
--color-on-primary: #FFFFFF;
--color-on-primary-muted: #E1D6FB;
--color-on-accent: #000000;
--color-text-muted: #636877;
--color-border: #808491;
--color-primary-hover: #3637D3;
--font-heading: "Inter", Arial, sans-serif;
--font-body: "Inter", Arial, sans-serif;
--type-scale: 1.25;
}Frequently Asked Questions
What is a website color preview?
A website color preview applies five editable roles — Background, Text, Primary, Secondary, and Accent — to a realistic sample interface. It helps you judge hierarchy and readability before using a palette in a real design or codebase.
Which colors can I customize?
You can edit all five source colors. Background is the page base, Text handles headings and copy, Primary is for main actions, Secondary supports cards and quieter surfaces, and Accent calls attention to small highlights.
Can I compare a landing page and dashboard?
Yes. Use the Landing and Dashboard selector above the sample. Both templates keep the same five color roles, so you can see whether a palette works in spacious marketing content and a denser product interface.
Can I preview different fonts?
Yes. Open Typography preview in the editor to choose independent Heading and Body families, a named type scale, or a curated pairing. Those settings affect both samples and are preserved in a shared URL.
Can I preview a palette I generated or found on Colortion?
Yes. The generator and palette pages will open this tool with a suggested role mapping. That mapping is only a starting point: you can immediately edit every color role to match your intent.
Does this tool check accessibility?
The tool reports WCAG contrast ratios for the text and UI role pairs displayed in the sample. It is a practical first check, not a complete accessibility audit of a finished website. Use the Contrast Checker to investigate a specific pair in detail.
Can I share my website color theme?
Yes. Share copies a URL that preserves the validated Light and Dark color roles, selected Landing or Dashboard preview, and typography choices. Anyone opening it sees the same editable theme without an account.
Can I use the exported colors in a commercial project?
Yes. The CSS export gives you color values, role names, and optional font stacks to adapt in your own project. You must load any selected font files yourself and test the final implementation, including accessibility, across your actual components and content.