Below is an array that I have:
const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584']
I am working on creating a function that can return a color based on the parameter group and index. For example:
function groupColor(i, group) {}
The expected output from the function would be:
groupColor(0, true); output <== '#54AAED'
groupColor(1, true); output <== '#54AAED' Minus 10% RGB
In this case, for each group, Index 0 will be #54AAED, Index 1 will be #54AAED with 10% opacity subtracted,
Index 2 will be #7BEA6B, and Index 3 will be #7BEA6B with 10% opacity subtracted, and so on... Here's what I have done so far:
function hexToRgb(hex, opacity) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}
function generateColor({ i, group }) {
if (group) {
console.log('should group...')
}
const isEven = i % 2 === 0
console.log('index', hexToRgb(palette[i], 0.9))
return hexToRgb(palette[i])
}
My approach was to check if the index is odd and group by intervals of 2 indexes if the boolean is true. However, I am unsure about how to proceed with grouping in intervals of 2 and setting the opacity to 0.9 on the second iteration...
Example Usage:
const colors = ['#54AAED', '#7BEA6B', '#f8b653', '#ff5584']
const groupMe = ['one', 'two', 'three', 'four']
groupMe.map(entry => {
return generateColor(i, true)
})
// expected output
'one' <== '#54AAED' opacity 1
'two' <== '#54AAED' opacity 0.9
'three' <== '#7BEA6B' opacity 1
'four' <== '#7BEA6b' opacity 0.9
and so on...