图文
文档
H5
设计
APP
哈喽~朋友们~😘
版式设计和配色算是咱排版的时候
最主要的两大难题
版式设计需要大家有一定的设计思维
而配色则很考验每个人的审美
有的人天生就有很好的审美能力
部分人则需要后期不断练习
掌握好配色的底层逻辑方法
你也是可以拥有好看的配色哒
今天
就来和大家分享我常用的配色方法
选择1-2个颜色
再根据不同的内容层次
调整颜色浓度
就可以得出一套完整的配色方案啦
选择一个主题色
选择什么主题色是个很主观的判断，有的人会用企业logo的主色，有的人会被要求用某一个特定的主题色。
这都没有关系，只要这个颜色有调浅或者调深，有能够形成层次的余地就足够了。
谷歌的Material Design团队在2014年定义出了一套常用主题色：
主题色
主题色
主题色
主题色
每一个主题色又划分出了50-900总共10层由浅至深的色阶：
在初期练习配色的时候，不妨尝试先选择色阶中浓度为500的颜色作为第一个主题色。
选择一个强调色
Material Design提供的颜色列表里，每个色阶的后面还有一小段用“A”作为开头标注的颜色，它们都是从对应色系提炼出来的强调色：
除了棕色、灰色以及蓝灰色这三个比较偏暗的色系之外，其他的色系都有对应的强调色。
强调色的特征是有较高的颜色饱和度以及亮度，在选择强调色的时候可以选和主题色对比度较高的互补色：
主题色
主题色
主题色
强调色
配色的应用
配色在排版里起到最主要的一个作用就是：区分内容层次。
新手常常进入到这样一个误区，例如拿到一套漂亮的配色后，卡片用一个颜色，标题用一个颜色，分割线又用一个颜色......
恨不得每个颜色都用个遍，结果整个版面颜色多得像蹦迪一样。
我们需要注重的是颜色的使用目的，而非颜色的表现力。
在选择好一个主题色，一个强调色之后，不要着急决定再来一个什么颜色搭配一下，而是根据内容的层次对主题色或者强调色进行颜色浓度的调整。
段落标题或短句
段落的标题又或者是段落中需要重点突出的句子，都可以使用主题色或者是强调色。
但是要注意：避免在正文段落里大篇幅地使用鲜亮的颜色。
背景色
建议使用和主题色同色系中浓度最低颜色，例如选择了浓度在500的浅蓝色作为主题色时，可以用同色系浓度为50的浅蓝色作为背景色：
主题色
浅蓝500
#03A9F4
背景色
浅蓝50
#E1F5FE
浅蓝 50
#E1F5FE
100
#B3E5FC
200
#81D4FA
300
#4FC3F7
400
#29B6F6
500
#03A9F4
600
#039BE5
700
#0288D1
800
#0277BD
900
#01579B
颜色的浓度选择也不一定时时拿着一个色阶进行比对。
在秀米的自定义颜色里你可以这么看，鼠标往左平移的时候，实际上是在降低颜色的饱和度，此时颜色的浓度越往左越浅；
向下垂直移动的时候，实际上是在降低颜色的亮度，也就是说此时颜色浓度越往下越加深：
正文颜色
正文的颜色比较推荐的是蓝灰色和灰色这两个色系。
浓度在600-900之间的颜色适合作为正文段落，而200-500之间适合用作注释类的文字。
100和50这两个浓度的颜色比起用在文字上，更适合作为背景色。
蓝灰 50
#ECEFF1
100
#CFD8DC
200
#B0BEC5
300
#90A4AE
400
#78909C
500
#607D8B
600
#546E7A
700
#455A64
800
#37474F
900
#263238
灰 50
#FAFAFA
100
#F5F5F5
200
#EEEEEE
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
600
#757575
700
#616161
800
#424242
900
#212121
如果想要使用彩色字作为正文，那么就要注意文字的可读性。
一定要记得的规律就是：在浅色背景上用深色作为正文，反之在深色背景上就要用浅色字。
你爱看的书，就是你该看的书。书海浩瀚，总有你爱看的，那就看。不爱看的，别浪费生命。
×
你爱看的书，就是你该看的书。书海浩瀚，总有你爱看的，那就看。不爱看的，别浪费生命。
✓
你爱看的书，就是你该看的书。书海浩瀚，总有你爱看的，那就看。不爱看的，别浪费生命。
×
你爱看的书，就是你该看的书。书海浩瀚，总有你爱看的，那就看。不爱看的，别浪费生命。
✓
你们催了很多遍的配色
复制颜色值代码，导入到你们秀米账号的调色板就可以啦~
具体如何导入颜色，看这篇教程，点右边蓝色字：《“话不多说，看上了你的色板！”》
红 50
#FFEBEE
100
#FFCDD2
200
#EF9A9A
300
#E57373
400
#EF5350
500
#F44336
600
#E53935
700
#D32F2F
800
#C62828
900
#B71C1C
A100
#FF8A80
A200
#FF5252
A400
#FF1744
A700
#D50000
#FFEBEE;#FFCDD2;#EF9A9A;#E57373;#EF5350;#F44336;#E53935;#D32F2F;#C62828;#B71C1C;#FF8A80;#FF5252;#FF1744;#D50000
粉红 50
#FCE4EC
100
#F8BBD0
200
#F48FB1
300
#F06292
400
#EC407A
500
#E91E63
600
#D81B60
700
#C2185B
800
#AD1457
900
#880E4F
A100
#FF80AB
A200
#FF4081
A400
#F50057
A700
#C51162
#FCE4EC;#F8BBD0;#F48FB1;#F06292;#EC407A;#E91E63;#D81B60;#C2185B;#AD1457;#880E4F;#FF80AB;#FF4081;#F50057;#C51162
紫 50
#F3E5F5
100
#E1BEE7
200
#CE93D8
300
#BA68C8
400
#AB47BC
500
#9C27B0
600
#8E24AA
700
#7B1FA2
800
#6A1B9A
900
#4A148C
A100
#EA80FC
A200
#E040FB
A400
#D500F9
A700
#AA00FF
#F3E5F5;#E1BEE7;#CE93D8;#BA68C8;#AB47BC;#9C27B0;#8E24AA;#7B1FA2;#6A1B9A;#4A148C;#EA80FC;#E040FB;#D500F9;#AA00FF
深紫 50
#EDE7F6
100
#D1C4E9
200
#B39DDB
300
#9575CD
400
#7E57C2
500
#673AB7
600
#5E35B1
700
#512DA8
800
#4527A0
900
#311B92
A100
#B388FF
A200
#7C4DFF
A400
#651FFF
A700
#6200EA
#EDE7F6;#D1C4E9;#B39DDB;#9575CD;#7E57C2;#673AB7;#5E35B1;#512DA8;#4527A0;#311B92;#B388FF;#7C4DFF;#651FFF;#6200EA
靛青 50
#E8EAF6
100
#C5CAE9
200
#9FA8DA
300
#7986CB
400
#5C6BC0
500
#3F51B5
600
#3949AB
700
#303F9F
800
#283593
900
#1A237E
A100
#8C9EFF
A200
#536DFE
A400
#3D5AFE
A700
#304FFE
#E8EAF6;#C5CAE9;#9FA8DA;#7986CB;#5C6BC0;#3F51B5;#3949AB;#303F9F;#283593;#1A237E;#8C9EFF;#536DFE;#3D5AFE;#304FFE
蓝 50
#E3F2FD
100
#BBDEFB
200
#90CAF9
300
#64B5F6
400
#42A5F5
500
#2196F3
600
#1E88E5
700
#1976D2
800
#1565C0
900
#0D47A1
A100
#82B1FF
A200
#448AFF
A400
#2979FF
A700
#2962FF
#E3F2FD;#BBDEFB;#90CAF9;#64B5F6;#42A5F5;#2196F3;#1E88E5;#1976D2;#1565C0;#0D47A1;#82B1FF;#448AFF;#2979FF;#2962FF
浅蓝 50
#E1F5FE
100
#B3E5FC
200
#81D4FA
300
#4FC3F7
400
#29B6F6
500
#03A9F4
600
#039BE5
700
#0288D1
800
#0277BD
900
#01579B
A100
#80D8FF
A200
#40C4FF
A400
#00B0FF
A700
#0091EA
#E1F5FE;#B3E5FC;#81D4FA;#4FC3F7;#29B6F6;#03A9F4;#039BE5;#0288D1;#0277BD;#01579B;#80D8FF;#40C4FF;#00B0FF;#0091EA
青 50
#E0F7FA
100
#B2EBF2
200
#80DEEA
300
#4DD0E1
400
#26C6DA
500
#00BCD4
600
#00ACC1
700
#0097A7
800
#00838F
900
#006064
A100
#84FFFF
A200
#18FFFF
A400
#00E5FF
A700
#00B8D4
#E0F7FA;#B2EBF2;#80DEEA;#4DD0E1;#26C6DA;#00BCD4;#00ACC1;#0097A7;#00838F;#006064;#84FFFF;#18FFFF;#00E5FF;#00B8D4
水鸭绿 50
#E0F2F1
100
#B2DFDB
200
#80CBC4
300
#4DB6AC
400
#26A69A
500
#009688
600
#00897B
700
#00796B
800
#00695C
900
#004D40
A100
#A7FFEB
A200
#64FFDA
A400
#1DE9B6
A700
#00BFA5
#E0F2F1;#B2DFDB;#80CBC4;#4DB6AC;#26A69A;#009688;#00897B;#00796B;#00695C;#004D40;#A7FFEB;#64FFDA;#1DE9B6;#00BFA5
绿 50
#E8F5E9
100
#C8E6C9
200
#A5D6A7
300
#81C784
400
#66BB6A
500
#4CAF50
600
#43A047
700
#388E3C
800
#2E7D32
900
#1B5E20
A100
#B9F6CA
A200
#69F0AE
A400
#00E676
A700
#00C853
#E8F5E9;#C8E6C9;#A5D6A7;#81C784;#66BB6A;#4CAF50;#43A047;#388E3C;#2E7D32;#1B5E20;#B9F6CA;#69F0AE;#00E676;#00C853
浅绿 50
#F1F8E9
100
#C8E6C9
200
#C5E1A5
300
#AED581
400
#9CCC65
500
#8BC34A
600
#7CB342
700
#689F38
800
#558B2F
900
#33691E
A100
#CCFF90
A200
#B2FF59
A400
#76FF03
A700
#64DD17
#F1F8E9;#DCEDC8;#C5E1A5;#AED581;#9CCC65;#8BC34A;#7CB342;#689F38;#558B2F;#33691E;#CCFF90;#B2FF59;#76FF03;#64DD17
青柠绿 50
#F9FBE7
100
#F0F4C3
200
#E6EE9C
300
#DCE775
400
#D4E157
500
#CDDC39
600
#C0CA33
700
#AFB42B
800
#9E9D24
900
#827717
A100
#F4FF81
A200
#EEFF41
A400
#C6FF00
A700
#AEEA00
#F9FBE7;#F0F4C3;#E6EE9C;#DCE775;#D4E157;#CDDC39;#C0CA33;#AFB42B;#9E9D24;#827717;#F4FF81;#EEFF41;#C6FF00;#AEEA00
黄 50
#FFFDE7
100
#FFF9C4
200
#FFF59D
300
#FFF176
400
#FFEE58
500
#FFEB3B
600
#FDD835
700
#FBC02D
800
#F9A825
900
#F57F17
A100
#FFFF8D
A200
#FFFF00
A400
#FFEA00
A700
#FFD600
#FFFDE7;#FFF9C4;#FFF59D;#FFF176;#FFEE58;#FFEB3B;#FDD835;#FBC02D;#F9A825;#F57F17;#FFFF8D;#FFFF00;#FFEA00;#FFD600
琥珀 50
#FFF8E1
100
#FFECB3
200
#FFE082
300
#FFD54F
400
#FFCA28
500
#FFC107
600
#FFB300
700
#FFA000
800
#FF8F00
900
#FF6F00
A100
#FFE57F
A200
#FFD740
A400
#FFC400
A700
#FFAB00
#FFF8E1;#FFECB3;#FFE082;#FFD54F;#FFCA28;#FFC107;#FFB300;#FFA000;#FF8F00;#FF6F00;#FFE57F;#FFD740;#FFC400;#FFAB00
橙 50
#FFF3E0
100
#FFE0B2
200
#FFCC80
300
#FFB74D
400
#FFA726
500
#FF9800
600
#FB8C00
700
#F57C00
800
#EF6C00
900
#E65100
A100
#FFD180
A200
#FFAB40
A400
#FF9100
A700
#FF6D00
#FFF3E0;#FFE0B2;#FFCC80;#FFB74D;#FFA726;#FF9800;#FB8C00;#F57C00;#EF6C00;#E65100;#FFD180;#FFAB40;#FF9100;#FF6D00
橙红 50
#FBE9E7
100
#FFCCBC
200
#FFAB91
300
#FF8A65
400
#FF7043
500
#FF5722
600
#F4511E
700
#E64A19
800
#D84315
900
#BF360C
A100
#FF9E80
A200
#FF6E40
A400
#FF3D00
A700
#DD2C00
#FBE9E7;#FFCCBC;#FFAB91;#FF8A65;#FF7043;#FF5722;#F4511E;#E64A19;#D84315;#BF360C;#FF9E80;#FF6E40;#FF3D00;#DD2C00
灰 50
#FAFAFA
100
#F5F5F5
200
#EEEEEE
300
#E0E0E0
400
#BDBDBD
500
#9E9E9E
600
#757575
700
#616161
800
#424242
900
#212121
黑
#000000
白
#FFFFFF
#FAFAFA;#F5F5F5;#EEEEEE;#E0E0E0;#BDBDBD;#9E9E9E;#757575;#616161;#424242;#212121;#000000;#FFFFFF
棕 50
#EFEBE9
100
#D7CCC8
200
#BCAAA4
300
#A1887F
400
#8D6E63
500
#795548
600
#6D4C41
700
#5D4037
800
#4E342E
900
#3E2723
#EFEBE9;#D7CCC8;#BCAAA4;#A1887F;#8D6E63;#795548;#6D4C41;#5D4037;#4E342E;#3E2723
蓝灰 50
#ECEFF1
100
#CFD8DC
200
#B0BEC5
300
#90A4AE
400
#78909C
500
#607D8B
600
#546E7A
700
#455A64
800
#37474F
900
#263238
#ECEFF1;#CFD8DC;#B0BEC5;#90A4AE;#78909C;#607D8B;#546E7A;#455A64;#37474F;#263238;
更多阅读
☚☚☚ 向左滑动
秀米有那么多骚技能
不来学几招？
长按扫码关注我们
