Web boje materijalnog dizajna
Materijalni dizajn (engl. material design) obuhvaća paletu boja koji je razvio Google s gotovo ravnim stilom i životopisnim shemama boja.
Boje u materijalnom dizajnu nadahnute su hrabrim nijansama, u kombinaciji s prigušenim okruženjem, dubokim sjenama i svijetlim bojama.
Ova paleta boja sastoji se od primarnih i naglašenih boja koje se mogu koristiti i u web dizajnu. Osmišljene su za uporabu međusobno skladnih boja.
Paleta boja počinje primarnim bojama i ispunjava spektar koji stvora potpunu i upotrebljivu paletu boja za Android, Web i iOS. Google predlaže izbor nekih od 500 predloženih boja, koje možete koristiti kao primarne boje u vašoj aplikaciji, a ostale boje možete koristiti kao boje za naglašavanje.
Time je omogućen dosljedan stil pojedine aplikacije kroz površinske nijanse, dubinu sjene i neprozirnost boja.
Kôdovi 'red' boja
|
HEX |
RGB |
HSL |
|
#FFEBEE |
255, 235, 238 |
351, 100%, 96% |
|
#FFCDD2 |
255, 205, 210 |
354, 100%, 90% |
|
#EF9A9A |
239, 154, 154 |
0, 73%, 77% |
|
#E57373 |
229, 115, 115 |
0, 69%, 67% |
|
#EF5350 |
239, 83, 80 |
1, 83%, 63% |
|
#F44336 |
244, 67, 54 |
4, 90%, 58% |
|
#E53935 |
229, 57, 53 |
1, 77%, 55% |
|
#D32F2F |
211, 47, 47 |
0, 65%, 51% |
|
#C62828 |
198, 40, 40 |
0, 66%, 47% |
|
#B71C1C |
183, 28, 28 |
0, 73%, 41% |
|
#FF8A80 |
255, 138, 128 |
5, 100%, 75% |
|
#FF5252 |
255, 82, 82 |
0, 100%, 66% |
|
#FF1744 |
255, 23, 68 |
348, 100%, 55% |
|
#D50000 |
213, 0, 0 |
0, 100%, 42% |
Kôdovi 'pink' boja
|
HEX |
RGB |
HSL |
|
#FCE4EC |
252, 228, 236 |
340, 80%, 94% |
|
#F8BBD0 |
248, 187, 208 |
339, 81%, 85% |
|
#F48FB1 |
244, 143, 177 |
340, 82%, 76% |
|
#F06292 |
240, 98, 146 |
340, 83%, 66% |
|
#EC407A |
236, 64, 122 |
340, 82%, 59% |
|
#E91E63 |
233, 30, 99 |
340, 82%, 52% |
|
#D81B60 |
216, 27, 96 |
338, 78%, 48% |
|
#C2185B |
194, 24, 91 |
336, 78%, 43% |
|
#AD1457 |
173, 20, 87 |
334, 79%, 38% |
|
#880E4F |
136, 14, 79 |
328, 81%, 29% |
|
#FF80AB |
255, 128, 171 |
340, 100%, 75% |
|
#FF4081 |
255, 64, 129 |
340, 100%, 63% |
|
#F50057 |
245, 0, 87 |
339, 100%, 48% |
|
#C51162 |
197, 17, 98 |
333, 84%, 42% |
Kôdovi 'purple' boja
|
HEX |
RGB |
HSL |
|
#F3E5F5 |
243, 229, 245 |
292, 44%, 93% |
|
#E1BEE7 |
225, 190, 231 |
291, 46%, 83% |
|
#CE93D8 |
206, 147, 216 |
291, 47%, 71% |
|
#BA68C8 |
186, 104, 200 |
291, 47%, 60% |
|
#AB47BC |
171, 71, 188 |
291, 47%, 51% |
|
#9C27B0 |
156, 39, 176 |
291, 64%, 42% |
|
#8E24AA |
142, 36, 170 |
287, 65%, 40% |
|
#7B1FA2 |
123, 31, 162 |
282, 68%, 38% |
|
#6A1B9A |
106, 27, 154 |
277, 70%, 35% |
|
#4A148C |
74, 20, 140 |
267, 75%, 31% |
|
#EA80FC |
234, 128, 252 |
291, 95%, 75% |
|
#E040FB |
224, 64, 251 |
291, 96%, 62% |
|
#D500F9 |
213, 0, 249 |
291, 100%, 49% |
|
#AA00FF |
170, 0, 255 |
280, 100%, 50% |
Kôdovi 'deep purple' boja
|
HEX |
RGB |
HSL |
|
#EDE7F6 |
237, 231, 246 |
264, 45%, 94% |
|
#D1C4E9 |
209, 196, 233 |
261, 46%, 84% |
|
#B39DDB |
179, 157, 219 |
261, 46%, 74% |
|
#9575CD |
149, 117, 205 |
262, 47%, 63% |
|
#7E57C2 |
126, 87, 194 |
262, 47%, 55% |
|
#673AB7 |
103, 58, 183 |
262, 52%, 47% |
|
#5E35B1 |
94, 53, 177 |
260, 54%, 45% |
|
#512DA8 |
81, 45, 168 |
258, 58%, 42% |
|
#4527A0 |
69, 39, 160 |
255, 61%, 39% |
|
#311B92 |
49, 27, 146 |
251, 69%, 34% |
|
#B388FF |
179, 136, 255 |
262, 100%, 77% |
|
#7C4DFF |
124, 77, 255 |
256, 100%, 65% |
|
#651FFF |
101, 31, 255 |
259, 100%, 56% |
|
#6200EA |
98, 0, 234 |
265, 100%, 46% |
Kôdovi 'indigo' boja
|
HEX |
RGB |
HSL |
|
#E8EAF6 |
232, 234, 246 |
231, 44%, 94% |
|
#C5CAE9 |
197, 202, 233 |
232, 45%, 84% |
|
#9FA8DA |
159, 168, 218 |
231, 44%, 74% |
|
#7986CB |
121, 134, 203 |
230, 44%, 64% |
|
#5C6BC0 |
92, 107, 192 |
231, 44%, 56% |
|
#3F51B5 |
63, 81, 181 |
231, 48%, 48% |
|
#3949AB |
57, 73, 171 |
232, 50%, 45% |
|
#303F9F |
48, 63, 159 |
232, 54%, 41% |
|
#283593 |
40, 53, 147 |
233, 57%, 37% |
|
#1A237E |
26, 35, 126 |
235, 66%, 30% |
|
#8C9EFF |
140, 158, 255 |
231, 100%, 77% |
|
#536DFE |
83, 109, 254 |
231, 99%, 66% |
|
#3D5AFE |
61, 90, 254 |
231, 99%, 62% |
|
#304FFE |
48, 79, 254 |
231, 99%, 59% |
Kôdovi 'blue' boja
|
HEX |
RGB |
HSL |
|
#E3F2FD |
227, 242, 253 |
205, 87%, 94% |
|
#BBDEFB |
187, 222, 251 |
207, 89%, 86% |
|
#90CAF9 |
144, 202, 249 |
207, 90%, 77% |
|
#64B5F6 |
100, 181, 246 |
207, 89%, 68% |
|
#42A5F5 |
66, 165, 245 |
207, 90%, 61% |
|
#2196F3 |
33, 150, 243 |
207, 90%, 54% |
|
#1E88E5 |
30, 136, 229 |
208, 79%, 51% |
|
#1976D2 |
25, 118, 210 |
210, 79%, 46% |
|
#1565C0 |
21, 101, 192 |
212, 80%, 42% |
|
#0D47A1 |
13, 71, 161 |
216, 85%, 34% |
|
#82B1FF |
130, 177, 255 |
217, 100%, 75% |
|
#448AFF |
68, 138, 255 |
218, 100%, 63% |
|
#2979FF |
41, 121, 255 |
218, 100%, 58% |
|
#2962FF |
41, 98, 255 |
224, 100%, 58% |
Kôdovi 'light blue' boja
|
HEX |
RGB |
HSL |
|
#E1F5FE |
225, 245, 254 |
199, 94%, 94% |
|
#B3E5FC |
179, 229, 252 |
199, 92%, 85% |
|
#81D4FA |
129, 212, 250 |
199, 92%, 74% |
|
#4FC3F7 |
79, 195, 247 |
199, 91%, 64% |
|
#29B6F6 |
41, 182, 246 |
199, 92%, 56% |
|
#03A9F4 |
3, 169, 244 |
199, 98%, 48% |
|
#039BE5 |
3, 155, 229 |
200, 97%, 45% |
|
#0288D1 |
2, 136, 209 |
201, 98%, 41% |
|
#0277BD |
2, 119, 189 |
202, 98%, 37% |
|
#01579B |
1, 87, 155 |
206, 99%, 31% |
|
#80D8FF |
128, 216, 255 |
198, 100%, 75% |
|
#40C4FF |
64, 196, 255 |
199, 100%, 63% |
|
#00B0FF |
0, 176, 255 |
199, 100%, 50% |
|
#0091EA |
0, 145, 234 |
203, 100%, 46% |
Kôdovi 'cyan' boja
|
HEX |
RGB |
HSL |
|
#E0F7FA |
224, 247, 250 |
187, 72%, 93% |
|
#B2EBF2 |
178, 235, 242 |
187, 71%, 82% |
|
#80DEEA |
128, 222, 234 |
187, 72%, 71% |
|
#4DD0E1 |
77, 208, 225 |
187, 71%, 59% |
|
#26C6DA |
38, 198, 218 |
187, 71%, 50% |
|
#00BCD4 |
0, 188, 212 |
187, 100%, 42% |
|
#00ACC1 |
0, 172, 193 |
187, 100%, 38% |
|
#0097A7 |
0, 151, 167 |
186, 100%, 33% |
|
#00838F |
0, 131, 143 |
185, 100%, 28% |
|
#006064 |
0, 96, 100 |
182, 100%, 20% |
|
#84FFFF |
132, 255, 255 |
180, 100%, 76% |
|
#18FFFF |
24, 255, 255 |
180, 100%, 55% |
|
#00E5FF |
0, 229, 255 |
186, 100%, 50% |
|
#00B8D4 |
0, 184, 212 |
188, 100%, 42% |
Kôdovi 'teal' boja
|
HEX |
RGB |
HSL |
|
#E0F2F1 |
224, 242, 241 |
177, 41%, 91% |
|
#B2DFDB |
178, 223, 219 |
175, 41%, 79% |
|
#80CBC4 |
128, 203, 196 |
174, 42%, 65% |
|
#4DB6AC |
77, 182, 172 |
174, 42%, 51% |
|
#26A69A |
38, 166, 154 |
174, 63%, 40% |
|
#009688 |
0, 150, 136 |
174, 100%, 29% |
|
#00897B |
0, 137, 123 |
174, 100%, 27% |
|
#00796B |
0, 121, 107 |
173, 100%, 24% |
|
#00695C |
0, 105, 92 |
173, 100%, 21% |
|
#004D40 |
0, 77, 64 |
170, 100%, 15% |
|
#A7FFEB |
167, 255, 235 |
166, 100%, 83% |
|
#64FFDA |
100, 255, 218 |
166, 100%, 70% |
|
#1DE9B6 |
29, 233, 182 |
165, 82%, 51% |
|
#00BFA5 |
0, 191, 165 |
172, 100%, 37% |
Kôdovi 'green' boja
|
HEX |
RGB |
HSL |
|
#E8F5E9 |
232, 245, 233 |
125, 39%, 94% |
|
#C8E6C9 |
200, 230, 201 |
122, 38%, 84% |
|
#A5D6A7 |
165, 214, 167 |
122, 37%, 74% |
|
#81C784 |
129, 199, 132 |
123, 38%, 64% |
|
#66BB6A |
102, 187, 106 |
123, 38%, 57% |
|
#4CAF50 |
76, 175, 80 |
122, 39%, 49% |
|
#43A047 |
67, 160, 71 |
123, 41%, 45% |
|
#388E3C |
56, 142, 60 |
123, 43%, 39% |
|
#2E7D32 |
46, 125, 50 |
123, 46%, 34% |
|
#1B5E20 |
27, 94, 32 |
124, 55%, 24% |
|
#B9F6CA |
185, 246, 202 |
137, 77%, 85% |
|
#69F0AE |
105, 240, 174 |
151, 82%, 68% |
|
#00E676 |
0, 230, 118 |
151, 100%, 45% |
|
#00C853 |
0, 200, 83 |
145, 100%, 39% |
Kôdovi 'light green' boja
|
HEX |
RGB |
HSL |
|
#F1F8E9 |
241, 248, 233 |
88, 52%, 94% |
|
#DCEDC8 |
220, 237, 200 |
88, 51%, 86% |
|
#C5E1A5 |
197, 225, 165 |
88, 50%, 76% |
|
#AED581 |
174, 213, 129 |
88, 50%, 67% |
|
#9CCC65 |
156, 204, 101 |
88, 50%, 60% |
|
#8BC34A |
139, 195, 74 |
88, 50%, 53% |
|
#7CB342 |
124, 179, 66 |
89, 46%, 48% |
|
#689F38 |
104, 159, 56 |
92, 48%, 42% |
|
#558B2F |
85, 139, 47 |
95, 49%, 36% |
|
#33691E |
51, 105, 30 |
103, 56%, 26% |
|
#CCFF90 |
204, 255, 144 |
88, 100%, 78% |
|
#B2FF59 |
178, 255, 89 |
88, 100%, 67% |
|
#76FF03 |
118, 255, 3 |
93, 100%, 51% |
|
#64DD17 |
100, 221, 23 |
97, 81%, 48% |
Kôdovi 'lime' boja
|
HEX |
RGB |
HSL |
|
#F9FBE7 |
249, 251, 231 |
66, 71%, 95% |
|
#F0F4C3 |
240, 244, 195 |
65, 69%, 86% |
|
#E6EE9C |
230, 238, 156 |
66, 71%, 77% |
|
#DCE775 |
220, 231, 117 |
66, 70%, 68% |
|
#D4E157 |
212, 225, 87 |
66, 70%, 61% |
|
#CDDC39 |
205, 220, 57 |
66, 70%, 54% |
|
#C0CA33 |
192, 202, 51 |
64, 60%, 50% |
|
#AFB42B |
175, 180, 43 |
62, 61%, 44% |
|
#9E9D24 |
158, 157, 36 |
60, 63%, 38% |
|
#827717 |
130, 119, 23 |
54, 70%, 30% |
|
#F4FF81 |
244, 255, 129 |
65, 100%, 75% |
|
#EEFF41 |
238, 255, 65 |
65, 100%, 63% |
|
#C6FF00 |
198, 255, 0 |
73, 100%, 50% |
|
#AEEA00 |
174, 234, 0 |
75, 100%, 46% |
Kôdovi 'yellow' boja
|
HEX |
RGB |
HSL |
|
#FFFDE7 |
255, 253, 231 |
55, 100%, 95% |
|
#FFF9C4 |
255, 249, 196 |
54, 100%, 88% |
|
#FFF59D |
255, 245, 157 |
54, 100%, 81% |
|
#FFF176 |
255, 241, 118 |
54, 100%, 73% |
|
#FFEE58 |
255, 238, 88 |
54, 100%, 67% |
|
#FFEB3B |
255, 235, 59 |
54, 100%, 62% |
|
#FDD835 |
253, 216, 53 |
49, 98%, 60% |
|
#FBC02D |
251, 192, 45 |
43, 96%, 58% |
|
#F9A825 |
249, 168, 37 |
37, 95%, 56% |
|
#F57F17 |
245, 127, 23 |
28, 92%, 53% |
|
#FFFF8D |
255, 255, 141 |
60, 100%, 78% |
|
#FFFF00 |
255, 255, 0 |
60, 100%, 50% |
|
#FFEA00 |
255, 234, 0 |
55, 100%, 50% |
|
#FFD600 |
255, 214, 0 |
50, 100%, 50% |
Kôdovi 'amber' boja
|
HEX |
RGB |
HSL |
|
#FFF8E1 |
255, 248, 225 |
46, 100%, 94% |
|
#FFECB3 |
255, 236, 179 |
45, 100%, 85% |
|
#FFE082 |
255, 224, 130 |
45, 100%, 75% |
|
#FFD54F |
255, 213, 79 |
46, 100%, 65% |
|
#FFCA28 |
255, 202, 40 |
45, 100%, 58% |
|
#FFC107 |
255, 193, 7 |
45, 100%, 51% |
|
#FFB300 |
255, 179, 0 |
42, 100%, 50% |
|
#FFA000 |
255, 160, 0 |
38, 100%, 50% |
|
#FF8F00 |
255, 143, 0 |
34, 100%, 50% |
|
#FF6F00 |
255, 111, 0 |
26, 100%, 50% |
|
#FFE57F |
255, 229, 127 |
48, 100%, 75% |
|
#FFD740 |
255, 215, 64 |
47, 100%, 63% |
|
#FFC400 |
255, 196, 0 |
46, 100%, 50% |
|
#FFAB00 |
255, 171, 0 |
40, 100%, 50% |
Kôdovi 'orange' boja
|
HEX |
RGB |
HSL |
|
#FFF3E0 |
255, 243, 224 |
37, 100%, 94% |
|
#FFE0B2 |
255, 224, 178 |
36, 100%, 85% |
|
#FFCC80 |
255, 204, 128 |
36, 100%, 75% |
|
#FFB74D |
255, 183, 77 |
36, 100%, 65% |
|
#FFA726 |
255, 167, 38 |
36, 100%, 57% |
|
#FF9800 |
255, 152, 0 |
36, 100%, 50% |
|
#FB8C00 |
251, 140, 0 |
33, 100%, 49% |
|
#F57C00 |
245, 124, 0 |
30, 100%, 48% |
|
#EF6C00 |
239, 108, 0 |
27, 100%, 47% |
|
#E65100 |
230, 81, 0 |
21, 100%, 45% |
|
#FFD180 |
255, 209, 128 |
38, 100%, 75% |
|
#FFAB40 |
255, 171, 64 |
34, 100%, 63% |
|
#FF9100 |
255, 145, 0 |
34, 100%, 50% |
|
#FF6D00 |
255, 109, 0 |
26, 100%, 50% |
Kôdovi 'deep orange' boja
|
HEX |
RGB |
HSL |
|
#FBE9E7 |
251, 233, 231 |
6, 71%, 95% |
|
#FFCCBC |
255, 204, 188 |
14, 100%, 87% |
|
#FFAB91 |
255, 171, 145 |
14, 100%, 78% |
|
#FF8A65 |
255, 138, 101 |
14, 100%, 70% |
|
#FF7043 |
255, 112, 67 |
14, 100%, 63% |
|
#FF5722 |
255, 87, 34 |
14, 100%, 57% |
|
#F4511E |
244, 81, 30 |
14, 91%, 54% |
|
#E64A19 |
230, 74, 25 |
14, 80%, 50% |
|
#D84315 |
216, 67, 21 |
14, 82%, 46% |
|
#BF360C |
191, 54, 12 |
14, 88%, 40% |
|
#FF9E80 |
255, 158, 128 |
14, 100%, 75% |
|
#FF6E40 |
255, 110, 64 |
14, 100%, 63% |
|
#FF3D00 |
255, 61, 0 |
14, 100%, 50% |
|
#DD2C00 |
221, 44, 0 |
12, 100%, 43% |
Kôdovi 'brown' boja
|
HEX |
RGB |
HSL |
|
#EFEBE9 |
239, 235, 233 |
20, 16%, 93% |
|
#D7CCC8 |
215, 204, 200 |
16, 16%, 81% |
|
#BCAAA4 |
188, 170, 164 |
15, 15%, 69% |
|
#A1887F |
161, 136, 127 |
16, 15%, 56% |
|
#8D6E63 |
141, 110, 99 |
16, 18%, 47% |
|
#795548 |
121, 85, 72 |
16, 25%, 38% |
|
#6D4C41 |
109, 76, 65 |
15, 25%, 34% |
|
#5D4037 |
93, 64, 55 |
14, 26%, 29% |
|
#4E342E |
78, 52, 46 |
11, 26%, 24% |
|
#3E2723 |
62, 39, 35 |
9, 28%, 19% |
Kôdovi 'grey' boja
|
HEX |
RGB |
HSL |
|
#FAFAFA |
250, 250, 250 |
0, 0%, 98% |
|
#F5F5F5 |
245, 245, 245 |
0, 0%, 96% |
|
#EEEEEE |
238, 238, 238 |
0, 0%, 93% |
|
#E0E0E0 |
224, 224, 224 |
0, 0%, 88% |
|
#BDBDBD |
189, 189, 189 |
0, 0%, 74% |
|
#9E9E9E |
158, 158, 158 |
0, 0%, 62% |
|
#757575 |
117, 117, 117 |
0, 0%, 46% |
|
#616161 |
97, 97, 97 |
0, 0%, 38% |
|
#424242 |
66, 66, 66 |
0, 0%, 26% |
|
#212121 |
33, 33, 33 |
0, 0%, 13% |
Kôdovi 'blue grey' boja
|
HEX |
RGB |
HSL |
|
#ECEFF1 |
236, 239, 241 |
204, 15%, 94% |
|
#CFD8DC |
207, 216, 220 |
198, 16%, 84% |
|
#B0BEC5 |
176, 190, 197 |
200, 15%, 73% |
|
#90A4AE |
144, 164, 174 |
200, 16%, 62% |
|
#78909C |
120, 144, 156 |
200, 15%, 54% |
|
#607D8B |
96, 125, 139 |
200, 18%, 46% |
|
#546E7A |
84, 110, 122 |
199, 18%, 40% |
|
#455A64 |
69, 90, 100 |
199, 18%, 33% |
|
#37474F |
55, 71, 79 |
200, 18%, 26% |
|
#263238 |
38, 50, 56 |
200, 19%, 18% |
Kôdovi 'white' i 'black' boje
|
HEX |
RGB |
HSL |
|
#FFFFFF |
255, 255, 255 |
0, 0%, 100% |
|
#000000 |
0, 0, 0 |
0, 0%, 0% |
Možda će vas zanimati?
