前言

遇到一個(gè)情況，需要把客戶端用的色值A(chǔ)RBG用在前端。

錯(cuò)誤的展示

ARBG格式的顏色直接填入background是這個(gè)效果。
原因是因?yàn)椋赾ss里八位的色值為RGBA

color

hex-color

chrome里

16進(jìn)制的數(shù)值

因?yàn)?FF1A71FF的透明度是FF。
透明度越小越透明，越大越不透明。0xFF是十進(jìn)制的255，代表不透明，所以這個(gè)色值直接去掉透明度，RGB為#1A71FF

實(shí)際的顏色

ARBG到RGBA

經(jīng)過上面的分析，解法很簡(jiǎn)單了，反正css的color是支持16進(jìn)制的八位色值的，那就把AARRBBGG換成RRBBGGAA好了。

特別地

RGBA可以為4位，這樣一個(gè)字母代表一個(gè)通道。
就像#FFF代表#FFFFFF一樣，照樣用那個(gè)還沒修改的RGBA組件證實(shí)一下。

寫全

縮寫

chrome轉(zhuǎn)換的結(jié)果是完全一致的。

效果

#FF1A71FF

修改透明度

#1F1A71FF

代碼

/* eslint-disable react/no-array-index-key */
import { Input } from 'antd';
import { useMemo } from 'react';
import $styles from './style.module.less';

interface PropsType {
  onChange?: () => void;
  value?: string;
}

/** 用于輸入顏色的Input  */
export default function (props: PropsType) {
  const { value = '', onChange } = props;
  const maskColor = useMemo(() => {
    if (!value && value.length !== 9 && value.length !== 5) return '';
    if (value.length === 5) {
      return `#${value[2]}${value[3]}${value[4]}${value[1]}`;
    }
    if (value.length === 9) {
      return `#${value[3]}${value[4]}${value[5]}${value[6]}${value[7]}${value[8]}${value[1]}${value[2]}`;
    }
    return value;
  }, [value]);

  return (
    <div className={$styles.ColorInput}>
      <Input
        placeholder="請(qǐng)輸入顏色"
        value={value}
        onChange={onChange}
        style={{
          width: '100px',
          borderBottom: '1px solid #eee',
          marginRight: '5px',
        }}
        bordered={false}
      />
      <div className={$styles.colorArea} >
        <div className={$styles.mask} style={{ background: maskColor }} />
        {value && Array(25).fill(0).map((_, key) => <div className={$styles.square} key={key} />)}
      </div>
    </div>
  );
}

// style.module.less
.ColorInput {
  display: flex;

  .colorArea {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid #eee;
    border-radius: 9px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    }

    .square {
      width: 20%;
      height: 20%;

      &:nth-child(odd) {
        background: rgba(0, 0, 0, 0.15);
      }
    }
  }
}

參考：

• https://www.zhihu.com/question/33503266?sort=created
• https://www.color-hex.com/color/e65ff6
• https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color