专业的颜色代码表大全网站

提供基础色系,网页安全色,CSS颜色,中国传统色,日本传统色,渐变色,配色方案等颜色代码大全,支持CSS,hex,hsl,html,提供颜色代码转换器工具,提取识别,支持HEX、RGB、RGBA、HSL、HSLA、HSV、HSVA、CMYK等多种颜色格式互转，提供直观的颜色选择器，让颜色转换变得简单高效。

🎯 颜色选择器

点击上方选择颜色或在下方输入颜色代码

🖼️ 颜色预览

当前选择的颜色将在此处显示

⚙️颜色代码对照表


完整颜色码对照表 共 0 种颜色
颜色 英文名 中文名 十六进制 RGB
粉红色系 (Pink Colors)
LightPink 浅粉红 #FFB6C1 255,182,193
Pink 粉红 #FFC0CB 255,192,203
Crimson 猩红 #DC143C 220,20,60
LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245
PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,147
HotPink 热情的粉红 #FF69B4 255,105,180
DeepPink 深粉色 #FF1493 255,20,147
MediumVioletRed 适中的紫罗兰红色 #C71585 199,21,133
紫色系 (Purple Colors)
Orchid 兰花的紫色 #DA70D6 218,112,214
Thistle 蓟 #D8BFD8 216,191,216
Plum 李子 #DDA0DD 221,160,221
Violet 紫罗兰 #EE82EE 238,130,238
Magenta 洋红 #FF00FF 255,0,255
DarkMagenta 深洋红 #8B008B 139,0,139
DarkViolet 深紫罗兰色 #9400D3 148,0,211
DarkOrchid 深兰花紫 #9932CC 153,50,204
BlueViolet 蓝紫罗兰 #8A2BE2 138,43,226
Purple 紫色 #800080 128,0,128
MediumOrchid 适中的兰花紫 #BA55D3 186,85,211
RebeccaPurple 丽贝卡紫 #663399 102,51,153
蓝色系 (Blue Colors)
Lavender 薰衣草色 #E6E6FA 230,230,250
AliceBlue 爱丽丝蓝 #F0F8FF 240,248,255
GhostWhite 幽灵白 #F8F8FF 248,248,255
LightCyan 淡青色 #E0FFFF 224,255,255
Azure 天蓝色 #F0FFFF 240,255,255
PowderBlue 粉蓝色 #B0E0E6 176,224,230
LightBlue 淡蓝色 #ADD8E6 173,216,230
SkyBlue 天空蓝 #87CEEB 135,206,235
LightSkyBlue 淡天空蓝 #87CEFA 135,206,250
DeepSkyBlue 深天空蓝 #00BFFF 0,191,255
DodgerBlue 道奇蓝 #1E90FF 30,144,255
CornflowerBlue 矢车菊蓝 #6495ED 100,149,237
SteelBlue 钢蓝色 #4682B4 70,130,180
RoyalBlue 皇家蓝 #4169E1 65,105,225
Blue 蓝色 #0000FF 0,0,255
MediumBlue 适中的蓝色 #0000CD 0,0,205
DarkBlue 深蓝色 #00008B 0,0,139
Navy 海军蓝 #000080 0,0,128
MidnightBlue 午夜蓝 #191970 25,25,112
青色系 (Cyan Colors)
Cyan 青色 #00FFFF 0,255,255
Aqua 水绿色 #00FFFF 0,255,255
PaleTurquoise 苍白的绿宝石 #AFEEEE 175,238,238
Turquoise 绿宝石 #40E0D0 64,224,208
MediumTurquoise 适中的绿宝石 #48D1CC 72,209,204
DarkTurquoise 深绿宝石 #00CED1 0,206,209
LightSeaGreen 浅海绿色 #20B2AA 32,178,170
CadetBlue 军蓝色 #5F9EA0 95,158,160
DarkCyan 深青色 #008B8B 0,139,139
Teal 水鸭色 #008080 0,128,128
绿色系 (Green Colors)
Aquamarine 碧绿色 #7FFFD4 127,255,212
MediumAquamarine 适中的碧绿色 #66CDAA 102,205,170
SpringGreen 春绿色 #00FF7F 0,255,127
MediumSpringGreen 适中的春绿色 #00FA9A 0,250,154
LightGreen 淡绿色 #90EE90 144,238,144
PaleGreen 苍白的绿色 #98FB98 152,251,152
Lime 酸橙色 #00FF00 0,255,0
LimeGreen 酸橙绿 #32CD32 50,205,50
ForestGreen 森林绿 #228B22 34,139,34
Green 绿色 #008000 0,128,0
DarkGreen 深绿色 #006400 0,100,0
YellowGreen 黄绿色 #9ACD32 154,205,50
OliveDrab 橄榄褐色 #6B8E23 107,142,35
Olive 橄榄色 #808000 128,128,0
DarkOliveGreen 深橄榄绿 #556B2F 85,107,47
MediumSeaGreen 适中的海绿色 #3CB371 60,179,113
SeaGreen 海绿色 #2E8B57 46,139,87
DarkSeaGreen 深海绿色 #8FBC8F 143,188,143
黄色系 (Yellow Colors)
GreenYellow 绿黄色 #ADFF2F 173,255,47
Chartreuse 黄绿色 #7FFF00 127,255,0
LawnGreen 草坪绿 #7CFC00 124,252,0
Yellow 黄色 #FFFF00 255,255,0
LightYellow 淡黄色 #FFFFE0 255,255,224
LemonChiffon 柠檬绸 #FFFACD 255,250,205
LightGoldenrodYellow 浅金菊黄 #FAFAD2 250,250,210
BlanchedAlmond 漂白的杏仁 #FFEBCD 255,235,205
Khaki 卡其色 #F0E68C 240,230,140
DarkKhaki 深卡其色 #BDB76B 189,183,107
橙色系 (Orange Colors)
Gold 金色 #FFD700 255,215,0
Orange 橙色 #FFA500 255,165,0
DarkOrange 深橙色 #FF8C00 255,140,0
Coral 珊瑚色 #FF7F50 255,127,80
Tomato 番茄色 #FF6347 255,99,71
OrangeRed 橙红色 #FF4500 255,69,0
红色系 (Red Colors)
Red 红色 #FF0000 255,0,0
DarkRed 深红色 #8B0000 139,0,0
Maroon 栗色 #800000 128,0,0
FireBrick 火砖色 #B22222 178,34,34
Brown 棕色 #A52A2A 165,42,42
IndianRed 印第安红 #CD5C5C 205,92,92
LightCoral 淡珊瑚色 #F08080 240,128,128
Salmon 鲑鱼色 #FA8072 250,128,114
DarkSalmon 深鲑鱼色 #E9967A 233,150,122
LightSalmon 淡鲑鱼色 #FFA07A 255,160,122
白色和灰色系 (White & Gray Colors)
White 白色 #FFFFFF 255,255,255
Snow 雪白色 #FFFAFA 255,250,250
Honeydew 蜜瓜色 #F0FFF0 240,255,240
MintCream 薄荷奶油 #F5FFFA 245,255,250
Ivory 象牙色 #FFFFF0 255,255,240
OldLace 旧蕾丝 #FDF5E6 253,245,230
Linen 亚麻色 #FAF0E6 250,240,230
Cornsilk 玉米丝色 #FFF8DC 255,248,220
FloralWhite 花白色 #FFFAF0 255,250,240
Seashell 海贝色 #FFF5EE 255,245,238
WhiteSmoke 白烟 #F5F5F5 245,245,245
Gainsboro 淡灰色 #DCDCDC 220,220,220
LightGray 浅灰色 #D3D3D3 211,211,211
Silver 银色 #C0C0C0 192,192,192
DarkGray 深灰色 #A9A9A9 169,169,169
Gray 灰色 #808080 128,128,128
DimGray 暗灰色 #696969 105,105,105
DarkSlateGray 深石板灰 #2F4F4F 47,79,79
Black 黑色 #000000 0,0,0
棕色系 (Brown Colors)
Chocolate 巧克力色 #D2691E 210,105,30
SaddleBrown 马鞍棕色 #8B4513 139,69,19
Sienna 赭色 #A0522D 160,82,45
Peru 秘鲁色 #CD853F 205,133,63
BurlyWood 实木色 #DEB887 222,184,135
SandyBrown 沙褐色 #F4A460 244,164,96
Goldenrod 金麒麟色 #DAA520 218,165,32
DarkGoldenrod 深金麒麟色 #B8860B 184,134,11
RosyBrown 玫瑰棕色 #BC8F8F 188,143,143
CoyoteBrown 土狼棕 #8B7355 139,115,85
米色系 (Beige Colors)
Beige 米色 #F5F5DC 245,245,220
Wheat 小麦色 #F5DEB3 245,222,179
PapayaWhip 番木瓜色 #FFEFD5 255,239,213
Moccasin 鹿皮色 #FFE4B5 255,228,181
NavajoWhite 纳瓦白 #FFDEAD 255,222,173
Khaki 卡其色 #F0E68C 240,230,140
PaleGoldenrod 苍麒麟色 #EEE8AA 238,232,170
Tan 茶色 #D2B48C 210,180,140
Bisque 陶坯黄 #FFE4C4 255,228,196
PeachPuff 桃色 #FFDAB9 255,218,185
金属色系 (Metallic Colors)
Gold 金色 #FFD700 255,215,0
Silver 银色 #C0C0C0 192,192,192
Bronze 青铜色 #B87333 184,115,51
Copper 铜色 #CD7F32 205,127,50
Platinum 铂金色 #E5E4E2 229,228,226
Steel 钢色 #71797E 113,121,126
Charcoal 木炭色 #36454F 54,69,79
Brass 黄铜色 #FFE135 255,225,53
宝石色系 (Gemstone Colors)
Emerald 祖母绿 #50C878 80,200,120
Sapphire 蓝宝石 #0F52BA 15,82,186
Ruby 红宝石 #E0115F 224,17,95
Amethyst 紫水晶 #9966CC 153,102,204
Turquoise 绿松石 #40E0D0 64,224,208
Amber 琥珀色 #FFBF00 255,191,0
Cerise 樱桃红 #DE3163 222,49,99
Periwinkle 长春花色 #CCCCFF 204,204,255
自然色系 (Natural Colors)
SkyBlue 天空蓝 #87CEEB 135,206,235
ForestGreen 森林绿 #228B22 34,139,34
SeaGreen 海绿色 #2E8B57 46,139,87
SandyBrown 沙褐色 #F4A460 244,164,96
SaddleBrown 马鞍棕 #8B4513 139,69,19
Snow 雪白 #FFFAFA 255,250,250
Lavender 薰衣草 #E6E6FA 230,230,250
Cornsilk 玉米丝 #FFF8DC 255,248,220
彩虹色系 (Rainbow Colors)
Red 红色 #FF0000 255,0,0
Orange 橙色 #FF7F00 255,127,0
Yellow 黄色 #FFFF00 255,255,0
Green 绿色 #00FF00 0,255,0
Blue 蓝色 #0000FF 0,0,255
Indigo 靛蓝 #4B0082 75,0,130
Violet 紫罗兰 #9400D3 148,0,211
深色系 (Dark Colors)
DarkRed 深红 #8B0000 139,0,0
DarkOrange 深橙 #FF8C00 255,140,0
DarkGoldenrod 深金菊 #B8860B 184,134,11
DarkGreen 深绿 #006400 0,100,0
DarkBlue 深蓝 #00008B 0,0,139
DarkMagenta 深洋红 #8B008B 139,0,139
DarkSlateGray 深石板灰 #2F4F4F 47,79,79
MidnightBlue 午夜蓝 #191970 25,25,112
浅色系 (Light Colors)
LightPink 浅粉红 #FFB6C1 255,182,193
LightSalmon 浅鲑鱼色 #FFA07A 255,160,122
LightYellow 浅黄色 #FFFFE0 255,255,224
LightGreen 浅绿色 #90EE90 144,238,144
LightBlue 浅蓝色 #ADD8E6 173,216,230
LightCyan 浅青色 #E0FFFF 224,255,255
LightGray 浅灰色 #D3D3D3 211,211,211
LightCoral 浅珊瑚色 #F08080 240,128,128

