Skip to main content
Back to all tools

Color Preview

Pick a color and see it applied to a complete UI mockup with automatic tint/shade scale.

Color Scale
50100200300400500600700800900950
Copy & Paste
css
:root {
  --color-50: #dadbfc;
  --color-100: #cdcefb;
  --color-200: #b3b4f8;
  --color-300: #999af6;
  --color-400: #7e80f4;
  --color-500: #6467f2;
  --color-600: #2529ec;
  --color-700: #1013bd;
  --color-800: #0b0d7e;
  --color-900: #05063f;
  --color-950: #03031f;
}
UI Preview
New Feature

Frequently Asked Questions

What is a color preview tool and when should I use it?

A color preview tool lets you see how a color looks in realistic UI contexts — buttons, cards, text, backgrounds — before committing it to your design. Use it when choosing brand colors, validating client feedback, or testing a new accent color against your existing design system.

How do I pick good primary and secondary colors?

Start with a primary color that reflects your brand personality (blue = trust, green = growth, orange = energy). For the secondary color, choose a complementary or analogous hue. Tip: keep your primary color's saturation between 50-80% for vibrancy without harshness, and test it at multiple lightness levels.

What color formats does this tool support?

This tool accepts hex (#ff6600), RGB, and HSL inputs. It outputs CSS custom properties (variables) you can paste directly into your stylesheets. Tip: use CSS variables for your colors so you can switch themes or update palettes from a single location.

How do I generate a full color scale from a single color?

Take your base color and adjust only the lightness in HSL: create lighter tints (higher L) and darker shades (lower L) while keeping hue and saturation constant. Common scales use steps like 50, 100, 200…900. The Color Table tool on this site automates this process.

How do I ensure my colors work in both light and dark mode?

Test your color on both white and dark backgrounds. A good approach: use lighter tints (L > 60%) on dark backgrounds and darker shades (L < 40%) on light backgrounds. Maintain the same hue across modes for brand consistency. Tip: check contrast ratios in both modes separately.