颜色梯度 暗色模式 生成
本工具支持颜色梯度 暗色模式 生成。类似场景还包括 单色生成单色系调色板 和 网站互补色配色方案生成，所有处理均在浏览器本地完成，无需上传文件。
从基色生成 css 调色板
使用本工具可以轻松从基色生成 css 调色板。此外，它也支持 网站互补色配色方案生成 等相关操作，结果即时显示，无需注册。
tailwind 色阶从 hex 生成
tailwind 色阶从 hex 生成是本工具的常见用途之一。同时它也支持 品牌邻近色调色板生成 和 从 hex 生成暗色模式变体，所有数据不离开您的浏览器。
ui 明暗色阶创建
需要ui 明暗色阶创建？直接在编辑器中粘贴内容即可。本工具同时支持 从 hex 生成暗色模式变体 等相关操作，完全免费。
bootstrap 主色 sass 变量生成
bootstrap 主色 sass 变量生成——所有计算和转换均在浏览器本地执行。相关功能还包括 单色生成单色系调色板 和 网站互补色配色方案生成，无需上传或注册。
工具概述
CSS 颜色生成器是一款可视化生成 CSS 颜色代码的工具。通过颜色选择器与 alpha 滑条交互，可即时得到 HEX、8 位 HEX（含 alpha）、RGB、RGBA 与 CSS 自定义属性代码，让前端开发者和设计师能快速组装并复制符合 CSS 规范的颜色。
如何使用本工具
第一步 — 使用原生颜色选择器选取颜色（点击色块）或在输入框输入 HEX 值。第二步 — 拖动 Alpha 滑条改变透明度（0 完全透明，1 完全不透明）；下方色块以棋盘背景绘制，便于查看透明效果。第三步 — 点击预设色块可填入常用主题色。第四步 — 在“CSS 代码”面板中，每种格式都有“复制”按钮；结果可直接粘贴到 CSS 文件或组件样式中。
常见使用场景
前端开发者调试组件样式时快速生成带 alpha 通道的颜色（如
rgba(0, 229, 255, 0.5)）；设计系统团队规范化调色板并输出 CSS 变量代码；调整遮罩、蒙层或悬停态的色调；将设计规范中的颜色转为完整 CSS 代码；构建主题切换时迭代颜色选择。技术说明
8 位 HEX 使用
#RRGGBBAA 形式，其中 AA 为 alpha 的十六进制表示（0.5 → 7f），受 CSS Color Module Level 4 支持。RGBA 的 alpha 使用 0-1 的小数。CSS 变量片段使用占位符 --color，可按需重命名。HEX 支持自动将 3 位展开为 6 位。预设色块是设计中常用的鲜明配色集合。隐私与安全
所有颜色生成均在浏览器本地完成，不发起任何网络请求。