Skip to content

Instantly share code, notes, and snippets.

@ciolt ciolt/colors.md

Created Aug 7, 2018
Embed
What would you like to do?
Microsoft Design Color Palette

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]]]
@ciolt

This comment has been minimized.

Copy link
Owner Author

ciolt commented Aug 7, 2018

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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.