Simple Way to Validate CSS Colors
function isColor(col) {
const cache = isColor[col]
if (cache != null) {
console.log('- reading cache')
return cache
}
isColor.el.style = ''
isColor.el.style.color = col
return isColor[col] = !!isColor.el.style.color
}
isColor.el = document.createElement('div')
console.log('is "red" a color?', isColor('red'))
console.log('from the cache: ', isColor('red'))
console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
console.log('is "#0f0" a color?', isColor('#0f0'))
console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
console.log('is "snippetZone" ?', isColor('snippetZone'))
I find this technique is usually good enough to validate colors…