HTML 颜色灵感库：好看的背景色、按钮色与十六进制配色方案，复制就能用

HTML 颜色灵感库：好看的背景色、按钮色与十六进制配色方案，复制就能用

写网页时，颜色常常是最容易被低估、却最直接影响观感的细节。一个页面的结构可能很清楚，文案可能也写得不错，但如果背景色沉闷、按钮色刺眼、文字对比不足，用户第一眼看到的体验就会打折。相反，一组舒服的颜色可以让页面显得更专业、更干净，也更容易让人愿意继续浏览。

这篇文章整理了一份适合 HTML、CSS、前端页面、小程序落地页、后台界面、博客页面和个人作品集使用的颜色方案。你可以直接复制十六进制颜色值，也可以复制文中的 CSS 代码块快速搭建背景、按钮、卡片和提示条。文章不会只堆色号，而是会把每种颜色适合用在什么地方、和哪些颜色搭配更舒服、需要注意什么对比度问题讲清楚。

如果你正在做一个网页，但不知道背景该用什么颜色、按钮该用什么颜色、卡片该怎么搭配，这篇可以当作一个随手可查的 HTML 颜色参考库。

一、HTML 颜色是什么？

在 HTML 和 CSS 中，颜色通常通过以下几种方式书写：

/* 十六进制写法 */
color: #111827;
background-color: #F9FAFB;

/* RGB 写法 */
color: rgb(17, 24, 39);

/* RGBA 写法，最后一个值代表透明度 */
background-color: rgba(59, 130, 246, 0.12);

/* HSL 写法 */
color: hsl(221, 83%, 53%);

最常见、也最适合复制使用的是十六进制颜色值，比如 #FFFFFF、#000000、#2563EB。十六进制颜色由 # 开头，后面跟六个字符，分别表示红、绿、蓝三个通道。比如：

#2563EB
25 = 红色通道
63 = 绿色通道
EB = 蓝色通道

你并不需要手动计算它，只要知道：十六进制颜色值是网页颜色最通用的表达方式之一，复制到 CSS 里就能使用。

二、网页配色的核心思路

一套好看的网页颜色通常不是随便选几个喜欢的颜色，而是有层次的。建议把颜色分成四类：

一个实用的页面配色结构可以这样理解：

页面背景：浅色或深色，面积最大
内容卡片：比背景略亮或略暗，形成层次
正文文字：高对比度，方便阅读
弱文字：用于说明、时间、描述
主按钮：醒目，但不能刺眼
按钮悬停：比原色略深或略亮
边框颜色：轻微可见，不抢视线

很多页面不好看，并不是因为颜色不高级，而是因为颜色没有分工。背景、文字、按钮、边框、提示全都在抢注意力，视觉就会变乱。

三、颜色使用思维导图

下面这张思维导图可以帮助你快速判断：拿到一个色号之后，应该放在页面的哪个位置。

