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/
+ [Getting Started](http://bootflat.github.io/getting-started.html)
+ [Documentation](http://bootflat.github.io/documentation.html)
+ [Free PSD](http://bootflat.github.io/free-psd.html)
+ [Flat UI Color Picker](http://bootflat.github.io/color-picker.html)
## Changelog:
2014/8/26 add `color picker`, you can make a flat design with it
2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
2014/6/5 version 2.0.2 `add wigets: Toggle, Selecter, Stepper`
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Blue - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a class="current" href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#4D8FAC;">
<span class="color-name">Sky color</span><br>
<span class="hex-number">#4D8FAC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D8CAE;">
<span class="color-name">Ultramarine color</span><br>
<span class="hex-number">#5D8CAE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#22A7F0;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#22A7F0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#19B5FE;">
<span class="color-name">DODGER BLUE</span><br>
<span class="hex-number">#19B5FE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#59ABE3;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#59ABE3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#48929B;">
<span class="color-name">Light blue color</span><br>
<span class="hex-number">#48929B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#317589;">
<span class="color-name">Thousand herb</span><br>
<span class="hex-number">#317589</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89C4F4;">
<span class="color-name">JORDY BLUE</span><br>
<span class="hex-number">#89C4F4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #4B77BE;">
<span class="color-name">STEEL BLUE</span><br>
<span class="hex-number">#4B77BE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#1F4788;">
<span class="color-name">Lapis lazuli color</span><br>
<span class="hex-number">#1F4788</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#003171;">
<span class="color-name">Navy blue color</span><br>
<span class="hex-number">#003171</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#044F67;">
<span class="color-name">Hanada</span><br>
<span class="hex-number">#044F67</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #264348;">
<span class="color-name">Indigo color</span><br>
<span class="hex-number">#264348</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Gray - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a class="current" href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#BFBFBF;">
<span class="color-name">SILVER</span><br>
<span class="hex-number">#BFBFBF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F2F1EF;">
<span class="color-name">CARARRA</span><br>
<span class="hex-number">#F2F1EF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BDC3C7;">
<span class="color-name">SILVER SAND</span><br>
<span class="hex-number">#BDC3C7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ECF0F1;">
<span class="color-name">PORCELAIN</span><br>
<span class="hex-number">#ECF0F1</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D2D7D3;">
<span class="color-name">PUMICE</span><br>
<span class="hex-number">#D2D7D3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#757D75;">
<span class="color-name">Harbor rat</span><br>
<span class="hex-number">#757D75</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#EEEEEE;">
<span class="color-name">GALLERY</span><br>
<span class="hex-number">#EEEEEE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ABB7B7;">
<span class="color-name">EDWARD</span><br>
<span class="hex-number">#ABB7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #6C7A89;">
<span class="color-name">LYNCH</span><br>
<span class="hex-number">#6C7A89</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#95A5A6;">
<span class="color-name">CASCADE</span><br>
<span class="hex-number">#95A5A6</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Green - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a class="current" href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#7A942E;">
<span class="color-name">Siskin sprout yellow</span><br>
<span class="hex-number">#7A942E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8DB255;">
<span class="color-name">young green onion</span><br>
<span class="hex-number">#8DB255</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B8930;">
<span class="color-name">Fresh onion</span><br>
<span class="hex-number">#5B8930</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#6B9362;">
<span class="color-name">Young bamboo color</span><br>
<span class="hex-number">#6B9362</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#407A52;">
<span class="color-name">Patina</span><br>
<span class="hex-number">#407A52</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#006442;">
<span class="color-name">Green bamboo</span><br>
<span class="hex-number">#006442</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#87D37C;">
<span class="color-name">GOSSIP</span><br>
<span class="hex-number">#87D37C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#26A65B;">
<span class="color-name">EUCALYPTUS</span><br>
<span class="hex-number">#26A65B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #26C281;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#26C281</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#049372;">
<span class="color-name">OBSERVATORY</span><br>
<span class="hex-number">#049372</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#2ABB9B;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#2ABB9B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#16A085;">
<span class="color-name">MOUNTAIN MEADOW</span><br>
<span class="hex-number">#16A085</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#36D7B7;">
<span class="color-name">TURQUOISE</span><br>
<span class="hex-number">#36D7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #03A678;">
<span class="color-name">FREE SPEECH AQUAMARINE</span><br>
<span class="hex-number">#03A678</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4DAF7C;">
<span class="color-name">OCEAN GREEN</span><br>
<span class="hex-number">#4DAF7C</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Pink - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a class="current" href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#F08F90;">
<span class="color-name">One kin dye</span><br>
<span class="hex-number">#F08F907</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F47983;">
<span class="color-name">Peach-colored</span><br>
<span class="hex-number">#F47983</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DB5A6B;">
<span class="color-name">Red plum colored</span><br>
<span class="hex-number">#DB5A6B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C93756;">
<span class="color-name">Medium crimson</span><br>
<span class="hex-number">#C93756</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FCC9B9;">
<span class="color-name">Cherry blossom color</span><br>
<span class="hex-number">#FCC9B9</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB3A7;">
<span class="color-name">Washed-out crimson</span><br>
<span class="hex-number">#FFB3A7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F62459;">
<span class="color-name">RADICAL RED</span><br>
<span class="hex-number">#F62459</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F58F84;">
<span class="color-name">Ibis wing color</span><br>
<span class="hex-number">#F58F84</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Purple - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a class="current" href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#875F9A;">
<span class="color-name">Wisteria purple</span><br>
<span class="hex-number">#875F9A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D3F6A;">
<span class="color-name">Bellflower color</span><br>
<span class="hex-number">#5D3F6A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89729E;">
<span class="color-name">Wisteria color</span><br>
<span class="hex-number">#89729E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#763568;">
<span class="color-name">Iris color</span><br>
<span class="hex-number">#763568</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8D608C;">
<span class="color-name">Tatarian aster color</span><br>
<span class="hex-number">#8D608C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A87CA0;">
<span class="color-name">Thin color</span><br>
<span class="hex-number">#A87CA0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B3256;">
<span class="color-name">Violet color</span><br>
<span class="hex-number">#5B3256</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BF55EC;">
<span class="color-name">MEDIUM PURPLE</span><br>
<span class="hex-number">#BF55EC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8E44AD;">
<span class="color-name">STUDIO</span><br>
<span class="hex-number">#8E44AD</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9B59B6;">
<span class="color-name">WISTERIA</span><br>
<span class="hex-number">#9B59B6</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BE90D4;">
<span class="color-name">LIGHT WISTERIA</span><br>
<span class="hex-number">#BE90D4</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Red - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a class="current" href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#C91F37;">
<span class="color-name">Foreign crimson</span><br>
<span class="hex-number">#C91F37</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DC3023;">
<span class="color-name">Red orange</span><br>
<span class="hex-number">#DC3023</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9D2933;">
<span class="color-name">Cochineal red</span><br>
<span class="hex-number">#9D2933</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF000F;">
<span class="color-name">Monza</span><br>
<span class="hex-number">#CF000F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E68364;">
<span class="color-name">Brewed mustard-brown</span><br>
<span class="hex-number">#E68364</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span><br>
<span class="hex-number">#F22613</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF3A24;">
<span class="color-name">Scarlet</span><br>
<span class="hex-number">#CF3A24</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C3272B;">
<span class="color-name">Pure crimson</span><br>
<span class="hex-number">#C3272B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8F1D21;">
<span class="color-name">True red</span><br>
<span class="hex-number">#8F1D21</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span><br>
<span class="hex-number">#D24D57</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - Yellow - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a class="current" href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-orange.html">Orange</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#D9B611;">
<span class="color-name">Patrinia flowers</span><br>
<span class="hex-number">#D9B611</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F3C13A;">
<span class="color-name">Amur cork tree</span><br>
<span class="hex-number">#F3C13A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F7CA18;">
<span class="color-name">RIPE LEMON</span><br>
<span class="hex-number">#F7CA18</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E2B13C;">
<span class="color-name">Japanese triandra grass</span><br>
<span class="hex-number">#E2B13C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A17917;">
<span class="color-name">Rapeseed oil-colored</span><br>
<span class="hex-number">#A17917</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5D76E;">
<span class="color-name">CREAM CAN</span><br>
<span class="hex-number">#F5D76E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F4D03F;">
<span class="color-name">SAFFRON</span><br>
<span class="hex-number">#F4D03F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA400;">
<span class="color-name">Bright golden yellow</span><br>
<span class="hex-number">#FFA400</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E08A1E;">
<span class="color-name">Sumac-dyed</span><br>
<span class="hex-number">#E08A1E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB61E;">
<span class="color-name">Gamboge</span><br>
<span class="hex-number">#FFB61E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FAA945;">
<span class="color-name">Corn-colored</span><br>
<span class="hex-number">#FAA945</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA631;">
<span class="color-name">Egg-colored</span><br>
<span class="hex-number">#FFA631</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB94E;">
<span class="color-name">Floral leaf-colored</span><br>
<span class="hex-number">#FFB94E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E29C45;">
<span class="color-name">Golden fallen leaves</span><br>
<span class="hex-number">#E29C45</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F9690E;">
<span class="color-name">ECSTASY</span><br>
<span class="hex-number">#F9690E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #CA6924;">
<span class="color-name">Amber</span><br>
<span class="hex-number">#CA6924</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5AB35;">
<span class="color-name">LIGHTNING YELLOW</span><br>
<span class="hex-number">#F5AB35</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color Picker - All - Bootflat</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<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">
<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">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<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">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body>
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link current" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<div class="col-md-8">
<h3>Color Picker</h3>
<h4>Bootflat Flat UI color picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs</h4>
</div>
<div class="col-md-4">
<div class="advertisement">
<script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
</div>
</div>
</div>
<div class="topic__infos">
<div class="container color-picker-nav">
<a class="current" href="color-picker.html">All</a>
<a href="color-picker-red.html">Red</a>
<a href="color-picker-pink.html">Pink</a>
<a href="color-picker-purple.html">Purple</a>
<a href="color-picker-blue.html">Blue</a>
<a href="color-picker-green.html">Green</a>
<a href="color-picker-yellow.html">Yellow</a>
<a href="color-picker-gray.html">Gray</a>
</div>
</div>
</div>
</div>
<!--documents-->
<div class="color-wrap clearfix">
<div class="color-picker">
<div class="color-item" style="background-color:#C91F37;">
<span class="color-name">Foreign crimson</span><br>
<span class="hex-number">#C91F37</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DC3023;">
<span class="color-name">Red orange</span><br>
<span class="hex-number">#DC3023</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9D2933;">
<span class="color-name">Cochineal red</span><br>
<span class="hex-number">#9D2933</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF000F;">
<span class="color-name">Monza</span><br>
<span class="hex-number">#CF000F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E68364;">
<span class="color-name">Brewed mustard-brown</span><br>
<span class="hex-number">#E68364</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F22613;">
<span class="color-name">Pomegranate</span><br>
<span class="hex-number">#F22613</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#CF3A24;">
<span class="color-name">Scarlet</span><br>
<span class="hex-number">#CF3A24</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C3272B;">
<span class="color-name">Pure crimson</span><br>
<span class="hex-number">#C3272B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8F1D21;">
<span class="color-name">True red</span><br>
<span class="hex-number">#8F1D21</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D24D57;">
<span class="color-name">Chestnut Rose</span><br>
<span class="hex-number">#D24D57</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F08F90;">
<span class="color-name">One kin dye</span><br>
<span class="hex-number">#F08F907</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F47983;">
<span class="color-name">Peach-colored</span><br>
<span class="hex-number">#F47983</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#DB5A6B;">
<span class="color-name">Red plum colored</span><br>
<span class="hex-number">#DB5A6B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#C93756;">
<span class="color-name">Medium crimson</span><br>
<span class="hex-number">#C93756</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FCC9B9;">
<span class="color-name">Cherry blossom color</span><br>
<span class="hex-number">#FCC9B9</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB3A7;">
<span class="color-name">Washed-out crimson</span><br>
<span class="hex-number">#FFB3A7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F62459;">
<span class="color-name">RADICAL RED</span><br>
<span class="hex-number">#F62459</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F58F84;">
<span class="color-name">Ibis wing color</span><br>
<span class="hex-number">#F58F84</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#875F9A;">
<span class="color-name">Wisteria purple</span><br>
<span class="hex-number">#875F9A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D3F6A;">
<span class="color-name">Bellflower color</span><br>
<span class="hex-number">#5D3F6A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89729E;">
<span class="color-name">Wisteria color</span><br>
<span class="hex-number">#89729E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#763568;">
<span class="color-name">Iris color</span><br>
<span class="hex-number">#763568</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8D608C;">
<span class="color-name">Tatarian aster color</span><br>
<span class="hex-number">#8D608C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A87CA0;">
<span class="color-name">Thin color</span><br>
<span class="hex-number">#A87CA0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B3256;">
<span class="color-name">Violet color</span><br>
<span class="hex-number">#5B3256</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BF55EC;">
<span class="color-name">MEDIUM PURPLE</span><br>
<span class="hex-number">#BF55EC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #8E44AD;">
<span class="color-name">STUDIO</span><br>
<span class="hex-number">#8E44AD</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#9B59B6;">
<span class="color-name">WISTERIA</span><br>
<span class="hex-number">#9B59B6</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BE90D4;">
<span class="color-name">LIGHT WISTERIA</span><br>
<span class="hex-number">#BE90D4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4D8FAC;">
<span class="color-name">Sky color</span><br>
<span class="hex-number">#4D8FAC</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5D8CAE;">
<span class="color-name">Ultramarine color</span><br>
<span class="hex-number">#5D8CAE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#22A7F0;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#22A7F0</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#19B5FE;">
<span class="color-name">DODGER BLUE</span><br>
<span class="hex-number">#19B5FE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#59ABE3;">
<span class="color-name">PICTON BLUE</span><br>
<span class="hex-number">#59ABE3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#48929B;">
<span class="color-name">Light blue color</span><br>
<span class="hex-number">#48929B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#317589;">
<span class="color-name">Thousand herb</span><br>
<span class="hex-number">#317589</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#89C4F4;">
<span class="color-name">JORDY BLUE</span><br>
<span class="hex-number">#89C4F4</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #4B77BE;">
<span class="color-name">STEEL BLUE</span><br>
<span class="hex-number">#4B77BE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#1F4788;">
<span class="color-name">Lapis lazuli color</span><br>
<span class="hex-number">#1F4788</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#003171;">
<span class="color-name">Navy blue color</span><br>
<span class="hex-number">#003171</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#044F67;">
<span class="color-name">Hanada</span><br>
<span class="hex-number">#044F67</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #264348;">
<span class="color-name">Indigo color</span><br>
<span class="hex-number">#264348</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#7A942E;">
<span class="color-name">Siskin sprout yellow</span><br>
<span class="hex-number">#7A942E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#8DB255;">
<span class="color-name">young green onion</span><br>
<span class="hex-number">#8DB255</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#5B8930;">
<span class="color-name">Fresh onion</span><br>
<span class="hex-number">#5B8930</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#6B9362;">
<span class="color-name">Young bamboo color</span><br>
<span class="hex-number">#6B9362</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#407A52;">
<span class="color-name">Patina</span><br>
<span class="hex-number">#407A52</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#006442;">
<span class="color-name">Green bamboo</span><br>
<span class="hex-number">#006442</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#87D37C;">
<span class="color-name">GOSSIP</span><br>
<span class="hex-number">#87D37C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#26A65B;">
<span class="color-name">EUCALYPTUS</span><br>
<span class="hex-number">#26A65B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #26C281;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#26C281</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#049372;">
<span class="color-name">OBSERVATORY</span><br>
<span class="hex-number">#049372</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#2ABB9B;">
<span class="color-name">JUNGLE GREEN</span><br>
<span class="hex-number">#2ABB9B</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#16A085;">
<span class="color-name">MOUNTAIN MEADOW</span><br>
<span class="hex-number">#16A085</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#36D7B7;">
<span class="color-name">TURQUOISE</span><br>
<span class="hex-number">#36D7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #03A678;">
<span class="color-name">FREE SPEECH AQUAMARINE</span><br>
<span class="hex-number">#03A678</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#4DAF7C;">
<span class="color-name">OCEAN GREEN</span><br>
<span class="hex-number">#4DAF7C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D9B611;">
<span class="color-name">Patrinia flowers</span><br>
<span class="hex-number">#D9B611</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F3C13A;">
<span class="color-name">Amur cork tree</span><br>
<span class="hex-number">#F3C13A</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F7CA18;">
<span class="color-name">RIPE LEMON</span><br>
<span class="hex-number">#F7CA18</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E2B13C;">
<span class="color-name">Japanese triandra grass</span><br>
<span class="hex-number">#E2B13C</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#A17917;">
<span class="color-name">Rapeseed oil-colored</span><br>
<span class="hex-number">#A17917</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5D76E;">
<span class="color-name">CREAM CAN</span><br>
<span class="hex-number">#F5D76E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F4D03F;">
<span class="color-name">SAFFRON</span><br>
<span class="hex-number">#F4D03F</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA400;">
<span class="color-name">Bright golden yellow</span><br>
<span class="hex-number">#FFA400</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E08A1E;">
<span class="color-name">Sumac-dyed</span><br>
<span class="hex-number">#E08A1E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB61E;">
<span class="color-name">Gamboge</span><br>
<span class="hex-number">#FFB61E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FAA945;">
<span class="color-name">Corn-colored</span><br>
<span class="hex-number">#FAA945</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFA631;">
<span class="color-name">Egg-colored</span><br>
<span class="hex-number">#FFA631</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#FFB94E;">
<span class="color-name">Floral leaf-colored</span><br>
<span class="hex-number">#FFB94E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#E29C45;">
<span class="color-name">Golden fallen leaves</span><br>
<span class="hex-number">#E29C45</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F9690E;">
<span class="color-name">ECSTASY</span><br>
<span class="hex-number">#F9690E</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #CA6924;">
<span class="color-name">Amber</span><br>
<span class="hex-number">#CA6924</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F5AB35;">
<span class="color-name">LIGHTNING YELLOW</span><br>
<span class="hex-number">#F5AB35</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BFBFBF;">
<span class="color-name">SILVER</span><br>
<span class="hex-number">#BFBFBF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#F2F1EF;">
<span class="color-name">CARARRA</span><br>
<span class="hex-number">#F2F1EF</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#BDC3C7;">
<span class="color-name">SILVER SAND</span><br>
<span class="hex-number">#BDC3C7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ECF0F1;">
<span class="color-name">PORCELAIN</span><br>
<span class="hex-number">#ECF0F1</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#D2D7D3;">
<span class="color-name">PUMICE</span><br>
<span class="hex-number">#D2D7D3</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#757D75;">
<span class="color-name">Harbor rat</span><br>
<span class="hex-number">#757D75</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#EEEEEE;">
<span class="color-name">GALLERY</span><br>
<span class="hex-number">#EEEEEE</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#ABB7B7;">
<span class="color-name">EDWARD</span><br>
<span class="hex-number">#ABB7B7</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color: #6C7A89;">
<span class="color-name">LYNCH</span><br>
<span class="hex-number">#6C7A89</span><br>
</div>
</div>
<div class="color-picker">
<div class="color-item" style="background-color:#95A5A6;">
<span class="color-name">CASCADE</span><br>
<span class="hex-number">#95A5A6</span><br>
</div>
</div>
</div>
<!--footer-->
<div class="site-footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
<!-- SmartAddon BEGIN -->
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1'+'.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<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>
<!-- SmartAddon END -->
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<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>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<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>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<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>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<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>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
<a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<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>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48721682-1', 'bootflat.github.io');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>
......@@ -662,6 +662,114 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
max-width: 100%;
}
/* ----------------------------------
* color picker
* ---------------------------------- */
.color-picker-nav a {
text-decoration: none !important;
color: #0b859c !important;
margin: 0 10px;
}
.color-picker-nav a:hover {
text-decoration: underline !important;
}
.color-picker-nav a.current {
font-weight: bold;
}
.color-wrap {
position: relative;
clear: both;
left: 0;
width: 100%;
z-index: 500;
}
.color-picker {
width: 20%;
padding-bottom: 18%;
color: #FFF;
position: relative;
float: left;
top: 0;
bottom: 0;
}
.color-item {
position: absolute;
margin: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
text-transform: uppercase;
padding: 35%;
}
.color-item:hover {
display: inline;
z-index: 999;
overflow: hidden;
cursor: pointer;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px)
{
.color-picker{
width: 50%;
color: #FFF;
}
.color-item{
padding: 8%;
font-size: 0.875em;
}
.color-name,.hex-number {
position: relative;
line-height: 22px;
text-align: center;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px)
{
.color-picker {
width: 50%;
color: #FFF;
}
.color-item{
padding: 8%;
font-size: 0.750em;
}
.color-name,.hex-number {
position: relative;
line-height: 22px;
text-align: center;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
.color-item{
padding: 5%;
font-size: 0.750em;
}
.color-picker{
width: 100%;
color: #FFF;
}
.color-name,.hex-number {
position: relative;
line-height: 12px;
text-align: center;
}
}
/* ----------------------------------
* btn-group & labels
* ---------------------------------- */
.blank {
......@@ -675,7 +783,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
}
.site-footer {
position: relative;
z-index: 2000;
z-index: 400;
border-top: 1px dashed #AAB2BD;
padding: 40px 0 20px;
background-color: #f5f5f5;
......
This diff could not be displayed because it is too large.
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<meta name="description" content="The complete style of the Bootflat Framework.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -39,6 +41,7 @@
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link current" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
......@@ -68,7 +71,7 @@
<!-- Color Swatches
================================================== -->
<div class="example">
<h2 class="example-title">Color Swatches</h2>
<h2 class="example-title">Color Swatches <span>(<b>More Colors See</b>: <a href="color-picker.html">Flat UI Color Picker</a>)</span></h2>
<div class="row">
<div class="col-md-2">
<div class="color-swatches">
......@@ -2279,7 +2282,7 @@
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
<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>
</div>
</div>
......
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<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.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +40,7 @@
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link current" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
......@@ -193,7 +196,7 @@
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
<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>
</div>
</div>
......
......@@ -7,6 +7,8 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<meta name="description" content="An overview of Bootflat, why we built it, how to use it, and what you should know along the way.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +40,7 @@
<li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
......@@ -82,6 +85,8 @@
<dd>Upload all Bootflat files and paste one line of code at the bottom of your <code>head</code> tag. That’s it!</dd>
<dt>Bootflat UI Kit Free Download</dt>
<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>
<dt>Bootflat Flat UI Color Picker</dt>
<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>
</dl>
</div>
<!--
......@@ -176,6 +181,12 @@
<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>
<p><a class="btn btn-primary" href="free-psd.html">Download Bootflat UI Kit (v2.0.0)</a></p>
</div>
<!-- Color Picker
================================================== -->
<div class="docs-article docs--start" id="color-picker">
<h3>Bootflat Flat UI Color Picker</h3>
<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>
</div>
<!-- Licensing
================================================== -->
<div class="docs-article docs--start" id="licensing">
......@@ -248,7 +259,7 @@
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
<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>
</div>
</div>
......
......@@ -7,6 +7,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- SmartAddon.com Verification -->
<meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />
<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">
<meta name="description" content="BOOTFLAT is an open source Flat UI KIT based on Bootstrap CSS framework.
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.">
<link rel="shortcut icon" href="favicon_16.ico"/>
<link rel="bookmark" href="favicon_16.ico"/>
<!-- site css -->
......@@ -38,6 +41,7 @@
<li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
<li><a class="nav-link" href="color-picker.html">Color Picker</a></li>
</ul>
</div>
</div>
......@@ -176,7 +180,7 @@
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<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>
<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>
<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>
</div>
</div>
......