颜色转换

Hex转RGB

使用Array.slice() , Array.map() 和 match() 将十六进制颜色代码(前缀为#)转换为RGB值的字符串。

const hexToRgb = hex => `rgb(${hex.slice(1).match(/.{2}/g).map(x => parseInt(x, 16)).join()})`
hexToRgb('#27ae60') // 'rgb(39,174,96)'

RGB转hex

使用按位左移运算符(<<)和 toString(16) 将给定的RGB参数转换为十六进制字符串,然后使用 padStart(6,'0') 得到一个6位的十六进制值。

const rgbToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
rgbToHex(255, 165, 1) // 'ffa501'

将 3 位数的颜色代码转换为 6 位数的表现形式

将 3 位数的颜色代码扩展为 6 位数的颜色代码。

使用 Array.map(), String.split() 和 Array.join() 加入映射数组,将 3 位 RGB 十六进制颜色代码转换为 6 位数形式。 Array.slice() 用于从字符串开始删除#,因为输出中已经默认添加了。

const extendHex = shortHex =>
  '#' +
  shortHex
    .slice(shortHex.startsWith('#') ? 1 : 0)
    .split('')
    .map(x => x + x)
    .join('');
extendHex('#03f'); // '#0033ff'
extendHex('05a'); // '#0055aa'

Hex转RGB或者RGBA

将颜色代码转换为 rgb() 字符串。或者,如果提供了 alpha 值,则将颜色代码转换为 rgba() 字符串。

使用 &(和)运算符,按位右移运算符和掩码位将十六进制颜色代码(带或不带前缀 #)转换为 RGB值字符串。如果是3位数的颜色代码,首先将其转换为6位数的颜色代码。如果一个 alpha 值和 6 位十六进制颜色代码一起提供,则返回 rgba() 字符串。

const hexToRGB = hex => {
  let alpha = false,
    h = hex.slice(hex.startsWith('#') ? 1 : 0);
  if (h.length === 3) h = [...h].map(x => x + x).join('');
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    'rgb' +
    (alpha ? 'a' : '') +
    '(' +
    (h >>> (alpha ? 24 : 16)) +
    ', ' +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ', ' +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : '') +
    ')'
  );
};
hexToRGB('#27ae60ff'); // 'rgba(39, 174, 96, 255)'
hexToRGB('27ae60'); // 'rgb(39, 174, 96)'
hexToRGB('#fff'); // 'rgb(255, 255, 255)'

随机生成 Hex 颜色值

生成一个随机的十六进制颜色代码。

使用 Math.random 生成一个随机的24位(6x4位)十六进制数。 使用位操作符,然后使用 toString(16) 将其转换为十六进制字符串。

const randomHexColorCode = () => {
  let n = ((Math.random() * 0xfffff) | 0).toString(16);
  return '#' + (n.length !== 6 ? ((Math.random() * 0xf) | 0).toString(16) + n : n);
};
randomHexColorCode(); // "#e34155"

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress