A warm, earthy palette inspired by Dutch design. The vibrant orange primary creates focal points while neutral backgrounds provide structural stability.
The core colors that define Dutchy's visual identity. Warm orange for action, dark brown for text, and cream for backgrounds.
Actions & emphasis
HSL: 25 95% 53%
HEX: #F97316
Text & icons
HSL: 25 20% 6%
HEX: #130F0C
Page & card backgrounds
HSL: 40 30% 97%
HEX: #FAF8F5
Purpose-driven colors for different UI states and contexts.
hsl(25 20% 92%)
Subtle backgrounds, secondary actions
hsl(40 20% 94%)
Disabled states, section backgrounds
hsl(0 84% 60%)
Errors, delete actions, warnings
hsl(142 76% 36%)
Success states, confirmations
hsl(25 20% 88%)
Borders, dividers, separators
hsl(25 20% 88%)
Form input borders
hsl(25 95% 53%)
Focus rings, outlines
hsl(25 15% 40%)
Secondary text, placeholders
primary on background
Contrast: 4.5:1 AA
primary-foreground on primary
Contrast: 4.5:1 AA
foreground on background
Contrast: 12.5:1 AAA
background on foreground
Contrast: 12.5:1 AAA
primary on foreground
Contrast: 4.8:1 AA
muted-foreground on background
Contrast: 4.6:1 AA
Information
This is an informational message.
Success
Your action was completed successfully.
Error
Something went wrong. Please try again.
50+
Components
100%
Accessible
/* Dutchy Color Tokens */
:root {
--background: 40 30% 97%;
--foreground: 25 20% 6%;
--primary: 25 95% 53%;
--primary-foreground: 0 0% 100%;
--secondary: 25 20% 92%;
--secondary-foreground: 25 25% 15%;
--muted: 40 20% 94%;
--muted-foreground: 25 15% 40%;
--border: 25 20% 88%;
--input: 25 20% 88%;
--ring: 25 95% 53%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--success: 142 76% 36%;
--success-foreground: 0 0% 100%;
}
/* Usage with Tailwind */
.element {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}