@master/colors
Version:
A precision-crafted P3 color system designed for modern UIs
335 lines (333 loc) • 10.4 kB
JavaScript
const colors = {
'stone': {
'0': 'hsl(32 51% 99%)',
'5': 'hsl(32 21% 93%)',
'10': 'hsl(32 30% 87%)',
'20': 'hsl(32 26% 76%)',
'30': 'hsl(33 25% 65%)',
'40': 'hsl(33 20% 55%)',
'50': 'hsl(33 20% 46%)',
'60': 'hsl(33 17% 37%)',
'70': 'hsl(33 18% 28%)',
'80': 'hsl(33 19% 20%)',
'90': 'hsl(33 13% 13%)',
'95': 'hsl(33 13% 9.3%)',
'100': 'hsl(32 13% 5.8%)'
},
'gray': {
'0': 'hsl(none 0% 98%)',
'5': 'hsl(none 0% 95%)',
'10': 'hsl(none 0% 87%)',
'20': 'hsl(none 0% 77%)',
'30': 'hsl(none 0% 66%)',
'40': 'hsl(none 0% 56%)',
'50': 'hsl(none 0% 45%)',
'60': 'hsl(none 0% 37%)',
'70': 'hsl(none 0% 28%)',
'80': 'hsl(none 0% 19%)',
'90': 'hsl(none 0% 12%)',
'95': 'hsl(none 0% 7.3%)',
'100': 'hsl(none 0% 3.9%)'
},
'grey': {
'0': 'hsl(210 38% 98%)',
'5': 'hsl(220 38% 95%)',
'10': 'hsl(230 22% 88%)',
'20': 'hsl(230 17% 79%)',
'30': 'hsl(230 15% 69%)',
'40': 'hsl(230 13% 59%)',
'50': 'hsl(230 12% 47%)',
'60': 'hsl(230 12% 39%)',
'70': 'hsl(230 13% 30%)',
'80': 'hsl(230 15% 20%)',
'90': 'hsl(230 16% 13%)',
'95': 'hsl(230 18% 8%)',
'100': 'hsl(230 23% 4.5%)'
},
'slate': {
'0': 'hsl(220 100% 98%)',
'5': 'hsl(220 100% 96%)',
'10': 'hsl(220 68% 90%)',
'20': 'hsl(220 43% 81%)',
'30': 'hsl(220 45% 72%)',
'40': 'hsl(220 36% 60%)',
'50': 'hsl(220 33% 50%)',
'60': 'hsl(220 34% 38%)',
'70': 'hsl(220 37% 31%)',
'80': 'hsl(220 39% 23%)',
'90': 'hsl(220 43% 18%)',
'95': 'hsl(220 58% 13%)',
'100': 'hsl(230 82% 9.9%)'
},
'brown': {
'0': 'hsl(19 100% 96%)',
'5': 'hsl(12 100% 95%)',
'10': 'hsl(11 100% 88%)',
'20': 'hsl(11 100% 79%)',
'30': 'hsl(10 77% 71%)',
'40': 'hsl(10 58% 62%)',
'50': 'hsl(10 48% 55%)',
'60': 'hsl(9.8 44% 47%)',
'70': 'hsl(9.6 51% 40%)',
'80': 'hsl(9.3 63% 31%)',
'90': 'hsl(9.3 85% 23%)',
'95': 'hsl(3.2 100% 13%)',
'100': 'hsl(2.6 100% 11%)'
},
'orange': {
'0': 'hsl(40 100% 93%)',
'5': 'hsl(39 100% 89%)',
'10': 'hsl(35 100% 81%)',
'20': 'hsl(33 100% 68%)',
'30': 'hsl(33 100% 50%)',
'40': 'hsl(27 100% 50%)',
'50': 'hsl(18 100% 50%)',
'60': 'hsl(8.9 100% 48%)',
'70': 'hsl(0 100% 40%)',
'80': 'hsl(360 100% 33%)',
'90': 'hsl(360 100% 24%)',
'95': 'hsl(0 100% 14%)',
'100': 'hsl(0 100% 11%)'
},
'amber': {
'0': 'hsl(51 100% 91%)',
'5': 'hsl(50 100% 87%)',
'10': 'hsl(48 100% 79%)',
'20': 'hsl(46 100% 64%)',
'30': 'hsl(44 100% 60%)',
'40': 'hsl(43 100% 52%)',
'50': 'hsl(39 100% 50%)',
'60': 'hsl(32 100% 49%)',
'70': 'hsl(26 100% 43%)',
'80': 'hsl(20 100% 36%)',
'90': 'hsl(18 100% 27%)',
'95': 'hsl(14 100% 16%)',
'100': 'hsl(10 100% 12%)'
},
'yellow': {
'0': 'hsl(60 100% 91%)',
'5': 'hsl(60 100% 85%)',
'10': 'hsl(60 100% 72%)',
'20': 'hsl(59 100% 50%)',
'30': 'hsl(56 100% 50%)',
'40': 'hsl(54 100% 50%)',
'50': 'hsl(50 100% 49%)',
'60': 'hsl(44 100% 49%)',
'70': 'hsl(37 100% 45%)',
'80': 'hsl(35 100% 40%)',
'90': 'hsl(34 100% 30%)',
'95': 'hsl(28 100% 17%)',
'100': 'hsl(27 100% 12%)'
},
'lime': {
'0': 'hsl(71 100% 90%)',
'5': 'hsl(77 100% 85%)',
'10': 'hsl(76 100% 75%)',
'20': 'hsl(78 100% 59%)',
'30': 'hsl(76 100% 47%)',
'40': 'hsl(82 100% 44%)',
'50': 'hsl(87 100% 39%)',
'60': 'hsl(89 99% 34%)',
'70': 'hsl(93 100% 29%)',
'80': 'hsl(99 100% 24%)',
'90': 'hsl(100 100% 20%)',
'95': 'hsl(110 100% 11%)',
'100': 'hsl(110 100% 8.8%)'
},
'green': {
'0': 'hsl(120 100% 94%)',
'5': 'hsl(120 100% 89%)',
'10': 'hsl(120 100% 82%)',
'20': 'hsl(120 100% 72%)',
'30': 'hsl(120 86% 62%)',
'40': 'hsl(130 95% 44%)',
'50': 'hsl(120 100% 39%)',
'60': 'hsl(120 100% 36%)',
'70': 'hsl(120 100% 30%)',
'80': 'hsl(120 100% 25%)',
'90': 'hsl(120 100% 20%)',
'95': 'hsl(120 100% 11%)',
'100': 'hsl(120 100% 9.2%)'
},
'beryl': {
'0': 'hsl(150 100% 92%)',
'5': 'hsl(150 100% 87%)',
'10': 'hsl(150 100% 78%)',
'20': 'hsl(150 100% 71%)',
'30': 'hsl(160 100% 49%)',
'40': 'hsl(160 100% 46%)',
'50': 'hsl(160 99% 42%)',
'60': 'hsl(150 100% 37%)',
'70': 'hsl(150 100% 31%)',
'80': 'hsl(150 100% 26%)',
'90': 'hsl(150 100% 21%)',
'95': 'hsl(140 100% 11%)',
'100': 'hsl(130 100% 9.3%)'
},
'teal': {
'0': 'hsl(170 100% 93%)',
'5': 'hsl(170 100% 84%)',
'10': 'hsl(170 100% 76%)',
'20': 'hsl(170 100% 70%)',
'30': 'hsl(170 100% 63%)',
'40': 'hsl(180 100% 50%)',
'50': 'hsl(180 100% 47%)',
'60': 'hsl(180 100% 42%)',
'70': 'hsl(180 100% 35%)',
'80': 'hsl(180 100% 31%)',
'90': 'hsl(190 100% 26%)',
'95': 'hsl(190 100% 14%)',
'100': 'hsl(190 100% 12%)'
},
'cyan': {
'0': 'hsl(180 100% 93%)',
'5': 'hsl(180 100% 85%)',
'10': 'hsl(180 100% 75%)',
'20': 'hsl(180 100% 69%)',
'30': 'hsl(180 100% 62%)',
'40': 'hsl(190 100% 58%)',
'50': 'hsl(190 100% 50%)',
'60': 'hsl(190 100% 50%)',
'70': 'hsl(200 100% 47%)',
'80': 'hsl(200 100% 43%)',
'90': 'hsl(200 100% 35%)',
'95': 'hsl(210 100% 21%)',
'100': 'hsl(210 100% 17%)'
},
'sky': {
'0': 'hsl(190 100% 95%)',
'5': 'hsl(190 100% 90%)',
'10': 'hsl(190 100% 83%)',
'20': 'hsl(200 100% 78%)',
'30': 'hsl(200 100% 59%)',
'40': 'hsl(200 100% 50%)',
'50': 'hsl(200 100% 50%)',
'60': 'hsl(210 100% 50%)',
'70': 'hsl(220 100% 50%)',
'80': 'hsl(220 99% 50%)',
'90': 'hsl(230 100% 40%)',
'95': 'hsl(240 100% 27%)',
'100': 'hsl(240 100% 23%)'
},
'blue': {
'0': 'hsl(190 100% 96%)',
'5': 'hsl(200 100% 91%)',
'10': 'hsl(200 100% 87%)',
'20': 'hsl(210 100% 78%)',
'30': 'hsl(210 100% 67%)',
'40': 'hsl(220 100% 61%)',
'50': 'hsl(220 100% 59%)',
'60': 'hsl(230 100% 57%)',
'70': 'hsl(240 100% 53%)',
'80': 'hsl(250 100% 46%)',
'90': 'hsl(250 100% 41%)',
'95': 'hsl(250 100% 26%)',
'100': 'hsl(250 100% 22%)'
},
'indigo': {
'0': 'hsl(220 100% 97%)',
'5': 'hsl(230 100% 95%)',
'10': 'hsl(230 100% 90%)',
'20': 'hsl(240 100% 83%)',
'30': 'hsl(240 100% 78%)',
'40': 'hsl(250 100% 70%)',
'50': 'hsl(250 100% 65%)',
'60': 'hsl(260 100% 54%)',
'70': 'hsl(260 100% 50%)',
'80': 'hsl(260 100% 50%)',
'90': 'hsl(260 100% 41%)',
'95': 'hsl(260 100% 25%)',
'100': 'hsl(260 100% 21%)'
},
'violet': {
'0': 'hsl(290 100% 98%)',
'5': 'hsl(260 100% 95%)',
'10': 'hsl(260 100% 91%)',
'20': 'hsl(260 100% 84%)',
'30': 'hsl(260 100% 77%)',
'40': 'hsl(260 100% 67%)',
'50': 'hsl(270 100% 58%)',
'60': 'hsl(270 100% 50%)',
'70': 'hsl(270 100% 50%)',
'80': 'hsl(260 100% 47%)',
'90': 'hsl(270 100% 37%)',
'95': 'hsl(260 100% 23%)',
'100': 'hsl(260 100% 18%)'
},
'purple': {
'0': 'hsl(300 100% 97%)',
'5': 'hsl(280 100% 95%)',
'10': 'hsl(280 100% 90%)',
'20': 'hsl(280 100% 83%)',
'30': 'hsl(280 100% 74%)',
'40': 'hsl(280 100% 63%)',
'50': 'hsl(280 100% 50%)',
'60': 'hsl(280 100% 50%)',
'70': 'hsl(270 100% 50%)',
'80': 'hsl(270 100% 43%)',
'90': 'hsl(270 100% 32%)',
'95': 'hsl(270 100% 20%)',
'100': 'hsl(270 100% 16%)'
},
'fuchsia': {
'0': 'hsl(300 100% 97%)',
'5': 'hsl(300 100% 94%)',
'10': 'hsl(300 100% 89%)',
'20': 'hsl(290 100% 81%)',
'30': 'hsl(290 100% 74%)',
'40': 'hsl(290 95% 66%)',
'50': 'hsl(290 80% 59%)',
'60': 'hsl(280 77% 55%)',
'70': 'hsl(280 76% 47%)',
'80': 'hsl(280 100% 36%)',
'90': 'hsl(290 100% 26%)',
'95': 'hsl(290 100% 16%)',
'100': 'hsl(290 100% 13%)'
},
'pink': {
'0': 'hsl(300 100% 97%)',
'5': 'hsl(300 100% 95%)',
'10': 'hsl(310 100% 89%)',
'20': 'hsl(320 100% 81%)',
'30': 'hsl(320 100% 72%)',
'40': 'hsl(320 100% 63%)',
'50': 'hsl(320 93% 57%)',
'60': 'hsl(330 92% 53%)',
'70': 'hsl(330 100% 44%)',
'80': 'hsl(330 100% 39%)',
'90': 'hsl(340 100% 30%)',
'95': 'hsl(340 100% 19%)',
'100': 'hsl(340 100% 16%)'
},
'crimson': {
'0': 'hsl(300 100% 97%)',
'5': 'hsl(340 100% 95%)',
'10': 'hsl(340 100% 89%)',
'20': 'hsl(350 100% 81%)',
'30': 'hsl(340 100% 72%)',
'40': 'hsl(340 100% 61%)',
'50': 'hsl(340 99% 53%)',
'60': 'hsl(350 97% 51%)',
'70': 'hsl(350 100% 45%)',
'80': 'hsl(350 100% 40%)',
'90': 'hsl(350 100% 31%)',
'95': 'hsl(350 100% 20%)',
'100': 'hsl(360 100% 16%)'
},
'red': {
'0': 'hsl(360 100% 97%)',
'5': 'hsl(360 100% 95%)',
'10': 'hsl(360 100% 88%)',
'20': 'hsl(360 100% 81%)',
'30': 'hsl(360 100% 73%)',
'40': 'hsl(350 100% 58%)',
'50': 'hsl(0.06 98% 54%)',
'60': 'hsl(0 100% 48%)',
'70': 'hsl(360 100% 45%)',
'80': 'hsl(0 100% 40%)',
'90': 'hsl(360 100% 31%)',
'95': 'hsl(0 100% 20%)',
'100': 'hsl(360 100% 17%)'
}
};
export { colors as default };