#mermaid-svg-vyF53LmubFUla1Ia{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-vyF53LmubFUla1Ia .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-vyF53LmubFUla1Ia .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-vyF53LmubFUla1Ia .error-icon{fill:#552222;}#mermaid-svg-vyF53LmubFUla1Ia .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-vyF53LmubFUla1Ia .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-vyF53LmubFUla1Ia .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-vyF53LmubFUla1Ia .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-vyF53LmubFUla1Ia .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-vyF53LmubFUla1Ia .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-vyF53LmubFUla1Ia .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-vyF53LmubFUla1Ia .marker{fill:#333333;stroke:#333333;}#mermaid-svg-vyF53LmubFUla1Ia .marker.cross{stroke:#333333;}#mermaid-svg-vyF53LmubFUla1Ia svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-vyF53LmubFUla1Ia p{margin:0;}#mermaid-svg-vyF53LmubFUla1Ia .edge{stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .section–1 rect,#mermaid-svg-vyF53LmubFUla1Ia .section–1 path,#mermaid-svg-vyF53LmubFUla1Ia .section–1 circle,#mermaid-svg-vyF53LmubFUla1Ia .section–1 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section–1 path{fill:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section–1 text{fill:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon–1{font-size:40px;color:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge–1{stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth–1{stroke-width:17;}#mermaid-svg-vyF53LmubFUla1Ia .section–1 line{stroke:hsl(60, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-0 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-0 path,#mermaid-svg-vyF53LmubFUla1Ia .section-0 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-0 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-0 path{fill:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-vyF53LmubFUla1Ia .section-0 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-0{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-0{stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-0{stroke-width:14;}#mermaid-svg-vyF53LmubFUla1Ia .section-0 line{stroke:hsl(240, 100%, 83.5294117647%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-1 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-1 path,#mermaid-svg-vyF53LmubFUla1Ia .section-1 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-1 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-1 path{fill:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-1 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-1{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-1{stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-1{stroke-width:11;}#mermaid-svg-vyF53LmubFUla1Ia .section-1 line{stroke:hsl(260, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-2 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-2 path,#mermaid-svg-vyF53LmubFUla1Ia .section-2 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-2 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-2 path{fill:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-2 text{fill:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-2{font-size:40px;color:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-2{stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-2{stroke-width:8;}#mermaid-svg-vyF53LmubFUla1Ia .section-2 line{stroke:hsl(90, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-3 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-3 path,#mermaid-svg-vyF53LmubFUla1Ia .section-3 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-3 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-3 path{fill:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-3 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-3{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-3{stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-3{stroke-width:5;}#mermaid-svg-vyF53LmubFUla1Ia .section-3 line{stroke:hsl(120, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-4 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-4 path,#mermaid-svg-vyF53LmubFUla1Ia .section-4 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-4 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-4 path{fill:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-4 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-4{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-4{stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-4{stroke-width:2;}#mermaid-svg-vyF53LmubFUla1Ia .section-4 line{stroke:hsl(150, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-5 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-5 path,#mermaid-svg-vyF53LmubFUla1Ia .section-5 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-5 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-5 path{fill:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-5 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-5{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-5{stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-5{stroke-width:-1;}#mermaid-svg-vyF53LmubFUla1Ia .section-5 line{stroke:hsl(180, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-6 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-6 path,#mermaid-svg-vyF53LmubFUla1Ia .section-6 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-6 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-6 path{fill:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-6 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-6{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-6{stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-6{stroke-width:-4;}#mermaid-svg-vyF53LmubFUla1Ia .section-6 line{stroke:hsl(210, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-7 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-7 path,#mermaid-svg-vyF53LmubFUla1Ia .section-7 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-7 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-7 path{fill:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-7 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-7{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-7{stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-7{stroke-width:-7;}#mermaid-svg-vyF53LmubFUla1Ia .section-7 line{stroke:hsl(270, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-8 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-8 path,#mermaid-svg-vyF53LmubFUla1Ia .section-8 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-8 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-8 path{fill:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-8 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-8{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-8{stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-8{stroke-width:-10;}#mermaid-svg-vyF53LmubFUla1Ia .section-8 line{stroke:hsl(330, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-9 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-9 path,#mermaid-svg-vyF53LmubFUla1Ia .section-9 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-9 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-9 path{fill:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-9 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-9{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-9{stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-9{stroke-width:-13;}#mermaid-svg-vyF53LmubFUla1Ia .section-9 line{stroke:hsl(0, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-10 rect,#mermaid-svg-vyF53LmubFUla1Ia .section-10 path,#mermaid-svg-vyF53LmubFUla1Ia .section-10 circle,#mermaid-svg-vyF53LmubFUla1Ia .section-10 polygon,#mermaid-svg-vyF53LmubFUla1Ia .section-10 path{fill:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-10 text{fill:black;}#mermaid-svg-vyF53LmubFUla1Ia .node-icon-10{font-size:40px;color:black;}#mermaid-svg-vyF53LmubFUla1Ia .section-edge-10{stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .edge-depth-10{stroke-width:-16;}#mermaid-svg-vyF53LmubFUla1Ia .section-10 line{stroke:hsl(30, 100%, 86.2745098039%);stroke-width:3;}#mermaid-svg-vyF53LmubFUla1Ia .disabled,#mermaid-svg-vyF53LmubFUla1Ia .disabled circle,#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:lightgray;}#mermaid-svg-vyF53LmubFUla1Ia .disabled text{fill:#efefef;}#mermaid-svg-vyF53LmubFUla1Ia .section-root rect,#mermaid-svg-vyF53LmubFUla1Ia .section-root path,#mermaid-svg-vyF53LmubFUla1Ia .section-root circle,#mermaid-svg-vyF53LmubFUla1Ia .section-root polygon{fill:hsl(240, 100%, 46.2745098039%);}#mermaid-svg-vyF53LmubFUla1Ia .section-root text{fill:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .section-root span{color:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .section-2 span{color:#ffffff;}#mermaid-svg-vyF53LmubFUla1Ia .icon-container{height:100%;display:flex;justify-content:center;align-items:center;}#mermaid-svg-vyF53LmubFUla1Ia .edge{fill:none;}#mermaid-svg-vyF53LmubFUla1Ia .mindmap-node-label{dy:1em;alignment-baseline:middle;text-anchor:middle;dominant-baseline:middle;text-align:center;}#mermaid-svg-vyF53LmubFUla1Ia :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

