OpenReplay Logo
12k
12k

颜色选择器

可视化地选取颜色,或粘贴任意 CSS 值,然后复制 HEX、RGB、HSL 和 OKLCH——在你的浏览器中本地处理。

100%
HEX #ff0000
RGB rgb(255, 0, 0)
HSL hsl(0, 100%, 50%)
OKLCH oklch(62.8% 0.258 29.2)
本地处理

关于此工具

颜色选择器会把一种颜色映射到 CSS 所能理解的各种格式。本工具围绕 HSV 模型构建:一个饱和度/明度方块决定颜色的鲜艳程度和明亮程度,一个色相滑块在色轮上旋转,一个 alpha 滑块设置不透明度。每次更改都会用 culori 转换为四种规范化字符串——HEX(#rrggbb,当 alpha 小于 1 时为 #rrggbbaa)、rgb()/rgba()hsl()/hsla() 以及感知均匀的 oklch()——这样同一种颜色就可以随时放入任意样式表或设计令牌中。

用它在设计稿上拾取一个精确的值,把设计师发来的十六进制代码转换成你代码所需的 rgb()hsl(),调出一个半透明遮罩层并读取其 rgba(),或把一个传统颜色转换为现代的 oklch() 以用于广色域 CSS。粘贴任意 CSS 颜色字符串——一个十六进制代码、一个像 rebeccapurple 这样的命名颜色,或一个完整的 rgb()/hsl() 表达式——整个选择器都会随之同步;最近选取的颜色会保留在一行可点击的区域中,供你本次会话剩余时间使用。

一切都在你的浏览器中运行——颜色绝不会被上传,而最近颜色那一行仅保存在内存中,因此当你关闭标签页时它就会清空。

常见问题

HSL 和 OKLCH 有什么区别?

HSL 在 sRGB 空间中通过色相、饱和度和明度来描述颜色,但相等的明度值在亮度上看起来可能差别很大。OKLCH 使用感知均匀的模型,因此它的明度和色度值与人眼实际感知颜色的方式相符,并在各个色相之间保持一致。

我如何在十六进制颜色中表示透明度?

在六位十六进制后追加一个两位的 alpha 值,得到 #rrggbbaa——例如 #ff000080 是约 50% 不透明度的红色。这种 8 位形式被所有现代浏览器支持;当 alpha 完全不透明时,选择器会输出更短的 #rrggbb

我可以粘贴像 rebeccapurple 这样的命名 CSS 颜色吗?

可以。十六进制字段接受任何有效的 CSS 颜色字符串——命名颜色、十六进制代码以及 rgb()/hsl()/oklch() 表达式——一个有效的输入会立即同步方块、滑块以及每一种输出格式。