10 个颜色角色
每个颜色都有明确用途，点右侧按钮即可复制对应格式。
Primary
primary主色，对应 CSS 变量 --color-primary
#9f57c7rgb(159, 87, 199)hsl(278.6, 50%, 56.1%)Primary Hover
primaryHover悬停态：--color-primary-hover
#7c32a4rgb(124, 50, 164)hsl(278.9, 53.3%, 42%)Primary Active
primaryActive按下态：--color-primary-active
#592277rgb(89, 34, 119)hsl(278.8, 55.6%, 30%)Text Main
textMain主文字：--color-text-main
#272329rgb(39, 35, 41)hsl(280, 7.9%, 14.9%)Text Sub
textSub次级文字：--color-text-sub
#756a7crgb(117, 106, 124)hsl(276.7, 7.8%, 45.1%)Background
bg页面背景：--color-bg
#faf9fargb(250, 249, 250)hsl(300, 9.1%, 97.8%)Surface
surface卡片/面板背景：--color-surface
#f5f4f6rgb(245, 244, 246)hsl(270, 10%, 96.1%)Border
border边框分割线：--color-border
#e6e3e8rgb(230, 227, 232)hsl(276, 9.8%, 90%)Link
link链接色：--color-link
#7a2ea3rgb(122, 46, 163)hsl(279, 56%, 41%)Accent
accent强调色：--color-accent
#79db43rgb(121, 219, 67)hsl(98.7, 67.9%, 56.1%)搭配建议
依据主色所属的色系与明度给出的使用建议，人工撰写，不是模板套话。
主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。
适合紫色的尊贵语义适合会员、权益、稀缺类界面。
慎用高饱和的紫容易显得浮夸，B 端与工具类产品要慎用。
搭配点缀一点金色，能强化它的高级感。
用在真实界面里是什么样
同一套配色在三端界面里的实际效果，这是判断好不好用最快的方式。
实时预览 · 点击切换端
your-site.com×+
用这套配色构建你的产品
导航、按钮、卡片与文字层级，一次预览全部效果。
主要操作了解更多卡片一次级说明文字，用于验证对比度是否符合 WCAG。
卡片二强调色用于高亮，注意与主色形成层次差。
卡片三中性文字色承载正文，是最频繁使用的颜色。
无障碍对比度检查
按 WCAG 2.1 标准计算。AA 为可访问底线，AAA 为增强级别。
| 前景 / 背景 | 对比度 | 文字场景 | 大字号场景 |
|---|---|---|---|
| 主文字 / 页面背景 | 14.72:1 | AAA | AAA |
| 主文字 / 卡片背景 | 14.1:1 | AAA | AAA |
| 主色 / 页面背景 | 4.29:1 | AA | AA |
同端其他配色
同一端里色系或标签相近的几套，接着往下看。
导出到你的项目
四种格式，直接粘贴即可使用。也可用 URL 让工具/AI 自动抓取。
CSS 变量
:root {
--color-primary: #9f57c7; /* Primary */
--color-primaryHover: #7c32a4; /* Primary Hover */
--color-primaryActive: #592277; /* Primary Active */
--color-textMain: #272329; /* Text Main */
--color-textSub: #756a7c; /* Text Sub */
--color-bg: #faf9fa; /* Background */
--color-surface: #f5f4f6; /* Surface */
--color-border: #e6e3e8; /* Border */
--color-link: #7a2ea3; /* Link */
--color-accent: #79db43; /* Accent */
}SCSS 变量
$color-primary: #9f57c7; // Primary
$color-primaryHover: #7c32a4; // Primary Hover
$color-primaryActive: #592277; // Primary Active
$color-textMain: #272329; // Text Main
$color-textSub: #756a7c; // Text Sub
$color-bg: #faf9fa; // Background
$color-surface: #f5f4f6; // Surface
$color-border: #e6e3e8; // Border
$color-link: #7a2ea3; // Link
$color-accent: #79db43; // AccentTailwind 配置
// tailwind.config.js：石楠紫
module.exports = {
theme: {
extend: {
colors: {
'primary': '#9f57c7',
'primaryHover': '#7c32a4',
'primaryActive': '#592277',
'textMain': '#272329',
'textSub': '#756a7c',
'bg': '#faf9fa',
'surface': '#f5f4f6',
'border': '#e6e3e8',
'link': '#7a2ea3',
'accent': '#79db43',
},
},
},
};机器可读 JSON
{
"name": "石楠紫",
"platform": "web",
"tags": [
"清新",
"紫"
],
"advice": {
"family": "紫",
"depth": "主色偏亮，适合大面积铺底，记得用更深的文字色与边框保证正文对比度。",
"muted": null,
"suit": "紫色的尊贵语义适合会员、权益、稀缺类界面。",
"avoid": "高饱和的紫容易显得浮夸，B 端与工具类产品要慎用。",
"pair": "点缀一点金色，能强化它的高级感。"
},
"roles": {
"primary": "#9f57c7",
"primaryHover": "#7c32a4",
"primaryActive": "#592277",
"textMain": "#272329",
"textSub": "#756a7c",
"bg": "#faf9fa",
"surface": "#f5f4f6",
"border": "#e6e3e8",
"link": "#7a2ea3",
"accent": "#79db43"
},
"contrast": {
"textOnBg": {
"ratio": 14.72,
"level": "AAA"
},
"primaryOnBg": {
"ratio": 4.29,
"level": "AA"
},
"textOnSurface": {
"ratio": 14.1,
"level": "AAA"
}
}
}