颜色选择器
本地运行输入不出浏览器免登录免费
同一个颜色有三种写法，换算关系是数学公式，不是查表。十六进制是红绿蓝的十六进制简写：#3B82F6拆开就是红59、绿130、蓝246，每两位十六进制对应一个0到255的通道值。HSL换个角度描述同一个颜色：色相是色环上的角度，217度落在蓝色区；饱和度91%表示颜色很纯、灰度很少；亮度60%表示整体偏亮。所以#3B82F6、rgb(59, 130, 246)、hsl(217, 91%, 60%)是同一个颜色，改动任意一处输入，其余格式都会跟着变。
三个场景最常用。第一是写网页样式：从品牌手册拿到一个HEX值，直接贴进CSS，按钮悬停色不用凭感觉猜，从深色阶里挑一格就是现成的加深版。第二是做海报与演示配色：主色定下来后，互补色适合做强调色与按钮，类似色适合做背景层次，三角色适合需要三个并列色块的图表。第三是定文字颜色：深色底配白字还是浅色底配黑字，先看对比度比值再定，比在屏幕上凭感觉试要可靠。
边界情况有四处。第一是无效输入：#GGGGGG、只有5位的十六进制、超出0到255的通道值都会被拒绝，页面会提示并保持原来的颜色，不会把结果清空。第二是取整误差：HSL只显示整数度与整数百分比，来回换算后红绿蓝可能差1，例如亮度60%反推回来的通道值与原值差1，这是四舍五入造成的，不是算错。第三是对比度只算亮度差：彩色文字、细字体与小字号在实际屏幕上的可读性会比黑白文字更低，比值通过不等于所有用户都看得清。第四是取色范围：本页的取色器是浏览器原生的系统取色器，只能在弹出的色板里选色，不能吸取网页或屏幕任意位置的像素；需要屏幕取色时请用浏览器扩展或系统取色工具，本页不会假装提供这个功能。
用默认颜色核对一遍就明白了：#3B82F6对应rgb(59, 130, 246)与hsl(217, 91%, 60%)，互补色是#F6AF3C，向白色混40%得到浅色#89B4FA，向黑色混40%得到深色#234E94。黑字在这个蓝色上的对比度约5.71:1，通过AA级但不到AAA级；白字约3.68:1，连AA级都不通过——所以这个蓝色做按钮底色时，配黑字比配白字更稳。把这几个数字在工具里改一遍，换算与配色的逻辑就都对上了。
使用方法
- 点色块打开系统取色器选色，或在十六进制框里直接输入#开头的颜色值，两种方式都会同步其余格式。
- 微调：改红绿蓝三个通道值精修某个通道，或改色相换色调、改饱和度调鲜艳程度、改亮度调明暗。
- 读结果：HEX、RGB、HSL三行会实时显示当前颜色，点复制HEX、复制RGB、复制HSL可分别粘贴到样式表或设计工具。
- 挑配色：互补色、类似色、三角色与浅深色阶里点任何色块，都会把它设为当前颜色，继续微调。
- 查对比度：看黑字与白字两行的比值与AA、AAA判定，定按钮与文字搭配前先确认正文门槛。
常见问题
HEX、RGB、HSL写样式时用哪个？
三者可以互换，选团队顺手的即可。HEX最短最常用，直接贴进CSS；RGB在需要按通道对接代码时更直观；HSL调色最顺手，只改色相就能换色调，只改亮度就能调明暗。本页三者实时同步，换一种写法不需要重算。
互补色、类似色、三角色怎么选？
要强调、要按钮、要一眼看到的地方用互补色，对比最强；要背景层次、要柔和过渡用类似色；图表、标签这类需要三个并列色块时用三角色。注意互补色对比虽强，但大面积并置会刺眼，强调色适合小面积使用。
对比度多少算合格？
正文按WCAG标准：4.5:1算AA级通过，7:1算AAA级通过，大号文字门槛是3:1。本页黑字与白字两行各给一个比值与判定，低于4.5:1的搭配不要用来做正文，按钮文字同样要先过这一关。
为什么HSL改回来RGB会差1？
HSL只显示整数度与整数百分比，换算回RGB时要四舍五入，某个通道差1是正常的取整误差，不是算错。需要精确复现时以HEX或RGB为准，HSL适合调色时的感觉控制。
能从屏幕任意位置取色吗？
不能。本页只提供浏览器原生的系统取色器与手动输入，不读取屏幕像素，也不会上传图片或颜色数据。需要吸取网页、图片任意位置颜色时，请用浏览器扩展或系统取色工具。