OKLCH / Display P3 颜色编辑器
以感知均匀的 OKLCH 颜色空间调色，实时预览 Display P3 宽色域色彩，并输出 CSS oklch() 函数代码。
oklch(0.65 0.2 210) sRGB
oklch oklch(0.65 0.2 210)
P3 color(display-p3 …)
sRGB rgb(…)
HEX #???
HSL hsl(…)
和谐配色
我的调色板
点击「存入调色板」保存颜色
预设颜色
以感知均匀的 OKLCH 颜色空间调色，实时预览 Display P3 宽色域色彩，并输出 CSS oklch() 函数代码。
先在输入区填写待处理内容，并检查当前选项；修改输入或使用页面控件后查看结果区域。
颜色观感会受周围背景、透明度、屏幕亮度与色彩管理影响。比较色值时应同时核对颜色空间和透明度，并在最终背景与目标设备上查看。
不能。文字可读性还取决于前景与背景的对比、字号和字重。应使用最终的文字颜色与背景颜色检查，不能只根据色卡或单独一个 HEX 值判断。
本页提供「互补色」、「三角配色」、「类比色」、「分裂互补」、「四色配色」选项。先按实际输入和目标选择对应模式，再执行操作；比较两次结果时，保持其他参数一致，避免把不同模式的结果混在一起。
核对色值、尺寸、字体和导出格式。屏幕显示、浏览器渲染与印刷效果可能不同；应在最终使用的背景、设备或设计软件中再检查。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接，以及带外部地址的内容预览仍可能产生网络请求；“本地处理”并不表示整个网页完全没有网络活动。此页还使用浏览器本地存储保留内容或设置，共用设备上请在使用后检查保存的记录；清除站点数据会一并删除本地记录。使用分享或复制链接前，请检查链接中是否带有输入内容。
先检查输入内容是否完整，以及格式、单位和当前选项是否匹配。修改输入后，查看页面的结果或错误提示；可先用少量数据定位问题。
CSS 动画生成器(简版) · 颜色名称查询器 · CSS Grid 生成器(布局版) · 颜色选择器(设计版) · 全部设计工具