Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

readable-color

v3.2.0arrow_drop_down
v3.2.0
STATUS
Passing
DOWNLOADS
0
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
4 KB
Returns black or white (or optional light and dark return colors) for best contrast depending on the luminosity of the given color
1 contributor
Use readable-color in your project ?
Copied
npm i @bit/styled-components.polished.color.readable-color
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
color/readableColor ()

Returns black or white (or optional light and dark return colors) for best contrast depending on the luminosity of the given color. Follows W3C specs for readability.

Example
// Styles as object usage
const styles = {
  color: readableColor('#000'),
  color: readableColor('black', '#001', '#ff8'),
  color: readableColor('white', '#001', '#ff8'),
}

// styled-components usage
const div = styled.div`
  color: ___CSS_0___;
  color: ___CSS_1___;
  color: ___CSS_2___;
`

// CSS in JS Output

element {
  color: "#fff";
  color: "#ff8";
  color: "#001";
}
Test Summary

should return black given white hex, #fff

Pass

should return white given black, #000

Pass

should return custom light background when passed dark color

Pass

should return custom dark background when passed light color

Pass

should return black given red, #FF0000

Pass

should return white given blue, #0000FF

Pass

should return black given gray, #787878

Pass

should return white given gray, #757575

Pass

should return white given black, #0000001A

Pass

should return black given white, #FFFFFFBF

Pass

should return black given white, rgb(255,255,255)

Pass

should return white given black, rgb(0,0,0)

Pass

should return black given rgb(120,120,120)

Pass

should return white given rgb(117,117,117)

Pass

should return white given black, rgba(0,0,0,0.7)

Pass

should return white given black, rgba(0,0,0,0.1)

Pass

should return white given black, “black”

Pass

should return black given papayawhip, “papayawhip”

Pass

should return black given palevioletred, “palevioletred”

Pass

should return black given white, “white”

Pass

should return black given red, hsl(0, 100%, 50%)

Pass

should return white given blue, hsl(250, 100%, 50%)

Pass

should return black given gray, hsl(0, 0%, 47%)

Pass

should return white given gray, hsl(0, 0%, 45%)

Pass

should return white given blue, hsla(250, 100%, 50%, 0.2)

Pass