选择颜色

颜色代码

调整颜色

常见使用场景

  • 网页开发

    在CSS、HTML和JavaScript中快速转换颜色格式

  • 设计工作

    在不同设计软件间统一颜色标准

  • 印刷出版

    确保屏幕显示与印刷色彩一致

  • 无障碍设计

    检查颜色对比度是否符合可访问性标准

#2196f3

颜色信息

65%
亮度
#f36d21
互补色
#de690c
反色
CornflowerBlue
CSS颜色名

配色方案

#2196f3
#90caf9
#0d47a1
#f36d21
#4dd0e1
#bbdefb

对比度检查

正常文本示例(16px)
大文本示例(24px粗体)
WCAG 对比度评级
4.5:1
通过 AA 级标准

颜色转换示例

HEX 转 RGB

HEX → RGB
输入 (HEX)
#e91e63
➡️
输出 (RGB)
rgb(233, 30, 99)

RGB 转 HSL

RGB → HSL
输入 (RGB)
rgb(76, 175, 80)
➡️
输出 (HSL)
hsl(122, 39%, 49%)

HSL 转 HEX

HSL → HEX
输入 (HSL)
hsl(270, 80%, 60%)
➡️
输出 (HEX)
#b339f7

使用说明

颜色选择

使用顶部的颜色选择器可以直观地选择颜色,或者在下方的HEX、RGB、HSL输入框中直接输入颜色代码。

格式转换

在任一颜色格式输入框中修改值,系统会自动转换为其他格式。支持HEX、RGB、HSL三种常用颜色格式互转。

颜色调整

使用色相、饱和度、明度滑块可以精确调整颜色属性,实时预览调整效果。

信息查看

右侧预览区显示颜色信息,包括亮度、互补色、反色、CSS名称等,帮助您更好地了解所选颜色。

配色方案

下方配色方案区域提供基于当前颜色的调色板,点击任一颜色可将其设为当前颜色。

对比度检查

对比度检查区域显示颜色与文本的可访问性对比度,确保符合WCAG标准。