Root
Tools
Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Dialog
- DropdownNew
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Palette Generator
Generate HSLuv-based color palettes and export shaddercn design tokens as CSS variables.
Palette Controls
Shape the grid before assigning colors to tokens.
0–100
80
0°–360°
0–360°
0–100%
15–85%
Palette Grid
Click a swatch to copy its hex.
--primary
Tip: click any swatch to copy its hex value.
Overview
The Palette Generator helps you build balanced color systems using HSLuv. Adjust hue, saturation, and luminance to explore the grid, then assign swatches to shaddercn tokens like --primary, --accent, and --background.
Features
- HSLuv palette grid - Explore consistent color steps across hue and luminance
- Token assignment - Click a token, then pick a swatch to map it
- Copy on click - Swatches copy the hex value to your clipboard
- CSS export - Download a ready-to-use CSS file with light and dark blocks
How to Use
- Adjust Saturation, Hue Range, and Luminance to shape the grid.
- Select a token (Primary, Accent, Background, etc.).
- Click any color swatch to assign it. The hex value is copied automatically.
- Click Download CSS to export your palette.
Example Output
/* Generated by Shaddercn Palette Tool */
:root {
--background: #ffffff;
--foreground: #0a0a0a;
--card: #ffffff;
--card-foreground: #0a0a0a;
--popover: #ffffff;
--popover-foreground: #0a0a0a;
--primary: #0066cc;
--primary-foreground: #ffffff;
--secondary: #6b7280;
--secondary-foreground: #ffffff;
--muted: #f3f4f6;
--muted-foreground: #6b7280;
--accent: #f59e0b;
--accent-foreground: #000000;
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--border: #e5e7eb;
--input: #e5e7eb;
--ring: #0066cc;
}
.dark {
--background: #0a0a0a;
--foreground: #ffffff;
--card: #0a0a0a;
--card-foreground: #ffffff;
--popover: #0a0a0a;
--popover-foreground: #ffffff;
--primary: #0066cc;
--primary-foreground: #ffffff;
--secondary: #6b7280;
--secondary-foreground: #ffffff;
--muted: #27272a;
--muted-foreground: #a1a1aa;
--accent: #f59e0b;
--accent-foreground: #000000;
--destructive: #ef4444;
--destructive-foreground: #ffffff;
--border: #27272a;
--input: #27272a;
--ring: #0066cc;
}