Contrast Color gives you the best color that can be used on a background color you specify.
Install the package in your project directory with:
npm install @tiger-ui/contrast-color
yarn add @tiger-ui/contrast-color
import { contrastColor } from '@tiger-ui/contrast-color';
const myColor = '#226be0';
const contrast = contrastColor(myColor);
console.log('contrast color: ', contrast);output:
'#FFFFFF'Class Usage:
import ContrastColor from '@tiger-ui/contrast-color';
const myColor = '#226be0';
const contrast = new ContrastColor(myColor);
console.log('contrast color: ', contrast.get());output:
'#FFFFFF'import { contrastColor } from '@tiger-ui/contrast-color';
const myColor1 = '#226be0';
const myColor2 = '#ff9696';
const contrast1 = contrastColor(
myColor1,
{
lightColor: '#eeeeee',
darkColor: '#0a0202',
},
);
const contrast2 = contrastColor(
myColor2,
{
lightColor: '#eeeeee',
darkColor: '#0a0202',
},
);
console.log('contrast1: ', contrast1);
console.log('contrast2: ', contrast2);output:
'contrast1: #eeeeee'
'contrast2: #0a0202'Class Usage:
import ContrastColor from '@tiger-ui/contrast-color';
const myColor1 = '#226be0';
const myColor2 = '#ff9696';
const contrast1 = new ContrastColor(
myColor1,
{
lightColor: '#eeeeee',
darkColor: '#0a0202',
},
);
const contrast2 = new ContrastColor(
myColor2,
{
lightColor: '#eeeeee',
darkColor: '#0a0202',
},
);
console.log('contrast1: ', contrast1.get());
console.log('contrast2: ', contrast2.get());output:
'contrast1: #eeeeee'
'contrast2: #0a0202'Let's make an example on React about Contrast Color:
import { contrastColor } from '@tiger-ui/contrast-color';
import Box from '../../components/Box';
import Paragraph from '../../components/Paragraph';
// --- COLORS --- //
const red = ['#FF0000', contrastColor('#FF0000')];
const lime = ['#00FF00', contrastColor('#00FF00')];
const blue = ['#0000FF', contrastColor('#0000FF')];
const yellow = ['#FFFF00', contrastColor('#FFFF00')];
const cyan = ['#00FFFF', contrastColor('#00FFFF')];
const magenta = ['#FF00FF', contrastColor('#FF00FF')];
export default function MyComponent() {
return (
<Box display="flex" justifyContent="center" my={10}>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={red[0]}
>
<Paragraph color={red[1]}>red</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={lime[0]}
>
<Paragraph color={lime[1]}>lime</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={blue[0]}
>
<Paragraph color={blue[1]}>blue</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={yellow[0]}
>
<Paragraph color={yellow[1]}>yellow</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={cyan[0]}
>
<Paragraph color={cyan[1]}>cyan</Paragraph>
</Box>
<Box
width="200px"
height="200px"
display="flex"
alignItems="center"
justifyContent="center"
bgColor={magenta[0]}
>
<Paragraph color={magenta[1]}>magenta</Paragraph>
</Box>
</Box>
);
}output:
As you can see, the text inside each box has adjusted itself to match the background color.
This library is adapted from @busterc's contrast-color library and customized to our needs. We would like to thank @busterc for providing us with the library for the development of this library. We would like to express our special thanks to the resources we have used in the development of this library, which have been of great help to us: