CSS 颜色变量生成器

根据主色自动生成 CSS 变量配色方案，支持多种格式导出

科技蓝
活力橙
清新绿
优雅紫
热情红
稳重灰

配色预览

主色色阶

50
#ffffff
100
#ffffff
200
#ffffff
300
#ffffff
400
#e5f3ff
500
#1890FF
600
#004280
700
#000000
800
#000000
900
#000000
950
#000000

透明度变体

5%
rgba(24, 144, 255, 0.05)
10%
rgba(24, 144, 255, 0.1)
20%
rgba(24, 144, 255, 0.2)
30%
rgba(24, 144, 255, 0.3)
40%
rgba(24, 144, 255, 0.4)
50%
rgba(24, 144, 255, 0.5)

语义化颜色

success
#21c45d
success-light
#a8f0c2
warning
#f59f0a
warning-light
#fce2b6
error
#dc2828
error-light
#f5c2c2
info
#1890FF
info-light
#cce6ff
background
#FFFFFF
background-secondary
#F5F5F5
background-tertiary
#FAFAFA
text
#1F1F1F
text-secondary
#5F5F5F
text-tertiary
#8F8F8F
text-disabled
#BFBFBF
border
#D9D9D9
border-secondary
#E8E8E8

灰度色阶

50
#FAFAFA
100
#F5F5F5
200
#EBEBEB
300
#D9D9D9
400
#BFBFBF
500
#8C8C8C
600
#595959
700
#434343
800
#262626
900
#1F1F1F
950
#141414

生成代码

:root {
  /* Primary Colors */
  --color-primary-50: #ffffff;
  --color-primary-100: #ffffff;
  --color-primary-200: #ffffff;
  --color-primary-300: #ffffff;
  --color-primary-400: #e5f3ff;
  --color-primary-500: #1890FF;
  --color-primary-600: #004280;
  --color-primary-700: #000000;
  --color-primary-800: #000000;
  --color-primary-900: #000000;
  --color-primary-950: #000000;

  /* Alpha Variants */
  --color-primary-alpha-5: rgba(24, 144, 255, 0.05);
  --color-primary-alpha-10: rgba(24, 144, 255, 0.1);
  --color-primary-alpha-20: rgba(24, 144, 255, 0.2);
  --color-primary-alpha-30: rgba(24, 144, 255, 0.3);
  --color-primary-alpha-40: rgba(24, 144, 255, 0.4);
  --color-primary-alpha-50: rgba(24, 144, 255, 0.5);

  /* Semantic Colors */
  --color-success: #21c45d;
  --color-success-light: #a8f0c2;
  --color-warning: #f59f0a;
  --color-warning-light: #fce2b6;
  --color-error: #dc2828;
  --color-error-light: #f5c2c2;
  --color-info: #1890FF;
  --color-info-light: #cce6ff;
  --color-background: #FFFFFF;
  --color-background-secondary: #F5F5F5;
  --color-background-tertiary: #FAFAFA;
  --color-text: #1F1F1F;
  --color-text-secondary: #5F5F5F;
  --color-text-tertiary: #8F8F8F;
  --color-text-disabled: #BFBFBF;
  --color-border: #D9D9D9;
  --color-border-secondary: #E8E8E8;

  /* Grayscale */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EBEBEB;
  --color-gray-300: #D9D9D9;
  --color-gray-400: #BFBFBF;
  --color-gray-500: #8C8C8C;
  --color-gray-600: #595959;
  --color-gray-700: #434343;
  --color-gray-800: #262626;
  --color-gray-900: #1F1F1F;
  --color-gray-950: #141414;
}

使用示例

CSS

.button {
  background-color: var(--color-primary-500);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.button:hover {
  background-color: var(--color-primary-600);
}

.button:disabled {
  background-color: var(--color-primary-300);
  color: var(--color-text-disabled);
}

Tailwind CSS

<button class="bg-primary-500 hover:bg-primary-600 text-white">
  Primary Button
</button>

<button class="bg-semantic-success text-white">
  Success Button
</button>

更多推荐

颜色选择器
颜色格式转换器
配色方案生成器
色盲模拟器
品牌颜色查询
Pantone 色卡查询
Material Design 配色生成器
屏幕颜色拾取
颜色混合器
中间色计算器
颜色匹配度计算器
相反颜色计算器
中国传统色彩
日本传统色彩
Web安全色大全
渐变色大全

工具概述

CSS 颜色变量生成器可以根据主色自动生成完整的配色方案，包括色阶变体、透明度变体、语义化颜色和灰度色阶。支持导出为 CSS Variables、SCSS Variables、LESS Variables 和 Tailwind CSS 配置格式，帮助开发者快速构建一致的色彩系统。

常见问题与回答

1. 什么是 CSS 变量？

CSS 变量（Custom Properties）允许您定义可重用的值，通过 var() 函数引用。使用 CSS 变量可以轻松实现主题切换、统一管理颜色值，提高代码可维护性。

2. 色阶是如何生成的？

工具基于 HSL 颜色模型生成色阶，500 为基准色，小于 500 的色阶增加亮度，大于 500 的色阶降低亮度。这种方式生成的色阶在视觉上保持一致性和渐变平滑。

3. 什么是语义化颜色？

语义化颜色使用有意义的名称而非具体颜色值，如 success、warning、error 等。这样当需要调整颜色时，只需修改一处定义，所有使用该语义的地方都会自动更新。

4. 如何在项目中使用？

将生成的 CSS 代码添加到项目的全局样式文件中，然后在组件中通过 var(--color-primary-500) 的方式引用。Tailwind CSS 用户可以直接将配置添加到 tailwind.config.js。

5. 为什么需要灰度色阶？

灰度色阶用于文本、边框、背景等非强调元素，与主色色阶搭配使用可以创建层次分明的视觉层次，提升界面的可读性和专业感。