颜色工具箱

一站式颜色处理解决方案，为设计师和开发者提供颜色格式转换、调色板生成、智能配色推荐等专业功能

选择颜色

HEX #2196F3

RGB rgb(33, 150, 243)

HSL hsl(207, 90%, 54%)

颜色格式

色阶生成

状态颜色

配色方案

互补色

分裂互补色

类似色

三分色

导出变量

01

颜色工具箱

专业的颜色处理工具集，集成多种实用功能，助力设计开发工作流程。支持多种颜色格式转换、智能色阶生成、配色方案推荐等功能，让颜色处理更加便捷高效。

颜色系统示例

展示如何在实际产品中运用色彩系统，包括主色、渐变、文本和交互状态等

功能特点

支持多种颜色格式转换与调整
智能生成配色方案与色阶

^￥99_^元

色阶可视化

状态提示

成功提示

操作已成功完成，数据已保存。

信息提示

这是一条重要的信息通知。

警告提示

请注意，这是一条警告信息。

错误提示

操作失败，请检查后重试。

聊天界面示例

你好！请问有什么可以帮助你的吗？

我想了解一下这个颜色工具的使用方法。

当然可以，你可以直接使用颜色选择器，或者输入颜色值来开始。

明白了，谢谢！工具界面很直观呢。

选择开发语言

HTML

CSS

JavaScript

主要按钮示例

描边按钮示例

工具介绍

专业的颜色处理工具集，集成多种实用功能，助力设计开发工作流程。支持多种颜色格式转换、智能色阶生成、配色方案推荐等功能，让颜色处理更加便捷高效。

核心功能

专业的颜色格式转换（支持 HEX、RGB、RGBA、HSL、HSB、CMYK）
智能色阶生成系统（支持 50-900 级别的颜色梯度）
自动生成语义化状态色（Success、Info、Warning、Danger）
专业配色方案推荐（互补色、分裂互补色、类似色、三分色等）
便捷的颜色变量导出（支持 CSS、SCSS、LESS 格式）
一键复制功能，提升工作效率
深色模式自适应，智能调整色阶顺序
可视化色阶展示，直观理解颜色关系
UI 组件预览，展示颜色在实际场景中的应用

快速上手

通过颜色选择器可视化选择，或直接输入颜色值
支持多种格式输入：HEX（#FF0000）、RGB（rgb(255,0,0)）、HSL 等
点击任意颜色卡片即可复制对应的颜色值
所有功能实时响应，颜色更新后自动刷新相关内容
切换深色/浅色模式，查看不同主题下的效果
在示例页面中预览颜色在各种 UI 组件中的表现
使用导出功能，一键生成所需格式的颜色变量