HTML 颜色使用

背景色

页面底色

区块背景

卡片背景

渐变背景

文字色

标题文字

正文文字

辅助说明

反色文字

按钮色

主按钮

次按钮

危险操作

成功操作

状态色

成功

警告

错误

信息提示

细节色

边框

分割线

标签

图标

如果你的 Markdown 平台支持 Mermaid，上面的内容会直接渲染成思维导图。如果平台不支持，也可以把这段作为文章里的结构图代码展示。

四、最常用的基础颜色

基础色适合做正文、背景、边框、遮罩、卡片等。它们不像高饱和颜色那样有强烈情绪，但能决定页面是否干净。

推荐组合：

body {
background: #F9FAFB;
color: #111827;
}

.card {
background: #FFFFFF;
border: 1px solid #E5E7EB;
}

.muted {
color: #6B7280;
}

这一组适合绝大多数内容型页面。它不花哨，但很耐看。你可以把它用在文章页面、数据后台、个人介绍页、表单页和帮助中心。

五、好看的浅色背景方案

浅色背景的优点是阅读压力小、兼容性好、适合长文本。下面这些颜色都可以直接作为网页背景。

浅色背景使用建议：

示例：

<section class="soft-blue-section">
<h2>柔和蓝白背景</h2>
<p>适合科技工具、AI 产品、在线课程和 SaaS 页面。</p>
<button>立即体验</button>
</section>

.soft-blue-section {
background: #EFF6FF;
color: #1E3A8A;
padding: 48px;
border-radius: 8px;
}

.soft-blue-section button {
background: #2563EB;
color: #FFFFFF;
border: none;
padding: 12px 20px;
border-radius: 6px;
}

六、好看的深色背景方案

深色背景适合科技感、沉浸感、控制台、游戏、AI 工具、开发者产品和作品集首页。深色页面最重要的是控制对比度，不要让文字灰得看不清，也不要让高亮色过度刺眼。

深色背景示例：

.dark-page {
background: #020617;
color: #E5E7EB;
}

.dark-card {
background: #0F172A;
border: 1px solid #1E293B;
color: #F8FAFC;
}

.dark-page .primary {
background: #38BDF8;
color: #082F49;
}

深色页面要避免的问题：

七、按钮颜色推荐：主按钮、次按钮、危险按钮、成功按钮

按钮是网页里最直接的操作入口。一个按钮颜色好不好，不只是看它漂不漂亮，还要看用户能不能一眼判断它的重要性。

1. 蓝色按钮：最通用的主按钮

蓝色是网页按钮里最安全的选择，适合“提交”“登录”“开始使用”“保存”等操作。

.btn-blue {
background: #2563EB;
color: #FFFFFF;
border: 1px solid #2563EB;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
}

.btn-blue:hover {
background: #1D4ED8;
border-color: #1D4ED8;
}

2. 绿色按钮：适合成功、确认、收益

绿色常用于“完成”“通过”“确认”“收款”“启用”。

.btn-green {
background: #16A34A;
color: #FFFFFF;
border: 1px solid #16A34A;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
}

.btn-green:hover {
background: #15803D;
}

3. 红色按钮：适合删除、警告、危险操作

红色不建议随便用在普通按钮上，因为它会让人产生警惕。适合“删除账号”“清空数据”“移除”“拒绝”等操作。

.btn-danger {
background: #DC2626;
color: #FFFFFF;
border: 1px solid #DC2626;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
}

.btn-danger:hover {
background: #B91C1C;
}

4. 黑色按钮：适合极简、高级、品牌感

黑色按钮很有质感，适合作品集、摄影站、独立品牌、简洁落地页。

.btn-black {
background: #111827;
color: #FFFFFF;
border: 1px solid #111827;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
}

.btn-black:hover {
background: #030712;
}

5. 白色描边按钮：适合次要操作

