image.png

sketch颜色选择器
image.png

color-convert 颜色转换

https://www.npmjs.com/package/color-convert
rgba与16进制颜色空间互相转换方法
https://juejin.cn/post/7035812561027072031
https://juejin.cn/post/7043448389022777351

rgb转换为16进制

  1. // "rgb(255,255,255)".colorHex()
  2. String.prototype.colorHex = function () {
  3.   const reg = /^(rgb|RGB)/; // RGB颜色值的正则
  5.   if (!reg.test(this)) {
  6.     return String(this);
  7.   }
  9.   let strHex = "#";
  10.   // 把RGB的3个数值变成数组
  11.   const source = this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
  12.   const {length} = source;
  14.   // 转成16进制
  15.   for (let i = 0; i < length; i++) {
  16.     let hex = Number(source[i]).toString(16);
  17.     if (hex === "0") {
  18.       hex += hex;
  19.     }
  20.     strHex += hex;
  21.   }
  22.   return strHex;
  23. }

16进制转换为rgb

  1. "#fff".colorRgb();  // rgb(255,255,255)
  2. "#ffffff".colorRgb();  // rgb(255,255,255)
  4. String.prototype.colorRgb = function () {
  5.   // 16进制颜色值的正则
  6.   const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  8.   // 把颜色值变成小写
  9.   let color = this.toLowerCase();
  10.   if (!reg.test(color)) return color;
  12.   // 如果只有三位的值，需变成六位，如：#fff => #ffffff
  13.   if (color.length === 4) {
  14.     let colorNew = "#";
  15.     for (let i = 1; i < 4; i += 1) {
  16.       colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
  17.     }
  18.     color = colorNew;
  19.   }
  21.   // 处理六位的颜色值，转为RGB
  22.   const source = [];
  23.   for (let i = 1; i < 7; i += 2) {
  24.     source.push(parseInt("0x" + color.slice(i, i + 2)));
  25.   }
  26.   return `rgb(${source.join(",")})`;
  27. }

react-colorful

在线案例 https://omgovich.github.io/react-colorful
Github https://github.com/omgovich/react-colorful
https://www.npmjs.com/package/react-colorful
image.png
image.png

ColorfulPicker

基于 react-colorful & @ant-design/colors的封装
image.pngimage.png

react-color-picker

https://www.npmjs.com/package/react-best-gradient-color-picker
Github https://github.com/hxf31891/react-gradient-color-picker
在线案例 https://gradient-package-demo.web.app

  1. yarn add react-best-gradient-color-picker

image.png

react-color-palette

https://www.npmjs.com/package/react-color-palette
image.png
image.png

react-color

在线案例 https://casesandberg.github.io/react-color
大而全颜色选择器

  1. Sketch
  2. Photoshop
  3. Chrome

image.png

  1. yarn add react-color
  2. yarn add @types/react-color --dev