网页安全色 共 216 种颜色

颜色 英文名 中文名 十六进制 RGB

CSS颜色名 共 148 种颜色

颜色 英文名 中文名 十六进制 RGB
中国传统色 共 300+ 种颜色
颜色 中文名 十六进制 RGB

日本传统色 共 400+ 种颜色

颜色 日文名 中文名 十六进制 RGB

渐变色 共 200 种渐变

颜色 16进制代码1 16进制代码2 16进制代码3

配色方案 共 100 种配色

颜色 16进制代码1 16进制代码2 16进制代码3 16进制代码4

颜色搭配与设计指南


颜色是UI/UX设计中最重要的元素之一，它能影响用户的情绪、品牌认知和产品体验。本指南将介绍颜色心理学、配色方案、配色工具及设计技巧，帮助你掌握专业的颜色搭配方法。

1. 颜色心理学（Color Psychology）

不同的颜色会触发不同的心理反应，设计时应根据目标用户和品牌调性选择颜色：

红色

情绪：激情、警告、紧急

适用：促销、错误提示、餐饮（如McDonald's）

蓝色

情绪：信任、专业、冷静

适用：科技、金融、企业（如Facebook、IBM）

绿色

情绪：自然、健康、成长

适用：环保、健康、金融（如Starbucks）

