Red Dot Tracker

色彩

色板很小，而且都是低饱和度。强调色是每个网站唯一“有颜色”的地方，其余都是冷灰。用工具栏里的圆点切换整个站点的强调色。

链接

强调色

八个色相，深色主题 L 0.76 / C 0.06，浅色主题 L 0.52 / C 0.07（OKLCH）。亮度相同，所以无论哪个网站，按钮和链接的对比度都一样（深色约 9:1，浅色约 5:1）。另有一个接近中性的石墨色。数字是对页面背景的对比度。

darklight
Rose 玫瑰 data-accent="rose" · hue 15
ButtonLink
darklight
Clay 陶土 data-accent="clay" · hue 55
ButtonLink
darklight
Ochre 赭黄 data-accent="ochre" · hue 85
ButtonLink
darklight
Moss 苔绿 data-accent="moss" · hue 130
ButtonLink
darklight
Sage 鼠尾草 data-accent="sage" · hue 165
ButtonLink
darklight
Teal 青 data-accent="teal" · hue 205
ButtonLink
darklight
Slate 石板 data-accent="slate" · hue 255
ButtonLink
darklight
Lavender 薰衣草 data-accent="lavender" · hue 295
ButtonLink
darklight
Graphite 石墨 data-accent="graphite" · #d5dbe3 / #374151
ButtonLink

近中性强调色

当八个色相用完时，再加近中性色：亮度相同（所以对比度一样），饱和度只有 C 0.02（浅色 0.025），几乎是灰色。色相之间至少隔 70°，否则会分不清。

darklight
Stone 石 data-accent="stone" · hue 70 · C 0.02
ButtonLink
darklight
Lichen 地衣 data-accent="lichen" · hue 150 · C 0.02
ButtonLink
darklight
Steel 钢 data-accent="steel" · hue 250 · C 0.02
ButtonLink
darklight
Heather 石南 data-accent="heather" · hue 320 · C 0.02
ButtonLink

状态色

状态色直接复用苔绿、赭黄、玫瑰和石板蓝。提示框总是带图标和文字标签，绝不只靠颜色表达。

成功

已部署，网站已上线。

警告

食盆只剩一半了。

错误

构建失败：有一个失效的内部链接。

提示

这是一个虚构的示例网站。