param { number } value param { number } min param { number } max returns { number } function clamp ( value , min = 0 , max = 1 ) { if ( value < min ) { return min ; } if ( value > max ) { return max ; } return value ; } param { string } color returns { string } export function convertHexToRGB ( color ) { color = color . substr ( 1 ) ; const re = new RegExp ( `.{1,${ color . length / 3 }}` , 'g' ) ; let colors = color . match ( re ) ; if ( colors && colors [ 0 ] . length === 1 ) { colors = colors . map ( n => n + n ) ; } return colors ? `rgb(${ colors . map ( n => parseInt ( n , 16 ) ) . join ( ', ' ) })` : '' ; } param { string } color returns { string } export function rgbToHex ( color ) { if ( color . indexOf ( '#' ) === 0 ) { return color ; } function intToHex ( c ) { const hex = c . toString ( 16 ) ; return hex . length === 1 ? `0${ hex }` : hex ; } let { values } = decomposeColor ( color ) ; values = values . map ( n => intToHex ( n ) ) ; return `#${ values . join ( '' ) }` ; } param { string } color returns { object } export function decomposeColor ( color ) { if ( color . charAt ( 0 ) === '#' ) { return decomposeColor ( convertHexToRGB ( color ) ) ; } const marker = color . indexOf ( '(' ) ; const type = color . substring ( 0 , marker ) ; let values = color . substring ( marker + 1 , color . length - 1 ) . split ( ',' ) ; values = values . map ( value => parseFloat ( value ) ) ; if ( process . env . NODE_ENV !== 'production' ) { if ( [ 'rgb' , 'rgba' , 'hsl' , 'hsla' ] . indexOf ( type ) === - 1 ) { throw new Error ( [ `Shared components: unsupported \`${ color }\` color.` , 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().' , ] . join ( '\n' ) ) ; } } return { type , values } ; } param color param { string } color . type param { array } color . values returns { string } export function recomposeColor ( color ) { const { type } = color ; let { values } = color ; if ( type . indexOf ( 'rgb' ) !== - 1 ) { values = values . map ( ( n , i ) => ( i < 3 ? parseInt ( n , 10 ) : n ) ) ; } if ( type . indexOf ( 'hsl' ) !== - 1 ) { values [ 1 ] = `${ values [ 1 ] }%` ; values [ 2 ] = `${ values [ 2 ] }%` ; } return `${ color . type }(${ values . join ( ', ' ) })` ; } param { string } foreground param { string } background returns { number } export function getContrastRatio ( foreground , background ) { const lumA = getLuminance ( foreground ) ; const lumB = getLuminance ( background ) ; return ( Math . max ( lumA , lumB ) + 0.05 ) / ( Math . min ( lumA , lumB ) + 0.05 ) ; } param { string } color returns { number } export function getLuminance ( color ) { const decomposedColor = decomposeColor ( color ) ; if ( decomposedColor . type . indexOf ( 'rgb' ) !== - 1 ) { const rgb = decomposedColor . values . map ( val => { val /= 255 ; return val <= 0.03928 ? val / 12.92 : ( ( val + 0.055 ) / 1.055 ) ** 2.4 ; } ) ; return Number ( ( 0.2126 * rgb [ 0 ] + 0.7152 * rgb [ 1 ] + 0.0722 * rgb [ 2 ] ) . toFixed ( 3 ) ) ; } return decomposedColor . values [ 2 ] / 100 ; } param { string } color param { number } coefficient returns { string } export function emphasize ( color , coefficient = 0.15 ) { return getLuminance ( color ) > 0.5 ? darken ( color , coefficient ) : lighten ( color , coefficient ) ; } param { string } color param { number } value returns { string } export function fade ( color , value ) { color = decomposeColor ( color ) ; value = clamp ( value ) ; if ( color . type === 'rgb' || color . type === 'hsl' ) { color . type += 'a' ; } color . values [ 3 ] = value ; return recomposeColor ( color ) ; } param { string } color param { number } coefficient returns { string } export function darken ( color , coefficient ) { color = decomposeColor ( color ) ; coefficient = clamp ( coefficient ) ; if ( color . type . indexOf ( 'hsl' ) !== - 1 ) { color . values [ 2 ] *= 1 - coefficient ; } else if ( color . type . indexOf ( 'rgb' ) !== - 1 ) { for ( let i = 0 ; i < 3 ; i += 1 ) { color . values [ i ] *= 1 - coefficient ; } } return recomposeColor ( color ) ; } param { string } color param { number } coefficient returns { string } export function lighten ( color , coefficient ) { color = decomposeColor ( color ) ; coefficient = clamp ( coefficient ) ; if ( color . type . indexOf ( 'hsl' ) !== - 1 ) { color . values [ 2 ] += ( 100 - color . values [ 2 ] ) * coefficient ; } else if ( color . type . indexOf ( 'rgb' ) !== - 1 ) { for ( let i = 0 ; i < 3 ; i += 1 ) { color . values [ i ] += ( 255 - color . values [ i ] ) * coefficient ; } } return recomposeColor ( color ) ; }