Microsoft Design Color Palette

colors.md

Microsoft Design Color Palette

The following arrays are formatted in 30 columns each with 7 rows. Standard black (#000000) and white (#FFFFFF) are not included.

Hex colors

[["750B1C","A80000","C50F1F","E81123","E74856","E6808A","F4ABBA"],["7F1D10","A52613","DA3B01","F03A17","EF6950","EE9889","EEC7C2"],["7F2F08","A74109","CA5010","F7630C","F7894A","F7B189","F2D5C9"],["7F4200","B05E0D","D47300","FF8C00","FFAA44","FFC988","FFDABB"],["AB620D","D48C00","EAA300","FFB900","FFC83D","FFD679","FFE5B6"],["986F0B","C19C00","DFBE00","FCE100","FFF100","FAEC6E","F9F1A5"],["73AA24","8CBD18","A4CF0C","BAD80A","D1EC3C","E4F577","F8FFB3"],["498205","599B00","6BB700","7CD300","9AD93A","B7DF74","D5E5AE"],["0B6A0B","107C10","13A10E","16C60C","47D041","79DB75","AAE5AA"],["00722E","10893E","00AE56","00CC6A","38D487","70DDA5","A8E5C2"],["005E50","008272","00B294","00CEA6","41DABC","81E6D3","C2F2E9"],["006666","038387","009CA4","00B7C3","30C6CC","61D6D6","91E5DF"],["005B70","006F94","0099BC","00BCF2","31D2F7","69EAFF","99ECFF"],["003966","004E8C","0063B1","0078D7","3A96DD","83BEEC","B3DBF2"],["00188F","0027B4","0037DA","0046FF","3B78FF","7BA7FF","ABC9ED"],["11255E","19318D","203DBD","2849EC","4F6BED","7C96F9","A6BDFF"],["242466","32318C","413EB3","4F4BD9","6B69D6","9594DE","BEBEE5"],["373277","49409A","5A4EBC","7160E8","8378DE","9C97E0","B5B5E2"],["49397A","5E4A9D","735BC1","886CE4","9C89E9","B0A6EF","C3C3F4"],["401B6C","4E257F","5C2E91","744DA9","8764B8","AB94D7","CFC4F5"],["460F54","5C126B","721481","881798","B146C2","C874D8","DEA2ED"],["5C005C","800074","9A0089","B4009E","C239B3","D067CA","DE94E0"],["77004D","9B0062","BF0077","E3008C","E43BA6","E66FC2","E8A3DE"],["6B0036","970044","C30052","EA005E","EE3F86","EE7FAD","EDBED3"],["761721","A4262C","D13438","FF4343","FF6767","FF8C8C","FFC0C0"],["4D291C","603D30","8E562E","AC744C","BB9167","D8B094","F7D7C4"],["2D3F3A","3B534D","486860","567C73","7D9D95","A3BFB7","CAE0D9"],["394146","4A5459","5A686C","69797E","859599","A0AEB2","BAC8CC"],["4C4A48","5D5A58","6E6A68","7A7574","989391","B1ADAB","CBC6C4"],["1F1F1F","2B2B2B","393939","767676","CCCCCC","E6E6E6","F2F2F2"]]

RGB colors

[[[117,11,28],[168,0,0],[197,15,31],[232,17,35],[231,72,86],[230,128,138],[244,171,186]],[[127,29,16],[165,38,19],[218,59,1],[240,58,23],[239,105,80],[238,152,137],[238,199,194]],[[127,47,8],[167,65,9],[202,80,16],[247,99,12],[247,137,74],[247,177,137],[242,213,201]],[[127,66,0],[176,94,13],[212,115,0],[255,140,0],[255,170,68],[255,201,136],[255,218,187]],[[171,98,13],[212,140,0],[234,163,0],[255,185,0],[255,200,61],[255,214,121],[255,229,182]],[[152,111,11],[193,156,0],[223,190,0],[252,225,0],[255,241,0],[250,236,110],[249,241,165]],[[115,170,36],[140,189,24],[164,207,12],[186,216,10],[209,236,60],[228,245,119],[248,255,179]],[[73,130,5],[89,155,0],[107,183,0],[124,211,0],[154,217,58],[183,223,116],[213,229,174]],[[11,106,11],[16,124,16],[19,161,14],[22,198,12],[71,208,65],[121,219,117],[170,229,170]],[[0,114,46],[16,137,62],[0,174,86],[0,204,106],[56,212,135],[112,221,165],[168,229,194]],[[0,94,80],[0,130,114],[0,178,148],[0,206,166],[65,218,188],[129,230,211],[194,242,233]],[[0,102,102],[3,131,135],[0,156,164],[0,183,195],[48,198,204],[97,214,214],[145,229,223]],[[0,91,112],[0,111,148],[0,153,188],[0,188,242],[49,210,247],[105,234,255],[153,236,255]],[[0,57,102],[0,78,140],[0,99,177],[0,120,215],[58,150,221],[131,190,236],[179,219,242]],[[0,24,143],[0,39,180],[0,55,218],[0,70,255],[59,120,255],[123,167,255],[171,201,237]],[[17,37,94],[25,49,141],[32,61,189],[40,73,236],[79,107,237],[124,150,249],[166,189,255]],[[36,36,102],[50,49,140],[65,62,179],[79,75,217],[107,105,214],[149,148,222],[190,190,229]],[[55,50,119],[73,64,154],[90,78,188],[113,96,232],[131,120,222],[156,151,224],[181,181,226]],[[73,57,122],[94,74,157],[115,91,193],[136,108,228],[156,137,233],[176,166,239],[195,195,244]],[[64,27,108],[78,37,127],[92,46,145],[116,77,169],[135,100,184],[171,148,215],[207,196,245]],[[70,15,84],[92,18,107],[114,20,129],[136,23,152],[177,70,194],[200,116,216],[222,162,237]],[[92,0,92],[128,0,116],[154,0,137],[180,0,158],[194,57,179],[208,103,202],[222,148,224]],[[119,0,77],[155,0,98],[191,0,119],[227,0,140],[228,59,166],[230,111,194],[232,163,222]],[[107,0,54],[151,0,68],[195,0,82],[234,0,94],[238,63,134],[238,127,173],[237,190,211]],[[118,23,33],[164,38,44],[209,52,56],[255,67,67],[255,103,103],[255,140,140],[255,192,192]],[[77,41,28],[96,61,48],[142,86,46],[172,116,76],[187,145,103],[216,176,148],[247,215,196]],[[45,63,58],[59,83,77],[72,104,96],[86,124,115],[125,157,149],[163,191,183],[202,224,217]],[[57,65,70],[74,84,89],[90,104,108],[105,121,126],[133,149,153],[160,174,178],[186,200,204]],[[76,74,72],[93,90,88],[110,106,104],[122,117,116],[152,147,145],[177,173,171],[203,198,196]],[[31,31,31],[43,43,43],[57,57,57],[118,118,118],[204,204,204],[230,230,230],[242,242,242]]]

This is the script I used to extract and sort the colors from the Microsoft Design Colors page. Run it in the browser console to generate the same arrays as seen on this gist.

function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {n = parseInt(n,10); if (isNaN(n)) return "00"; n = Math.max(0,Math.min(n,255)); return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16)}
let allArrays = []
$('.colorboxes > div').each(function() {
	const objects = $('.mdl-c-swatch[data-grid][style]', this)
	let palette = []
	let cycle
	if (objects.length % 7 === 0) {
		cycle = objects.length / 7
    } else if (objects.length % 6 === 0) {
		cycle = objects.length / 6
    }
	for (let i = 0; i < cycle; i += 1) {
		palette.push([])
    }
	objects.each(function(i) {
		const colorArr = $(this).css('background-color').replace(/[^0-9,]/g, '').split(',').map(v => parseInt(v))
		const color = colorArr //rgbToHex(colorArr[0], colorArr[1], colorArr[2])
		const index = i + 1
		for (let ax = 0; ax < palette.length; ax += 1) {
			if (Math.abs(index - ax - 1) % cycle === 0) {
				palette[ax].push(color)
            }
        }
	})
	palette.forEach(val => allArrays.push(val))
})

allArrays = allArrays.map(column => {
	if (column.length === 7) return column
	const end = column.length - 1
	const endColors = column[end]
	const sourceColors = column[end - 1]
	column.splice(end, 0, [
		sourceColors[0] + Math.round((endColors[0] - sourceColors[0]) / 2),
		sourceColors[1] + Math.round((endColors[1] - sourceColors[1]) / 2),
		sourceColors[2] + Math.round((endColors[2] - sourceColors[2]) / 2)
	])
	return column
}).map(column => {
	return column.map(colors => {
		// returns normal colors array in RGB format
		return colors //rgbToHex(colors[0], colors[1], colors[2])
    })
})

console.log(JSON.stringify(allArrays))