color-a Workspace Studio
workspace-config.json
| |
1
✓ Config Schema Validated
brand-preview-canvas
Stage Preview Palette Mode
Live Client-Side Rendering
Active Design Context
color-a Brand Kit
Generating colors & properties in real time
Copy HEX
Primary #3B82F6 rgb(59, 130, 246) hsl(217, 91%, 60%)
Copy HEX
Secondary #F59E0B rgb(245, 158, 11) hsl(38, 92%, 50%)
Copy HEX
Accent #EF4444 rgb(239, 68, 68) hsl(0, 84%, 60%)
Copy HEX
Background #09090B rgb(9, 9, 11) hsl(240, 10%, 4%)
Copy HEX
Text #F4F4F5 rgb(244, 244, 245) hsl(240, 5%, 96%)
Linear 135° Swatch
CSS Snippet
background: linear-gradient(135deg, #3b82f6, #ec4899);
Tailwind Config Stop-Extensions
from-[#3b82f6] to-[#ec4899]
A11y Metrics
7.2 : 1 ratio
WCAG AA (Normal Text) PASS (>= 4.5)
WCAG AA (Large Text) PASS (>= 3.0)
WCAG AAA (Normal Text) PASS (>= 7.0)
WCAG AAA (Large Text) PASS (>= 4.5)
Interactive Preview Box
Editable text in the inputs will update these nodes. The quick brown fox jumps over the lazy dog. Normal weight text (14pt / 16px).
Large Heading Text (18pt / 24px)
Google Search Preview
https://color-a.vercel.app › brand
My Premium Website
High-speed digital brand experience created with color-a. Adjust properties and export metadata headers.
Browser Tab Theme Preview
My Premium...
https://color-a.vercel.app
HTML Meta Tags
<meta name="theme-color" content="#3b82f6"> <meta name="msapplication-TileColor" content="#09090b"> <title>My Premium Website</title> <meta name="description" content="High-speed digital brand experience created with color-a.">
Device Mockups Showcase
Updates live based on palette selections Business Card ACME
John Doe
Lead Developer
Mobile Splash ACME
SaaS Navbar Mock
Acme
Home Docs
Start