Sample card
Surface with type and accent from the generated palette.
Generate a tonal scale from a base color, check WCAG contrast, and export tokens.
Ratio: 8.34:1
Human-centered design needs intentional color and enough contrast.
Human-centered design needs intentional color and enough contrast.
Light surface
Supporting copy to judge readability on light and dark surfaces.
Sample linkSurface with type and accent from the generated palette.
Tab to this button to see the focus ring.
Dark surface
Supporting copy to judge readability on light and dark surfaces.
Sample linkSurface with type and accent from the generated palette.
:root {
--color-primary-50: #f0e9ff;
--color-primary-100: #e8e0ff;
--color-primary-200: #d7cdff;
--color-primary-300: #c1b3ff;
--color-primary-400: #a692ff;
--color-primary-500: #7e5eff;
--color-primary-600: #5d21fb;
--color-primary-700: #4500cd;
--color-primary-800: #33009d;
--color-primary-900: #22006f;
--color-primary-950: #180057;
}