← Back to Tools
Material Design Matrix Builder
Generate full 50-950 tonal grids based on a single seed color.
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 {
--single-1: #0004ff;
--single-1-50: #ecf8ff;
--single-1-100: #d9eeff;
--single-1-200: #b5d8ff;
--single-1-300: #86b9ff;
--single-1-400: #4b8bff;
--single-1-500: #0004ff;
--single-1-600: #0200e2;
--single-1-700: #0800b2;
--single-1-800: #0a007c;
--single-1-900: #050047;
--single-1-950: #010014;
}
$single-1: #0004ff; $single-1-50: #ecf8ff; $single-1-100: #d9eeff; $single-1-200: #b5d8ff; $single-1-300: #86b9ff; $single-1-400: #4b8bff; $single-1-500: #0004ff; $single-1-600: #0200e2; $single-1-700: #0800b2; $single-1-800: #0a007c; $single-1-900: #050047; $single-1-950: #010014;
colors: {
'single-1': {
50: '#ecf8ff',
100: '#d9eeff',
200: '#b5d8ff',
300: '#86b9ff',
400: '#4b8bff',
500: '#0004ff',
600: '#0200e2',
700: '#0800b2',
800: '#0a007c',
900: '#050047',
950: '#010014',
DEFAULT: '#0004ff',
},
},
[
{
"name": "single-1",
"harmony": "Single",
"hex": "#0004ff",
"rgb": {
"r": 0,
"g": 4,
"b": 255
},
"hsl": {
"h": 239,
"s": 100,
"l": 50
},
"value": "#0004ff",
"tonalScale": {
"50": {
"hex": "#ecf8ff",
"rgb": {
"r": 236,
"g": 248,
"b": 255
}
},
"100": {
"hex": "#d9eeff",
"rgb": {
"r": 217,
"g": 238,
"b": 255
}
},
"200": {
"hex": "#b5d8ff",
"rgb": {
"r": 181,
"g": 216,
"b": 255
}
},
"300": {
"hex": "#86b9ff",
"rgb": {
"r": 134,
"g": 185,
"b": 255
}
},
"400": {
"hex": "#4b8bff",
"rgb": {
"r": 75,
"g": 139,
"b": 255
}
},
"500": {
"hex": "#0004ff",
"rgb": {
"r": 0,
"g": 4,
"b": 255
}
},
"600": {
"hex": "#0200e2",
"rgb": {
"r": 2,
"g": 0,
"b": 226
}
},
"700": {
"hex": "#0800b2",
"rgb": {
"r": 8,
"g": 0,
"b": 178
}
},
"800": {
"hex": "#0a007c",
"rgb": {
"r": 10,
"g": 0,
"b": 124
}
},
"900": {
"hex": "#050047",
"rgb": {
"r": 5,
"g": 0,
"b": 71
}
},
"950": {
"hex": "#010014",
"rgb": {
"r": 1,
"g": 0,
"b": 20
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 single-1,Single,#0004ff,"rgb(0, 4, 255)","hsl(239, 100%, 50%)",#0004ff,#ecf8ff,#d9eeff,#b5d8ff,#86b9ff,#4b8bff,#0004ff,#0200e2,#0800b2,#0a007c,#050047,#010014
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 0 4 255 single-1 236 248 255 single-1-50 217 238 255 single-1-100 181 216 255 single-1-200 134 185 255 single-1-300 75 139 255 single-1-400 0 4 255 single-1-500 2 0 226 single-1-600 8 0 178 single-1-700 10 0 124 single-1-800 5 0 71 single-1-900 1 0 20 single-1-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.