黄色

情绪：快乐、活力、警示

适用：儿童、食品、折扣促销（如IKEA）

紫色

情绪：奢华、创意、神秘

适用：美妆、艺术、高端品牌（如Cadbury）

黑色

情绪：优雅、力量、简约

适用：奢侈品、时尚、高端品牌（如Apple）

白色

情绪：干净、简洁、现代

适用：医疗、极简设计（如MUJI）

注意：不同文化对颜色的理解可能不同（如白色在西方代表纯洁，在亚洲部分地区与丧葬相关）。

2. 配色方案（Color Schemes）

单色（Monochromatic）

使用同一颜色的不同明度和饱和度变化。

优点：协调、统一、适合极简风。

类似色（Analogous）

选择色轮上相邻的3种颜色。

优点：自然和谐，适合柔和设计。

互补色（Complementary）

使用色轮上相对的两种颜色。

优点：对比强烈，适合吸引注意。

三色组合（Triadic）

色轮上等距的3种颜色。

优点：活泼、丰富，适合创意设计。

3. 设计技巧

📊

60-30-10 法则

  • 60% 主色（背景/主要区域）
  • 30% 辅助色（导航栏、次要元素）
  • 10% 强调色（按钮、CTA 行动召唤）
⚖️

避免过度鲜艳

  • 高饱和颜色容易疲劳，可降低饱和度
  • WCAG 标准：确保文本与背景对比度 ≥ 4.5:1
🎨

使用中性色平衡

  • 黑、白、灰、米色可用于调和强烈配色
  • 示例：深蓝（主色）+ 浅灰（背景）+ 亮黄（强调色）
🌙

深色模式（Dark Mode）

  • 背景用深色（#121212），文字用浅灰（#E0E0E0）
  • 避免纯黑（#000000），建议使用深灰（如#1E1E1E）

4. 案例分析

Spotify（音乐流媒体）

  • 主色：深绿（品牌识别）
  • 辅助色：黑（背景）、白（文字）
  • 强调色：亮绿（播放按钮）

Airbnb（旅行平台）

  • 主色：粉红（#FF5A5F）
  • 中性色：白、浅灰
  • 强调色：深蓝（链接）

Facebook（社交媒体）

  • 主色：蓝色（#1877F2）传达信任感
  • 背景：白色和浅灰营造简洁感
  • 强调：绿色用于在线状态提示

Instagram（图片社交）

  • 主色：彩虹渐变（创意活力）
  • 背景：纯白突出内容
  • 文字：深灰保证可读性

Netflix（视频流媒体）

  • 主色：红色（#E50914）激发观看欲望
  • 背景：黑色营造影院氛围
  • 对比：高对比度突出内容

Apple（科技公司）

  • 主色：黑白极简设计理念
  • 强调：系统蓝色（#007AFF）
  • 风格：简约优雅的高端定位

Google（搜索引擎）

  • 配色：四色组合体现多样性
  • 寓意：蓝（信任）红（活力）黄（创新）绿（成长）
  • 应用：Logo和产品线统一使用

Slack（团队协作）

  • 主色：深紫色体现专业性
  • 辅助色：青、绿、黄增加活力
  • 平衡：严肃与友好的完美结合

Uber（出行服务）

  • 主色：黑色传达高端可靠
  • 强调：蓝色用于主要操作
  • 设计：简洁现代的城市风格

Dribbble（设计社区）

  • 主色：粉红色（#EA4C89）富有创意
  • 背景：白色突出设计作品
  • 风格：年轻活泼的设计师社区

总结

🧠

理解颜色心理学，选择符合品牌调性的颜色

🎯

使用配色工具生成协调的配色方案

📐

遵循60-30-10法则，确保视觉层次

♿

测试对比度，保证可读性和无障碍设计

掌握颜色搭配，能让你的设计更具吸引力和专业性！ 🎨

常见问题

什么是HEX？

+

HEX（十六进制）颜色代码是一种用于在网页设计和数字媒体中表示颜色的标准格式。它使用16进制数字系统来定义颜色的红、绿、蓝（RGB）分量。

