Unstyled Styled

🎨 Color Harmony

Colorspace: HSL (Hue, Saturation, Lightness)

Controls overall palette mood and color relationships

#000000
Hue 20°
Saturation 63%
Lightness 71%

✂️ Edge Definition

Colorspace: LAB (Lightness, a*, b*)

Controls contrast and edge sharpness

#000000
Lightness (L*) 89
a* (green-red) 0
b* (blue-yellow) 0

📏 Spatial Density

Colorspace: LAB (Lightness, a*, b*)

Controls spacing and layout density

#000000
Lightness (L*) 97
a* (green-red) 0
b* (blue-yellow) 0

🎯 Visual Hierarchy

Colorspace: LAB (Lightness, a*, b*)

Controls emphasis and importance

#000000
Lightness (L*) 94
a* (green-red) 0
b* (blue-yellow) 0

📖 If you like this, read my substack

Haberdash Live Preview

This preview updates in real-time as you adjust the VRGB sliders.

Component library →

Typography

Heading 1

Heading 2

Heading 3

Regular paragraph text with proper line height and spacing.

Secondary text in smaller font size.

Buttons

Badges

Primary Success Warning Error Info Neutral

Form Elements

Toggle Switch

Nested Cards

This is a nested card to show depth and hierarchy.