Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS string lightness
'#ddd'.darker // '#a0a0a0'
'#ddd'.lighter // '#f0f0f0'
'#ddd'.darker.darker // '#808080'
// please never actually do this
const lightness = ( str, mul ) => {
if ( !/^#(([0-9a-f]{6})|([0-9a-f]{3}))$/i.test( str ) ) {
return str;
}
const hex = str.substr( 1 );
const nums = hex.match( hex.length === 3 ? /.{1}/g : /.{1,2}/g );
return nums.reduce( ( p, c ) => {
const v = ~~( parseInt( c, 16 ) * mul );
return p + Math.max( 0, Math.min( 255, v ) ).toString( 16 ).padEnd( 2, '0' );
}, '#' );
};
Object.defineProperty( String.prototype, 'lighter', {
get() {
return lightness( String( this ), 1.2 );
}
});
Object.defineProperty( String.prototype, 'darker', {
get() {
return lightness( String( this ), 0.8 );
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.