RGB to hex and hex to RGB

前端 未结 30 3277
遥遥无期
遥遥无期 2020-11-21 06:56

How to convert colors in RGB format to hex format and vice versa?

For example, convert \'#0080C0\' to (0, 128, 192).

30条回答
  •  予麋鹿
    予麋鹿 (楼主)
    2020-11-21 07:20

    (2017) SIMPLE ES6 composable arrow functions

    I can't resist sharing this for those who may be writing some modern functional/compositional js using ES6. Here are some slick one-liners I am using in a color module that does color interpolation for data visualization.

    Note that this does not handle the alpha channel at all.

    const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
    const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
    const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
    const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
      .map(v => Number(v));
    const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
    

    BTW, If you like this style/syntax, I wrote a full color module (modern-color) you can grab from npm. I made it so I could use prop getters for conversion and parse virtually anything (Color.parse(anything)). Worth a look if you deal with color a lot like I do.

提交回复
热议问题