格式：#RRGGBB 或 #RGB

示例：#FF0000（红色）、#00FF00（绿色）、#0000FF（蓝色）

HEX代码以井号（#）开头，后跟6位或3位十六进制字符。每两位数字代表红、绿、蓝三个颜色通道的强度值，范围从00（最暗）到FF（最亮）。

什么是RGB？

+

RGB是一种加色模型，通过红（Red）、绿（Green）、蓝（Blue）三种基本颜色的不同强度组合来创建各种颜色。这是数字显示设备最常用的颜色模型。

格式：rgb(red, green, blue)

取值范围：每个颜色分量的值在0-255之间

示例：rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）、rgb(0, 0, 255)（蓝色）

RGB模型基于人眼对光的感知原理，通过混合不同强度的红、绿、蓝光来产生所有可见颜色。

什么是RGBA？

+

RGBA是RGB颜色模型的扩展，增加了Alpha通道来控制颜色的透明度。Alpha值决定了颜色的不透明程度。

格式：rgba(red, green, blue, alpha)

取值范围：RGB值为0-255，Alpha值为0.0-1.0

示例：rgba(255, 0, 0, 0.5)（50%透明的红色）、rgba(0, 0, 0, 0.8)（80%不透明的黑色）

RGBA在网页设计中特别有用，可以创建半透明效果、叠加效果和复杂的视觉层次。

什么是HSL？

+

HSL代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。这种颜色模型更接近人类对颜色的直观理解。

格式：hsl(hue, saturation%, lightness%)

取值范围：色相0-360度，饱和度和亮度0-100%

示例：hsl(0, 100%, 50%)（红色）、hsl(120, 100%, 50%)（绿色）、hsl(240, 100%, 50%)（蓝色）

HSL模型使得调整颜色变得更加直观：改变色相可以切换颜色类型，调整饱和度可以控制颜色的鲜艳程度，修改亮度可以让颜色变亮或变暗。

什么是HSLA？

+

HSLA是HSL颜色模型的扩展，增加了Alpha通道来控制透明度。它结合了HSL的直观性和透明度控制的灵活性。

格式：hsla(hue, saturation%, lightness%, alpha)

取值范围：色相0-360度，饱和度和亮度0-100%，Alpha值0.0-1.0

示例：hsla(0, 100%, 50%, 0.7)（70%不透明的红色）、hsla(240, 50%, 75%, 0.3)（30%不透明的浅蓝色）

HSLA在创建具有透明效果的颜色时特别有用，同时保持了HSL模型的直观颜色调整优势。

什么是HSV？<专业的颜色代码表大全网站

+

HSV代表色相（Hue）、饱和度（Saturation）和明度（Value/Brightness）。这种颜色模型在图像处理和计算机图形学中广泛使用。

格式：hsv(hue, saturation%, value%)

取值范围：色相0-360度，饱和度和明度0-100%

示例：hsv(0, 100%, 100%)（纯红色）、hsv(120, 50%, 80%)（中等饱和度的绿色）

HSV与HSL的主要区别在于明度的定义：HSV的明度表示颜色的最大亮度，而HSL的亮度表示颜色相对于白色和黑色的位置。

什么是HSVA？

+

HSVA是HSV颜色模型的扩展，增加了Alpha通道来控制透明度。它在需要精确控制颜色明度和透明度的应用中特别有用。

格式：hsva(hue, saturation%, value%, alpha)

取值范围：色相0-360度，饱和度和明度0-100%，Alpha值0.0-1.0

示例：hsva(240, 100%, 100%, 0.6)（60%不透明的纯蓝色）、hsva(60, 75%, 90%, 0.9)（90%不透明的黄绿色）

HSVA在数字艺术、游戏开发和专业图像编辑软件中经常使用，提供了对颜色和透明度的精确控制。

什么是CMYK？

+

CMYK是一种减色模型，代表青色（Cyan）、洋红色（Magenta）、黄色（Yellow）和黑色（Key/Black）。这是印刷行业的标准颜色模型。

格式：cmyk(cyan%, magenta%, yellow%, black%)

取值范围：每个分量的值在0-100%之间

示例：cmyk(100%, 0%, 0%, 0%)（青色）、cmyk(0%, 100%, 0%, 0%)（洋红色）

CMYK模型基于颜料混合原理：通过在白纸上叠加不同浓度的青、洋红、黄、黑四种油墨来产生各种颜色。与RGB不同，CMYK是减色模型，颜色越多越接近黑色。