HEX 颜色选择器
HEX 颜色选择器：HEX、RGB、HSL、OKLCH、色阶与明暗 | We.Inc
免费 HEX 颜色选择器：选取或粘贴颜色，获取 HEX、RGB、HSL 和 OKLCH 值、浅色阶与深色阶，以及相对白色和黑色的对比度评分。
HEX 颜色选择器
选取颜色或粘贴任意 HEX、RGB 或 HSL 值，即可获取设计和代码所需的格式：HEX、RGB、HSL 和 OKLCH。查看一组浅色阶和深色阶，并检查在白色或黑色文字背景下的可读性。
- 使用颜色选择器，或输入值，例如 #4F98FB、rgb(79, 152, 251) 或 hsl(215, 95%, 65%)。
- 单击一次即可复制任意格式。OKLCH 是现代 CSS 颜色格式，可在不同色相之间保持亮度一致。
- 点击任意浅色或深色变体，将其设为当前颜色。
- 查看对比度比例，判断此颜色上适合使用白色还是黑色文字。
- 按钮文字与按钮颜色的对比度建议至少达到 4.5:1。
- 从一种品牌色扩展调色板：用浅色变体做背景，主色用于按钮，深色变体用于悬停状态和文字。
- 不同屏幕的显示效果会有差异。除了电脑，也请在手机上检查品牌颜色。
常见问题
什么是 HEX 颜色代码？
这是屏幕颜色的六位代码，以 # 开头，后面是分别代表红、绿、蓝的三组十六进制数字。#FF0000 是纯红色；#000000 是黑色；#FFFFFF 是白色。
HEX、RGB 和 HSL 有什么区别？
它们用不同方式描述相同的颜色。HEX 和 RGB 表示红、绿、蓝的数值；HSL 表示色相（色轮上的角度）、饱和度和亮度，手动调整起来更方便。
什么是 OKLCH？我应该使用它吗？
OKLCH 是一种较新的 CSS 颜色格式，根据人们感知颜色的方式构建。两个颜色具有相同的 L 值时，看起来会同样明亮，因此更容易创建协调一致的调色板。目前所有主流浏览器都支持它。
对比度是如何计算的？
使用 WCAG 2 公式：较亮颜色的相对亮度加 0.05，再除以较暗颜色的相对亮度加 0.05。要完整检查两种颜色，请使用 We.Inc 颜色对比度检查器。
选择适用于网站的品牌色
- 品牌色需要同时完成几项任务：在按钮上醒目、白色文字置于其上时仍清晰可读，并且铺满整页时不会让人视觉疲劳。中间调的蓝色、绿色和深红色通常能兼顾这几点。黄色、浅粉等非常浅的颜色适合徽标，却不适合作为按钮，因为未经调整时，白色和黑色文字都不易辨认。
- 对比度面板会立即显示结果。如果白色文字的评分低于 4.5:1，可以改用黑色文字，或从色阶中选择更深的按钮颜色。
浅色、深色和简易调色板
- 浅色变体是将颜色与白色混合，深色变体则是与黑色混合。实用的网站调色板只需要几种颜色：用非常浅的颜色作为区块背景，主色用于按钮和链接，再用一种深色变体表示悬停状态。添加中性灰用于文字和边框，就能组成完整且协调的色组。
- 要检查特定文字和背景组合（例如浅色背景上的灰色文字），请使用颜色对比度检查器；它会根据 WCAG AA 和 AAA 标准进行评分。
免费开始 · 无需信用卡
Product
Who It's For
Features
Resources
Company
View Sitemap