Boje ravnog dizajna (engl. flat design)
Ravni dizajn ili ravne boje korisničkog sučelja prilično su popularne u današnjem web dizajnu, tamo gdje se želi koristiti hrabre, svijetle boje za stvaranje čistih, jednostavnih sučelja.
Kada je riječ o bojama i ravnom dizajnu, mnoga tradicionalna pravila o uparivanju i usklađivanju boja izbačena su iz uporabe u korist paleta koje se protežu kroz cijeli spektar s puno nijansi.
Kod ravnog dizajna boje se međusobno podudaraju u tonovima i zasićenosti. Dizajneri mogu odlučiti koristiti više nijansi, koje često odražavaju koliko je duboka boja, radi li se više o primarnoj ili sekundarnoj kombinaciji boja ili onih iz drugog dijela kotača boja i sadrže li one više crnih ili bijelih nijansi.
Još jedna stvar koja čini ravni dizajn drugačijim, u smislu boja. Dizajneri proširuju palete sa samo jedne ili dvije nijanse na tri, četiri ili više boja. Većina od njih su svijetle, potpuno zasićene boje koje se ponekad suprotstavljaju nijansama sivih ili crnih boja.
Kôdovi 'pomegranate' boja
|
HEX |
RGB |
HSL |
|
#F9EBEA |
249, 235, 234 |
4, 56%, 95% |
|
#F2D7D5 |
242, 215, 213 |
4, 53%, 89% |
|
#E6B0AA |
230, 176, 170 |
6, 55%, 78% |
|
#D98880 |
217, 136, 128 |
5, 54%, 68% |
|
#CD6155 |
205, 97, 85 |
6, 55%, 57% |
|
#C0392B |
192, 57, 43 |
6, 63%, 46% |
|
#A93226 |
169, 50, 38 |
5, 63%, 41% |
|
#922B21 |
146, 43, 33 |
5, 63%, 35% |
|
#7B241C |
123, 36, 28 |
5, 63%, 30% |
|
#641E16 |
100, 30, 22 |
6, 64%, 24% |
Kôdovi 'alizarin' boja
|
HEX |
RGB |
HSL |
|
#FDEDEC |
253, 237, 236 |
4, 81%, 96% |
|
#FADBD8 |
250, 219, 216 |
5, 77%, 91% |
|
#F5B7B1 |
245, 183, 177 |
5, 77%, 83% |
|
#F1948A |
241, 148, 138 |
6, 79%, 74% |
|
#EC7063 |
236, 112, 99 |
6, 78%, 66% |
|
#E74C3C |
231, 76, 60 |
6, 78%, 57% |
|
#CB4335 |
203, 67, 53 |
6, 59%, 50% |
|
#B03A2E |
176, 58, 46 |
6, 59%, 44% |
|
#943126 |
148, 49, 38 |
6, 59%, 36% |
|
#78281F |
120, 40, 31 |
6, 59%, 30% |
Kôdovi 'amethyst' boja
|
HEX |
RGB |
HSL |
|
#F5EEF8 |
245, 238, 248 |
282, 42%, 95% |
|
#EBDEF0 |
235, 222, 240 |
283, 37%, 91% |
|
#D7BDE2 |
215, 189, 226 |
282, 39%, 81% |
|
#C39BD3 |
195, 155, 211 |
283, 39%, 72% |
|
#AF7AC5 |
175, 122, 197 |
282, 39%, 63% |
|
#9B59B6 |
155, 89, 182 |
283, 39%, 53% |
|
#884EA0 |
136, 78, 160 |
282, 34%, 47% |
|
#76448A |
118, 68, 138 |
283, 34%, 40% |
|
#633974 |
99, 57, 116 |
283, 34%, 34% |
|
#512E5F |
81, 46, 95 |
283, 35%, 28% |
Kôdovi 'wisteria' boja
|
HEX |
RGB |
HSL |
|
#F4ECF7 |
244, 236, 247 |
284, 41%, 95% |
|
#E8DAEF |
232, 218, 239 |
280, 40%, 90% |
|
#D2B4DE |
210, 180, 222 |
283, 39%, 79% |
|
#BB8FCE |
187, 143, 206 |
282, 39%, 68% |
|
#A569BD |
165, 105, 189 |
283, 39%, 58% |
|
#8E44AD |
142, 68, 173 |
282, 44%, 47% |
|
#7D3C98 |
125, 60, 152 |
282, 43%, 42% |
|
#6C3483 |
108, 52, 131 |
283, 43%, 36% |
|
#5B2C6F |
91, 44, 111 |
282, 43%, 30% |
|
#4A235A |
74, 35, 90 |
283, 44%, 25% |
Kôdovi 'belize hole' boja
|
HEX |
RGB |
HSL |
|
#EAF2F8 |
234, 242, 248 |
206, 50%, 95% |
|
#D4E6F1 |
212, 230, 241 |
203, 51%, 89% |
|
#A9CCE3 |
169, 204, 227 |
204, 51%, 78% |
|
#7FB3D5 |
127, 179, 213 |
204, 51%, 67% |
|
#5499C7 |
84, 153, 199 |
204, 51%, 55% |
|
#2980B9 |
41, 128, 185 |
204, 64%, 44% |
|
#2471A3 |
36, 113, 163 |
204, 64%, 39% |
|
#1F618D |
31, 97, 141 |
204, 64%, 34% |
|
#1A5276 |
26, 82, 118 |
203, 64%, 28% |
|
#154360 |
21, 67, 96 |
203, 64%, 23% |
Kôdovi 'peter river' boja
|
HEX |
RGB |
HSL |
|
#EBF5FB |
235, 245, 251 |
202, 67%, 95% |
|
#D6EAF8 |
214, 234, 248 |
205, 71%, 91% |
|
#AED6F1 |
174, 214, 241 |
204, 71%, 81% |
|
#85C1E9 |
133, 193, 233 |
204, 69%, 72% |
|
#5DADE2 |
93, 173, 226 |
204, 70%, 63% |
|
#3498DB |
52, 152, 219 |
204, 70%, 53% |
|
#2E86C1 |
46, 134, 193 |
204, 62%, 47% |
|
#2874A6 |
40, 116, 166 |
204, 61%, 40% |
|
#21618C |
33, 97, 140 |
204, 62%, 34% |
|
#1B4F72 |
27, 79, 114 |
204, 62%, 28% |
Kôdovi 'turquois' boja
|
HEX |
RGB |
HSL |
|
#E8F8F5 |
232, 248, 245 |
169, 53%, 94% |
|
#D1F2EB |
209, 242, 235 |
167, 56%, 88% |
|
#A3E4D7 |
163, 228, 215 |
168, 55%, 77% |
|
#76D7C4 |
118, 215, 196 |
168, 55%, 65% |
|
#48C9B0 |
72, 201, 176 |
168, 54%, 54% |
|
#1ABC9C |
26, 188, 156 |
168, 76%, 42% |
|
#17A589 |
23, 165, 137 |
168, 76%, 37% |
|
#148F77 |
20, 143, 119 |
168, 75%, 32% |
|
#117864 |
17, 120, 100 |
168, 75%, 27% |
|
#0E6251 |
14, 98, 81 |
168, 75%, 22% |
Kôdovi 'green sea' boja
|
HEX |
RGB |
HSL |
|
#E8F6F3 |
232, 246, 243 |
167, 44%, 94% |
|
#D0ECE7 |
208, 236, 231 |
169, 42%, 87% |
|
#A2D9CE |
162, 217, 206 |
168, 42%, 74% |
|
#73C6B6 |
115, 198, 182 |
168, 42%, 61% |
|
#45B39D |
69, 179, 157 |
168, 44%, 49% |
|
#16A085 |
22, 160, 133 |
168, 76%, 36% |
|
#138D75 |
19, 141, 117 |
168, 76%, 31% |
|
#117A65 |
17, 122, 101 |
168, 76%, 27% |
|
#0E6655 |
14, 102, 85 |
168, 76%, 23% |
|
#0B5345 |
11, 83, 69 |
168, 77%, 18% |
Kôdovi 'nephritis' boja
|
HEX |
RGB |
HSL |
|
#E9F7EF |
233, 247, 239 |
146, 47%, 94% |
|
#D4EFDF |
212, 239, 223 |
144, 46%, 88% |
|
#A9DFBF |
169, 223, 191 |
144, 46%, 77% |
|
#7DCEA0 |
125, 206, 160 |
146, 45%, 65% |
|
#52BE80 |
82, 190, 128 |
146, 45%, 53% |
|
#27AE60 |
39, 174, 96 |
145, 63%, 42% |
|
#229954 |
34, 153, 84 |
145, 64%, 37% |
|
#1E8449 |
30, 132, 73 |
145, 63%, 32% |
|
#196F3D |
25, 111, 61 |
145, 63%, 27% |
|
#145A32 |
20, 90, 50 |
146, 64%, 22% |
Kôdovi 'emerald' boja
|
HEX |
RGB |
HSL |
|
#EAFAF1 |
234, 250, 241 |
146, 62%, 95% |
|
#D5F5E3 |
213, 245, 227 |
146, 62%, 90% |
|
#ABEBC6 |
171, 235, 198 |
145, 62%, 80% |
|
#82E0AA |
130, 224, 170 |
146, 60%, 69% |
|
#58D68D |
88, 214, 141 |
145, 61%, 59% |
|
#2ECC71 |
46, 204, 113 |
145, 63%, 49% |
|
#28B463 |
40, 180, 99 |
145, 64%, 43% |
|
#239B56 |
35, 155, 86 |
146, 63%, 37% |
|
#1D8348 |
29, 131, 72 |
145, 64%, 31% |
|
#186A3B |
24, 106, 59 |
146, 63%, 25% |
Kôdovi 'sunflower' boja
|
HEX |
RGB |
HSL |
|
#FEF9E7 |
254, 249, 231 |
47, 92%, 95% |
|
#FCF3CF |
252, 243, 207 |
48, 88%, 90% |
|
#F9E79F |
249, 231, 159 |
48, 88%, 80% |
|
#F7DC6F |
247, 220, 111 |
48, 89%, 70% |
|
#F4D03F |
244, 208, 63 |
48, 89%, 60% |
|
#F1C40F |
241, 196, 15 |
48, 89%, 50% |
|
#D4AC0D |
212, 172, 13 |
48, 88%, 44% |
|
#B7950B |
183, 149, 11 |
48, 89%, 38% |
|
#9A7D0A |
154, 125, 10 |
48, 88%, 32% |
|
#7D6608 |
125, 102, 8 |
48, 88%, 26% |
Kôdovi 'orange' boja
|
HEX |
RGB |
HSL |
|
#FEF5E7 |
254, 245, 231 |
37, 92%, 95% |
|
#FDEBD0 |
253, 235, 208 |
36, 92%, 90% |
|
#FAD7A0 |
250, 215, 160 |
37, 90%, 80% |
|
#F8C471 |
248, 196, 113 |
37, 91%, 71% |
|
#F5B041 |
245, 176, 65 |
37, 90%, 61% |
|
#F39C12 |
243, 156, 18 |
37, 90%, 51% |
|
#D68910 |
214, 137, 16 |
37, 86%, 45% |
|
#B9770E |
185, 119, 14 |
37, 86%, 39% |
|
#9C640C |
156, 100, 12 |
37, 86%, 33% |
|
#7E5109 |
126, 81, 9 |
37, 87%, 26% |
Kôdovi 'carrot' boja
|
HEX |
RGB |
HSL |
|
#FDF2E9 |
253, 242, 233 |
27, 83%, 95% |
|
#FAE5D3 |
250, 229, 211 |
28, 80%, 90% |
|
#F5CBA7 |
245, 203, 167 |
28, 80%, 81% |
|
#F0B27A |
240, 178, 122 |
28, 80%, 71% |
|
#EB984E |
235, 152, 78 |
28, 80%, 61% |
|
#E67E22 |
230, 126, 34 |
28, 80%, 52% |
|
#CA6F1E |
202, 111, 30 |
28, 74%, 45% |
|
#AF601A |
175, 96, 26 |
28, 74%, 39% |
|
#935116 |
147, 81, 22 |
28, 74%, 33% |
|
#784212 |
120, 66, 18 |
28, 74%, 27% |
Kôdovi 'pumpkin' boja
|
HEX |
RGB |
HSL |
|
#FBEEE6 |
251, 238, 230 |
23, 72%, 94% |
|
#F6DDCC |
246, 221, 204 |
24, 70%, 88% |
|
#EDBB99 |
237, 187, 153 |
24, 70%, 76% |
|
#E59866 |
229, 152, 102 |
24, 71%, 65% |
|
#DC7633 |
220, 118, 51 |
24, 71%, 53% |
|
#D35400 |
211, 84, 0 |
24, 100%, 41% |
|
#BA4A00 |
186, 74, 0 |
24, 100%, 36% |
|
#A04000 |
160, 64, 0 |
24, 100%, 31% |
|
#873600 |
135, 54, 0 |
24, 100%, 26% |
|
#6E2C00 |
110, 44, 0 |
24, 100%, 22% |
Kôdovi 'clouds' boja
|
HEX |
RGB |
HSL |
|
#FDFEFE |
253, 254, 254 |
180, 33%, 99% |
|
#FBFCFC |
251, 252, 252 |
180, 14%, 99% |
|
#F7F9F9 |
247, 249, 249 |
180, 14%, 97% |
|
#F4F6F7 |
244, 246, 247 |
200, 16%, 96% |
|
#F0F3F4 |
240, 243, 244 |
195, 15%, 95% |
|
#ECF0F1 |
236, 240, 241 |
192, 15%, 94% |
|
#D0D3D4 |
208, 211, 212 |
195, 4%, 82% |
|
#B3B6B7 |
179, 182, 183 |
195, 3%, 71% |
|
#979A9A |
151, 154, 154 |
180, 1%, 60% |
|
#7B7D7D |
123, 125, 125 |
180, 1%, 49% |
Kôdovi 'silver' boja
|
HEX |
RGB |
HSL |
|
#F8F9F9 |
248, 249, 249 |
180, 8%, 97% |
|
#F2F3F4 |
242, 243, 244 |
210, 8%, 95% |
|
#E5E7E9 |
229, 231, 233 |
210, 8%, 91% |
|
#D7DBDD |
215, 219, 221 |
200, 8%, 85% |
|
#CACFD2 |
202, 207, 210 |
202, 8%, 81% |
|
#BDC3C7 |
189, 195, 199 |
204, 8%, 76% |
|
#A6ACAF |
166, 172, 175 |
200, 5%, 67% |
|
#909497 |
144, 148, 151 |
206, 3%, 58% |
|
#797D7F |
121, 125, 127 |
200, 2%, 49% |
|
#626567 |
98, 101, 103 |
204, 2%, 39% |
Kôdovi 'concrete' boja
|
HEX |
RGB |
HSL |
|
#F4F6F6 |
244, 246, 246 |
180, 10%, 96% |
|
#EAEDED |
234, 237, 237 |
180, 8%, 92% |
|
#D5DBDB |
213, 219, 219 |
180, 8%, 85% |
|
#BFC9CA |
191, 201, 202 |
185, 9%, 77% |
|
#AAB7B8 |
170, 183, 184 |
184, 9%, 69% |
|
#95A5A6 |
149, 165, 166 |
184, 9%, 62% |
|
#839192 |
131, 145, 146 |
184, 6%, 54% |
|
#717D7E |
113, 125, 126 |
185, 5%, 47% |
|
#5F6A6A |
95, 106, 106 |
180, 5%, 39% |
|
#4D5656 |
77, 86, 86 |
180, 6%, 32% |
Kôdovi 'asbestos' boja
|
HEX |
RGB |
HSL |
|
#F2F4F4 |
242, 244, 244 |
180, 8%, 95% |
|
#E5E8E8 |
229, 232, 232 |
180, 6%, 90% |
|
#CCD1D1 |
204, 209, 209 |
180, 5%, 81% |
|
#B2BABB |
178, 186, 187 |
187, 6%, 72% |
|
#99A3A4 |
153, 163, 164 |
185, 6%, 62% |
|
#7F8C8D |
127, 140, 141 |
184, 6%, 53% |
|
#707B7C |
112, 123, 124 |
185, 5%, 46% |
|
#616A6B |
97, 106, 107 |
186, 5%, 40% |
|
#515A5A |
81, 90, 90 |
180, 5%, 34% |
|
#424949 |
66, 73, 73 |
180, 5%, 27% |
Kôdovi 'wet asphalt' boja
|
HEX |
RGB |
HSL |
|
#EBEDEF |
235, 237, 239 |
210, 11%, 93% |
|
#D6DBDF |
214, 219, 223 |
207, 12%, 86% |
|
#AEB6BF |
174, 182, 191 |
212, 12%, 72% |
|
#85929E |
133, 146, 158 |
209, 11%, 57% |
|
#5D6D7E |
93, 109, 126 |
211, 15%, 43% |
|
#34495E |
52, 73, 94 |
210, 29%, 29% |
|
#2E4053 |
46, 64, 83 |
211, 29%, 25% |
|
#283747 |
40, 55, 71 |
211, 28%, 22% |
|
#212F3C |
33, 47, 60 |
209, 29%, 18% |
|
#1B2631 |
27, 38, 49 |
210, 29%, 15% |
Kôdovi 'midnight blue' boja
|
HEX |
RGB |
HSL |
|
#EAECEE |
234, 236, 238 |
210, 11%, 93% |
|
#D5D8DC |
213, 216, 220 |
214, 9%, 85% |
|
#ABB2B9 |
171, 178, 185 |
210, 9%, 70% |
|
#808B96 |
128, 139, 150 |
210, 9%, 55% |
|
#566573 |
86, 101, 115 |
209, 14%, 39% |
|
#2C3E50 |
44, 62, 80 |
210, 29%, 24% |
|
#273746 |
39, 55, 70 |
209, 28%, 21% |
|
#212F3D |
33, 47, 61 |
210, 30%, 18% |
|
#1C2833 |
28, 40, 51 |
209, 29%, 15% |
|
#17202A |
23, 32, 42 |
212, 29%, 13% |
Možda će vas zanimati?
