关于此工具
颜色选择器会把一种颜色映射到 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() 表达式——一个有效的输入会立即同步方块、滑块以及每一种输出格式。