Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
d2abc931 by bootflat
Options

add color picker pages

1 parent b4bb7d96
Inline Side-by-side
Showing 15 changed files with 2430 additions and 6 deletions
...@@ -79,9 +79,12 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -79,9 +79,12 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
79 + [Getting Started](http://bootflat.github.io/getting-started.html) 79 + [Getting Started](http://bootflat.github.io/getting-started.html)
80 + [Documentation](http://bootflat.github.io/documentation.html) 80 + [Documentation](http://bootflat.github.io/documentation.html)
81 + [Free PSD](http://bootflat.github.io/free-psd.html) 81 + [Free PSD](http://bootflat.github.io/free-psd.html)
82 + [Flat UI Color Picker](http://bootflat.github.io/color-picker.html)
82 83
83 ## Changelog: 84 ## Changelog:
84 85
86 2014/8/26 add `color picker`, you can make a flat design with it
87
85 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing` 88 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
86 89
87 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper` 90 2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
......
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Blue - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a class="current" href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#4D8FAC;">
79 <span class="color-name">Sky color</span><br>
80 <span class="hex-number">#4D8FAC</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#5D8CAE;">
85 <span class="color-name">Ultramarine color</span><br>
86 <span class="hex-number">#5D8CAE</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#22A7F0;">
91 <span class="color-name">PICTON BLUE</span><br>
92 <span class="hex-number">#22A7F0</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#19B5FE;">
97 <span class="color-name">DODGER BLUE</span><br>
98 <span class="hex-number">#19B5FE</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#59ABE3;">
103 <span class="color-name">PICTON BLUE</span><br>
104 <span class="hex-number">#59ABE3</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#48929B;">
109 <span class="color-name">Light blue color</span><br>
110 <span class="hex-number">#48929B</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#317589;">
116 <span class="color-name">Thousand herb</span><br>
117 <span class="hex-number">#317589</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#89C4F4;">
122 <span class="color-name">JORDY BLUE</span><br>
123 <span class="hex-number">#89C4F4</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #4B77BE;">
128 <span class="color-name">STEEL BLUE</span><br>
129 <span class="hex-number">#4B77BE</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#1F4788;">
134 <span class="color-name">Lapis lazuli color</span><br>
135 <span class="hex-number">#1F4788</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#003171;">
140 <span class="color-name">Navy blue color</span><br>
141 <span class="hex-number">#003171</span><br>
142 </div>
143 </div>
144
145 <div class="color-picker">
146 <div class="color-item" style="background-color:#044F67;">
147 <span class="color-name">Hanada</span><br>
148 <span class="hex-number">#044F67</span><br>
149 </div>
150 </div>
151 <div class="color-picker">
152 <div class="color-item" style="background-color: #264348;">
153 <span class="color-name">Indigo color</span><br>
154 <span class="hex-number">#264348</span><br>
155 </div>
156 </div>
157 </div>
158 <!--footer-->
159 <div class="site-footer">
160 <div class="container">
161 <div class="download">
162 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
163 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
164 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
165 <!-- SmartAddon BEGIN -->
166 <script type="text/javascript">
167 (function() {
168 var s=document.createElement('script');s.type='text/javascript';s.async = true;
169 s.src='http://s1'+'.smartaddon.com/share_addon.js';
170 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
171 })();
172 </script>
173
174 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
175 <!-- SmartAddon END -->
176 </div>
177 <hr class="dashed" />
178 <div class="row">
179 <div class="col-md-4">
180 <h3>Get involved</h3>
181 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
182 </div>
183 <div class="col-md-4">
184 <h3>Contribute</h3>
185 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
186 </div>
187 <div class="col-md-4">
188 <h3>Found a bug?</h3>
189 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
190 </div>
191 </div>
192 <hr class="dashed" />
193 <div class="row">
194 <div class="col-md-6">
195 <h3>Talk to us</h3>
196 <ul>
197 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
198 <li>
199 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
200 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
201 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
202 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
203 </li>
204 </ul>
205 </div>
206 <div class="col-md-6">
207 <!-- Begin MailChimp Signup Form -->
208 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
209 <div id="mc_embed_signup">
210 <h3 style="margin-bottom: 15px;">Newsletter</h3>
211 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
212 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
213 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
214 </form>
215 </div>
216 <!--End mc_embed_signup-->
217 </div>
218 </div>
219 <hr class="dashed" />
220 <div class="copyright clearfix">
221 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
222 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
223 </div>
224 </div>
225 </div>
226 <script>
227 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
228 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
229 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
230 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
231
232 ga('create', 'UA-48721682-1', 'bootflat.github.io');
233 ga('require', 'displayfeatures');
234 ga('send', 'pageview');
235
236 </script>
237 </body>
238 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Gray - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a class="current" href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#BFBFBF;">
79 <span class="color-name">SILVER</span><br>
80 <span class="hex-number">#BFBFBF</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#F2F1EF;">
85 <span class="color-name">CARARRA</span><br>
86 <span class="hex-number">#F2F1EF</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#BDC3C7;">
91 <span class="color-name">SILVER SAND</span><br>
92 <span class="hex-number">#BDC3C7</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#ECF0F1;">
97 <span class="color-name">PORCELAIN</span><br>
98 <span class="hex-number">#ECF0F1</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#D2D7D3;">
103 <span class="color-name">PUMICE</span><br>
104 <span class="hex-number">#D2D7D3</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#757D75;">
109 <span class="color-name">Harbor rat</span><br>
110 <span class="hex-number">#757D75</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#EEEEEE;">
116 <span class="color-name">GALLERY</span><br>
117 <span class="hex-number">#EEEEEE</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#ABB7B7;">
122 <span class="color-name">EDWARD</span><br>
123 <span class="hex-number">#ABB7B7</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #6C7A89;">
128 <span class="color-name">LYNCH</span><br>
129 <span class="hex-number">#6C7A89</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#95A5A6;">
134 <span class="color-name">CASCADE</span><br>
135 <span class="hex-number">#95A5A6</span><br>
136 </div>
137 </div>
138
139 </div>
140 <!--footer-->
141 <div class="site-footer">
142 <div class="container">
143 <div class="download">
144 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
145 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
146 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
147 <!-- SmartAddon BEGIN -->
148 <script type="text/javascript">
149 (function() {
150 var s=document.createElement('script');s.type='text/javascript';s.async = true;
151 s.src='http://s1'+'.smartaddon.com/share_addon.js';
152 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
153 })();
154 </script>
155
156 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
157 <!-- SmartAddon END -->
158 </div>
159 <hr class="dashed" />
160 <div class="row">
161 <div class="col-md-4">
162 <h3>Get involved</h3>
163 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
164 </div>
165 <div class="col-md-4">
166 <h3>Contribute</h3>
167 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
168 </div>
169 <div class="col-md-4">
170 <h3>Found a bug?</h3>
171 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
172 </div>
173 </div>
174 <hr class="dashed" />
175 <div class="row">
176 <div class="col-md-6">
177 <h3>Talk to us</h3>
178 <ul>
179 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
180 <li>
181 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
182 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
183 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
184 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
185 </li>
186 </ul>
187 </div>
188 <div class="col-md-6">
189 <!-- Begin MailChimp Signup Form -->
190 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
191 <div id="mc_embed_signup">
192 <h3 style="margin-bottom: 15px;">Newsletter</h3>
193 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
194 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
195 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
196 </form>
197 </div>
198 <!--End mc_embed_signup-->
199 </div>
200 </div>
201 <hr class="dashed" />
202 <div class="copyright clearfix">
203 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
204 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
205 </div>
206 </div>
207 </div>
208 <script>
209 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
210 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
211 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
212 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
213
214 ga('create', 'UA-48721682-1', 'bootflat.github.io');
215 ga('require', 'displayfeatures');
216 ga('send', 'pageview');
217
218 </script>
219 </body>
220 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Green - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a class="current" href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#7A942E;">
79 <span class="color-name">Siskin sprout yellow</span><br>
80 <span class="hex-number">#7A942E</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#8DB255;">
85 <span class="color-name">young green onion</span><br>
86 <span class="hex-number">#8DB255</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#5B8930;">
91 <span class="color-name">Fresh onion</span><br>
92 <span class="hex-number">#5B8930</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#6B9362;">
97 <span class="color-name">Young bamboo color</span><br>
98 <span class="hex-number">#6B9362</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#407A52;">
103 <span class="color-name">Patina</span><br>
104 <span class="hex-number">#407A52</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#006442;">
109 <span class="color-name">Green bamboo</span><br>
110 <span class="hex-number">#006442</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#87D37C;">
116 <span class="color-name">GOSSIP</span><br>
117 <span class="hex-number">#87D37C</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#26A65B;">
122 <span class="color-name">EUCALYPTUS</span><br>
123 <span class="hex-number">#26A65B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #26C281;">
128 <span class="color-name">JUNGLE GREEN</span><br>
129 <span class="hex-number">#26C281</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#049372;">
134 <span class="color-name">OBSERVATORY</span><br>
135 <span class="hex-number">#049372</span><br>
136 </div>
137 </div>
138
139 <div class="color-picker">
140 <div class="color-item" style="background-color:#2ABB9B;">
141 <span class="color-name">JUNGLE GREEN</span><br>
142 <span class="hex-number">#2ABB9B</span><br>
143 </div>
144 </div>
145 <div class="color-picker">
146 <div class="color-item" style="background-color:#16A085;">
147 <span class="color-name">MOUNTAIN MEADOW</span><br>
148 <span class="hex-number">#16A085</span><br>
149 </div>
150 </div>
151 <div class="color-picker">
152 <div class="color-item" style="background-color:#36D7B7;">
153 <span class="color-name">TURQUOISE</span><br>
154 <span class="hex-number">#36D7B7</span><br>
155 </div>
156 </div>
157 <div class="color-picker">
158 <div class="color-item" style="background-color: #03A678;">
159 <span class="color-name">FREE SPEECH AQUAMARINE</span><br>
160 <span class="hex-number">#03A678</span><br>
161 </div>
162 </div>
163 <div class="color-picker">
164 <div class="color-item" style="background-color:#4DAF7C;">
165 <span class="color-name">OCEAN GREEN</span><br>
166 <span class="hex-number">#4DAF7C</span><br>
167 </div>
168 </div>
169 </div>
170 <!--footer-->
171 <div class="site-footer">
172 <div class="container">
173 <div class="download">
174 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
175 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
176 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
177 <!-- SmartAddon BEGIN -->
178 <script type="text/javascript">
179 (function() {
180 var s=document.createElement('script');s.type='text/javascript';s.async = true;
181 s.src='http://s1'+'.smartaddon.com/share_addon.js';
182 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
183 })();
184 </script>
185
186 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
187 <!-- SmartAddon END -->
188 </div>
189 <hr class="dashed" />
190 <div class="row">
191 <div class="col-md-4">
192 <h3>Get involved</h3>
193 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
194 </div>
195 <div class="col-md-4">
196 <h3>Contribute</h3>
197 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
198 </div>
199 <div class="col-md-4">
200 <h3>Found a bug?</h3>
201 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
202 </div>
203 </div>
204 <hr class="dashed" />
205 <div class="row">
206 <div class="col-md-6">
207 <h3>Talk to us</h3>
208 <ul>
209 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
210 <li>
211 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
212 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
213 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
214 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
215 </li>
216 </ul>
217 </div>
218 <div class="col-md-6">
219 <!-- Begin MailChimp Signup Form -->
220 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
221 <div id="mc_embed_signup">
222 <h3 style="margin-bottom: 15px;">Newsletter</h3>
223 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
224 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
225 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
226 </form>
227 </div>
228 <!--End mc_embed_signup-->
229 </div>
230 </div>
231 <hr class="dashed" />
232 <div class="copyright clearfix">
233 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
234 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
235 </div>
236 </div>
237 </div>
238 <script>
239 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
240 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
241 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
242 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
243
244 ga('create', 'UA-48721682-1', 'bootflat.github.io');
245 ga('require', 'displayfeatures');
246 ga('send', 'pageview');
247
248 </script>
249 </body>
250 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Pink - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a class="current" href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#F08F90;">
79 <span class="color-name">One kin dye</span><br>
80 <span class="hex-number">#F08F907</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#F47983;">
85 <span class="color-name">Peach-colored</span><br>
86 <span class="hex-number">#F47983</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#DB5A6B;">
91 <span class="color-name">Red plum colored</span><br>
92 <span class="hex-number">#DB5A6B</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#C93756;">
97 <span class="color-name">Medium crimson</span><br>
98 <span class="hex-number">#C93756</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#FCC9B9;">
103 <span class="color-name">Cherry blossom color</span><br>
104 <span class="hex-number">#FCC9B9</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#FFB3A7;">
109 <span class="color-name">Washed-out crimson</span><br>
110 <span class="hex-number">#FFB3A7</span><br>
111 </div>
112 </div>
113 <div class="color-picker">
114 <div class="color-item" style="background-color:#F62459;">
115 <span class="color-name">RADICAL RED</span><br>
116 <span class="hex-number">#F62459</span><br>
117 </div>
118 </div>
119 <div class="color-picker">
120 <div class="color-item" style="background-color:#F58F84;">
121 <span class="color-name">Ibis wing color</span><br>
122 <span class="hex-number">#F58F84</span><br>
123 </div>
124 </div>
125 </div>
126 <!--footer-->
127 <div class="site-footer">
128 <div class="container">
129 <div class="download">
130 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
131 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
132 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
133 <!-- SmartAddon BEGIN -->
134 <script type="text/javascript">
135 (function() {
136 var s=document.createElement('script');s.type='text/javascript';s.async = true;
137 s.src='http://s1'+'.smartaddon.com/share_addon.js';
138 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
139 })();
140 </script>
141
142 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
143 <!-- SmartAddon END -->
144 </div>
145 <hr class="dashed" />
146 <div class="row">
147 <div class="col-md-4">
148 <h3>Get involved</h3>
149 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
150 </div>
151 <div class="col-md-4">
152 <h3>Contribute</h3>
153 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
154 </div>
155 <div class="col-md-4">
156 <h3>Found a bug?</h3>
157 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
158 </div>
159 </div>
160 <hr class="dashed" />
161 <div class="row">
162 <div class="col-md-6">
163 <h3>Talk to us</h3>
164 <ul>
165 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
166 <li>
167 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
168 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
169 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
170 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
171 </li>
172 </ul>
173 </div>
174 <div class="col-md-6">
175 <!-- Begin MailChimp Signup Form -->
176 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
177 <div id="mc_embed_signup">
178 <h3 style="margin-bottom: 15px;">Newsletter</h3>
179 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
180 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
181 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
182 </form>
183 </div>
184 <!--End mc_embed_signup-->
185 </div>
186 </div>
187 <hr class="dashed" />
188 <div class="copyright clearfix">
189 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
190 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
191 </div>
192 </div>
193 </div>
194 <script>
195 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
196 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
197 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
198 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
199
200 ga('create', 'UA-48721682-1', 'bootflat.github.io');
201 ga('require', 'displayfeatures');
202 ga('send', 'pageview');
203
204 </script>
205 </body>
206 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Purple - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a class="current" href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#875F9A;">
79 <span class="color-name">Wisteria purple</span><br>
80 <span class="hex-number">#875F9A</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#5D3F6A;">
85 <span class="color-name">Bellflower color</span><br>
86 <span class="hex-number">#5D3F6A</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#89729E;">
91 <span class="color-name">Wisteria color</span><br>
92 <span class="hex-number">#89729E</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#763568;">
97 <span class="color-name">Iris color</span><br>
98 <span class="hex-number">#763568</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#8D608C;">
103 <span class="color-name">Tatarian aster color</span><br>
104 <span class="hex-number">#8D608C</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#A87CA0;">
109 <span class="color-name">Thin color</span><br>
110 <span class="hex-number">#A87CA0</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#5B3256;">
116 <span class="color-name">Violet color</span><br>
117 <span class="hex-number">#5B3256</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#BF55EC;">
122 <span class="color-name">MEDIUM PURPLE</span><br>
123 <span class="hex-number">#BF55EC</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8E44AD;">
128 <span class="color-name">STUDIO</span><br>
129 <span class="hex-number">#8E44AD</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#9B59B6;">
134 <span class="color-name">WISTERIA</span><br>
135 <span class="hex-number">#9B59B6</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#BE90D4;">
140 <span class="color-name">LIGHT WISTERIA</span><br>
141 <span class="hex-number">#BE90D4</span><br>
142 </div>
143 </div>
144 </div>
145 <!--footer-->
146 <div class="site-footer">
147 <div class="container">
148 <div class="download">
149 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
150 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
151 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
152 <!-- SmartAddon BEGIN -->
153 <script type="text/javascript">
154 (function() {
155 var s=document.createElement('script');s.type='text/javascript';s.async = true;
156 s.src='http://s1'+'.smartaddon.com/share_addon.js';
157 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
158 })();
159 </script>
160
161 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
162 <!-- SmartAddon END -->
163 </div>
164 <hr class="dashed" />
165 <div class="row">
166 <div class="col-md-4">
167 <h3>Get involved</h3>
168 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
169 </div>
170 <div class="col-md-4">
171 <h3>Contribute</h3>
172 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
173 </div>
174 <div class="col-md-4">
175 <h3>Found a bug?</h3>
176 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
177 </div>
178 </div>
179 <hr class="dashed" />
180 <div class="row">
181 <div class="col-md-6">
182 <h3>Talk to us</h3>
183 <ul>
184 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
185 <li>
186 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
187 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
188 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
189 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
190 </li>
191 </ul>
192 </div>
193 <div class="col-md-6">
194 <!-- Begin MailChimp Signup Form -->
195 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
196 <div id="mc_embed_signup">
197 <h3 style="margin-bottom: 15px;">Newsletter</h3>
198 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
199 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
200 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
201 </form>
202 </div>
203 <!--End mc_embed_signup-->
204 </div>
205 </div>
206 <hr class="dashed" />
207 <div class="copyright clearfix">
208 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
209 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
210 </div>
211 </div>
212 </div>
213 <script>
214 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
215 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
216 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
217 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
218
219 ga('create', 'UA-48721682-1', 'bootflat.github.io');
220 ga('require', 'displayfeatures');
221 ga('send', 'pageview');
222
223 </script>
224 </body>
225 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Red - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a class="current" href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#C91F37;">
79 <span class="color-name">Foreign crimson</span><br>
80 <span class="hex-number">#C91F37</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#DC3023;">
85 <span class="color-name">Red orange</span><br>
86 <span class="hex-number">#DC3023</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#9D2933;">
91 <span class="color-name">Cochineal red</span><br>
92 <span class="hex-number">#9D2933</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#CF000F;">
97 <span class="color-name">Monza</span><br>
98 <span class="hex-number">#CF000F</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#E68364;">
103 <span class="color-name">Brewed mustard-brown</span><br>
104 <span class="hex-number">#E68364</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#F22613;">
109 <span class="color-name">Pomegranate</span><br>
110 <span class="hex-number">#F22613</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#CF3A24;">
116 <span class="color-name">Scarlet</span><br>
117 <span class="hex-number">#CF3A24</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#C3272B;">
122 <span class="color-name">Pure crimson</span><br>
123 <span class="hex-number">#C3272B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8F1D21;">
128 <span class="color-name">True red</span><br>
129 <span class="hex-number">#8F1D21</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#D24D57;">
134 <span class="color-name">Chestnut Rose</span><br>
135 <span class="hex-number">#D24D57</span><br>
136 </div>
137 </div>
138 </div>
139 <!--footer-->
140 <div class="site-footer">
141 <div class="container">
142 <div class="download">
143 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
144 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
145 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
146 <!-- SmartAddon BEGIN -->
147 <script type="text/javascript">
148 (function() {
149 var s=document.createElement('script');s.type='text/javascript';s.async = true;
150 s.src='http://s1'+'.smartaddon.com/share_addon.js';
151 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
152 })();
153 </script>
154
155 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
156 <!-- SmartAddon END -->
157 </div>
158 <hr class="dashed" />
159 <div class="row">
160 <div class="col-md-4">
161 <h3>Get involved</h3>
162 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
163 </div>
164 <div class="col-md-4">
165 <h3>Contribute</h3>
166 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
167 </div>
168 <div class="col-md-4">
169 <h3>Found a bug?</h3>
170 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
171 </div>
172 </div>
173 <hr class="dashed" />
174 <div class="row">
175 <div class="col-md-6">
176 <h3>Talk to us</h3>
177 <ul>
178 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
179 <li>
180 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
181 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
182 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
183 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
184 </li>
185 </ul>
186 </div>
187 <div class="col-md-6">
188 <!-- Begin MailChimp Signup Form -->
189 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
190 <div id="mc_embed_signup">
191 <h3 style="margin-bottom: 15px;">Newsletter</h3>
192 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
193 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
194 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
195 </form>
196 </div>
197 <!--End mc_embed_signup-->
198 </div>
199 </div>
200 <hr class="dashed" />
201 <div class="copyright clearfix">
202 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
203 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
204 </div>
205 </div>
206 </div>
207 <script>
208 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
209 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
210 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
211 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
212
213 ga('create', 'UA-48721682-1', 'bootflat.github.io');
214 ga('require', 'displayfeatures');
215 ga('send', 'pageview');
216
217 </script>
218 </body>
219 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - Yellow - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
11 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a class="current" href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-orange.html">Orange</a>
71 <a href="color-picker-gray.html">Gray</a>
72 </div>
73 </div>
74 </div>
75 </div>
76 <!--documents-->
77 <div class="color-wrap clearfix">
78 <div class="color-picker">
79 <div class="color-item" style="background-color:#D9B611;">
80 <span class="color-name">Patrinia flowers</span><br>
81 <span class="hex-number">#D9B611</span><br>
82 </div>
83 </div>
84 <div class="color-picker">
85 <div class="color-item" style="background-color:#F3C13A;">
86 <span class="color-name">Amur cork tree</span><br>
87 <span class="hex-number">#F3C13A</span><br>
88 </div>
89 </div>
90 <div class="color-picker">
91 <div class="color-item" style="background-color:#F7CA18;">
92 <span class="color-name">RIPE LEMON</span><br>
93 <span class="hex-number">#F7CA18</span><br>
94 </div>
95 </div>
96 <div class="color-picker">
97 <div class="color-item" style="background-color:#E2B13C;">
98 <span class="color-name">Japanese triandra grass</span><br>
99 <span class="hex-number">#E2B13C</span><br>
100 </div>
101 </div>
102 <div class="color-picker">
103 <div class="color-item" style="background-color:#A17917;">
104 <span class="color-name">Rapeseed oil-colored</span><br>
105 <span class="hex-number">#A17917</span><br>
106 </div>
107 </div>
108 <div class="color-picker">
109 <div class="color-item" style="background-color:#F5D76E;">
110 <span class="color-name">CREAM CAN</span><br>
111 <span class="hex-number">#F5D76E</span><br>
112 </div>
113 </div>
114
115 <div class="color-picker">
116 <div class="color-item" style="background-color:#F4D03F;">
117 <span class="color-name">SAFFRON</span><br>
118 <span class="hex-number">#F4D03F</span><br>
119 </div>
120 </div>
121 <div class="color-picker">
122 <div class="color-item" style="background-color:#FFA400;">
123 <span class="color-name">Bright golden yellow</span><br>
124 <span class="hex-number">#FFA400</span><br>
125 </div>
126 </div>
127 <div class="color-picker">
128 <div class="color-item" style="background-color:#E08A1E;">
129 <span class="color-name">Sumac-dyed</span><br>
130 <span class="hex-number">#E08A1E</span><br>
131 </div>
132 </div>
133 <div class="color-picker">
134 <div class="color-item" style="background-color:#FFB61E;">
135 <span class="color-name">Gamboge</span><br>
136 <span class="hex-number">#FFB61E</span><br>
137 </div>
138 </div>
139 <div class="color-picker">
140 <div class="color-item" style="background-color:#FAA945;">
141 <span class="color-name">Corn-colored</span><br>
142 <span class="hex-number">#FAA945</span><br>
143 </div>
144 </div>
145 <div class="color-picker">
146 <div class="color-item" style="background-color:#FFA631;">
147 <span class="color-name">Egg-colored</span><br>
148 <span class="hex-number">#FFA631</span><br>
149 </div>
150 </div>
151 <div class="color-picker">
152 <div class="color-item" style="background-color:#FFB94E;">
153 <span class="color-name">Floral leaf-colored</span><br>
154 <span class="hex-number">#FFB94E</span><br>
155 </div>
156 </div>
157
158 <div class="color-picker">
159 <div class="color-item" style="background-color:#E29C45;">
160 <span class="color-name">Golden fallen leaves</span><br>
161 <span class="hex-number">#E29C45</span><br>
162 </div>
163 </div>
164 <div class="color-picker">
165 <div class="color-item" style="background-color:#F9690E;">
166 <span class="color-name">ECSTASY</span><br>
167 <span class="hex-number">#F9690E</span><br>
168 </div>
169 </div>
170 <div class="color-picker">
171 <div class="color-item" style="background-color: #CA6924;">
172 <span class="color-name">Amber</span><br>
173 <span class="hex-number">#CA6924</span><br>
174 </div>
175 </div>
176 <div class="color-picker">
177 <div class="color-item" style="background-color:#F5AB35;">
178 <span class="color-name">LIGHTNING YELLOW</span><br>
179 <span class="hex-number">#F5AB35</span><br>
180 </div>
181 </div>
182 </div>
183 <!--footer-->
184 <div class="site-footer">
185 <div class="container">
186 <div class="download">
187 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
188 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
189 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
190 <!-- SmartAddon BEGIN -->
191 <script type="text/javascript">
192 (function() {
193 var s=document.createElement('script');s.type='text/javascript';s.async = true;
194 s.src='http://s1'+'.smartaddon.com/share_addon.js';
195 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
196 })();
197 </script>
198
199 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
200 <!-- SmartAddon END -->
201 </div>
202 <hr class="dashed" />
203 <div class="row">
204 <div class="col-md-4">
205 <h3>Get involved</h3>
206 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
207 </div>
208 <div class="col-md-4">
209 <h3>Contribute</h3>
210 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
211 </div>
212 <div class="col-md-4">
213 <h3>Found a bug?</h3>
214 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
215 </div>
216 </div>
217 <hr class="dashed" />
218 <div class="row">
219 <div class="col-md-6">
220 <h3>Talk to us</h3>
221 <ul>
222 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
223 <li>
224 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
225 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
226 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
227 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
228 </li>
229 </ul>
230 </div>
231 <div class="col-md-6">
232 <!-- Begin MailChimp Signup Form -->
233 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
234 <div id="mc_embed_signup">
235 <h3 style="margin-bottom: 15px;">Newsletter</h3>
236 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
237 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
238 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
239 </form>
240 </div>
241 <!--End mc_embed_signup-->
242 </div>
243 </div>
244 <hr class="dashed" />
245 <div class="copyright clearfix">
246 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
247 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
248 </div>
249 </div>
250 </div>
251 <script>
252 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
253 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
254 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
255 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
256
257 ga('create', 'UA-48721682-1', 'bootflat.github.io');
258 ga('require', 'displayfeatures');
259 ga('send', 'pageview');
260
261 </script>
262 </body>
263 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Color Picker - All - Bootflat</title>
6 <!-- Sets initial viewport load and disables zooming -->
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Flat UI colors, colors">
9 <meta name="description" content="Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs">
10 <!-- SmartAddon.com Verification -->
11 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
12 <link rel="shortcut icon" href="favicon_16.ico"/>
13 <link rel="bookmark" href="favicon_16.ico"/>
14 <!-- site css -->
15 <link rel="stylesheet" href="css/site.min.css">
16 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
17 <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
18 <!--[if lt IE 9]>
19 <script src="js/html5shiv.js"></script>
20 <script src="js/respond.min.js"></script>
21 <![endif]-->
22 <script type="text/javascript" src="js/site.min.js"></script>
23 </head>
24 <body>
25 <div class="docs-header">
26 <!--nav-->
27 <nav class="navbar navbar-default navbar-custom" role="navigation">
28 <div class="container">
29 <div class="navbar-header">
30 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
31 <span class="sr-only">Toggle navigation</span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 <span class="icon-bar"></span>
35 </button>
36 <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
37 </div>
38 <div class="collapse navbar-collapse">
39 <ul class="nav navbar-nav navbar-right">
40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
44 </ul>
45 </div>
46 </div>
47 </nav>
48 <!--header-->
49 <div class="topic">
50 <div class="container">
51 <div class="col-md-8">
52 <h3>Color Picker</h3>
53 <h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
54 </div>
55 <div class="col-md-4">
56 <div class="advertisement">
57 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
58 </div>
59 </div>
60 </div>
61 <div class="topic__infos">
62 <div class="container color-picker-nav">
63 <a class="current" href="color-picker.html">All</a>
64 <a href="color-picker-red.html">Red</a>
65 <a href="color-picker-pink.html">Pink</a>
66 <a href="color-picker-purple.html">Purple</a>
67 <a href="color-picker-blue.html">Blue</a>
68 <a href="color-picker-green.html">Green</a>
69 <a href="color-picker-yellow.html">Yellow</a>
70 <a href="color-picker-gray.html">Gray</a>
71 </div>
72 </div>
73 </div>
74 </div>
75 <!--documents-->
76 <div class="color-wrap clearfix">
77 <div class="color-picker">
78 <div class="color-item" style="background-color:#C91F37;">
79 <span class="color-name">Foreign crimson</span><br>
80 <span class="hex-number">#C91F37</span><br>
81 </div>
82 </div>
83 <div class="color-picker">
84 <div class="color-item" style="background-color:#DC3023;">
85 <span class="color-name">Red orange</span><br>
86 <span class="hex-number">#DC3023</span><br>
87 </div>
88 </div>
89 <div class="color-picker">
90 <div class="color-item" style="background-color:#9D2933;">
91 <span class="color-name">Cochineal red</span><br>
92 <span class="hex-number">#9D2933</span><br>
93 </div>
94 </div>
95 <div class="color-picker">
96 <div class="color-item" style="background-color:#CF000F;">
97 <span class="color-name">Monza</span><br>
98 <span class="hex-number">#CF000F</span><br>
99 </div>
100 </div>
101 <div class="color-picker">
102 <div class="color-item" style="background-color:#E68364;">
103 <span class="color-name">Brewed mustard-brown</span><br>
104 <span class="hex-number">#E68364</span><br>
105 </div>
106 </div>
107 <div class="color-picker">
108 <div class="color-item" style="background-color:#F22613;">
109 <span class="color-name">Pomegranate</span><br>
110 <span class="hex-number">#F22613</span><br>
111 </div>
112 </div>
113
114 <div class="color-picker">
115 <div class="color-item" style="background-color:#CF3A24;">
116 <span class="color-name">Scarlet</span><br>
117 <span class="hex-number">#CF3A24</span><br>
118 </div>
119 </div>
120 <div class="color-picker">
121 <div class="color-item" style="background-color:#C3272B;">
122 <span class="color-name">Pure crimson</span><br>
123 <span class="hex-number">#C3272B</span><br>
124 </div>
125 </div>
126 <div class="color-picker">
127 <div class="color-item" style="background-color: #8F1D21;">
128 <span class="color-name">True red</span><br>
129 <span class="hex-number">#8F1D21</span><br>
130 </div>
131 </div>
132 <div class="color-picker">
133 <div class="color-item" style="background-color:#D24D57;">
134 <span class="color-name">Chestnut Rose</span><br>
135 <span class="hex-number">#D24D57</span><br>
136 </div>
137 </div>
138 <div class="color-picker">
139 <div class="color-item" style="background-color:#F08F90;">
140 <span class="color-name">One kin dye</span><br>
141 <span class="hex-number">#F08F907</span><br>
142 </div>
143 </div>
144 <div class="color-picker">
145 <div class="color-item" style="background-color:#F47983;">
146 <span class="color-name">Peach-colored</span><br>
147 <span class="hex-number">#F47983</span><br>
148 </div>
149 </div>
150 <div class="color-picker">
151 <div class="color-item" style="background-color:#DB5A6B;">
152 <span class="color-name">Red plum colored</span><br>
153 <span class="hex-number">#DB5A6B</span><br>
154 </div>
155 </div>
156 <div class="color-picker">
157 <div class="color-item" style="background-color:#C93756;">
158 <span class="color-name">Medium crimson</span><br>
159 <span class="hex-number">#C93756</span><br>
160 </div>
161 </div>
162 <div class="color-picker">
163 <div class="color-item" style="background-color:#FCC9B9;">
164 <span class="color-name">Cherry blossom color</span><br>
165 <span class="hex-number">#FCC9B9</span><br>
166 </div>
167 </div>
168 <div class="color-picker">
169 <div class="color-item" style="background-color:#FFB3A7;">
170 <span class="color-name">Washed-out crimson</span><br>
171 <span class="hex-number">#FFB3A7</span><br>
172 </div>
173 </div>
174 <div class="color-picker">
175 <div class="color-item" style="background-color:#F62459;">
176 <span class="color-name">RADICAL RED</span><br>
177 <span class="hex-number">#F62459</span><br>
178 </div>
179 </div>
180 <div class="color-picker">
181 <div class="color-item" style="background-color:#F58F84;">
182 <span class="color-name">Ibis wing color</span><br>
183 <span class="hex-number">#F58F84</span><br>
184 </div>
185 </div>
186 <div class="color-picker">
187 <div class="color-item" style="background-color:#875F9A;">
188 <span class="color-name">Wisteria purple</span><br>
189 <span class="hex-number">#875F9A</span><br>
190 </div>
191 </div>
192 <div class="color-picker">
193 <div class="color-item" style="background-color:#5D3F6A;">
194 <span class="color-name">Bellflower color</span><br>
195 <span class="hex-number">#5D3F6A</span><br>
196 </div>
197 </div>
198 <div class="color-picker">
199 <div class="color-item" style="background-color:#89729E;">
200 <span class="color-name">Wisteria color</span><br>
201 <span class="hex-number">#89729E</span><br>
202 </div>
203 </div>
204 <div class="color-picker">
205 <div class="color-item" style="background-color:#763568;">
206 <span class="color-name">Iris color</span><br>
207 <span class="hex-number">#763568</span><br>
208 </div>
209 </div>
210 <div class="color-picker">
211 <div class="color-item" style="background-color:#8D608C;">
212 <span class="color-name">Tatarian aster color</span><br>
213 <span class="hex-number">#8D608C</span><br>
214 </div>
215 </div>
216 <div class="color-picker">
217 <div class="color-item" style="background-color:#A87CA0;">
218 <span class="color-name">Thin color</span><br>
219 <span class="hex-number">#A87CA0</span><br>
220 </div>
221 </div>
222
223 <div class="color-picker">
224 <div class="color-item" style="background-color:#5B3256;">
225 <span class="color-name">Violet color</span><br>
226 <span class="hex-number">#5B3256</span><br>
227 </div>
228 </div>
229 <div class="color-picker">
230 <div class="color-item" style="background-color:#BF55EC;">
231 <span class="color-name">MEDIUM PURPLE</span><br>
232 <span class="hex-number">#BF55EC</span><br>
233 </div>
234 </div>
235 <div class="color-picker">
236 <div class="color-item" style="background-color: #8E44AD;">
237 <span class="color-name">STUDIO</span><br>
238 <span class="hex-number">#8E44AD</span><br>
239 </div>
240 </div>
241 <div class="color-picker">
242 <div class="color-item" style="background-color:#9B59B6;">
243 <span class="color-name">WISTERIA</span><br>
244 <span class="hex-number">#9B59B6</span><br>
245 </div>
246 </div>
247 <div class="color-picker">
248 <div class="color-item" style="background-color:#BE90D4;">
249 <span class="color-name">LIGHT WISTERIA</span><br>
250 <span class="hex-number">#BE90D4</span><br>
251 </div>
252 </div>
253 <div class="color-picker">
254 <div class="color-item" style="background-color:#4D8FAC;">
255 <span class="color-name">Sky color</span><br>
256 <span class="hex-number">#4D8FAC</span><br>
257 </div>
258 </div>
259 <div class="color-picker">
260 <div class="color-item" style="background-color:#5D8CAE;">
261 <span class="color-name">Ultramarine color</span><br>
262 <span class="hex-number">#5D8CAE</span><br>
263 </div>
264 </div>
265 <div class="color-picker">
266 <div class="color-item" style="background-color:#22A7F0;">
267 <span class="color-name">PICTON BLUE</span><br>
268 <span class="hex-number">#22A7F0</span><br>
269 </div>
270 </div>
271 <div class="color-picker">
272 <div class="color-item" style="background-color:#19B5FE;">
273 <span class="color-name">DODGER BLUE</span><br>
274 <span class="hex-number">#19B5FE</span><br>
275 </div>
276 </div>
277 <div class="color-picker">
278 <div class="color-item" style="background-color:#59ABE3;">
279 <span class="color-name">PICTON BLUE</span><br>
280 <span class="hex-number">#59ABE3</span><br>
281 </div>
282 </div>
283 <div class="color-picker">
284 <div class="color-item" style="background-color:#48929B;">
285 <span class="color-name">Light blue color</span><br>
286 <span class="hex-number">#48929B</span><br>
287 </div>
288 </div>
289
290 <div class="color-picker">
291 <div class="color-item" style="background-color:#317589;">
292 <span class="color-name">Thousand herb</span><br>
293 <span class="hex-number">#317589</span><br>
294 </div>
295 </div>
296 <div class="color-picker">
297 <div class="color-item" style="background-color:#89C4F4;">
298 <span class="color-name">JORDY BLUE</span><br>
299 <span class="hex-number">#89C4F4</span><br>
300 </div>
301 </div>
302 <div class="color-picker">
303 <div class="color-item" style="background-color: #4B77BE;">
304 <span class="color-name">STEEL BLUE</span><br>
305 <span class="hex-number">#4B77BE</span><br>
306 </div>
307 </div>
308 <div class="color-picker">
309 <div class="color-item" style="background-color:#1F4788;">
310 <span class="color-name">Lapis lazuli color</span><br>
311 <span class="hex-number">#1F4788</span><br>
312 </div>
313 </div>
314 <div class="color-picker">
315 <div class="color-item" style="background-color:#003171;">
316 <span class="color-name">Navy blue color</span><br>
317 <span class="hex-number">#003171</span><br>
318 </div>
319 </div>
320
321 <div class="color-picker">
322 <div class="color-item" style="background-color:#044F67;">
323 <span class="color-name">Hanada</span><br>
324 <span class="hex-number">#044F67</span><br>
325 </div>
326 </div>
327 <div class="color-picker">
328 <div class="color-item" style="background-color: #264348;">
329 <span class="color-name">Indigo color</span><br>
330 <span class="hex-number">#264348</span><br>
331 </div>
332 </div>
333 <div class="color-picker">
334 <div class="color-item" style="background-color:#7A942E;">
335 <span class="color-name">Siskin sprout yellow</span><br>
336 <span class="hex-number">#7A942E</span><br>
337 </div>
338 </div>
339 <div class="color-picker">
340 <div class="color-item" style="background-color:#8DB255;">
341 <span class="color-name">young green onion</span><br>
342 <span class="hex-number">#8DB255</span><br>
343 </div>
344 </div>
345 <div class="color-picker">
346 <div class="color-item" style="background-color:#5B8930;">
347 <span class="color-name">Fresh onion</span><br>
348 <span class="hex-number">#5B8930</span><br>
349 </div>
350 </div>
351 <div class="color-picker">
352 <div class="color-item" style="background-color:#6B9362;">
353 <span class="color-name">Young bamboo color</span><br>
354 <span class="hex-number">#6B9362</span><br>
355 </div>
356 </div>
357 <div class="color-picker">
358 <div class="color-item" style="background-color:#407A52;">
359 <span class="color-name">Patina</span><br>
360 <span class="hex-number">#407A52</span><br>
361 </div>
362 </div>
363 <div class="color-picker">
364 <div class="color-item" style="background-color:#006442;">
365 <span class="color-name">Green bamboo</span><br>
366 <span class="hex-number">#006442</span><br>
367 </div>
368 </div>
369
370 <div class="color-picker">
371 <div class="color-item" style="background-color:#87D37C;">
372 <span class="color-name">GOSSIP</span><br>
373 <span class="hex-number">#87D37C</span><br>
374 </div>
375 </div>
376 <div class="color-picker">
377 <div class="color-item" style="background-color:#26A65B;">
378 <span class="color-name">EUCALYPTUS</span><br>
379 <span class="hex-number">#26A65B</span><br>
380 </div>
381 </div>
382 <div class="color-picker">
383 <div class="color-item" style="background-color: #26C281;">
384 <span class="color-name">JUNGLE GREEN</span><br>
385 <span class="hex-number">#26C281</span><br>
386 </div>
387 </div>
388 <div class="color-picker">
389 <div class="color-item" style="background-color:#049372;">
390 <span class="color-name">OBSERVATORY</span><br>
391 <span class="hex-number">#049372</span><br>
392 </div>
393 </div>
394
395 <div class="color-picker">
396 <div class="color-item" style="background-color:#2ABB9B;">
397 <span class="color-name">JUNGLE GREEN</span><br>
398 <span class="hex-number">#2ABB9B</span><br>
399 </div>
400 </div>
401 <div class="color-picker">
402 <div class="color-item" style="background-color:#16A085;">
403 <span class="color-name">MOUNTAIN MEADOW</span><br>
404 <span class="hex-number">#16A085</span><br>
405 </div>
406 </div>
407 <div class="color-picker">
408 <div class="color-item" style="background-color:#36D7B7;">
409 <span class="color-name">TURQUOISE</span><br>
410 <span class="hex-number">#36D7B7</span><br>
411 </div>
412 </div>
413 <div class="color-picker">
414 <div class="color-item" style="background-color: #03A678;">
415 <span class="color-name">FREE SPEECH AQUAMARINE</span><br>
416 <span class="hex-number">#03A678</span><br>
417 </div>
418 </div>
419 <div class="color-picker">
420 <div class="color-item" style="background-color:#4DAF7C;">
421 <span class="color-name">OCEAN GREEN</span><br>
422 <span class="hex-number">#4DAF7C</span><br>
423 </div>
424 </div>
425 <div class="color-picker">
426 <div class="color-item" style="background-color:#D9B611;">
427 <span class="color-name">Patrinia flowers</span><br>
428 <span class="hex-number">#D9B611</span><br>
429 </div>
430 </div>
431 <div class="color-picker">
432 <div class="color-item" style="background-color:#F3C13A;">
433 <span class="color-name">Amur cork tree</span><br>
434 <span class="hex-number">#F3C13A</span><br>
435 </div>
436 </div>
437 <div class="color-picker">
438 <div class="color-item" style="background-color:#F7CA18;">
439 <span class="color-name">RIPE LEMON</span><br>
440 <span class="hex-number">#F7CA18</span><br>
441 </div>
442 </div>
443 <div class="color-picker">
444 <div class="color-item" style="background-color:#E2B13C;">
445 <span class="color-name">Japanese triandra grass</span><br>
446 <span class="hex-number">#E2B13C</span><br>
447 </div>
448 </div>
449 <div class="color-picker">
450 <div class="color-item" style="background-color:#A17917;">
451 <span class="color-name">Rapeseed oil-colored</span><br>
452 <span class="hex-number">#A17917</span><br>
453 </div>
454 </div>
455 <div class="color-picker">
456 <div class="color-item" style="background-color:#F5D76E;">
457 <span class="color-name">CREAM CAN</span><br>
458 <span class="hex-number">#F5D76E</span><br>
459 </div>
460 </div>
461
462 <div class="color-picker">
463 <div class="color-item" style="background-color:#F4D03F;">
464 <span class="color-name">SAFFRON</span><br>
465 <span class="hex-number">#F4D03F</span><br>
466 </div>
467 </div>
468 <div class="color-picker">
469 <div class="color-item" style="background-color:#FFA400;">
470 <span class="color-name">Bright golden yellow</span><br>
471 <span class="hex-number">#FFA400</span><br>
472 </div>
473 </div>
474 <div class="color-picker">
475 <div class="color-item" style="background-color:#E08A1E;">
476 <span class="color-name">Sumac-dyed</span><br>
477 <span class="hex-number">#E08A1E</span><br>
478 </div>
479 </div>
480 <div class="color-picker">
481 <div class="color-item" style="background-color:#FFB61E;">
482 <span class="color-name">Gamboge</span><br>
483 <span class="hex-number">#FFB61E</span><br>
484 </div>
485 </div>
486 <div class="color-picker">
487 <div class="color-item" style="background-color:#FAA945;">
488 <span class="color-name">Corn-colored</span><br>
489 <span class="hex-number">#FAA945</span><br>
490 </div>
491 </div>
492 <div class="color-picker">
493 <div class="color-item" style="background-color:#FFA631;">
494 <span class="color-name">Egg-colored</span><br>
495 <span class="hex-number">#FFA631</span><br>
496 </div>
497 </div>
498 <div class="color-picker">
499 <div class="color-item" style="background-color:#FFB94E;">
500 <span class="color-name">Floral leaf-colored</span><br>
501 <span class="hex-number">#FFB94E</span><br>
502 </div>
503 </div>
504
505 <div class="color-picker">
506 <div class="color-item" style="background-color:#E29C45;">
507 <span class="color-name">Golden fallen leaves</span><br>
508 <span class="hex-number">#E29C45</span><br>
509 </div>
510 </div>
511 <div class="color-picker">
512 <div class="color-item" style="background-color:#F9690E;">
513 <span class="color-name">ECSTASY</span><br>
514 <span class="hex-number">#F9690E</span><br>
515 </div>
516 </div>
517 <div class="color-picker">
518 <div class="color-item" style="background-color: #CA6924;">
519 <span class="color-name">Amber</span><br>
520 <span class="hex-number">#CA6924</span><br>
521 </div>
522 </div>
523 <div class="color-picker">
524 <div class="color-item" style="background-color:#F5AB35;">
525 <span class="color-name">LIGHTNING YELLOW</span><br>
526 <span class="hex-number">#F5AB35</span><br>
527 </div>
528 </div>
529 <div class="color-picker">
530 <div class="color-item" style="background-color:#BFBFBF;">
531 <span class="color-name">SILVER</span><br>
532 <span class="hex-number">#BFBFBF</span><br>
533 </div>
534 </div>
535 <div class="color-picker">
536 <div class="color-item" style="background-color:#F2F1EF;">
537 <span class="color-name">CARARRA</span><br>
538 <span class="hex-number">#F2F1EF</span><br>
539 </div>
540 </div>
541 <div class="color-picker">
542 <div class="color-item" style="background-color:#BDC3C7;">
543 <span class="color-name">SILVER SAND</span><br>
544 <span class="hex-number">#BDC3C7</span><br>
545 </div>
546 </div>
547 <div class="color-picker">
548 <div class="color-item" style="background-color:#ECF0F1;">
549 <span class="color-name">PORCELAIN</span><br>
550 <span class="hex-number">#ECF0F1</span><br>
551 </div>
552 </div>
553 <div class="color-picker">
554 <div class="color-item" style="background-color:#D2D7D3;">
555 <span class="color-name">PUMICE</span><br>
556 <span class="hex-number">#D2D7D3</span><br>
557 </div>
558 </div>
559 <div class="color-picker">
560 <div class="color-item" style="background-color:#757D75;">
561 <span class="color-name">Harbor rat</span><br>
562 <span class="hex-number">#757D75</span><br>
563 </div>
564 </div>
565
566 <div class="color-picker">
567 <div class="color-item" style="background-color:#EEEEEE;">
568 <span class="color-name">GALLERY</span><br>
569 <span class="hex-number">#EEEEEE</span><br>
570 </div>
571 </div>
572 <div class="color-picker">
573 <div class="color-item" style="background-color:#ABB7B7;">
574 <span class="color-name">EDWARD</span><br>
575 <span class="hex-number">#ABB7B7</span><br>
576 </div>
577 </div>
578 <div class="color-picker">
579 <div class="color-item" style="background-color: #6C7A89;">
580 <span class="color-name">LYNCH</span><br>
581 <span class="hex-number">#6C7A89</span><br>
582 </div>
583 </div>
584 <div class="color-picker">
585 <div class="color-item" style="background-color:#95A5A6;">
586 <span class="color-name">CASCADE</span><br>
587 <span class="hex-number">#95A5A6</span><br>
588 </div>
589 </div>
590 </div>
591 <!--footer-->
592 <div class="site-footer">
593 <div class="container">
594 <div class="download">
595 <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
596 <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
597 <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
598 <!-- SmartAddon BEGIN -->
599 <script type="text/javascript">
600 (function() {
601 var s=document.createElement('script');s.type='text/javascript';s.async = true;
602 s.src='http://s1'+'.smartaddon.com/share_addon.js';
603 var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
604 })();
605 </script>
606
607 <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
608 <!-- SmartAddon END -->
609 </div>
610 <hr class="dashed" />
611 <div class="row">
612 <div class="col-md-4">
613 <h3>Get involved</h3>
614 <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
615 </div>
616 <div class="col-md-4">
617 <h3>Contribute</h3>
618 <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
619 </div>
620 <div class="col-md-4">
621 <h3>Found a bug?</h3>
622 <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
623 </div>
624 </div>
625 <hr class="dashed" />
626 <div class="row">
627 <div class="col-md-6">
628 <h3>Talk to us</h3>
629 <ul>
630 <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
631 <li>
632 <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
633 <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
634 <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
635 <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
636 </li>
637 </ul>
638 </div>
639 <div class="col-md-6">
640 <!-- Begin MailChimp Signup Form -->
641 <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
642 <div id="mc_embed_signup">
643 <h3 style="margin-bottom: 15px;">Newsletter</h3>
644 <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
645 <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
646 <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
647 </form>
648 </div>
649 <!--End mc_embed_signup-->
650 </div>
651 </div>
652 <hr class="dashed" />
653 <div class="copyright clearfix">
654 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
655 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
656 </div>
657 </div>
658 </div>
659 <script>
660 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
661 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
662 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
663 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
664
665 ga('create', 'UA-48721682-1', 'bootflat.github.io');
666 ga('require', 'displayfeatures');
667 ga('send', 'pageview');
668
669 </script>
670 </body>
671 </html>
...@@ -662,6 +662,114 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -662,6 +662,114 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
662 max-width: 100%; 662 max-width: 100%;
663 } 663 }
664 /* ---------------------------------- 664 /* ----------------------------------
665 * color picker
666 * ---------------------------------- */
667 .color-picker-nav a {
668 text-decoration: none !important;
669 color: #0b859c !important;
670 margin: 0 10px;
671 }
672 .color-picker-nav a:hover {
673 text-decoration: underline !important;
674 }
675 .color-picker-nav a.current {
676 font-weight: bold;
677 }
678 .color-wrap {
679 position: relative;
680 clear: both;
681 left: 0;
682 width: 100%;
683 z-index: 500;
684 }
685 .color-picker {
686 width: 20%;
687 padding-bottom: 18%;
688 color: #FFF;
689 position: relative;
690 float: left;
691 top: 0;
692 bottom: 0;
693 }
694 .color-item {
695 position: absolute;
696 margin: 0;
697 left: 0;
698 right: 0;
699 top: 0;
700 bottom: 0;
701 text-align: center;
702 text-transform: uppercase;
703 padding: 35%;
704 }
705 .color-item:hover {
706 display: inline;
707 z-index: 999;
708 overflow: hidden;
709 cursor: pointer;
710 -webkit-transform: scale(1);
711 -moz-transform: scale(1);
712 -o-transform: scale(1);
713 transform: scale(1);
714 -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
715 -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
716 box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
717 }
718 /* Tablet Portrait size to standard 960 (devices and browsers) */
719 @media only screen and (min-width: 768px) and (max-width: 959px)
720 {
721 .color-picker{
722 width: 50%;
723 color: #FFF;
724 }
725 .color-item{
726 padding: 8%;
727 font-size: 0.875em;
728 }
729 .color-name,.hex-number {
730 position: relative;
731 line-height: 22px;
732 text-align: center;
733 }
734 }
735
736 /* All Mobile Sizes (devices and browser) */
737 @media only screen and (max-width: 767px)
738 {
739 .color-picker {
740 width: 50%;
741 color: #FFF;
742 }
743 .color-item{
744 padding: 8%;
745 font-size: 0.750em;
746 }
747 .color-name,.hex-number {
748 position: relative;
749 line-height: 22px;
750 text-align: center;
751 }
752 }
753
754 /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
755 @media only screen and (min-width: 480px) and (max-width: 767px)
756 {
757 .color-item{
758 padding: 5%;
759 font-size: 0.750em;
760 }
761 .color-picker{
762 width: 100%;
763 color: #FFF;
764 }
765 .color-name,.hex-number {
766 position: relative;
767 line-height: 12px;
768 text-align: center;
769 }
770 }
771
772 /* ----------------------------------
665 * btn-group & labels 773 * btn-group & labels
666 * ---------------------------------- */ 774 * ---------------------------------- */
667 .blank { 775 .blank {
...@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { ...@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
675 } 783 }
676 .site-footer { 784 .site-footer {
677 position: relative; 785 position: relative;
678 z-index: 2000; 786 z-index: 400;
679 border-top: 1px dashed #AAB2BD; 787 border-top: 1px dashed #AAB2BD;
680 padding: 40px 0 20px; 788 padding: 40px 0 20px;
681 background-color: #f5f5f5; 789 background-color: #f5f5f5;
......
This diff could not be displayed because it is too large.
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
11 <meta name="description" content="The complete style of the Bootflat Framework.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -39,6 +41,7 @@ ...@@ -39,6 +41,7 @@
39 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 41 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
40 <li><a class="nav-link current" href="documentation.html">Documentation</a></li> 42 <li><a class="nav-link current" href="documentation.html">Documentation</a></li>
41 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li> 43 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
44 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
42 </ul> 45 </ul>
43 </div> 46 </div>
44 </div> 47 </div>
...@@ -68,7 +71,7 @@ ...@@ -68,7 +71,7 @@
68 <!-- Color Swatches 71 <!-- Color Swatches
69 ================================================== --> 72 ================================================== -->
70 <div class="example"> 73 <div class="example">
71 <h2 class="example-title">Color Swatches</h2> 74 <h2 class="example-title">Color Swatches <span>(<b>More Colors See</b>: <a href="color-picker.html">Flat UI Color Picker</a>)</span></h2>
72 <div class="row"> 75 <div class="row">
73 <div class="col-md-2"> 76 <div class="col-md-2">
74 <div class="color-swatches"> 77 <div class="color-swatches">
...@@ -2279,7 +2282,7 @@ ...@@ -2279,7 +2282,7 @@
2279 </div> 2282 </div>
2280 <hr class="dashed" /> 2283 <hr class="dashed" />
2281 <div class="copyright clearfix"> 2284 <div class="copyright clearfix">
2282 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a></p> 2285 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
2283 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p> 2286 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
2284 </div> 2287 </div>
2285 </div> 2288 </div>
......
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
11 <meta name="description" content="Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -38,6 +40,7 @@ ...@@ -38,6 +40,7 @@
38 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 40 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link current" href="free-psd.html">Free PSD</a></li> 42 <li><a class="nav-link current" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
41 </ul> 44 </ul>
42 </div> 45 </div>
43 </div> 46 </div>
...@@ -193,7 +196,7 @@ ...@@ -193,7 +196,7 @@
193 </div> 196 </div>
194 <hr class="dashed" /> 197 <hr class="dashed" />
195 <div class="copyright clearfix"> 198 <div class="copyright clearfix">
196 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a></p> 199 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
197 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p> 200 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
198 </div> 201 </div>
199 </div> 202 </div>
......
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
11 <meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 12 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 13 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 14 <!-- site css -->
...@@ -38,6 +40,7 @@ ...@@ -38,6 +40,7 @@
38 <li><a class="nav-link current" href="getting-started.html">Getting Started</a></li> 40 <li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 41 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li> 42 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
43 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
41 </ul> 44 </ul>
42 </div> 45 </div>
43 </div> 46 </div>
...@@ -82,6 +85,8 @@ ...@@ -82,6 +85,8 @@
82 <dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd> 85 <dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd>
83 <dt>Bootflat UI Kit Free Download</dt> 86 <dt>Bootflat UI Kit Free Download</dt>
84 <dd><a href="free-psd.html">Bootflat UI Kit</a> is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</dd> 87 <dd><a href="free-psd.html">Bootflat UI Kit</a> is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</dd>
88 <dt>Bootflat Flat UI Color Picker</dt>
89 <dd><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</dd>
85 </dl> 90 </dl>
86 </div> 91 </div>
87 <!-- 92 <!--
...@@ -176,6 +181,12 @@ ...@@ -176,6 +181,12 @@
176 <p>For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</p> 181 <p>For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.</p>
177 <p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p> 182 <p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
178 </div> 183 </div>
184 <!-- Color Picker
185 ================================================== -->
186 <div class="docs-article docs--start" id="color-picker">
187 <h3>Bootflat Flat UI Color Picker</h3>
188 <p><a href="color-picker.html">Bootflat Flat UI Color Picker</a> is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.</p>
189 </div>
179 <!-- Licensing 190 <!-- Licensing
180 ================================================== --> 191 ================================================== -->
181 <div class="docs-article docs--start" id="licensing"> 192 <div class="docs-article docs--start" id="licensing">
...@@ -248,7 +259,7 @@ ...@@ -248,7 +259,7 @@
248 </div> 259 </div>
249 <hr class="dashed" /> 260 <hr class="dashed" />
250 <div class="copyright clearfix"> 261 <div class="copyright clearfix">
251 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a></p> 262 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
252 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p> 263 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
253 </div> 264 </div>
254 </div> 265 </div>
......
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8 <!-- SmartAddon.com Verification --> 8 <!-- SmartAddon.com Verification -->
9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" /> 9 <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
10 <meta name="keywords" content="Flat UI Design, UI design, UI, user interface, web interface design, user interface design, Flat web design, Bootstrap, Bootflat, Flat UI colors, colors">
11 <meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
12 And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps.">
10 <link rel="shortcut icon" href="favicon_16.ico"/> 13 <link rel="shortcut icon" href="favicon_16.ico"/>
11 <link rel="bookmark" href="favicon_16.ico"/> 14 <link rel="bookmark" href="favicon_16.ico"/>
12 <!-- site css --> 15 <!-- site css -->
...@@ -38,6 +41,7 @@ ...@@ -38,6 +41,7 @@
38 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li> 41 <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
39 <li><a class="nav-link" href="documentation.html">Documentation</a></li> 42 <li><a class="nav-link" href="documentation.html">Documentation</a></li>
40 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li> 43 <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
44 <li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
41 </ul> 45 </ul>
42 </div> 46 </div>
43 </div> 47 </div>
...@@ -176,7 +180,7 @@ ...@@ -176,7 +180,7 @@
176 </div> 180 </div>
177 <hr class="dashed" /> 181 <hr class="dashed" />
178 <div class="copyright clearfix"> 182 <div class="copyright clearfix">
179 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a></p> 183 <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a>&nbsp;&bull;&nbsp;<a href="color-picker.html">Color Picker</a></p>
180 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p> 184 <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
181 </div> 185 </div>
182 </div> 186 </div>
......