HTML 颜色
学习颜色名称、RGB、HEX、HSL 表示法 · 难度：入门 · +10XP
HTML 颜色
HTML支持多种颜色表示方式，可以给文字、背景、边框等设置颜色。
四种颜色表示法
| 方式 | 语法 | 示例 |
|---|---|---|
| 颜色名称 | red | 140种预定义颜色 |
| HEX十六进制 | #RRGGBB | #2563eb蓝色 |
| RGB | rgb(r,g,b) | rgb(37,99,235) |
| RGBA(带透明度) | rgba(r,g,b,a) | rgba(37,99,235,0.5) |
| HSL | hsl(h,s%,l%) | hsl(221,83%,53%) |
常用颜色速查
| 颜色 | HEX | RGB |
|---|---|---|
| 黑色 | #000000 | rgb(0,0,0) |
| 白色 | #FFFFFF | rgb(255,255,255) |
| 红色 | #EF4444 | rgb(239,68,68) |
| 绿色 | #22C55E | rgb(34,197,94) |
| 蓝色 | #2563EB | rgb(37,99,235) |
| 橙色 | #F59E0B | rgb(245,158,11) |
| 紫色 | #8B5CF6 | rgb(139,92,246) |
使用方法
<!-- 文字颜色 -->
<p style="color:#2563eb">蓝色文字</p>
<!-- 背景颜色 -->
<div style="background:#f0f0f0">灰色背景</div>
<!-- 边框颜色 -->
<div style="border:2px solid #ef4444">红色边框</div>
<!-- 半透明 -->
<div style="background:rgba(37,99,235,0.3)">半透明蓝</div>???? 练习任务
创建6个不同颜色的方块，分别用颜色名称、HEX、RGB、RGBA表示。