Choose a color
Used as
brand in the exported code.Your palette
11 shades50
100
200
300
400
500
600
700
800
900
950
Select a hex value to copy it. Scroll sideways to see every shade.
Export your palette
app.css
@theme {
--color-brand-50: #f5f7fe;
--color-brand-100: #e4eafc;
--color-brand-200: #c7d2f7;
--color-brand-300: #a5b5f0;
--color-brand-400: #7d93e7;
--color-brand-500: #5266d9;
--color-brand-600: #4353b4;
--color-brand-700: #323f8b;
--color-brand-800: #1f295f;
--color-brand-900: #0f1537;
--color-brand-950: #030517;
}