首页 > 在线工具 > 站长工具 > 网页常用色彩

网页常用色彩 - 工具详情

网页常用色彩

网页常用色彩

发布时间2026-03-24 18:52:07
浏览次数13
所属分类站长工具
本地工具
网页设计常用色彩 67+种配色方案 Web Color Palette
🎨 全部 67
🔴 主色调 8
🟠 辅色调 6
⚪ 中性色 7
✨ 强调色 5
🌈 渐变色 6
🛡️ 安全色 6
📱 Material 9
🟣 Bootstrap 10
🌊 Tailwind 10

🎨 色彩分类

📖 网页常用色彩大全

共 67 种网页常用色彩,点击任意颜色卡片查看详细信息和CSS代码

主红色
Primary Red
#FF4444 | 255,68,68
📌 警告、错误、重要提示
主橙色
Primary Orange
#FF8844 | 255,136,68
📌 警告、注意、中等提示
主黄色
Primary Yellow
#FFDD44 | 255,221,68
📌 注意、警告、高亮
主绿色
Primary Green
#44DD44 | 68,221,68
📌 成功、完成、确认
主蓝色
Primary Blue
#4488FF | 68,136,255
📌 链接、信息、主要操作
主靛蓝
Primary Indigo
#5A67D8 | 90,103,216
📌 品牌色、主色调
主紫色
Primary Purple
#AA66FF | 170,102,255
📌 特殊、高级、品牌
主粉色
Primary Pink
#FF88AA | 255,136,170
📌 女性、时尚、可爱
浅红
Light Red
#FF8888 | 255,136,136
📌 次要警告、提示
浅橙
Light Orange
#FFAA66 | 255,170,102
📌 暖色点缀
浅绿
Light Green
#88FF88 | 136,255,136
📌 成功提示
浅蓝
Light Blue
#88AAFF | 136,170,255
📌 信息提示
浅紫
Light Purple
#CC99FF | 204,153,255
📌 优雅点缀
薄荷绿
Mint Green
#98FB98 | 152,251,152
📌 清新、自然
纯黑
Black
#000000 | 0,0,0
📌 文字、边框
深灰
Dark Gray
#333333 | 51,51,51
📌 主要文字
中灰
Medium Gray
#666666 | 102,102,102
📌 次要文字
浅灰
Light Gray
#999999 | 153,153,153
📌 占位符、禁用
极浅灰
Extra Light Gray
#EEEEEE | 238,238,238
📌 背景色
纯白
White
#FFFFFF | 255,255,255
📌 背景、文字
米白
Off White
#F5F5F5 | 245,245,245
📌 柔和背景
亮红
Bright Red
#FF3333 | 255,51,51
📌 紧急、重要
亮橙
Bright Orange
#FF6600 | 255,102,0
📌 促销、活动
亮黄
Bright Yellow
#FFDD00 | 255,221,0
📌 高亮、注意
亮绿
Bright Green
#33FF33 | 51,255,51
📌 成功、完成
亮蓝
Bright Blue
#3399FF | 51,153,255
📌 链接、操作
日落橙
Sunset Orange
#FF512F | 255,81,47
📌 渐变起点
落日红
Sunset Red
#DD2476 | 221,36,118
📌 渐变终点
海洋蓝
Ocean Blue
#1FA2FF | 31,162,255
📌 渐变起点
深海蓝
Deep Sea Blue
#12D8FA | 18,216,250
📌 渐变终点
森林绿
Forest Green
#11998E | 17,153,142
📌 渐变起点
草绿色
Grass Green
#38EF7D | 56,239,125
📌 渐变终点
安全红
Safe Red
#FF0000 | 255,0,0
📌 Web安全色
安全绿
Safe Green
#00FF00 | 0,255,0
📌 Web安全色
安全蓝
Safe Blue
#0000FF | 0,0,255
📌 Web安全色
安全黄
Safe Yellow
#FFFF00 | 255,255,0
📌 Web安全色
安全青
Safe Cyan
#00FFFF | 0,255,255
📌 Web安全色
安全品红
Safe Magenta
#FF00FF | 255,0,255
📌 Web安全色
Material红
Material Red
#F44336 | 244,67,54
📌 Material Design
Material粉
Material Pink
#E91E63 | 233,30,99
📌 Material Design
Material紫
Material Purple
#9C27B0 | 156,39,176
📌 Material Design
Material靛蓝
Material Indigo
#3F51B5 | 63,81,181
📌 Material Design
Material蓝
Material Blue
#2196F3 | 33,150,243
📌 Material Design
Material青
Material Cyan
#00BCD4 | 0,188,212
📌 Material Design
Material绿
Material Green
#4CAF50 | 76,175,80
📌 Material Design
Material黄
Material Yellow
#FFEB3B | 255,235,59
📌 Material Design
Material橙
Material Orange
#FF9800 | 255,152,0
📌 Material Design
Bootstrap蓝
Bootstrap Blue
#0D6EFD | 13,110,253
📌 Bootstrap主色
Bootstrap靛蓝
Bootstrap Indigo
#6610F2 | 102,16,242
📌 Bootstrap辅色
Bootstrap紫
Bootstrap Purple
#6F42C1 | 111,66,193
📌 Bootstrap辅色
Bootstrap粉
Bootstrap Pink
#D63384 | 214,51,132
📌 Bootstrap辅色
Bootstrap红
Bootstrap Red
#DC3545 | 220,53,69
📌 Bootstrap危险色
Bootstrap橙
Bootstrap Orange
#FD7E14 | 253,126,20
📌 Bootstrap警告色
Bootstrap黄
Bootstrap Yellow
#FFC107 | 255,193,7
📌 Bootstrap警告色
Bootstrap绿
Bootstrap Green
#198754 | 25,135,84
📌 Bootstrap成功色
Bootstrap青
Bootstrap Teal
#20C997 | 32,201,151
📌 Bootstrap信息色
Bootstrap蓝灰
Bootstrap Cyan
#0DCAF0 | 13,202,240
📌 Bootstrap信息色
Tailwind红
Tailwind Red
#EF4444 | 239,68,68
📌 Tailwind CSS
Tailwind橙
Tailwind Orange
#F97316 | 249,115,22
📌 Tailwind CSS
Tailwind黄
Tailwind Yellow
#EAB308 | 234,179,8
📌 Tailwind CSS
Tailwind绿
Tailwind Green
#10B981 | 16,185,129
📌 Tailwind CSS
Tailwind青
Tailwind Teal
#14B89A | 20,184,154
📌 Tailwind CSS
Tailwind蓝
Tailwind Blue
#3B82F6 | 59,130,246
📌 Tailwind CSS
Tailwind靛蓝
Tailwind Indigo
#6366F1 | 99,102,241
📌 Tailwind CSS
Tailwind紫
Tailwind Purple
#8B5CF6 | 139,92,246
📌 Tailwind CSS
Tailwind粉
Tailwind Pink
#EC489A | 236,72,154
📌 Tailwind CSS
Tailwind玫瑰
Tailwind Rose
#F43F5E | 244,63,94
📌 Tailwind CSS
📚 网页色彩说明
主色调 品牌色、主要操作按钮 辅色调 次要元素、点缀 中性色 文字、背景、边框 强调色 重点突出、CTA按钮 渐变色 现代设计、背景美化 Web安全色 所有浏览器一致显示
🎨 配色建议
🔴 红色 + ⚪ 白色 = 醒目活力 🔵 蓝色 + ⚪ 白色 = 清新专业 🟢 绿色 + ⚪ 白色 = 自然生态 🟣 紫色 + 🌸 粉色 = 浪漫优雅 🟡 黄色 + ⚫ 黑色 = 时尚醒目 ⚪ 白色 + ⚫ 黑色 = 经典简约
工具介绍

当设计网页时,常用色彩工具可以成为您的得力助手,它们能够帮助用户选择、调整和生成网页中的颜色方案,从而让网页设计更加吸引人、舒适。

使用提示

如果工具无法正常加载,请尝试刷新页面或检查网络连接。本工具加载可能需要一些时间,请耐心等待。