Created
April 9, 2020 16:53
-
-
Save ckkz-it/370947be00aac851398f66d20b95e950 to your computer and use it in GitHub Desktop.
Get optimized color based on background color (Typescript)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { getTextColorBasedOnBg } from './utils' | |
getTextColorBasedOnBg('#00334d'); // -> 'white' | |
getTextColorBasedOnBg('#fdaaaf'); // -> 'black' | |
getTextColorBasedOnBg('#fdffaf'); // -> 'black' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type RGB = { r: number; g: number; b: number }; | |
/* | |
https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb | |
*/ | |
const hexToRgb = (hex: string): RGB => { | |
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | |
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | |
hex = hex.replace(shorthandRegex, (_, r, g, b) => { | |
return r + r + g + g + b + b; | |
}); | |
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); | |
return { | |
r: parseInt(result[1], 16), | |
g: parseInt(result[2], 16), | |
b: parseInt(result[3], 16), | |
}; | |
}; | |
const rgbStringToObject = (rgbColor: string): RGB => { | |
const regExp = /^rgb\(([\d]+)[\s]*,[\s]*([\d]+)[\s]*,[\s]*([\d]+).*\)$/i; | |
const result = regExp.exec(rgbColor); | |
return { | |
r: parseInt(result[1], 10), | |
g: parseInt(result[2], 10), | |
b: parseInt(result[3], 10), | |
}; | |
}; | |
export const getTextColorBasedOnBg = ( | |
color: string, | |
hex = true, | |
blackColor = 'black', | |
whiteColor = 'white', | |
) => { | |
let rgbColor: RGB; | |
if (hex) { | |
rgbColor = hexToRgb(color); | |
} else { | |
rgbColor = rgbStringToObject(color); | |
} | |
// YIQ formula | |
const brightness = Math.round((rgbColor.r * 299 + rgbColor.g * 587 + rgbColor.b * 114) / 1000); | |
return brightness > 128 ? blackColor : whiteColor; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment