网页开发中常见的颜色格式为rgb、rgba、hex等格式，各色各样的颜色值也将网页渲染的更加绚丽多彩。对于颜色的各类处理也数不胜数，那么如果我们指定一个颜色值，如果对这个颜色值进行加深或减浅呢？

    本文就该问题给出两种操作方法：在线工具和js代码实现

一、在线工具的颜色加深、减浅

    1.1、点击《在线指定HEX颜色值逐渐加深或减浅》进入该工具，输入需要操作的hex颜色值，选择操作项。

二、js代码实现加深、减浅

    2.1、rgb和hex相互转换公用方法

function  HexToRgb(str) {
  let r = /^\#?[0-9A-F]{6}$/;
  //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
  if (!r.test(str)) return alert('输入错误的hex颜色值');
  //replace替换查找的到的字符串
  str = str.replace("#", "");
  //match得到查询数组
  let hxs = str.match(/../g);
  for (let i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
  return hxs;
}
function RgbToHex(a, b, c) {
  let r = /^\d{1,3}$/;
  if (!r.test(a) || !r.test(b) || !r.test(c)) return alert('输入错误的hex颜色值');
  let hexs = [a.toString(16), b.toString(16), c.toString(16)];
  for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
  return "#" + hexs.join("");
}

    2.2、指定hex颜色值加深

//得到hex颜色值为color的减淡颜色值，level为减淡的程度，限0-1之间
function getDarkColor(color, level) {
  let r = /^\#?[0-9A-F]{6}$/;
  if (!r.test(color)) return alert('输入错误的hex颜色值');
  let rgbc = HexToRgb(color);
  //floor 向下取整
  for (let i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
  return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
console.log(getDarkColor(('#FF0000').toUpperCase(),0.5))

    2.3、指定hex颜色值减浅

//得到hex颜色值为color的减淡颜色值，level为减浅的程度，限0-1之间
function getLightColor(color, level) {
  let r = /^\#?[0-9A-F]{6}$/;
  if (!r.test(color)) return alert('输入错误的hex颜色值');
  let rgbc = HexToRgb(color);
  for (let i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
  return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
console.log(getLightColor(('#FF0000').toUpperCase(),0.5))

注：输入的颜色值必须为6位hex大写颜色值，如：#FF0000、#000000等