次按钮通常不应该比主按钮更抢眼，所以可以使用白底、灰边、深色文字。

.btn-outline {
background: #FFFFFF;
color: #111827;
border: 1px solid #D1D5DB;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
}

.btn-outline:hover {
background: #F9FAFB;
border-color: #9CA3AF;
}

八、可直接复制的颜色卡片

下面这一组颜色适合放进文章页、组件库、项目文档或设计规范里。你可以直接复制色号使用。

HTML 效果演示：

<div class="palette">
<div class="swatch" style="background:#0EA5E9">#0EA5E9</div>
<div class="swatch" style="background:#2563EB">#2563EB</div>
<div class="swatch" style="background:#4F46E5">#4F46E5</div>
<div class="swatch" style="background:#7C3AED">#7C3AED</div>
<div class="swatch" style="background:#E11D48">#E11D48</div>
<div class="swatch" style="background:#F97316">#F97316</div>
</div>

.palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}

.swatch {
min-height: 88px;
display: flex;
align-items: end;
justify-content: center;
padding: 12px;
color: #FFFFFF;
border-radius: 8px;
font-weight: 700;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

九、不同风格的网站配色方案

如果你不想自己慢慢搭配，可以直接从下面的方案中选择一组。

1. 科技工具站配色

适合 AI 工具、开发者产品、自动化平台、数据看板。

这组颜色的优点是稳定、清爽、可信。蓝色负责强调，灰白负责承载内容。它不会让页面显得幼稚，也不会太沉闷。

2. 个人博客配色

适合技术博客、读书笔记、知识库、教程网站。

博客最重要的是阅读，不要让背景颜色和装饰颜色抢正文的注意力。正文推荐用 #374151，比纯黑柔和；标题用 #111827，更有重量。

3. 电商活动页配色

适合促销、优惠券、限时活动、商品推荐。

活动页可以比普通页面更热烈，但仍然要控制红色和橙色的面积。建议红色用在价格、倒计时、折扣标签上，橙色用作按钮或主视觉强调。

4. 健康清新配色

适合健康管理、运动、饮食、环保、心理成长类页面。

这套颜色给人的感觉是安全、自然、清爽。注意不要让绿色过饱和，大面积背景最好用 #F0FDF4 或 #ECFDF5 这样的浅绿色。

5. 高级深色配色

适合作品集、开发者主页、摄影、音乐、控制台、产品发布页。

这套适合做第一屏视觉。它的关键是“少而准”：深色铺底，蓝色做主要按钮，紫色只做少量高亮，不要把所有元素都做成发光效果。

十、渐变背景：让页面更有层次

渐变背景比纯色更有空间感，但使用时要克制。大面积渐变适合首页、活动页、登录页、空状态页面；内容密集的后台页面则更适合纯色背景。

1. 蓝紫渐变

.gradient-blue-purple {
background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
color: #FFFFFF;
}

适合：AI 工具、SaaS 官网、技术产品、启动页。

2. 清新蓝绿渐变

.gradient-cyan-green {
background: linear-gradient(135deg, #06B6D4 0%, #22C55E 100%);
color: #FFFFFF;
}

适合：健康、数据、学习、效率工具。

3. 暖色活动渐变

.gradient-warm {
background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
color: #FFFFFF;
}

适合：促销、节日、活动报名、优惠券。

4. 深色科技渐变

.gradient-dark-tech {
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.28), transparent 32%),
linear-gradient(135deg, #020617 0%, #0F172A 55%, #1E1B4B 100%);
color: #F8FAFC;
}

适合：沉浸式首页、开发者工具、控制台页面。这里的 radial-gradient 是为了让左上角有一点光感，但透明区域不会抢走正文。

十一、状态颜色：成功、警告、错误、信息

状态色是组件库里非常重要的一类颜色。它们常见于提示框、Toast、表单校验、标签、消息中心。

提示框代码：

<div class="alert alert-success">保存成功，设置已经生效。</div>
<div class="alert alert-warning">请确认信息无误后再提交。</div>
<div class="alert alert-error">提交失败，请检查必填项。</div>

.alert {
padding: 12px 14px;
border-radius: 6px;
border: 1px solid;
font-size: 14px;
}

.alert-success {
background: #DCFCE7;
color: #166534;
border-color: #86EFAC;
}

.alert-warning {
background: #FEF3C7;
color: #92400E;
border-color: #FCD34D;
}

.alert-error {
background: #FEE2E2;
color: #991B1B;
border-color: #FCA5A5;
}

十二、文字颜色怎么选？

很多新手只关注背景和按钮，却忽略文字颜色。其实文字颜色比按钮更影响用户体验，因为用户真正停留最多的地方就是阅读区域。

常用文字颜色如下：

建议不要在白色背景上使用 #000000 写大段正文。纯黑虽然对比强，但容易显得硬。更舒服的选择是 #111827 或 #374151。

.article {
color: #374151;
}

.article h1,
.article h2,
.article h3 {
color: #111827;
}

.article .meta {
color: #6B7280;
}

十三、完整效果演示：一张配色卡片

下面是一段完整 HTML，可以复制到本地 .html 文件中预览。它包含背景、卡片、标题、说明、按钮、状态标签和色卡。

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML 颜色效果演示</title>
<style>
body {
margin: 0;
font-family: Arial, "Microsoft YaHei", sans-serif;
background: #F8FAFC;
color: #0F172A;
}

.demo {
max-width: 920px;
margin: 0 auto;
padding: 48px 20px;
}

.panel {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 28px;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.tag {
display: inline-block;
background: #DBEAFE;
color: #1E40AF;
padding: 6px 10px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}

h1 {
margin: 18px 0 10px;
font-size: 32px;
line-height: 1.2;
}

p {
color: #64748B;
line-height: 1.8;
}

.actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}

button {
border: 0;
border-radius: 6px;
padding: 11px 18px;
font-weight: 700;
cursor: pointer;
}

.primary {
background: #2563EB;
color: #FFFFFF;
}

.secondary {
background: #FFFFFF;
color: #111827;
border: 1px solid #D1D5DB;
}

.colors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-top: 24px;
}

.color {
height: 86px;
border-radius: 8px;
display: flex;
align-items: end;
justify-content: center;
padding: 10px;
color: #FFFFFF;
font-weight: 700;
}
</style>
</head>
<body>
<main class="demo">
<section class="panel">
<span class="tag">配色演示</span>
<h1>干净、专业、可直接复用的网页颜色</h1>
<p>这一组颜色适合工具站、后台系统、博客和产品介绍页。页面背景使用浅灰，卡片使用白色，按钮使用品牌蓝，整体清晰又不刺眼。</p>
<div class="actions">
<button class="primary">立即使用</button>
<button class="secondary">查看色号</button>
</div>
<div class="colors">
<div class="color" style="background:#2563EB">#2563EB</div>
<div class="color" style="background:#0F172A">#0F172A</div>
<div class="color" style="background:#64748B">#64748B</div>
<div class="color" style="background:#16A34A">#16A34A</div>
</div>
</section>
</main>
</body>
</html>

这个演示里用到的颜色关系很清楚：

十四、复制就能用的 CSS 变量

实际项目中，不建议每个地方都手写色号。更好的方式是把颜色放进 CSS 变量，这样后续改主题会更方便。

:root {
–color-bg: #F8FAFC;
–color-surface: #FFFFFF;
–color-border: #E2E8F0;
–color-text: #0F172A;
–color-muted: #64748B;
–color-primary: #2563EB;
–color-primary-hover: #1D4ED8;
–color-success: #16A34A;
–color-warning: #F59E0B;
–color-danger: #DC2626;
}

body {
background: var(–color-bg);
color: var(–color-text);
}

.card {
background: var(–color-surface);
border: 1px solid var(–color-border);
}

.button-primary {
background: var(–color-primary);
color: #FFFFFF;
}

.button-primary:hover {
background: var(–color-primary-hover);
}

有了 CSS 变量以后，你只需要维护一处颜色，整个项目就可以统一变化。尤其是团队协作、长期维护、主题切换时，这种方式非常实用。

十五、深浅主题切换色板

如果你想同时支持浅色模式和深色模式，可以这样写：

:root {
–bg: #F8FAFC;
–surface: #FFFFFF;
–text: #0F172A;
–muted: #64748B;
–border: #E2E8F0;
–primary: #2563EB;
}

[data-theme="dark"] {
–bg: #020617;
–surface: #0F172A;
–text: #F8FAFC;
–muted: #94A3B8;
–border: #1E293B;
–primary: #38BDF8;
}

HTML：

<body data-theme="dark">
<div class="card">
<h1>深色主题</h1>
<p>使用 CSS 变量可以快速切换颜色。</p>
</div>
</body>

