颜色设计

tailwindcolorshades

官网

自动生成颜色卡片

一键生成支持 tailwind 的颜色卡片

// tailwind.config.js
'royal-blue': {
    '50': '#f8f8ff', 
    '100': '#f1f1ff', 
    '200': '#ddddfe', 
    '300': '#c8c8fd', 
    '400': '#9e9efc', 
    '500': '#7575FB', 
    '600': '#6969e2', 
    '700': '#5858bc', 
    '800': '#464697', 
    '900': '#39397b'
}

grabient.com

保存成className来使用

<style lang='stylus'>
.grabientColor1
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);


.grabientColor2
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

.grabientColor3
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);

.grabientColor4
    background-color: #D9AFD9;
    background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);

.grabientColor5
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

.grabientColor6
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

/* 比较明亮 */
.grabientColor7
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);

.grabientColor8
    background-color: #85FFBD;
    background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);

.grabientColor9
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);

.grabientColor10
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

.grabientColor11
    background-color: #08AEEA;
    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);

.grabientColor12
    background-color: #08AEEA;
    background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
    
.grabientColor12
    background-color: #52ACFF;
    background-image: linear-gradient(180deg, #52ACFF 25%, #FFE32C 100%);

.grabientColor13
    background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);

.grabientColor14
    background-color: #21D4FD;
    background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

.grabientColor15
    background-color: #3EECAC;
    background-image: linear-gradient(19deg, #3EECAC 0%, #EE74E1 100%);

.grabientColor16
    background-color: #FA8BFF;
    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);

.grabientColor17
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);

.grabientColor18
    background-color: #FBDA61;
    background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);

    
    
.grabientColor19
    background-color: #F4D03F;
    background-image: linear-gradient(132deg, #F4D03F 0%, #16A085 100%);

.grabientColor20
    background-color: #A9C9FF;
    background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);

.grabientColor21
    background-color: #74EBD5;
    background-image: linear-gradient(90deg, #74EBD5 0%, #9FACE6 100%);

.grabientColor22
    background-color: #FAACA8;
    background-image: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%);

.grabientColor23
    background-color: #FAD961;
    background-image: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);

.grabientColor24
    background-color: #FEE140;
    background-image: linear-gradient(90deg, #FEE140 0%, #FA709A 100%);
    
.grabientColor25
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
</style>

Echarts中使用

<div class="gradient-class" style="background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);">
  <!-- Content -->
</div>

import * as echarts from 'echarts';

type GradientColor = echarts.graphic.LinearGradient | string;

function parseGradientToEchartsColor(className: string): GradientColor {
  // 获取指定 class 的 DOM 元素
  const element = document.querySelector(`.${className}`) as HTMLElement | null;

  // 如果元素不存在，直接返回一个默认颜色
  if (!element) {
    console.warn(`Element with class "${className}" not found.`);
    return '#000'; // 默认返回黑色
  }

  // 获取元素的计算样式
  const style = window.getComputedStyle(element);

  // 获取 background-color（纯色）和 background-image（渐变色）
  const backgroundColor = style.backgroundColor;
  const backgroundImage = style.backgroundImage;

  // 如果背景图是渐变（linear-gradient），解析为 echarts 渐变色
  if (backgroundImage && backgroundImage.startsWith("linear-gradient")) {
    const gradientMatch = backgroundImage.match(/linear-gradient\(([\d\.]+)deg,\s*([^\)]+)\)/);
    
    if (gradientMatch) {
      const angle = parseFloat(gradientMatch[1]);  // 渐变角度
      const colors = gradientMatch[2].split(',').map(c => c.trim());  // 渐变颜色数组

      // 计算渐变方向的 cos 和 sin 值
      const angleRad = angle * Math.PI / 180;
      const x = Math.cos(angleRad);  // 渐变方向的 X 轴分量
      const y = Math.sin(angleRad);  // 渐变方向的 Y 轴分量

      // 转换为 echarts 渐变色格式
      return new echarts.graphic.LinearGradient(
        x, y,  // 渐变的方向
        0, 1,  // 渐变的起始和结束位置
        colors.map((color, index) => ({
          offset: index / (colors.length - 1), // 计算渐变位置
          color: color
        }))
      );
    }
  }

  // 如果没有渐变效果，返回纯色（背景色）
  return backgroundColor;
}

// 使用
new echarts.graphic.LinearGradient(
  0.4695, 0.8829,  // 渐变方向
  0, 1,  // 渐变起始点和结束点
  [
    { offset: 0, color: '#8EC5FC' },
    { offset: 1, color: '#E0C3FC' }
  ]
)

类型声明：

• GradientColor：定义了返回类型，可以是 echarts.graphic.LinearGradient 或者简单的颜色字符串（例如 #8EC5FC）。

获取 class 对应的元素：

• 使用 document.querySelector 获取指定 className 的元素，并通过 as HTMLElement | null 确保返回类型为 HTMLElement 或 null。

检查元素是否存在：

• 如果没有找到该元素，函数会返回一个默认颜色（黑色 #000），并在控制台输出警告。

解析 background-image 中的渐变：

• 通过正则表达式提取 linear-gradient 的角度和颜色。
• 将角度从度数转换为弧度，并计算出渐变的 X 和 Y 方向。

返回 echarts 渐变色：

• 使用 echarts.graphic.LinearGradient 创建渐变色对象，并根据提取的颜色数组创建 offset（渐变位置）和对应的颜色。

返回纯颜色：

• 如果 background-image 中没有渐变，直接返回 background-color。

webgradients.com

网址：https://webgradients.com/

渐变