Colors
Complete color reference with multiple format options (OKLCH, Hex, RGB, HSL, CSS Variable)
Color Reference
All colors in Rizzo CSS use semantic variables that adapt to the selected theme. Switch themes to see how colors change. Select a format tab to view and copy colors in that format.
All color formats (OKLCH, Hex, RGB, HSL, and CSS Variable) are automatically converted and displayed. Click any copy button to copy the color value in the selected format to your clipboard.
Core Colors
Background
--background
Background Alt
--background-alt
Text
--text
Text Dim
--text-dim
Border
--border
Accent Colors
Accent
--accent
Accent Hover
--accent-hover
Accent Text
--accent-text
Semantic Colors
Success
--success
Success Text
--success-text
Warning
--warning
Warning Text
--warning-text
Error
--error
Error Text
--error-text
Info
--info
Info Text
--info-text
Color scales (design tokens)
Stepped shades (50â950) for each scale. Step 500 is the theme base for accent, success, warning, error, and info. Neutral is a fixed gray scale. All values respect the format tabs above and support copy to clipboard.
Neutral
Neutral 50
--color-neutral-50
Neutral 100
--color-neutral-100
Neutral 200
--color-neutral-200
Neutral 300
--color-neutral-300
Neutral 400
--color-neutral-400
Neutral 500
--color-neutral-500
Neutral 600
--color-neutral-600
Neutral 700
--color-neutral-700
Neutral 800
--color-neutral-800
Neutral 900
--color-neutral-900
Neutral 950
--color-neutral-950
Accent
Accent 50
--color-accent-50
Accent 100
--color-accent-100
Accent 200
--color-accent-200
Accent 300
--color-accent-300
Accent 400
--color-accent-400
Accent 500
--color-accent-500
Accent 600
--color-accent-600
Accent 700
--color-accent-700
Accent 800
--color-accent-800
Accent 900
--color-accent-900
Accent 950
--color-accent-950
Success
Success 50
--color-success-50
Success 100
--color-success-100
Success 200
--color-success-200
Success 300
--color-success-300
Success 400
--color-success-400
Success 500
--color-success-500
Success 600
--color-success-600
Success 700
--color-success-700
Success 800
--color-success-800
Success 900
--color-success-900
Success 950
--color-success-950
Warning
Warning 50
--color-warning-50
Warning 100
--color-warning-100
Warning 200
--color-warning-200
Warning 300
--color-warning-300
Warning 400
--color-warning-400
Warning 500
--color-warning-500
Warning 600
--color-warning-600
Warning 700
--color-warning-700
Warning 800
--color-warning-800
Warning 900
--color-warning-900
Warning 950
--color-warning-950
Error
Error 50
--color-error-50
Error 100
--color-error-100
Error 200
--color-error-200
Error 300
--color-error-300
Error 400
--color-error-400
Error 500
--color-error-500
Error 600
--color-error-600
Error 700
--color-error-700
Error 800
--color-error-800
Error 900
--color-error-900
Error 950
--color-error-950
Info
Info 50
--color-info-50
Info 100
--color-info-100
Info 200
--color-info-200
Info 300
--color-info-300
Info 400
--color-info-400
Info 500
--color-info-500
Info 600
--color-info-600
Info 700
--color-info-700
Info 800
--color-info-800
Info 900
--color-info-900
Info 950
--color-info-950