在做设计的时候,常用到不同的颜色值,颜色值可多了,现通过表格来记录一下常用的颜色,方便以后查找,同时也科普一下颜色知识,人眼能看见的光,在可见的光范围内,以不同颜色来区分。
常见的场景有路灯,LED灯,发亮的是三种基本颜色光
颜色值 | 颜色 | 英文名称 | 中文名称 | 用途说明 |
---|---|---|---|---|
#FF0000 | ( ✿ ◠ ‿ ◠ ) \color{red}{(✿◠‿◠)} (✿◠‿◠) | red | 红色 | 热烈,停止,故障,危机… |
#00FF00 | ( ✿ ◠ ‿ ◠ ) \color{#00FF00}{(✿◠‿◠)} (✿◠‿◠) | green | 绿色 | 通行,正常,健康,安全… |
#0000FF | ( ✿ ◠ ‿ ◠ ) \color{#0000FF}{(✿◠‿◠)} (✿◠‿◠) | blue | 蓝色 | 冷静,深邃,神秘,梦幻… |
彩虹色分七种色,包括混色,是由上面的三基色混合而得来的,《道德经》曰:道生一,一生二,二生三,三生万物…
颜色值 | 颜色 | 英文名称 | 中文名称 | 用途说明 |
---|---|---|---|---|
#FF0000 | ( ✿ ◠ ‿ ◠ ) \color{red}{(✿◠‿◠)} (✿◠‿◠) | red | 红色 | |
#FF6100 | ( ✿ ◠ ‿ ◠ ) \color{#ff6100}{(✿◠‿◠)} (✿◠‿◠) | orange | 橙色 | |
#FFFF00 | ( ✿ ◠ ‿ ◠ ) \color{#FFFF00}{(✿◠‿◠)} (✿◠‿◠) | yellow | 黄色 | 红绿混合色 |
#00FF00 | ( ✿ ◠ ‿ ◠ ) \color{#00FF00}{(✿◠‿◠)} (✿◠‿◠) | green | 绿色 | |
#00FFFF | ( ✿ ◠ ‿ ◠ ) \color{#00ffff}{(✿◠‿◠)} (✿◠‿◠) | cyan | 青色 | 蓝绿混合色 |
#0000FF | ( ✿ ◠ ‿ ◠ ) \color{#0000FF}{(✿◠‿◠)} (✿◠‿◠) | blue | 蓝色 | |
#800080 | ( ✿ ◠ ‿ ◠ ) \color{#800080}{(✿◠‿◠)} (✿◠‿◠) | purple | 紫色 | 红蓝混合色 |
做页面设计的时候,常用到的颜色,用中性色,使人眼看着舒适的感受
颜色值 | 颜色 | 英文名称 | 中文名称 | 用途说明 |
---|---|---|---|---|
#2979FF | ( ✿ ◠ ‿ ◠ ) \color{#2979ff}{(✿◠‿◠)} (✿◠‿◠) | 主要 Primary | ||
#94BCFF | ( ✿ ◠ ‿ ◠ ) \color{#94bcff}{(✿◠‿◠)} (✿◠‿◠) | |||
#D4E4FF | ( ✿ ◠ ‿ ◠ ) \color{#d4e4ff}{(✿◠‿◠)} (✿◠‿◠) | |||
#18BC37 | ( ✿ ◠ ‿ ◠ ) \color{#18bc37}{(✿◠‿◠)} (✿◠‿◠) | 成功 Success | ||
#8CDE9B | ( ✿ ◠ ‿ ◠ ) \color{#8cde9b}{(✿◠‿◠)} (✿◠‿◠) | |||
#D1F2D7 | ( ✿ ◠ ‿ ◠ ) \color{#d1f2d7}{(✿◠‿◠)} (✿◠‿◠) | |||
#F3A73F | ( ✿ ◠ ‿ ◠ ) \color{#f3a73f}{(✿◠‿◠)} (✿◠‿◠) | 警告 Warming | ||
#F9D39F | ( ✿ ◠ ‿ ◠ ) \color{#f9d39f}{(✿◠‿◠)} (✿◠‿◠) | |||
#FDEDD9 | ( ✿ ◠ ‿ ◠ ) \color{#fdedd9}{(✿◠‿◠)} (✿◠‿◠) | |||
#E43D33 | ( ✿ ◠ ‿ ◠ ) \color{#e43d33}{(✿◠‿◠)} (✿◠‿◠) | 错误 Error | ||
#F29E99 | ( ✿ ◠ ‿ ◠ ) \color{#f29e99}{(✿◠‿◠)} (✿◠‿◠) | |||
#FAD8D6 | ( ✿ ◠ ‿ ◠ ) \color{#fad8d6}{(✿◠‿◠)} (✿◠‿◠) | |||
#8F939C | ( ✿ ◠ ‿ ◠ ) \color{#8f939c}{(✿◠‿◠)} (✿◠‿◠) | 提示 Info | ||
#C7C9CE | ( ✿ ◠ ‿ ◠ ) \color{#c7c9ce}{(✿◠‿◠)} (✿◠‿◠) | |||
#EDEDED | ( ✿ ◠ ‿ ◠ ) \color{#ededed}{(✿◠‿◠)} (✿◠‿◠) | |||
#000000 | ( ✿ ◠ ‿ ◠ ) \color{#000000}{(✿◠‿◠)} (✿◠‿◠) | black | 黑色 | |
#3A3A3A | ( ✿ ◠ ‿ ◠ ) \color{#3a3a3a}{(✿◠‿◠)} (✿◠‿◠) | 主要 | ||
#6A6A6A | ( ✿ ◠ ‿ ◠ ) \color{#6a6a6a}{(✿◠‿◠)} (✿◠‿◠) | 常规 | ||
#909399 | ( ✿ ◠ ‿ ◠ ) \color{#909399}{(✿◠‿◠)} (✿◠‿◠) | 次要 | ||
#C7C7C7 | ( ✿ ◠ ‿ ◠ ) \color{#c7c7c7}{(✿◠‿◠)} (✿◠‿◠) | 辅助 | ||
#F0F0F0 | ( ✿ ◠ ‿ ◠ ) \color{#f0f0f0}{(✿◠‿◠)} (✿◠‿◠) | 边框线 | ||
#DCDCDC | ( ✿ ◠ ‿ ◠ ) \color{#dcdcdc}{(✿◠‿◠)} (✿◠‿◠) | 分隔线 | ||
#F7F7F7 | ( ✿ ◠ ‿ ◠ ) \color{#f7f7f7}{(✿◠‿◠)} (✿◠‿◠) | 白板背景 | ||
#FFFFFF | ( ✿ ◠ ‿ ◠ ) \color{#ffffff}{(✿◠‿◠)} (✿◠‿◠) | white | 白色 |
💡 小提示
另外还有一个颜色值
transparent
,是透明色。
这里有比较淡的颜色如果是看不见的,那就是自己的视力有可能变差,或者可能是显示器有显示色差问题