网页配色方案

从背景、主色、强调色、正文和边框五个界面角色出发,快速预览配色在真实组件中的效果,并复制可继续调整的 CSS 变量。

作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

雪纸蓝

浅色
背景#F7F9FC主色#315C8B强调#DD7694正文#202A35边框#D8E0EA
正文对比度 13.79:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

暖沙橙

浅色
背景#FBF7F1主色#8C4D27强调#D89A4A正文#2E2925边框#E8DED2
正文对比度 13.48:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

雾林绿

浅色
背景#F4F8F5主色#356859强调#D0A65A正文#24332E边框#D8E4DD
正文对比度 12.34:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

淡薰衣草

浅色
背景#F8F6FA主色#66517D强调#C27893正文#2D2832边框#E4DDE9
正文对比度 13.38:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

清水青

浅色
背景#F3F9FA主色#256A75强调#E18C5D正文#1D3033边框#D2E4E7
正文对比度 12.96:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

夜航蓝

深色
背景#101720主色#4E91D8强调#E7B55B正文#EAF1F8边框#2A3948
正文对比度 15.82:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

炭火橙

深色
背景#181513主色#D2783D强调#E3B86A正文#F0E9E2边框#3B322D
正文对比度 15.11:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

松夜绿

深色
背景#101815主色#55A487强调#D6B36A正文#E8F0EC边框#293B34
正文对比度 15.56:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

暗莓紫

深色
背景#19131D主色#A46BC0强调#E2819D正文#F3EAF5边框#3B2B42
正文对比度 15.53:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

石墨青

深色
背景#121719主色#4F8F98强调#D5A85B正文#E9F0F1边框#2D3A3D
正文对比度 15.66:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

专业蓝

商务
背景#F4F6F8主色#1F5A94强调#D68B2D正文#1B2733边框#CBD3DC
正文对比度 14.00:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

金融墨

商务
背景#F5F4F1主色#262E38强调#A77B34正文#1E242B边框#D5D1C9
正文对比度 14.22:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

数据青

商务
背景#F2F7F7主色#176E74强调#C4773B正文#183234边框#C7DADB
正文对比度 12.57:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

咨询紫

商务
背景#F6F4F8主色#58436F强调#B47649正文#28232E边框#D8D1DE
正文对比度 14.02:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

城市灰

商务
背景#F5F5F5主色#454F59强调#B86645正文#20252A边框#D5D9DD
正文对比度 14.17:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

薄荷风

清新
背景#F1FAF7主色#2E806B强调#F0A36B正文#19342D边框#CDE8DF
正文对比度 12.58:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

晴空风

清新
背景#F1F8FC主色#3181B7强调#F2A65A正文#1D3444边框#CFE4F0
正文对比度 12.03:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

柚子风

清新
背景#FFF9F1主色#C7683E强调#E6B84D正文#3B2B23边框#F0DEC9
正文对比度 12.90:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

花芽风

清新
背景#FFF6F7主色#B64F6B强调#6A9B69正文#3B252B边框#F0D6DC
正文对比度 13.31:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

雨后风

清新
背景#F3F8F6主色#477A68强调#7E9EC3正文#22342D边框#D3E2DC
正文对比度 12.25:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

天青月白

国风
背景#E3F2F5主色#509296强调#A83C3C正文#1C2938边框#C7D2D4
正文对比度 12.84:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

朱砂黛瓦

国风
背景#F2ECDE主色#8B2A2A强调#D9B611正文#2B2F37边框#B7A091
正文对比度 11.40:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

松花紫檀

国风
背景#F5E6D3主色#5A9B4D强调#A05838正文#241840边框#D6BC46
正文对比度 13.40:1 · 通过 AA
作品 关于 联系

让颜色建立清晰层级

背景承载内容,主色识别品牌,强调色引导关键操作。

了解更多

云山琉璃

国风
背景#E9F1F6主色#1781B5强调#C9A26B正文#142334边框#B2BBBE
正文对比度 13.93:1 · 通过 AA

常见问题

一套网页配色为什么要分角色?
背景、正文、主色、强调色和边框承担不同的信息层级。先明确角色再选色,可以减少页面中随意增加颜色的情况,也便于后续维护设计令牌。
AA 对比度代表什么?
正文与背景对比度达到 4.5:1 时,通常满足 WCAG 2.x 对普通正文的 AA 级要求。实际项目还应检查按钮、链接、焦点状态和图标等组件。
复制后可以直接用到项目里吗?
可以把 CSS 变量作为设计起点,但仍建议结合品牌调性、内容密度、交互状态和实际设备测试进一步调整,不要只依赖一张静态预览。