Skip to content

Instantly share code, notes, and snippets.

@cvan
Created November 14, 2018 09:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cvan/18b7a133f32ce33e84d65a3bcf9574dc to your computer and use it in GitHub Desktop.
Save cvan/18b7a133f32ce33e84d65a3bcf9574dc to your computer and use it in GitHub Desktop.
convert hex colours to `rgb(…)`
function hexToRgb(hex) {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, 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);
const rgbObj = result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
return rgbObj ? `rgb(${rgbObj.r},${rgbObj.g},${rgbObj.b}})` : '';
}
copy(`-- black: #000 rgb(0, 0, 0)
-- void: #232426 rgb(35, 36, 38)
-- asphalt: #3d3d3d rgb(61, 61, 61)
-- iron: #5d5d5d ${hexToRgb('#5d5d5d')}
-- rhino: #8c898a ${hexToRgb('#8c898a')}
-- concrete: #9ea3ab ${hexToRgb('#9ea3ab')}
-- silver: #e3d4e5 ${hexToRgb('#e3d4e5')}
-- driftwood: #f4f4f4 ${hexToRgb('#f4f4f4')}
-- white: #fff ${hexToRgb('#fff')}
-- steel: #4c34c58 ${hexToRgb('#4c34c58')}
-- dusk: #556f8e ${hexToRgb('#556f8e')}
-- pearl: #d0d6dd ${hexToRgb('#d0d6dd')}
-- fog: #e2e6eb ${hexToRgb('#e2e6eb')}
-- cloud: #dfe4e7 ${hexToRgb('#dfe4e7')}
-- blackberry: #25003e ${hexToRgb('#25003e')}
-- desert: #ef4136 ${hexToRgb('#ef4136')}
-- geranium: #ef1b71 ${hexToRgb('#ef1b71')}
-- spark: #f7ce4d ${hexToRgb('#f7ce4d')}
-- grass: #8dc63f ${hexToRgb('#8dc63f')}
-- caribbean: #2bd5d5 ${hexToRgb('#2bd5d5')}
-- sky: #75eff9 ${hexToRgb('#75eff9')}
-- azure: #518fe1 ${hexToRgb('#518fe1')}`)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment