转换品牌色 HEX
同一个颜色，四种格式
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);这四条声明产生的是完全相同的蓝色。为设计令牌选哪一种，主要看你以后想怎么调整它们。
颜色转换器
在 HEX、RGB、HSL 和 OKLCH 之间转换，并实时预览。
最后更新
颜色名称
这 140 个颜色名称在 CSS 和 Python turtle 中都能使用。点击一个颜色，即可在转换器中打开。
每张卡片显示 CSS 名称、在 turtle 中的写法、HEX 代码和 RGB 值。
红色系
粉色系
橙色系
黄色系
绿色系
青色系
蓝色系
紫色系
棕色系
白色系
灰色系
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
颜色转换器是什么？
颜色转换器接收任何常见格式的颜色（HEX、RGB、HSL、OKLCH），并显示表示同一颜色的所有其他格式。设计师和开发者每天都会用到它：匹配品牌色、调试 CSS 变量、对比深色和浅色模式的配色，或检查无障碍对比度。
CSS 支持多种颜色模型，各有所长。HEX 和 RGB 用红、绿、蓝三种光来描述颜色。HSL 更直观（色相、饱和度、亮度）。OKLCH 是一种感知模型，数值上相同的变化在视觉上看起来也相同，因此特别适合生成明暗色阶和无障碍配色。
无障碍取决于对比度，而不仅仅是颜色。WCAG 定义了文字与背景之间的对比度：普通正文至少 4.5:1，大标题至少 3:1。好的颜色工具会在颜色旁边同时给出这两个数字，免得你一不小心上线了不符合无障碍要求的界面。
转换颜色时你会学到什么
- HEX 只是 RGB 的简写：
#ff8800和rgb(255, 136, 0)是同一个颜色。 - HSL 把色相（什么颜色）、饱和度（多鲜艳）和亮度（多明亮）分开。单独调整其中一项，比调整 R/G/B 直观得多。
- OKLCH 在感知上是均匀的：在 OKLCH 中把
L提高 10%，不管什么色相，看起来的亮度变化都差不多。HSL 做不到这一点。 - 浅色调（tint）是加白，深色调（shade）是加黑。同一色相的不同色调之间的差异，决定了界面配色是否协调统一。
如何一步步转换和检查颜色
输入颜色
粘贴任意 HEX、RGB、HSL 或 OKLCH 值，或者用吸管工具或系统取色器选一个颜色。
一次查看所有格式
转换器会用所有支持的格式显示同一个颜色。点击任意值即可复制到剪贴板。
用 HSL 或 OKLCH 滑块微调
拖动亮度滑块，得到更浅的浅色调和更深的深色调。想要视觉上均匀的阶梯，就用 OKLCH 的亮度。
检查与文字颜色的对比度
对比度面板会显示颜色与白色和黑色之间的 WCAG 对比度。正文应达到 4.5 以上，大标题应达到 3 以上。
把值复制到 CSS 中
使用和你的代码库一致的格式：设计令牌用 HEX，现代配色用 OKLCH，想用
calc()微调时用 HSL。
CSS 颜色格式速查表
日常会遇到的五种格式，以同一个颜色为例。完整的颜色语法参考请见 MDN 的 <color> 页面。
| 格式 | 语法 | 示例（橙色） |
|---|---|---|
| HEX | #RRGGBB 或 #RGB | #ff8800 |
| 带透明度的 HEX | #RRGGBBAA | #ff880080（50% 透明） |
rgb() | 红、绿、蓝，0 至 255 | rgb(255 136 0) |
带透明度的 rgb() | 现代斜杠语法 | rgb(255 136 0 / 0.5) |
hsl() | 色相 0 至 360°，饱和度 0 至 100%，亮度 0 至 100% | hsl(32 100% 50%) |
oklch() | 亮度 0 至 100%，色度，色相 | oklch(74% 0.18 50) |
| 颜色名称 | CSS 命名颜色（共 147 个） | darkorange |
可以试试的颜色转换示例
用 OKLCH 生成色阶
品牌色 + 4 个色阶
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);固定色相（268）和色度，逐级改变亮度，就能得到一套协调的配色，每一级看起来的变化幅度都相同，而 HSL 无法保证这一点。
用 alpha 添加透明度
50% 透明
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5 是现代 CSS 添加 alpha 的写法。HEX 形式则在末尾追加两位十六进制的 alpha 字节（80 ≈ 50%）。
颜色转换的常见错误
- 跨色相比较 HSL 亮度。
hsl(60 100% 50%)（黄色）和hsl(240 100% 50%)（蓝色）的L相同，但看起来的明暗差别很大。做视觉比较请用 OKLCH。 - 忘了 3 位 HEX（
#abc）是 6 位写法（#aabbcc）的简写。 - 使用
rgba(...)而不是现代的rgb(... / alpha)语法。两种都能用，但斜杠写法是现行规范，在工具中也更易读。 - 只拿纯白或纯黑来挑颜色。请用你实际的背景色测试，并检查 WCAG 对比度。
- 把颜色硬编码在组件深处，而不是在根元素上定义为 CSS 自定义属性。
颜色转换器常见问题
如何把 HEX 转换成 RGB？
HSL 和 OKLCH 有什么区别？
HSL 很方便，支持也很广泛，但在感知上并不均匀：相同的
L 看起来不一定一样亮。OKLCH 在感知上是均匀的，所以更适合生成协调的明暗色阶和无障碍配色。OKLCH 是什么的缩写？
OKLCH 代表 Oklab 的亮度（Lightness）、色度（Chroma）和色相（Hue）。它基于 Oklab 色彩空间，设计目标是感知均匀：数值上的小变化，看起来也是小变化。
如何检查颜色对比度是否符合无障碍要求？
计算文字和背景之间的 WCAG 对比度。WCAG AA 要求普通文字至少 4.5:1，大号文字（18pt 以上或 14pt 粗体）至少 3:1。能显示对比度的颜色转换器可以帮你省去计算。
CSS 中应该用 HEX、RGB、HSL 还是 OKLCH？
用你的团队熟悉的就行。HEX 随处可见；OKLCH 是设计系统的现代之选；想通过计算调整色相或亮度时，HSL 很好用。四种格式的浏览器支持都非常好。
Python turtle 中可以使用哪些颜色名称？
本页颜色名称列表中的全部 140 个名称都可以。Python 的 turtle 接受带空格、连写成一个词或用 CamelCase 写的名称，所以
t.color("light gray")、t.color("lightgray") 和 t.color("LightGray") 画出的颜色相同。英式拼写 grey 也可以。你还可以传入 "#D3D3D3" 这样的 HEX 代码，或者在 turtle.colormode(255) 之后传入 RGB 数值。