不少刚接触前端的朋友会发现，自己写的HTML页面在浏览器里运行后永远是白底黑字，时间一长眼睛容易疲劳，页面观感也比较单调。想让HTML运行界面换一个颜色，其实并不复杂，核心就是借助CSS样式来控制页面各部分的颜色显示。下面从颜色设置的基本方式、不同场景下的改色方法以及配色实用技巧几个方面，详细讲一讲具体怎么做。
一、CSS控制颜色的基本写法
HTML本身只负责结构，颜色、背景这些外观表现都交给CSS来处理。在CSS中，颜色值有三种最常见的写法，理解了这三种写法，后面的操作就都能看懂了。
第一种是英文颜色名，比如red、blue、green，浏览器内置了大约140个颜色名称，写起来直观但可选范围有限。第二种是十六进制值，形如#FF5733，六个字符每两位分别代表红、绿、蓝三个通道的强度，取值从00到FF，这是实际开发中使用最广泛的写法。第三种是rgb函数，比如rgb(255, 87, 51)，每个参数取值0到255，还有一种rgba写法可以额外指定透明度，比如rgba(0, 0, 0, 0.5)表示半透明黑色，在做遮罩层时特别常用。
三种写法效果可以互相等价，比如下面这三种写法显示的都是同一种红色：
color: red; color: #FF0000; color: rgb(255, 0, 0);
二、三种方式给HTML运行界面改颜色
给页面改颜色，按照样式写在什么位置，可以分为行内样式、内部样式表和外部样式表三种方式，分别适合不同的使用场景。
1. 行内样式：最快见效的改法
如果只是临时改一下背景色，直接在标签里写style属性最方便。比如想让整个页面的背景变成浅灰色、文字变成深蓝色，可以直接写在<body>标签上：
<body style="background-color: #F0F2F5; color: #1A3C6E;">
<h1>欢迎来到我的页面</h1>
<p>这里的内容会显示为深蓝色文字，背景是浅灰色。</p>
</body>
这种写法的优点是立即生效、不用额外文件，缺点是把结构和样式混在一起，页面一大就难以维护，一般只适合快速测试或写小Demo。
2. 内部样式表：单页面的统一管理
在<head>标签里加入<style>块，可以对当前页面所有元素统一设置颜色，比行内样式清爽得多：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改颜色示例</title>
<style>
body {
background-color: #2B3A55; /* 页面背景色 */
color: #FFFFFF; /* 全局文字颜色 */
}
h1 {
color: #FFC107; /* 标题颜色 */
}
button {
background-color: #4CAF50; /* 按钮背景 */
color: white; /* 按钮文字 */
border: none;
padding: 8px 20px;
}
</style>
</head>
<body>
<h1>深色主题页面</h1>
<button>提交</button>
</body>
</html>
这个例子把页面改成了深色主题，背景、标题、按钮各自使用不同颜色，层次清晰。单个页面推荐用这种方式。
3. 外部样式表：多页面共用一套配色
如果网站有多个页面都要用同一套配色，就新建一个CSS文件，比如style.css，再在HTML里通过<link>标签引入：
<link rel="stylesheet" href="style.css">
外部样式表的好处是改一处、全站生效，是正式项目中的标准做法。三种方式如果对同一元素设置了不同颜色，优先级是行内样式最高，其次是内部和外部样式表中更具体的选择器。
三、改输入框、按钮等控件的颜色
很多情况下大家说的改颜色，不只是页面背景，还包括输入框、按钮、表格这些具体控件。控件的改色同样是设置CSS属性，只是要针对不同的选择器来写。
输入框主要通过background-color改背景、border改边框、color改输入文字的颜色，还可以用::placeholder伪元素单独控制提示文字的颜色。按钮除了背景和文字色，hover状态的配色也建议设置，鼠标移上去有反馈，体验会好很多：
input[type="text"] {
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
color: #333333;
padding: 6px 10px;
}
/* 提示文字的颜色 */
input[type="text"]::placeholder {
color: #999999;
}
/* 鼠标悬停时按钮变色 */
button:hover {
background-color: #45A049;
}
表格类界面可以给偶数行单独加背景色形成斑马纹效果，代码量很少但可读性提升明显，用tr:nth-child(even)选择器就能实现，具体是tr:nth-child(even) { background-color: #F5F5F5; }。
四、非开发场景下的界面改色
如果说的运行界面指的是浏览器自身的界面颜色，比如标签栏、地址栏那一圈，那就不是HTML的事了。Chrome、Edge等浏览器在设置里都有外观或主题选项，可以切换为深色模式或者安装主题皮肤。另外如果网页本身支持深色模式，可以加上<meta name="color-scheme" content="dark">这行声明，浏览器会自动把默认的表单控件、滚动条渲染成深色，不用自己一个个去改。
五、配色实用建议
改颜色容易，改得好看难。这里给几条实用建议：一是背景和文字的对比度要够，浅底配深字或深底配浅字，正文对比度建议达到WCAG标准的4.5:1，否则看起来费眼；二是主色不要超过三种，按钮、链接用一个主色贯穿全站，界面才显得统一；三是取色时不要凭感觉，可以用浏览器的开发者工具（按F12打开）实时调试，改完满意再写进代码；四是配色没思路时，可以去一些在线配色网站找现成的配色方案，直接抄色值，效率比瞎试高得多。
总结一下，改HTML运行界面的颜色，本质就是用CSS给body、文字、控件分别设置背景色和前景色。小改动用行内样式，单页面用内部样式表，正式项目用外部样式表，掌握这三种方式加上合理的配色原则，就能轻松把页面调整成自己想要的效果。