这种写法的好处是页面结构不用变，只要切换 data-theme 属性，颜色就能整体变化。

十六、颜色对比度：好看之外还要看得清

颜色不是越淡越高级，也不是越亮越醒目。网页颜色必须考虑可读性，尤其是文字和背景之间的对比度。

常见错误：

推荐做法：

十七、按行业快速选颜色

不同类型的网站适合不同情绪的颜色。下面这张表可以作为快速参考。

选择行业颜色时，不要只看“这个颜色好看吗”，还要看它传递的感觉是否符合你的产品。比如金融网站用过度活泼的粉色会显得不够稳，儿童教育页面如果全是黑灰又会显得缺少亲和力。

十八、常见配色公式

1. 白底 + 深灰文字 + 蓝色按钮

这是最通用的公式。

background: #FFFFFF;
color: #111827;
button: #2563EB;

适合：几乎所有正式页面。

2. 浅灰底 + 白色卡片 + 品牌主色

这是后台系统和工具站常用公式。

page: #F8FAFC;
card: #FFFFFF;
border: #E2E8F0;
primary: #2563EB;

适合：SaaS、表单、管理后台、工作台。

3. 浅色同色系背景 + 深色文字 + 中高饱和按钮

例如蓝色页面：

background: #EFF6FF;
text: #1E3A8A;
button: #2563EB;

适合：介绍页、注册页、专题页。

4. 深色背景 + 浅色文字 + 明亮强调色

background: #020617;
card: #0F172A;
text: #F8FAFC;
accent: #38BDF8;

适合：技术首页、视觉展示页、控制台。

5. 暖色背景 + 红橙按钮 + 深棕文字

background: #FFF7ED;
text: #431407;
button: #F97316;
danger: #E11D48;

适合：活动、优惠、节日、电商。

十九、完整色号清单：按用途复制

背景色

#FFFFFF 纯白背景
#F9FAFB 清爽浅灰
#F8FAFC 蓝调浅灰
#F3F4F6 中性浅灰
#EFF6FF 柔和蓝白
#F0F9FF 冰蓝背景
#ECFDF5 清新浅绿
#FFF7ED 暖橙浅底
#FFFBEB 奶油白
#FFF1F2 浅粉背景
#F5F3FF 浅紫背景
#020617 深蓝黑
#0F172A 深墨蓝
#111827 深灰黑

按钮色

#2563EB 主按钮蓝
#1D4ED8 蓝色悬停
#4F46E5 靛蓝按钮
#7C3AED 紫色按钮
#16A34A 成功绿色
#0F766E 稳重青绿
#DC2626 危险红色
#E11D48 玫红强调
#F97316 橙色行动
#111827 黑色高级按钮

文字色

#111827 强标题
#1F2937 标题
#374151 正文
#4B5563 次级正文
#6B7280 辅助说明
#9CA3AF 禁用文字
#F8FAFC 深色背景标题
#CBD5E1 深色背景正文
#94A3B8 深色背景辅助

边框和分割线

#F3F4F6 很浅的分割区
#E5E7EB 常用边框
#D1D5DB 输入框边框
#CBD5E1 深一点的边框
#1E293B 深色页面边框

标签浅色背景

#DBEAFE 蓝色标签背景
#DCFCE7 绿色标签背景
#FEE2E2 红色标签背景
#FEF3C7 黄色标签背景
#F5F3FF 紫色标签背景
#FFEDD5 橙色标签背景

二十、最后的配色建议

网页配色不需要一开始就追求“惊艳”，更重要的是清楚、稳定、可读。一个成熟页面通常只需要一到两个主色，再配合中性色、状态色和少量强调色，就能很好看。

如果你不知道怎么选，建议从这套万能方案开始：

:root {
–bg: #F8FAFC;
–surface: #FFFFFF;
–text: #0F172A;
–muted: #64748B;
–border: #E2E8F0;
–primary: #2563EB;
–primary-hover: #1D4ED8;
}

它适合博客、工具站、后台、表单、个人项目和大多数普通网页。等页面结构完成后，再根据品牌或内容气质微调主色即可。

记住三个原则：

颜色的价值不只是“好看”，而是帮助用户更快理解页面、更放心点击按钮、更舒服地阅读内容。把背景、文字、按钮、边框和状态色分好工，你的 HTML 页面就会立刻变得更专业。