我的调色板

为设计师和开发者提供的免费配色工具

HTML 颜色代码，所有格式一站搞定

输入或选择任意颜色，立即获得 HEX、RGB、HSL 和 OKLCH 色值，再检查对比度、生成色阶、找到合适的配色方案。

试试：克莱因蓝蒂芙尼蓝朱红莫兰迪色马卡龙配色

永久免费
无需注册
数据不上传
支持手机

今日一色

Vermillion

朱红

红色系

查看全部传统色

工具导航

工作台

颜色选择器推荐选择颜色，探索色阶与和谐配色图片取色器推荐从任意图片中精确取色色轮推荐生成和谐的配色方案

格式转换

RGB 转 HEX 将 RGB 和 RGBA 色值快速转换为 HEX、八位 HEX、HSL、HSV 与 OKLCH，适合 CSS、设计 token 和 UI 颜色系统。 HEX 转 RGB 将 3、4、6 或 8 位 HEX 十六进制颜色转换为 RGB、RGBA、HSL、HSV 和 OKLCH，并识别透明度。透明度计算器将颜色透明度百分比转换为 RGBA、HSLA 和八位 HEX Alpha 色值，并在白色、黑色和自定义背景上实时预览。 HEX 透明度表将透明度百分比转换为两位 HEX Alpha 和八位 HEX 色值，并提供 RGBA 实时预览。 OKLCH 转换器将 HEX、RGB 或 HSL 颜色转换为 OKLCH，并同时复制现代 CSS oklch()、HEX、RGB、HSL 和 HSV 格式。 RGB 转 CMYK 新将 RGB、HEX 或 HSL 颜色转换为印刷用的 CMYK 百分比，查看青、品红、黄、黑数值、总油墨覆盖率和各种网页颜色格式。 CMYK 转 HEX 将 CMYK 百分比转换为网页使用的 HEX、RGB 和 HSL 色值，用滑块调整青、品红、黄、黑，并复制屏幕对应颜色。 HSL 转 HEX 将 HSL 和 HSLA 颜色转换为 HEX、RGB 与 OKLCH。用滑块调整色相、饱和度和亮度，立即复制 CSS 可用的十六进制色值。

检查

对比度检查推荐检查文字与背景颜色是否符合 WCAG AA 和 AAA，对普通文字、大号文字、按钮、链接和深色模式配色进行对比度测试。颜色名称查询输入任意 HEX、RGB 或 HSL 色值，使用 OKLab 感知匹配查询最接近的 CSS 颜色名称和中国传统色名。 Tailwind 颜色匹配将任意 HEX、RGB 或 HSL 颜色匹配到最接近的 Tailwind CSS 色板，并复制 bg、text、border、ring 类名。色盲模拟器新模拟红色盲、绿色盲、蓝色盲和全色盲下的配色与图片效果，找出色觉障碍人群可能混淆的颜色组合。

创作

颜色混合器按任意比例混合两种数字颜色，复制混合后的 HEX/RGB/HSL，并生成平滑的 5 阶或 10 阶过渡色。图片配色提取推荐上传照片或截图，在浏览器本地提取主色 HEX 色板，适合 UI 设计、品牌配色、情绪板和网页截图分析。渐变生成器创建双色 linear-gradient CSS 渐变，调整角度，复制 background 代码，并导出平滑中间色阶。色阶生成器推荐从一个基础色生成 50–900 色阶，复制 CSS 变量，并预览适合 UI 的浅色、深色和设计 token。配色生成器新一键生成配色方案：按空格键换一组，锁定喜欢的颜色，检查文字对比度，并导出 CSS、SCSS、Tailwind 或 JSON。随机颜色生成器随机生成颜色并显示 HEX、RGB、HSL 色值。可选浅色、深色、马卡龙、鲜艳或中性灰风格，一次生成一个或一整组，点击即可复制。互补色查询新查询任意 HEX 或 RGB 颜色的互补色（对比色），并获得 OKLCH 感知互补色、反色以及分裂互补和三角配色方案。

参考资料

配色方案 60 套适合 UI 与品牌的精选配色颜色名称 141 个 CSS 命名颜色及色值配色表 Tailwind、Material 与网页安全色中国传统色中国传统色名称与文化寓意色彩库色系与常用颜色详解指南实用的 CSS 颜色教程

流行色话题

设计圈常聊的颜色与配色风格，点击即可在工具里使用。

克莱因蓝

参考色值

International Klein Blue

饱和而深邃的群青蓝，常用于强调色与艺术感视觉。

蒂芙尼蓝

参考色值

Tiffany Blue

清爽的知更鸟蛋蓝，适合精致、轻盈的品牌表达。

普鲁士蓝

参考色值

Prussian Blue

沉稳的深蓝，适合正式、专业的文字与背景。

莫兰迪色

示例配色

低饱和灰调

在颜色中加入灰度，得到安静、高级的柔和配色。

多巴胺配色

示例配色

高饱和撞色

明亮饱和的色彩组合，传递愉悦和活力。

美拉德配色

示例配色

焦糖大地色

焦糖、咖啡与奶油色调，温暖而有质感。

新中式配色

示例配色

传统色的现代用法

以朱红、月白、竹青等传统色构建克制的东方气质。

精选配色

更多配色 ›

最新指南

全部指南 ›