brand
H: 277°50
P3
100
P3
200
P3
300
P3
400
P3
500•
brand
600
700
800
900
950
neutral
H: 277°50
100
200
300
400
500
600
700
800
900
950
Color System
Accepts hex, rgb(), hsl(), oklch(), or color names
ChromaPortal generates a complete, production-ready color system from a single brand color. Enter any hex, RGB, or OKLCH value and get 11-step tonal ramps for your brand palette plus coordinated semantic tokens for surfaces, text, borders, and status colors—all mapped for both light and dark modes.
Colors are computed in the OKLCH color space, the same perceptually uniform model that Tailwind v4 adopted as its default. OKLCH ensures consistent perceived lightness across hues—no more muddy yellows or washed-out cyans in your ramps. The wider P3 gamut means richer, more vibrant colors on modern displays while gracefully falling back to sRGB hex values for older browsers.
Contrast is validated using APCA (Accessible Perceptual Contrast Algorithm), the successor to WCAG 2.x contrast ratios. APCA accounts for how human vision actually perceives lightness differences, giving you more accurate, real-world guidance on text readability than the older 4.5:1 and 3:1 thresholds.
Export your system in five formats: Tailwind v4 @theme blocks ready to paste after your import, CSS custom properties with sRGB fallbacks via @supports, Figma variables JSON for design-to-dev handoff, W3C Design Tokens (DTCG) for tool-agnostic pipelines, and an SVG palette sheet for quick reference. Everything runs entirely in your browser—no uploads, no sign-up, no watermark.