Color Palette Generator for Breakdance & Oxygen
Generate accessible color systems for Breakdance global styles and Oxygen Builder. Pick a color and get complete 12-step palettes with automatic CSS custom properties.
Fluid Typography System
Generate responsive type scales with CSS clamp() for Breakdance & Oxygen.
Fluid Scaling
1 of 3
Font sizes automatically scale between minimum and maximum values based on viewport width. No media queries needed.
- Smooth transitions
- All screen sizes
- No breakpoints
Live Type Scale
Drag to preview scaling
Typography
Typography
Typography
Fluid Scaling
Feature 1 of 3
Font sizes automatically scale between minimum and maximum values based on viewport width. No media queries needed.
- Smooth transitions
- All screen sizes
- No breakpoints
Live Type Scale
Drag slider to preview fluid sizing
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
/* Generated CSS */
--hfs-h1: clamp(2rem, 1.5rem + 1.5vw, 3.2rem);
Manage Your Design System
Create unlimited projects with color palettes, typography scales, and spacing systems. Export CSS variables ready for Breakdance global styles and Oxygen Builder.
Chrome Extension
Sync your design system directly into Breakdance & Oxygen 6.
Instant Sync
1 of 3
Load your complete color palette into Breakdance or Oxygen 6 with a single click. No more manual copy-paste.
- One-click integration
- Real-time updates
- Zero configuration
How It Works
3 simple steps
Click any color input in editor
Pick from your palette
Auto-paste var(--brand-9)
Instant Sync
Feature 1 of 3
Load your complete color palette into Breakdance or Oxygen 6 with a single click. No more manual copy-paste.
- One-click integration
- Real-time updates
- Zero configuration
How It Works
3 simple steps
Click any color input
Extension detects Breakdance/Oxygen
Pick from your palette
Auto-paste to editor
var(--hcl-brand-9) or #0090ff
What our users say
See what our customers have to say about us.
