DEV Community

Discussion on: Write a function that outputs a pleasant text color hex given a background color hex

View post
Collapse
 
aralroca profile image
Aral Roca • • Edited

"Pleasure" is a little bit subjective. Basically I based with the complementary color to be sure that the text is possible to read:

Complementary colors

const complementaryColor = (color) => {
    const hexColor = color.replace('#', '0x');

    return `#${('000000' + (('0xffffff' ^ hexColor).toString(16))).slice(-6)}`;
};

complementaryColor('#ff0000');  // #00ffff
Collapse
 
aralroca profile image
Aral Roca •

React example with random color of background color + complementary for text: