制作一个颜色选择器

颜色选择器预览效果

需求：网站主题色，使用自定义的色彩范围

关键字：CSS Variables, HEX & RGB

---

1. 从需求拿到了 9 个颜色，UI 做成了渐变的颜色空间，需要用户可以从这个颜色空间内选择颜色。9 个颜色分别是#ff001b,#ff00de,#a400fc,#1600fb,#00fdfe,#00ff1d,#a2ff0a,#f3ff00,#ff5e00。使用 9 个颜色，我们可以很容易构造成一个横向的渐变条, 如上图所示。

渐变css

.colorBar {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(
    to right,
    #ff001b,
    #ff00de,
    #a400fc,
    #1600fb,
    #00fdfe,
    #00ff1d,
    #a2ff0a,
    #f3ff00,
    #ff5e00
  );
}

2. 选择器中放置一个滑轨，已便于在色彩范围内滑动选取颜色。这里我使用了 vant 的 slider 组件。（轮子已经很多了，不需要再造了）

html

<div class="colorBar">
  <van-slider
    v-model="progress"
    :min="1"
    :max="999"
    @input="onDragEnd($event)"
  />
</div>

css

.van-slider {
  width: calc(100% - 20px);
  margin-left: 10px;
  background-color: transparent;
  height: 20px;
  .van-slider__bar {
    height: 20px !important;
    background-color: transparent;
  }
  .van-slider__button {
    background-color: transparent;
    border: solid 3px #fff;
  }
}

3. 滑轨移动，选择颜色，这里为了减少计算量，在滑轨停下时才计算颜色。UI 给出的是 HEX 格式(16 进制 RRGGBB)的颜色，我们可以很容易的把它转换成 RGB 颜色(R: 0 - 255, G: 0 - 255, B: 0 - 255), 便于使用 10 进制的计算，更容易理解。9 个颜色之间，实际上包含 8 个颜色区域，滑轨也是在这 8 个区域内移动，在计算当前的颜色时，我们可以计算当前滑轨在它所在的 8 个颜色区域内的偏移值，在用当前颜色区域的起始值加上颜色的偏移值，就可以得到具体的颜色值。因此，可以写出以下 method 计算当前颜色 rgb 值

onDragEnd: _.throttle(function(progress) {
// 此处加一个节流优化性能
  this.getCurrentColorRgb(progress)
}, 100),
getColorRgb(progress) {
  // 例如当前滑轨progress = 80， 80/125 < 1，那么此时它应该处于第1个颜色和第2个颜色组成的色彩空间内。
  const quotient = Math.floor(progress / 125) // 计算当前区间 125 是当前滑轨总共可以移动1000个单位，这1000个单位内共有8个颜色空间，每个空间则包含125个单位

  const currentIndex = Math.ceil(progress / 125)
  const percentage = (progress / 125) % 1
  const color1 = this.colorZone[currentIndex - 1]

  const color2 = this.colorZone[currentIndex]
  if (percentage === 0) {
    this.getColorHex(color2)
    return color2
  }
  if (color1) {
    let result
    const diffObj = {
      r:
        color1.r >= color2.r
          ? -parseInt((color1.r - color2.r) * percentage)
          : parseInt((color2.r - color1.r) * percentage),
      g:
        color1.g >= color2.g
          ? -parseInt((color1.g - color2.g) * percentage)
          : parseInt((color2.g - color1.g) * percentage),
      b:
        color1.b >= color2.b
          ? -parseInt((color1.b - color2.b) * percentage)
          : parseInt((color2.b - color1.b) * percentage)
    }

    result = {
      r: color1.r + diffObj.r,
      g: color1.g + diffObj.g,
      b: color1.b + diffObj.b
    }
    this.getColorHex(result)
    return result
  } else {
    const defaultColor = {
      r: 35,
      g: 142,
      b: 250
    }
    this.getColorHex(defaultColor)
    return defaultColor
  }
}

4. 上一个步骤得到的 rgb 可以使用 CSS 的 variables 设置网站主题色。例如我设置--themeColor: rgb(254, 168, 23)，对应地，在需要用到颜色变量的地方使用background-color: var(--themeColor)或者color: var(--themeColor)即可。
5. 完结，撒花。

---

完整的组件代码如下

<template>
  <div class="site-theme-colorPicker">
    <div class="colorBar" :class="{ hideSliderButton: hideSliderButton }">
      <van-slider
        v-model="progress"
        :min="1"
        :max="999"
        @input="onDragEnd($event)"
      />
    </div>
    <div class="current-color">
      <div
        class="current-preview"
        :style="`background-color: #${this.currentColorHex}`"
      ></div>
      <van-field
        class="color-input"
        clearable
        type="text"
        v-model="currentColorHex"
        @blur="onCurrentColorHexChanged()"
      >
        <div slot="left-icon">#</div>
      </van-field>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import Vue from "vue";
import { Slider } from "vant";

Vue.use(Slider);
export default {
  props: {
    value: {
      type: String,
    },
  },
  data() {
    return {
      hideSliderButton: false,
      progress: 1,
      currentColorHex: "FF001B",
      colorRange: [],
    };
  },
  computed: {
    colorZone() {
      const arr = [
        {
          r: 255,
          g: 0,
          b: 27,
        },
        {
          r: 255,
          g: 0,
          b: 222,
        },
        {
          r: 164,
          g: 0,
          b: 252,
        },
        {
          r: 22,
          g: 0,
          b: 251,
        },
        {
          r: 0,
          g: 253,
          b: 254,
        },
        {
          r: 0,
          g: 255,
          b: 29,
        },
        {
          r: 162,
          g: 255,
          b: 10,
        },
        {
          r: 243,
          g: 255,
          b: 0,
        },
        {
          r: 255,
          g: 94,
          b: 0,
        },
      ];
      return arr;
    },
    currentIndex() {
      return Math.ceil(this.progress / 125);
    },
    percentage() {
      return (this.progress / 125) % 1;
    },
    currentColorRgb() {
      return this.getCurrentColorRgb(this.progress);
    },
  },
  watch: {
    progress() {
      if (this.hideSliderButton) {
        this.hideSliderButton = false;
      }
    },
  },
  mounted() {
    this.initColorRange();
    this.currentColorHex = this.value.replace(/#/g, "");
    this.findColorPosition(this.getRgbColor(this.value));
  },
  methods: {
    getRgbColor(hexColor) {
      let hex = hexColor.replace(/#/g, "");
      return {
        r: parseInt(hex.substring(0, 2), 16),
        g: parseInt(hex.substring(2, 4), 16),
        b: parseInt(hex.substring(4, 6), 16),
      };
    },
    onDragEnd: _.throttle(function (progress) {
      this.getCurrentColorRgb(progress);
      this.$emit("input", `#${this.currentColorHex}`);
    }, 100),
    getCurrentColorRgb(progress) {
      const currentIndex = Math.ceil(progress / 125);
      const percentage = (progress / 125) % 1;
      const color1 = this.colorZone[currentIndex - 1];

      const color2 = this.colorZone[currentIndex];
      if (percentage === 0) {
        this.getColorHex(color2);
        return color2;
      }
      if (color1) {
        let result;
        const diffObj = {
          r:
            color1.r >= color2.r
              ? -parseInt((color1.r - color2.r) * percentage)
              : parseInt((color2.r - color1.r) * percentage),
          g:
            color1.g >= color2.g
              ? -parseInt((color1.g - color2.g) * percentage)
              : parseInt((color2.g - color1.g) * percentage),
          b:
            color1.b >= color2.b
              ? -parseInt((color1.b - color2.b) * percentage)
              : parseInt((color2.b - color1.b) * percentage),
        };

        result = {
          r: color1.r + diffObj.r,
          g: color1.g + diffObj.g,
          b: color1.b + diffObj.b,
        };
        this.getColorHex(result);
        return result;
      } else {
        const defaultColor = {
          r: 35,
          g: 142,
          b: 250,
        };
        this.getColorHex(defaultColor);
        return defaultColor;
      }
    },
    getColorHex(rgb) {
      const formatStep1 = {
        r: rgb.r.toString(16),
        g: rgb.g.toString(16),
        b: rgb.b.toString(16),
      };
      const formatStep2 = {
        r: formatStep1.r.length < 2 ? `0${formatStep1.r}` : formatStep1.r,
        g: formatStep1.g.length < 2 ? `0${formatStep1.g}` : formatStep1.g,
        b: formatStep1.b.length < 2 ? `0${formatStep1.b}` : formatStep1.b,
      };

      this.currentColorHex = _.toUpper(
        `${formatStep2.r.toString(16)}${formatStep2.g.toString(
          16
        )}${formatStep2.b.toString(16)}`
      );
    },
    onCurrentColorHexChanged(hex) {
      const colorHex = hex
        ? hex.replace(/#/g, "")
        : this.currentColorHex.replace(/#/g, "");
      const colorHexReg = /([0-9a-fA-F]{2}){3}/g;
      const isColor = colorHexReg.test(colorHex);
      if (isColor) {
        this.$emit("input", hex);
      }
    },
    initColorRange() {
      const localColorRange = window.localStorage.getItem(
        "siteTheme-colorRange"
      );
      if (localColorRange) {
        this.colorRange = JSON.parse(localColorRange);
      } else {
        _.forEach(this.colorZone, (color, index) => {
          if (color && this.colorZone[index + 1]) {
            this.calcColorRange(color, this.colorZone[index + 1], index);
          }
        });
      }
    },
    cartesianProduct(arr) {
      return arr.reduce(
        (a, b) =>
          a
            .map((x) => b.map((y) => x.concat(y)))
            .reduce((a, b) => a.concat(b), []),
        [[]]
      );
    },
    calcColorRange(color1, color2, index) {
      const rDiff =
        color1.r >= color2.r ? color1.r - color2.r : color2.r - color1.r;
      const gDiff =
        color1.g >= color2.g ? color1.g - color2.g : color2.g - color1.g;
      const bDiff =
        color1.b >= color2.b ? color1.b - color2.b : color2.b - color1.b;
      let arr = {
        r: [],
        g: [],
        b: [],
      };
      _.forEach(_.range(rDiff), (r) => {
        const num = r;
        arr.r.push({
          ...color1,
          r: color1.r >= color2.r ? color1.r - num : color1.r + num,
        });
      });
      _.forEach(_.range(gDiff), (g) => {
        const num = g;
        arr.g.push({
          ...color1,
          g: color1.g >= color2.r ? color1.g - num : color1.g + num,
        });
      });
      _.forEach(_.range(bDiff), (b) => {
        const num = b;
        arr.b.push({
          ...color1,
          b: color1.b >= color2.b ? color1.b - num : color1.b + num,
        });
      });
      let arr1 = this.cartesianProduct(
        _.filter([arr.r, arr.g, arr.b], (item) => {
          return item.length;
        })
      );
      this.colorRange.push({
        index: index + 1,
        start: color1,
        end: color2,
        data: _.flatMap(arr1),
      });
      if (index === 7) {
        window.localStorage.setItem(
          "siteTheme-colorRange",
          JSON.stringify(this.colorRange)
        );
      }
    },
    findColorPosition(rgb) {
      const rangeIndex = _.findIndex(this.colorRange, (item) => {
        return _.find(item.data, (obj) => {
          return _.isEqual(obj, rgb);
        });
      });
      let accIndex = -1;
      if (rangeIndex !== -1) {
        accIndex = _.findIndex(this.colorRange[rangeIndex].data, (item) => {
          return _.isEqual(item, rgb);
        });
      }
      if (rangeIndex !== -1 && accIndex !== -1) {
        this.progress =
          125 *
          (rangeIndex +
            accIndex /
              _.get(this.colorRange, `[${rangeIndex}].data.length`, 0));
      } else {
        this.hideSliderButton = true;
      }
    },
  },
};
</script>

<style lang="scss">
.site-theme-colorPicker {
  padding: 42px 0 45px 0;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e3e3e3;
    transform: scaleY(0.5);
  }
  .colorBar {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    background: linear-gradient(
      to right,
      #ff001b,
      #ff00de,
      #a400fc,
      #1600fb,
      #00fdfe,
      #00ff1d,
      #a2ff0a,
      #f3ff00,
      #ff5e00
    );
    .van-slider {
      width: calc(100% - 20px);
      margin-left: 10px;
      background-color: transparent;
      height: 20px;
      .van-slider__bar {
        height: 20px !important;
        background-color: transparent;
      }
      .van-slider__button {
        background-color: transparent;
        border: solid 3px #fff;
      }
    }
    &.hideSliderButton {
      .van-slider {
        .van-slider__button {
          background-color: transparent;
          opacity: 0;
        }
      }
    }
  }
  .current-color {
    margin-top: 25px;
    display: flex;
    .current-preview {
      width: 70px;
      height: 30px;
      border-radius: 3px;
      transition: background-color ease-in-out 0.1s;
    }
    .color-input {
      margin-left: 10px;
      width: 120px;
      height: 30px;
      border: solid 1px #d8d8d8;
      border-radius: 3px;
      padding: 0 9px;
      font-size: 14px;
      .van-field__left-icon {
        color: #999;
      }
    }
  }
}
</style>