Color simulator: preview a color on real UI components
This color simulator shows one color on the interface pieces it will actually live on: buttons, form fields, cards, navigation, charts, tags and alerts. You see it in light or dark mode, with WCAG contrast results and color blindness simulation. A swatch alone hides problems that a real screen reveals. 66Colorful is free, runs in your browser and needs no signup.
How to use the color simulator
- Choose a color with the picker or type a HEX code into Base color. The tool starts with
#3273DC. - Open Apply as and pick Primary color, Accent color or Background color.
- Move the Lightness and Saturation sliders until the Applied color looks right. Use Reset adjustments to go back to your base color.
- Tick Dark mode preview to see every component on a dark page.
- Choose a type under Color blindness simulation, then set the Severity slider.
- Read the contrast results, then copy the HEX, RGB or CSS output, or use Share link.
What the color preview tool shows you
The page turns one color into a full set of checks, so you can judge it in context instead of guessing from a chip.
- Live UI preview: buttons in primary, accent, outline and focused states, a text input with a focus ring, a checkbox, a card with links, a navigation bar, a bar chart, tags, an alert and a progress bar.
- WCAG contrast results: white text on the color, black text on the color, the color as text on the page, and the color as a UI element, each with pass or fail badges.
- Tints, shades and complements: 30% and 60% tints and shades, the complementary color and two analogous colors, each with a copy button.
- Color blindness cards: your color next to its protan, deutan, tritan and achromatopsia versions.
- Code and file output: CSS, SCSS, Tailwind CSS and JSON tokens, a CSS download and a PNG summary.
Practical uses for a color preview tool
Designers use the preview to choose a brand or button color before building a full system. Developers use it to confirm that a color works as text, border and fill, then copy ready-made variables. Marketers and students use it to see how one color behaves across a page and for viewers with different color vision.
Apply as primary, accent or background in the color simulator
Test a color in the role it will play, because the same color passes or fails depending on what sits on top of it. The Apply as menu changes that role.
Primary and accent color previews
As a primary color, the shade fills main buttons, links, the focus ring and the chart. As an accent, it drives the accent buttons, links and soft highlights while a neutral blue stays primary. In both modes the tool picks white or black label text, whichever has the higher contrast on the fill.
Background color preview
As a background, your color becomes the surface of each section and text switches to white or black on top. Use this mode for hero bands, banners and colored cards. It shows quickly whether body copy stays readable on the fill.
How WCAG contrast results work for a simulated color
WCAG contrast is the ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The tool uses that formula from the WCAG 2.2 Contrast (Minimum) criterion and shows a pass or fail badge for each level.
| Check | Minimum ratio | Applies to |
|---|---|---|
| AA | 4.5:1 | Normal text |
| AA large | 3:1 | Large text |
| AAA | 7:1 | Normal text |
| AAA large | 4.5:1 | Large text |
| UI 3:1 | 3:1 | Icons, borders, controls |
Large text means 24px and up, or 18.66px and up in bold. UI components follow the Non-text Contrast criterion, which sets 3:1 for interface parts and graphics.
Worked example: WCAG contrast for #3273DC
The default color #3273DC is rgb(50, 115, 220). White text on it scores about 4.54:1, which passes AA for normal text. Black text scores about 4.62:1, so the tool names black as the best text color. On the dark preview page (#111827), the same blue as text scores about 3.90:1. That passes for large text and UI, but fails AA for normal text.
The tool truncates each ratio instead of rounding it up, so a 4.49 never passes as 4.5. For a custom pair of colors, use the contrast checker.
Dark mode color preview: why the same color changes
A color looks different on a dark page because its contrast with the surroundings changes. Dark mode flips which parts pass and which fail.
When you tick Dark mode preview, every component switches to a dark theme. The contrast results are recalculated against the dark page color. A mid-tone blue that sits comfortably on white may lose contrast as small text on dark, and a very dark brand color may vanish as a border.
Sites usually respond to the visitor's system setting through the CSS prefers-color-scheme media feature. Preview both themes before you ship. If you plan to ship a light and dark pair, the CSS variable theme generator builds the tokens for both.
How does color blindness simulation work here?
The simulation recolors the whole preview as someone with a color vision deficiency might see it. It covers protan (red cones), deutan (green cones), tritan (blue cones) and achromatopsia (no color, luminance only).
For the first three types you set a severity from 10% to 100%, from mild anomaly to full dichromacy. The tool uses the Machado 2009 model. The result is an estimate, because real perception varies by person and by screen. The background reading is on the color blindness overview on Wikipedia.
Look for lost distinctions: a red alert that looks like a green success tag, or a chart where neighboring bars blend. For a deeper test with your own images and palettes, try the color blindness simulator.
Can a color simulator show real lighting conditions?
No. This tool previews a color on a screen interface, not under daylight, warm bulbs or fluorescent tubes. It does not model light sources or material finishes, and the color you see still depends on your display and its settings.
What it does well is the digital side: how a color behaves on components, on light and dark pages, and for viewers with different color vision. For physical rooms and paint, test a real sample at the location. For on-screen mockups of rooms, the Color Scene Studio is a better fit.
Color simulator export: CSS, SCSS, Tailwind and JSON
The output panel turns your applied color into design tokens: the color, its tints and shades, the complement, analogous colors and a matching on-color for text. Switch between CSS, SCSS, Tailwind CSS and JSON tokens.
:root {
--color-primary: #3273DC;
--color-primary-tint-60: ...;
--color-complement: ...;
--color-on-primary: #000000;
}Use Copy HEX or Copy RGB for a single value, Copy CSS or Export CSS for the variables, Download PNG for a summary image, and Share link to send a URL that restores your color and settings. If you need the value in another format, the color converter handles HEX, RGB and HSL, and the HEX to RGB converter covers the common case.
Color simulator mistakes to avoid
- Judging by the swatch alone. A color that looks good as a chip can fail as small text. Always read the contrast badges for the role you picked.
- Skipping dark mode. Check both themes before you finalize a brand color.
- Relying on color alone. The color blindness cards show whether meaning survives. Add icons, labels or patterns to status colors.
- Over-adjusting saturation. The sliders use perceptual OKLCH adjustments, so large saturation changes can push a color out of your brand range. Check the Applied color before you copy it.
- Treating a simulation as a lab test. It estimates vision differences. Confirm important decisions with real users.
Next step after the color simulator
Once the color passes, build the rest of the scale with the tint and shade scale generator. To judge text readability beyond WCAG ratios, run the color through the color legibility analyzer.