IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多雪纸蓝
浅色背景
#F7F9FC主色#315C8B强调#DD7694正文#202A35边框#D8E0EA正文对比度 13.79:1 · 通过 AA
网页配色方案
从背景、主色、强调色、正文和边框五个界面角色出发，快速预览配色在真实组件中的效果，并复制可继续调整的 CSS 变量。
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多暖沙橙
浅色背景
#FBF7F1主色#8C4D27强调#D89A4A正文#2E2925边框#E8DED2正文对比度 13.48:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多雾林绿
浅色背景
#F4F8F5主色#356859强调#D0A65A正文#24332E边框#D8E4DD正文对比度 12.34:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多淡薰衣草
浅色背景
#F8F6FA主色#66517D强调#C27893正文#2D2832边框#E4DDE9正文对比度 13.38:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多清水青
浅色背景
#F3F9FA主色#256A75强调#E18C5D正文#1D3033边框#D2E4E7正文对比度 12.96:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多夜航蓝
深色背景
#101720主色#4E91D8强调#E7B55B正文#EAF1F8边框#2A3948正文对比度 15.82:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多炭火橙
深色背景
#181513主色#D2783D强调#E3B86A正文#F0E9E2边框#3B322D正文对比度 15.11:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多松夜绿
深色背景
#101815主色#55A487强调#D6B36A正文#E8F0EC边框#293B34正文对比度 15.56:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多暗莓紫
深色背景
#19131D主色#A46BC0强调#E2819D正文#F3EAF5边框#3B2B42正文对比度 15.53:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多石墨青
深色背景
#121719主色#4F8F98强调#D5A85B正文#E9F0F1边框#2D3A3D正文对比度 15.66:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多专业蓝
商务背景
#F4F6F8主色#1F5A94强调#D68B2D正文#1B2733边框#CBD3DC正文对比度 14.00:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多金融墨
商务背景
#F5F4F1主色#262E38强调#A77B34正文#1E242B边框#D5D1C9正文对比度 14.22:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多数据青
商务背景
#F2F7F7主色#176E74强调#C4773B正文#183234边框#C7DADB正文对比度 12.57:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多咨询紫
商务背景
#F6F4F8主色#58436F强调#B47649正文#28232E边框#D8D1DE正文对比度 14.02:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多城市灰
商务背景
#F5F5F5主色#454F59强调#B86645正文#20252A边框#D5D9DD正文对比度 14.17:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多薄荷风
清新背景
#F1FAF7主色#2E806B强调#F0A36B正文#19342D边框#CDE8DF正文对比度 12.58:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多晴空风
清新背景
#F1F8FC主色#3181B7强调#F2A65A正文#1D3444边框#CFE4F0正文对比度 12.03:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多柚子风
清新背景
#FFF9F1主色#C7683E强调#E6B84D正文#3B2B23边框#F0DEC9正文对比度 12.90:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多花芽风
清新背景
#FFF6F7主色#B64F6B强调#6A9B69正文#3B252B边框#F0D6DC正文对比度 13.31:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多雨后风
清新背景
#F3F8F6主色#477A68强调#7E9EC3正文#22342D边框#D3E2DC正文对比度 12.25:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多天青月白
国风背景
#E3F2F5主色#509296强调#A83C3C正文#1C2938边框#C7D2D4正文对比度 12.84:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多朱砂黛瓦
国风背景
#F2ECDE主色#8B2A2A强调#D9B611正文#2B2F37边框#B7A091正文对比度 11.40:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多松花紫檀
国风背景
#F5E6D3主色#5A9B4D强调#A05838正文#241840边框#D6BC46正文对比度 13.40:1 · 通过 AA
IN5 STUDIO作品 关于 联系
让颜色建立清晰层级
背景承载内容，主色识别品牌，强调色引导关键操作。
了解更多云山琉璃
国风背景
#E9F1F6主色#1781B5强调#C9A26B正文#142334边框#B2BBBE正文对比度 13.93:1 · 通过 AA
常见问题
一套网页配色为什么要分角色？
背景、正文、主色、强调色和边框承担不同的信息层级。先明确角色再选色，可以减少页面中随意增加颜色的情况，也便于后续维护设计令牌。
AA 对比度代表什么？
正文与背景对比度达到 4.5:1 时，通常满足 WCAG 2.x 对普通正文的 AA 级要求。实际项目还应检查按钮、链接、焦点状态和图标等组件。
复制后可以直接用到项目里吗？
可以把 CSS 变量作为设计起点，但仍建议结合品牌调性、内容密度、交互状态和实际设备测试进一步调整，不要只依赖一张静态预览。