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.
Color format
Choose a format below to view and copy all color values in OKLCH, Hex, RGB, HSL, or as CSS variables.
Core Colors
Background
--background
Background Alt
--background-alt
Text
--text
Text Dim
--text-dim
Border
--border
Selection
--selection
Text selection highlight
Icon
--icon
SVG currentColor
Icon Dim
--icon-dim
Secondary icons
Shadow Color
--shadow-color
Base for shadows and overlay
Overlay
--overlay
Modal/backdrop tint
Primary Color
--primary-color
Legacy token
Secondary Color
--secondary-color
Legacy token
Accent Colors
Accent
--accent
Accent Hover
--accent-hover
Accent Text
--accent-text
Accent FG
--accent-fg
Links, outline buttons, tabs, code
Accent FG Hover
--accent-fg-hover
Link/outline hover
Accent Text on Hover
--accent-text-on-hover
Text on primary button hover
Semantic Colors
Success
--success
Success Hover
--success-hover
Success Text
--success-text
Warning
--warning
Warning Hover
--warning-hover
Warning Text
--warning-text
Error
--error
Error Hover
--error-hover
Error Text
--error-text
Info
--info
Info Hover
--info-hover
Info Text
--info-text
Text on solid (buttons, badges)
Contrast-aware text for solid semantic backgrounds. Themes may override for WCAG AA.
Success Text on Solid
--success-text-on-solid
Warning Text on Solid
--warning-text-on-solid
Error Text on Solid
--error-text-on-solid
Info Text on Solid
--info-text-on-solid
Text on Solid Hover
--text-on-solid-hover
Dark text on semantic button hover
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