← Back to Tools
Tailwind CSS HSL Theme Config Builder for shadcn/ui
Generate copy-pasteable CSS HSL variables (primary, background, mute, card) optimized perfectly for shadcn/ui component libraries.
Export Palette
Copy or download the current harmony as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO. Tabs toggle the preview; switch color space to change the output format.
:root {
--square-1: #5048e5;
--square-1-50: #fafaff;
--square-1-100: #f3f3ff;
--square-1-200: #e6e5ff;
--square-1-300: #d4d3ff;
--square-1-400: #bebbff;
--square-1-500: #5048e5;
--square-1-600: #7f78d3;
--square-1-700: #58509d;
--square-1-800: #342d67;
--square-1-900: #171137;
--square-1-950: #03020d;
--square-2: #fafafa;
--square-2-50: #ffffff;
--square-2-100: #ffffff;
--square-2-200: #ffffff;
--square-2-300: #fefefe;
--square-2-400: #fefefe;
--square-2-500: #fafafa;
--square-2-600: #d5d5d5;
--square-2-700: #979797;
--square-2-800: #5d5d5d;
--square-2-900: #2d2d2d;
--square-2-950: #090909;
--square-3: #e4e4e7;
--square-3-50: #fefeff;
--square-3-100: #fefefe;
--square-3-200: #fcfcfd;
--square-3-300: #fafafb;
--square-3-400: #f8f8f9;
--square-3-500: #e4e4e7;
--square-3-600: #cdcdce;
--square-3-700: #919192;
--square-3-800: #595959;
--square-3-900: #2b2b2b;
--square-3-950: #080808;
--square-4: #ffffff;
--square-4-50: #ffffff;
--square-4-100: #ffffff;
--square-4-200: #ffffff;
--square-4-300: #ffffff;
--square-4-400: #ffffff;
--square-4-500: #ffffff;
--square-4-600: #d7d7d7;
--square-4-700: #989898;
--square-4-800: #5d5d5d;
--square-4-900: #2e2e2e;
--square-4-950: #090909;
}
$square-1: #5048e5; $square-1-50: #fafaff; $square-1-100: #f3f3ff; $square-1-200: #e6e5ff; $square-1-300: #d4d3ff; $square-1-400: #bebbff; $square-1-500: #5048e5; $square-1-600: #7f78d3; $square-1-700: #58509d; $square-1-800: #342d67; $square-1-900: #171137; $square-1-950: #03020d; $square-2: #fafafa; $square-2-50: #ffffff; $square-2-100: #ffffff; $square-2-200: #ffffff; $square-2-300: #fefefe; $square-2-400: #fefefe; $square-2-500: #fafafa; $square-2-600: #d5d5d5; $square-2-700: #979797; $square-2-800: #5d5d5d; $square-2-900: #2d2d2d; $square-2-950: #090909; $square-3: #e4e4e7; $square-3-50: #fefeff; $square-3-100: #fefefe; $square-3-200: #fcfcfd; $square-3-300: #fafafb; $square-3-400: #f8f8f9; $square-3-500: #e4e4e7; $square-3-600: #cdcdce; $square-3-700: #919192; $square-3-800: #595959; $square-3-900: #2b2b2b; $square-3-950: #080808; $square-4: #ffffff; $square-4-50: #ffffff; $square-4-100: #ffffff; $square-4-200: #ffffff; $square-4-300: #ffffff; $square-4-400: #ffffff; $square-4-500: #ffffff; $square-4-600: #d7d7d7; $square-4-700: #989898; $square-4-800: #5d5d5d; $square-4-900: #2e2e2e; $square-4-950: #090909;
colors: {
'square-1': {
50: '#fafaff',
100: '#f3f3ff',
200: '#e6e5ff',
300: '#d4d3ff',
400: '#bebbff',
500: '#5048e5',
600: '#7f78d3',
700: '#58509d',
800: '#342d67',
900: '#171137',
950: '#03020d',
DEFAULT: '#5048e5',
},
'square-2': {
50: '#ffffff',
100: '#ffffff',
200: '#ffffff',
300: '#fefefe',
400: '#fefefe',
500: '#fafafa',
600: '#d5d5d5',
700: '#979797',
800: '#5d5d5d',
900: '#2d2d2d',
950: '#090909',
DEFAULT: '#fafafa',
},
'square-3': {
50: '#fefeff',
100: '#fefefe',
200: '#fcfcfd',
300: '#fafafb',
400: '#f8f8f9',
500: '#e4e4e7',
600: '#cdcdce',
700: '#919192',
800: '#595959',
900: '#2b2b2b',
950: '#080808',
DEFAULT: '#e4e4e7',
},
'square-4': {
50: '#ffffff',
100: '#ffffff',
200: '#ffffff',
300: '#ffffff',
400: '#ffffff',
500: '#ffffff',
600: '#d7d7d7',
700: '#989898',
800: '#5d5d5d',
900: '#2e2e2e',
950: '#090909',
DEFAULT: '#ffffff',
},
},
[
{
"name": "square-1",
"harmony": "Square",
"hex": "#5048e5",
"rgb": {
"r": 80,
"g": 72,
"b": 229
},
"hsl": {
"h": 243,
"s": 75,
"l": 59
},
"value": "#5048e5",
"tonalScale": {
"50": {
"hex": "#fafaff",
"rgb": {
"r": 250,
"g": 250,
"b": 255
}
},
"100": {
"hex": "#f3f3ff",
"rgb": {
"r": 243,
"g": 243,
"b": 255
}
},
"200": {
"hex": "#e6e5ff",
"rgb": {
"r": 230,
"g": 229,
"b": 255
}
},
"300": {
"hex": "#d4d3ff",
"rgb": {
"r": 212,
"g": 211,
"b": 255
}
},
"400": {
"hex": "#bebbff",
"rgb": {
"r": 190,
"g": 187,
"b": 255
}
},
"500": {
"hex": "#5048e5",
"rgb": {
"r": 80,
"g": 72,
"b": 229
}
},
"600": {
"hex": "#7f78d3",
"rgb": {
"r": 127,
"g": 120,
"b": 211
}
},
"700": {
"hex": "#58509d",
"rgb": {
"r": 88,
"g": 80,
"b": 157
}
},
"800": {
"hex": "#342d67",
"rgb": {
"r": 52,
"g": 45,
"b": 103
}
},
"900": {
"hex": "#171137",
"rgb": {
"r": 23,
"g": 17,
"b": 55
}
},
"950": {
"hex": "#03020d",
"rgb": {
"r": 3,
"g": 2,
"b": 13
}
}
}
},
{
"name": "square-2",
"harmony": "Square",
"hex": "#fafafa",
"rgb": {
"r": 250,
"g": 250,
"b": 250
},
"hsl": {
"h": 0,
"s": 0,
"l": 98
},
"value": "#fafafa",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"300": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"400": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"500": {
"hex": "#fafafa",
"rgb": {
"r": 250,
"g": 250,
"b": 250
}
},
"600": {
"hex": "#d5d5d5",
"rgb": {
"r": 213,
"g": 213,
"b": 213
}
},
"700": {
"hex": "#979797",
"rgb": {
"r": 151,
"g": 151,
"b": 151
}
},
"800": {
"hex": "#5d5d5d",
"rgb": {
"r": 93,
"g": 93,
"b": 93
}
},
"900": {
"hex": "#2d2d2d",
"rgb": {
"r": 45,
"g": 45,
"b": 45
}
},
"950": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
}
}
},
{
"name": "square-3",
"harmony": "Square",
"hex": "#e4e4e7",
"rgb": {
"r": 228,
"g": 228,
"b": 231
},
"hsl": {
"h": 240,
"s": 6,
"l": 90
},
"value": "#e4e4e7",
"tonalScale": {
"50": {
"hex": "#fefeff",
"rgb": {
"r": 254,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#fefefe",
"rgb": {
"r": 254,
"g": 254,
"b": 254
}
},
"200": {
"hex": "#fcfcfd",
"rgb": {
"r": 252,
"g": 252,
"b": 253
}
},
"300": {
"hex": "#fafafb",
"rgb": {
"r": 250,
"g": 250,
"b": 251
}
},
"400": {
"hex": "#f8f8f9",
"rgb": {
"r": 248,
"g": 248,
"b": 249
}
},
"500": {
"hex": "#e4e4e7",
"rgb": {
"r": 228,
"g": 228,
"b": 231
}
},
"600": {
"hex": "#cdcdce",
"rgb": {
"r": 205,
"g": 205,
"b": 206
}
},
"700": {
"hex": "#919192",
"rgb": {
"r": 145,
"g": 145,
"b": 146
}
},
"800": {
"hex": "#595959",
"rgb": {
"r": 89,
"g": 89,
"b": 89
}
},
"900": {
"hex": "#2b2b2b",
"rgb": {
"r": 43,
"g": 43,
"b": 43
}
},
"950": {
"hex": "#080808",
"rgb": {
"r": 8,
"g": 8,
"b": 8
}
}
}
},
{
"name": "square-4",
"harmony": "Square",
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
},
"hsl": {
"h": 0,
"s": 0,
"l": 100
},
"value": "#ffffff",
"tonalScale": {
"50": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"300": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"400": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"500": {
"hex": "#ffffff",
"rgb": {
"r": 255,
"g": 255,
"b": 255
}
},
"600": {
"hex": "#d7d7d7",
"rgb": {
"r": 215,
"g": 215,
"b": 215
}
},
"700": {
"hex": "#989898",
"rgb": {
"r": 152,
"g": 152,
"b": 152
}
},
"800": {
"hex": "#5d5d5d",
"rgb": {
"r": 93,
"g": 93,
"b": 93
}
},
"900": {
"hex": "#2e2e2e",
"rgb": {
"r": 46,
"g": 46,
"b": 46
}
},
"950": {
"hex": "#090909",
"rgb": {
"r": 9,
"g": 9,
"b": 9
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 square-1,Square,#5048e5,"rgb(80, 72, 229)","hsl(243, 75%, 59%)",#5048e5,#fafaff,#f3f3ff,#e6e5ff,#d4d3ff,#bebbff,#5048e5,#7f78d3,#58509d,#342d67,#171137,#03020d square-2,Square,#fafafa,"rgb(250, 250, 250)","hsl(0, 0%, 98%)",#fafafa,#ffffff,#ffffff,#ffffff,#fefefe,#fefefe,#fafafa,#d5d5d5,#979797,#5d5d5d,#2d2d2d,#090909 square-3,Square,#e4e4e7,"rgb(228, 228, 231)","hsl(240, 6%, 90%)",#e4e4e7,#fefeff,#fefefe,#fcfcfd,#fafafb,#f8f8f9,#e4e4e7,#cdcdce,#919192,#595959,#2b2b2b,#080808 square-4,Square,#ffffff,"rgb(255, 255, 255)","hsl(0, 0%, 100%)",#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#ffffff,#d7d7d7,#989898,#5d5d5d,#2e2e2e,#090909
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 80 72 229 square-1 250 250 255 square-1-50 243 243 255 square-1-100 230 229 255 square-1-200 212 211 255 square-1-300 190 187 255 square-1-400 80 72 229 square-1-500 127 120 211 square-1-600 88 80 157 square-1-700 52 45 103 square-1-800 23 17 55 square-1-900 3 2 13 square-1-950 250 250 250 square-2 255 255 255 square-2-50 255 255 255 square-2-100 255 255 255 square-2-200 254 254 254 square-2-300 254 254 254 square-2-400 250 250 250 square-2-500 213 213 213 square-2-600 151 151 151 square-2-700 93 93 93 square-2-800 45 45 45 square-2-900 9 9 9 square-2-950 228 228 231 square-3 254 254 255 square-3-50 254 254 254 square-3-100 252 252 253 square-3-200 250 250 251 square-3-300 248 248 249 square-3-400 228 228 231 square-3-500 205 205 206 square-3-600 145 145 146 square-3-700 89 89 89 square-3-800 43 43 43 square-3-900 8 8 8 square-3-950 255 255 255 square-4 255 255 255 square-4-50 255 255 255 square-4-100 255 255 255 square-4-200 255 255 255 square-4-300 255 255 255 square-4-400 255 255 255 square-4-500 215 215 215 square-4-600 152 152 152 square-4-700 93 93 93 square-4-800 46 46 46 square-4-900 9 9 9 square-4-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.