Flat Design
Flat design 이란 쉽게 말하자면 여성들의 바닥이 평평한 신발을 플랫슈즈를 일컫듯이 디자인에도 입체감을 주는 디자인이 아니라 평평한 느낌을 주는 것들이 Flat Design이라고 보면 된다.
Sample
| | |
| |
Color
Default palette
/* Flat color palette downloaded from
* http://htmlcolorcodes.com/color-charts/
*
* Check out our powerful color picker
* http://htmlcolorcodes.com/color-picker/
*
* Want to learn more about colors in CSS?
* http://htmlcolorcodes.com/tutorials/
*
* - - - - - - - - - - - - - - - - - -
* Credits:
*
* Original color palette by
* http://designmodo.github.io/Flat-UI/
*
* - - - - - - - - - - - - - - - - - -
* How to use:
*
* Include this file with your stylesheets
* in the <head> of your HTML file:
*
* <head>
* ...
* <link href="path/to/css/flat_colors.css" rel="stylesheet">
* ...
* </head>
*
* and in the <body> of your HTML you can style
* any element using a class:
*
* <body>
* ...
* <h1 class="turquoise">Your Colored Title</h1>
* ...
* </body>
*/
/* Teals */
.turquoise { color: #1abc9c; }
.green-sea { color: #16a085; }
/* Greens */
.emerald { color: #2ecc71; }
.nephritis { color: #27ae60; }
/* Blues */
.peter-river { color: #3498db; }
.belize-hole { color: #2980b9; }
/* Purples */
.amethyst { color: #9b59b6; }
.wisteria { color: #8e44ad; }
/* Blacks */
.wet-asphalt { color: #34495e; }
.midnight-blue { color: #2c3e50; }
/* Yellows */
.sunflower { color: #f1c40f; }
.orange { color: #f39c12; }
/* Oranges */
.carrot { color: #e67e22; }
.pumpkin { color: #d35400; }
/* Reds */
.alizarin { color: #e74c3c; }
.pomegranate { color: #c0392b; }
/* Whites */
.clouds { color: #ecf0f1; }
.silver { color: #bdc3c7; }
/* Grays */
.concrete { color: #95a5a6; }
.asbestos { color: #7f8c8d; }
/* Want more? Get the full flat color palette at
* http://htmlcolorcodes.com/color-charts/
*/
Full colors
/* Flat color palette (full) downloaded from
* http://htmlcolorcodes.com/color-charts/
*
* Check out our powerful color picker
* http://htmlcolorcodes.com/color-picker/
*
* Want to learn more about colors in SCSS?
* http://htmlcolorcodes.com/tutorials/
*
* - - - - - - - - - - - - - - - - - -
* Credits:
*
* Original color palette by
* http://designmodo.github.io/Flat-UI/
*
* - - - - - - - - - - - - - - - - - -
* How to use:
*
* Include this file with your stylesheets
* in the <head> of your HTML file:
*
* <head>
* ...
* <link href="path/to/css/flat_colors_full.css" rel="stylesheet">
* ...
* </head>
*
* and in the body of your HTML you can style
* any element using a class:
*
* <body>
* ...
* <h1 class="turquoise-500">Your Colored Title</h1>
* ...
* </body>
*
* - - - - - - - - - - - - - - - - - -
* Note:
*
* .color and .color-500 are the same, simply there
* for your convenience.
*/
/* Turquoise */
.turquoise { color: #1abc9c; }
.turquoise-50 { color: #e8f8f5; }
.turquoise-100 { color: #d1f2eb; }
.turquoise-200 { color: #a3e4d7; }
.turquoise-300 { color: #76d7c4; }
.turquoise-400 { color: #48c9b0; }
.turquoise-500 { color: #1abc9c; }
.turquoise-600 { color: #17a589; }
.turquoise-700 { color: #148f77; }
.turquoise-800 { color: #117864; }
.turquoise-900 { color: #0e6251; }
/* Green Sea */
.green-sea { color: #16a085; }
.green-sea-50 { color: #e8f6f3; }
.green-sea-100 { color: #d0ece7; }
.green-sea-200 { color: #a2d9ce; }
.green-sea-300 { color: #73c6b6; }
.green-sea-400 { color: #45b39d; }
.green-sea-500 { color: #16a085; }
.green-sea-600 { color: #138d75; }
.green-sea-700 { color: #117a65; }
.green-sea-800 { color: #0e6655; }
.green-sea-900 { color: #0b5345; }
/* Emerald */
.emerald { color: #2ecc71; }
.emerald-50 { color: #eafaf1; }
.emerald-100 { color: #d5f5e3; }
.emerald-200 { color: #abebc6; }
.emerald-300 { color: #82e0aa; }
.emerald-400 { color: #58d68d; }
.emerald-500 { color: #2ecc71; }
.emerald-600 { color: #28b463; }
.emerald-700 { color: #239b56; }
.emerald-800 { color: #1d8348; }
.emerald-900 { color: #186a3b; }
/* Nephritis */
.nephritis { color: #27ae60; }
.nephritis-50 { color: #e9f7ef; }
.nephritis-100 { color: #d4efdf; }
.nephritis-200 { color: #a9dfbf; }
.nephritis-300 { color: #7dcea0; }
.nephritis-400 { color: #52be80; }
.nephritis-500 { color: #27ae60; }
.nephritis-600 { color: #229954; }
.nephritis-700 { color: #1e8449; }
.nephritis-800 { color: #196f3d; }
.nephritis-900 { color: #145a32; }
/* Peter River */
.peter-river { color: #3498db; }
.peter-river-50 { color: #ebf5fb; }
.peter-river-100 { color: #d6eaf8; }
.peter-river-200 { color: #aed6f1; }
.peter-river-300 { color: #85c1e9; }
.peter-river-400 { color: #5dade2; }
.peter-river-500 { color: #3498db; }
.peter-river-600 { color: #2e86c1; }
.peter-river-700 { color: #2874a6; }
.peter-river-800 { color: #21618c; }
.peter-river-900 { color: #1b4f72; }
/* Belize Hole */
.belize-hole { color: #2980b9; }
.belize-hole-50 { color: #eaf2f8; }
.belize-hole-100 { color: #d4e6f1; }
.belize-hole-200 { color: #a9cce3; }
.belize-hole-300 { color: #7fb3d5; }
.belize-hole-400 { color: #5499c7; }
.belize-hole-500 { color: #2980b9; }
.belize-hole-600 { color: #2471a3; }
.belize-hole-700 { color: #1f618d; }
.belize-hole-800 { color: #1a5276; }
.belize-hole-900 { color: #154360; }
/* Amethyst */
.amethyst { color: #9b59b6; }
.amethyst-50 { color: #f5eef8; }
.amethyst-100 { color: #ebdef0; }
.amethyst-200 { color: #d7bde2; }
.amethyst-300 { color: #c39bd3; }
.amethyst-400 { color: #af7ac5; }
.amethyst-500 { color: #9b59b6; }
.amethyst-600 { color: #884ea0; }
.amethyst-700 { color: #76448a; }
.amethyst-800 { color: #633974; }
.amethyst-900 { color: #512e5f; }
/* Wisteria */
.wisteria { color: #8e44ad; }
.wisteria-50 { color: #f4ecf7; }
.wisteria-100 { color: #e8daef; }
.wisteria-200 { color: #d2b4de; }
.wisteria-300 { color: #bb8fce; }
.wisteria-400 { color: #a569bd; }
.wisteria-500 { color: #8e44ad; }
.wisteria-600 { color: #7d3c98; }
.wisteria-700 { color: #6c3483; }
.wisteria-800 { color: #5b2c6f; }
.wisteria-900 { color: #4a235a; }
/* Wet Asphalt */
.wet-asphalt { color: #34495e; }
.wet-asphalt-50 { color: #ebedef; }
.wet-asphalt-100 { color: #d6dbdf; }
.wet-asphalt-200 { color: #aeb6bf; }
.wet-asphalt-300 { color: #85929e; }
.wet-asphalt-400 { color: #5d6d7e; }
.wet-asphalt-500 { color: #34495e; }
.wet-asphalt-600 { color: #2e4053; }
.wet-asphalt-700 { color: #283747; }
.wet-asphalt-800 { color: #212f3c; }
.wet-asphalt-900 { color: #1b2631; }
/* Midnight Blue */
.midnight-blue { color: #2c3e50; }
.midnight-blue-50 { color: #eaecee; }
.midnight-blue-100 { color: #d5d8dc; }
.midnight-blue-200 { color: #abb2b9; }
.midnight-blue-300 { color: #808b96; }
.midnight-blue-400 { color: #566573; }
.midnight-blue-500 { color: #2c3e50; }
.midnight-blue-600 { color: #273746; }
.midnight-blue-700 { color: #212f3d; }
.midnight-blue-800 { color: #1c2833; }
.midnight-blue-900 { color: #17202a; }
/* Sunflower */
.sunflower { color: #f1c40f; }
.sunflower-50 { color: #fef9e7; }
.sunflower-100 { color: #fcf3cf; }
.sunflower-200 { color: #f9e79f; }
.sunflower-300 { color: #f7dc6f; }
.sunflower-400 { color: #f4d03f; }
.sunflower-500 { color: #f1c40f; }
.sunflower-600 { color: #d4ac0d; }
.sunflower-700 { color: #b7950b; }
.sunflower-800 { color: #9a7d0a; }
.sunflower-900 { color: #7d6608; }
/* Orange */
.orange { color: #f39c12; }
.orange-50 { color: #fef5e7; }
.orange-100 { color: #fdebd0; }
.orange-200 { color: #fad7a0; }
.orange-300 { color: #f8c471; }
.orange-400 { color: #f5b041; }
.orange-500 { color: #f39c12; }
.orange-600 { color: #d68910; }
.orange-700 { color: #b9770e; }
.orange-800 { color: #9c640c; }
.orange-900 { color: #7e5109; }
/* Carrot */
.carrot { color: #e67e22; }
.carrot-50 { color: #fdf2e9; }
.carrot-100 { color: #fae5d3; }
.carrot-200 { color: #f5cba7; }
.carrot-300 { color: #f0b27a; }
.carrot-400 { color: #eb984e; }
.carrot-500 { color: #e67e22; }
.carrot-600 { color: #ca6f1e; }
.carrot-700 { color: #af601a; }
.carrot-800 { color: #935116; }
.carrot-900 { color: #784212; }
/* Pumpkin */
.pumpkin { color: #d35400; }
.pumpkin-50 { color: #fbeee6; }
.pumpkin-100 { color: #f6ddcc; }
.pumpkin-200 { color: #edbb99; }
.pumpkin-300 { color: #e59866; }
.pumpkin-400 { color: #dc7633; }
.pumpkin-500 { color: #d35400; }
.pumpkin-600 { color: #ba4a00; }
.pumpkin-700 { color: #a04000; }
.pumpkin-800 { color: #873600; }
.pumpkin-900 { color: #6e2c00; }
/* Alizarin */
.alizarin { color: #e74c3c; }
.alizarin-50 { color: #fdedec; }
.alizarin-100 { color: #fadbd8; }
.alizarin-200 { color: #f5b7b1; }
.alizarin-300 { color: #f1948a; }
.alizarin-400 { color: #ec7063; }
.alizarin-500 { color: #e74c3c; }
.alizarin-600 { color: #cb4335; }
.alizarin-700 { color: #b03a2e; }
.alizarin-800 { color: #943126; }
.alizarin-900 { color: #78281f; }
/* Pomegranate */
.pomegranate { color: #c0392b; }
.pomegranate-50 { color: #f9ebea; }
.pomegranate-100 { color: #f2d7d5; }
.pomegranate-200 { color: #e6b0aa; }
.pomegranate-300 { color: #d98880; }
.pomegranate-400 { color: #cd6155; }
.pomegranate-500 { color: #c0392b; }
.pomegranate-600 { color: #a93226; }
.pomegranate-700 { color: #922b21; }
.pomegranate-800 { color: #7b241c; }
.pomegranate-900 { color: #641e16; }
/* Clouds */
.clouds { color: #ecf0f1; }
.clouds-50 { color: #fdfefe; }
.clouds-100 { color: #fbfcfc; }
.clouds-200 { color: #f7f9f9; }
.clouds-300 { color: #f4f6f7; }
.clouds-400 { color: #f0f3f4; }
.clouds-500 { color: #ecf0f1; }
.clouds-600 { color: #d0d3d4; }
.clouds-700 { color: #b3b6b7; }
.clouds-800 { color: #979a9a; }
.clouds-900 { color: #7b7d7d; }
/* Silver */
.silver { color: #bdc3c7; }
.silver-50 { color: #f8f9f9; }
.silver-100 { color: #f2f3f4; }
.silver-200 { color: #e5e7e9; }
.silver-300 { color: #d7dbdd; }
.silver-400 { color: #cacfd2; }
.silver-500 { color: #bdc3c7; }
.silver-600 { color: #a6acaf; }
.silver-700 { color: #909497; }
.silver-800 { color: #797d7f; }
.silver-900 { color: #626567; }
/* Concrete */
.concrete { color: #95a5a6; }
.concrete-50 { color: #f4f6f6; }
.concrete-100 { color: #eaeded; }
.concrete-200 { color: #d5dbdb; }
.concrete-300 { color: #bfc9ca; }
.concrete-400 { color: #aab7b8; }
.concrete-500 { color: #95a5a6; }
.concrete-600 { color: #839192; }
.concrete-700 { color: #717d7e; }
.concrete-800 { color: #5f6a6a; }
.concrete-900 { color: #4d5656; }
/* Asbestos */
.asbestos { color: #7f8c8d; }
.asbestos-50 { color: #f2f4f4; }
.asbestos-100 { color: #e5e8e8; }
.asbestos-200 { color: #ccd1d1; }
.asbestos-300 { color: #b2babb; }
.asbestos-400 { color: #99a3a4; }
.asbestos-500 { color: #7f8c8d; }
.asbestos-600 { color: #707b7c; }
.asbestos-700 { color: #616a6b; }
.asbestos-800 { color: #515a5a; }
.asbestos-900 { color: #424949; }
/* Want more? Check our our other color palettes at
* http://htmlcolorcodes.com/color-charts/
*/
See also
Favorite site
- Google Search: flat design diagram
- Flat Design series 1: 플랫 디자인이란?
- 플랫디자인의 5가지 특징
- 移动应用“形形色色”的数据可视化 (모바일 응용프로그램 디자인 샘플)
