Loading the next page.
Loading the next page.
Pick a color. Build a system. Take it into your work.
Build light/dark theme roles, preview a real UI and export your color system.
Theme roles use an opaque sRGB primary. The surrounding neutral scale follows its OKLCH hue.
Your website / theme preview
Content and actions should remain readable as your design changes.
A content card, using the generated surface and text role.
Primary action previewThese measurements apply only to the listed pairs. Check borders, states, charts, focus indicators and the finished interface separately.
:root {
--background: #EEFCFA;
--foreground: #18221F;
--surface: #FFFFFF;
--surface-foreground: #000000;
--primary: #12776F;
--primary-foreground: #FFFFFF;
--border: #9AF1E7;
}Use the exported values in your own frontend, pass the handoff to a designer or compatible coding tool, or adapt the CSS around your own HTML form. These are portable files: this tool does not change your projects, CMS content or Forms configuration automatically.
:root {
--color-1: #12776F;
--color-2: #D9E6D5;
--color-3: #F4F6F3;
--color-4: #192622;
--color-5: #C5844B;
}
Generated roles are a starting system with individually measured text pairs. CSS variables and Tailwind v4 @theme output can be adapted to your frontend. JSON color tokens may need an importer for a design application. Exports do not automatically restyle Spokegrid services or your live websites.
Shared between tools