The maxichrome function returns the given number of HTML/CSS colors such that they are as different as possible to each other.
Optionally it can be given a fixed set of colors to avoid, for a color to be used as a contrasting background to all the colors.
Install:
npm install maxichromeWrite code:
import maxichrome from 'maxichrome'
(async () => {
// Four different colors different from each other
const colors = await maxichrome(5)
// Six different colors different from each other and from red and #884422
const notReds = await maxichrome(6, ['red', '#884422'])
console.table({ colors, notReds })
})()The above code prints:
┌─────────┬───────────┬───────────┬───────────┬───────────┬───────────┬───────────┐
│ (index) │ 0 │ 1 │ 2 │ 3 │ 4 │ 5 │
├─────────┼───────────┼───────────┼───────────┼───────────┼───────────┼───────────┤
│ colors │ '#a4009a' │ '#ff7eff' │ 'black' │ '#1c9500' │ '#38ff10' │ │
│ notReds │ 'yellow' │ '#a744bb' │ '#0b1000' │ '#000067' │ '#b8e9ff' │ '#41eb59' │
└─────────┴───────────┴───────────┴───────────┴───────────┴───────────┴───────────┘Create this HTML file and view in browser:
<html>
<head>
<script type="module">
import maxichrome from 'https://unpkg.com/maxichrome@0.1.0/src/web/index.js?module'
(async () => {
const colors = await maxichrome(10, ['lavenderblush'])
listElement.innerHTML = colors
.map(c => `<li style="color:${c}">${c}</li>`)
.join('')
})()
</script>
</head>
<body style="background-color: lavenderblush">
<ol id="listElement">
</ol>
</body>
</html>The maxichrome function uses CIEDE2000 as a measure of color difference. This takes into account how human ability to distinguish colors varies across the space of colors.
It picks initial colors spread in a grid in RGB space, and then uses hill climbing to iteratively improve them to maximize the minimum perceptual difference of each color from all other colors.