Hooks to calculate color luminance and color contrasts.
yarn add use-color-luminance
# assumes react is already installed
Calculate the perceived luminance between 0 and 1:
import { colorLuminance } from 'use-color-luminance';
colorLuminance('#fff');
// => 1
colorLuminance('#AA5522FF');
// => ~0.1516
colorLuminance([0, 255, 0]);
// => 0.7152
Calculate the contrast between two colors (between 1 and 21):
import { contrast } from 'use-color-luminance';
contrast('#fff', '#000000');
// => 21
contrast('rgba(0, 0, 0, 1)', '#000');
// => 1
contrast('#00f', '#000');
// => 2.444
You can import AA_THRESHOLD_CONTRAST
, AAA_THRESHOLD_CONTRAST
if you want to compare the output with threshold values.
useColorLuminance
is the hook forcolorLuminance
Supported formats for string input are:
#rgb
#rrggbb
#rrggbbFF
rgb(r, g, b)
with(0 <= rgb <= 255)
rgba(r, g, b, 1)
with(0 <= rgb <= 255)
Supported formats for array input are:
[r, g, b]
with(0 <= rgb <= 255)
[r, g, b, 1]
with(0 <= rgb <= 255)
Calculating the luminance or contrast of a color, only works if it's fully opaque. In other words, they can not be translucent.
Colors with that are (semi-)translucent need to be alpha-blended, which means that you need to know the background color(s) in order to calculate the color that will show on screen.
The package use-alpha-blended-color
has both a React hook as well as a general
utility function to blend colors.
import { useAlphaBlendedColor } from 'use-alpha-blended-color';
Note: Even alpha blended colors might not be fully opaque. An alpha blended color will only be fully opaque, if either the foreground or background is.