1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 18x 18x 18x 18x 18x 18x 83x 81x 12x 69x 20x 49x 49x 6x 43x 43x 29x 14x 14x 5x 5x 5x 5x 5x 5x 9x 9x 5x 5x 5x 5x 5x 5x 4x | // @flow import hslToRgb from '../internalHelpers/_hslToRgb' import type { RgbColor, RgbaColor } from '../types/color' const hexRegex = /^#[a-fA-F0-9]{6}$/ const reducedHexRegex = /^#[a-fA-F0-9]{3}$/ const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/ const rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/ const hslRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/ const hslaRegex = /^hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/ /** * Returns an RgbColor or RgbaColor object. This utility function is only useful * if want to extract a color component. With the color util `toColorString` you * can convert a RgbColor or RgbaColor object back to a string. * * @example * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1 * const color1 = 'rgb(255, 0, 0)'; * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2 * const color2 = 'hsla(210, 10%, 40%, 0.75)'; */ function parseToRgb(color: string): RgbColor | RgbaColor { if (typeof color !== 'string') throw new Error('Passed an incorrect argument to a color function, please pass a string representation of a color.') if (color.match(hexRegex)) { return { red: parseInt(`${color[1]}${color[2]}`, 16), green: parseInt(`${color[3]}${color[4]}`, 16), blue: parseInt(`${color[5]}${color[6]}`, 16), } } if (color.match(reducedHexRegex)) { return { red: parseInt(`${color[1]}${color[1]}`, 16), green: parseInt(`${color[2]}${color[2]}`, 16), blue: parseInt(`${color[3]}${color[3]}`, 16), } } const rgbMatched = rgbRegex.exec(color) if (rgbMatched) { return { red: parseInt(`${rgbMatched[1]}`, 10), green: parseInt(`${rgbMatched[2]}`, 10), blue: parseInt(`${rgbMatched[3]}`, 10), } } const rgbaMatched = rgbaRegex.exec(color) if (rgbaMatched) { return { red: parseInt(`${rgbaMatched[1]}`, 10), green: parseInt(`${rgbaMatched[2]}`, 10), blue: parseInt(`${rgbaMatched[3]}`, 10), alpha: parseFloat(`${rgbaMatched[4]}`, 10), } } const hslMatched = hslRegex.exec(color) if (hslMatched) { const hue = parseInt(`${hslMatched[1]}`, 10) const saturation = parseInt(`${hslMatched[2]}`, 10) / 100 const lightness = parseInt(`${hslMatched[3]}`, 10) / 100 const rgbColorString = `rgb(${hslToRgb(hue, saturation, lightness)})` const hslRgbMatched = rgbRegex.exec(rgbColorString) return { red: parseInt(`${hslRgbMatched[1]}`, 10), green: parseInt(`${hslRgbMatched[2]}`, 10), blue: parseInt(`${hslRgbMatched[3]}`, 10), } } const hslaMatched = hslaRegex.exec(color) if (hslaMatched) { const hue = parseInt(`${hslaMatched[1]}`, 10) const saturation = parseInt(`${hslaMatched[2]}`, 10) / 100 const lightness = parseInt(`${hslaMatched[3]}`, 10) / 100 const rgbColorString = `rgb(${hslToRgb(hue, saturation, lightness)})` const hslRgbMatched = rgbRegex.exec(rgbColorString) return { red: parseInt(`${hslRgbMatched[1]}`, 10), green: parseInt(`${hslRgbMatched[2]}`, 10), blue: parseInt(`${hslRgbMatched[3]}`, 10), alpha: parseFloat(`${hslaMatched[4]}`, 10), } } throw new Error('Couldn\'t parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.') } export default parseToRgb |