Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Details

Privacy

Go PRO Window blinds lowered to protect code. Code Editor with window blinds (raised) and a light blub turned on.

Keep it secret; keep it safe.

Private Pens are hidden everywhere on CodePen, except to you. You can still share them and other people can see them, they just can't find them through searching or browsing.

Upgrade to PRO

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

Template

Make Template?

Templates are Pens that can be used to start other Pens quickly from the create menu. The new Pen will copy all the code and settings from the template and make a new Pen (that is not a fork). You can view all of your templates, or learn more in the documentation.

Template URL

Any Pen can act as a template (even if you don't flip the toggle above) with a special URL you can use yourself or share with others. Here's this Pen's template URL:

Screenshot

Screenshots of Pens are shown in mobile browsers, RSS feeds, to users who chose images instead of iframes, and in social media sharing.

This Pen is using the default Screenshot, generated by CodePen. Upgrade to PRO to upload your own thumbnail that will be displayed on previews of this pen throughout the site and when sharing to social media.

Upgrade to PRO

HTML

              
                <div class="color c000000">#000000</div>
<div class="color c000022">#000022</div>
<div class="color c000044">#000044</div>
<div class="color c000066">#000066</div>
<div class="color c000099">#000099</div>
<div class="color c0000aa">#0000aa</div>
<div class="color c0000cc">#0000cc</div>
<div class="color c0000ff">#0000ff</div>
<div class="color c002200">#002200</div>
<div class="color c002222">#002222</div>
<div class="color c002244">#002244</div>
<div class="color c002266">#002266</div>
<div class="color c002299">#002299</div>
<div class="color c0022aa">#0022aa</div>
<div class="color c0022cc">#0022cc</div>
<div class="color c0022ff">#0022ff</div>
<div class="color c004400">#004400</div>
<div class="color c004422">#004422</div>
<div class="color c004444">#004444</div>
<div class="color c004466">#004466</div>
<div class="color c004499">#004499</div>
<div class="color c0044aa">#0044aa</div>
<div class="color c0044cc">#0044cc</div>
<div class="color c0044ff">#0044ff</div>
<div class="color c006600">#006600</div>
<div class="color c006622">#006622</div>
<div class="color c006644">#006644</div>
<div class="color c006666">#006666</div>
<div class="color c006699">#006699</div>
<div class="color c0066aa">#0066aa</div>
<div class="color c0066cc">#0066cc</div>
<div class="color c0066ff">#0066ff</div>
<div class="color c009900">#009900</div>
<div class="color c009922">#009922</div>
<div class="color c009944">#009944</div>
<div class="color c009966">#009966</div>
<div class="color c009999">#009999</div>
<div class="color c0099aa">#0099aa</div>
<div class="color c0099cc">#0099cc</div>
<div class="color c0099ff">#0099ff</div>
<div class="color c00aa00">#00aa00</div>
<div class="color c00aa22">#00aa22</div>
<div class="color c00aa44">#00aa44</div>
<div class="color c00aa66">#00aa66</div>
<div class="color c00aa99">#00aa99</div>
<div class="color c00aaaa">#00aaaa</div>
<div class="color c00aacc">#00aacc</div>
<div class="color c00aaff">#00aaff</div>
<div class="color c00cc00">#00cc00</div>
<div class="color c00cc22">#00cc22</div>
<div class="color c00cc44">#00cc44</div>
<div class="color c00cc66">#00cc66</div>
<div class="color c00cc99">#00cc99</div>
<div class="color c00ccaa">#00ccaa</div>
<div class="color c00cccc">#00cccc</div>
<div class="color c00ccff">#00ccff</div>
<div class="color c00ff00">#00ff00</div>
<div class="color c00ff22">#00ff22</div>
<div class="color c00ff44">#00ff44</div>
<div class="color c00ff66">#00ff66</div>
<div class="color c00ff99">#00ff99</div>
<div class="color c00ffaa">#00ffaa</div>
<div class="color c00ffcc">#00ffcc</div>
<div class="color c00ffff">#00ffff</div>
<div class="color c220000">#220000</div>
<div class="color c220022">#220022</div>
<div class="color c220044">#220044</div>
<div class="color c220066">#220066</div>
<div class="color c220099">#220099</div>
<div class="color c2200aa">#2200aa</div>
<div class="color c2200cc">#2200cc</div>
<div class="color c2200ff">#2200ff</div>
<div class="color c222200">#222200</div>
<div class="color c222222">#222222</div>
<div class="color c222244">#222244</div>
<div class="color c222266">#222266</div>
<div class="color c222299">#222299</div>
<div class="color c2222aa">#2222aa</div>
<div class="color c2222cc">#2222cc</div>
<div class="color c2222ff">#2222ff</div>
<div class="color c224400">#224400</div>
<div class="color c224422">#224422</div>
<div class="color c224444">#224444</div>
<div class="color c224466">#224466</div>
<div class="color c224499">#224499</div>
<div class="color c2244aa">#2244aa</div>
<div class="color c2244cc">#2244cc</div>
<div class="color c2244ff">#2244ff</div>
<div class="color c226600">#226600</div>
<div class="color c226622">#226622</div>
<div class="color c226644">#226644</div>
<div class="color c226666">#226666</div>
<div class="color c226699">#226699</div>
<div class="color c2266aa">#2266aa</div>
<div class="color c2266cc">#2266cc</div>
<div class="color c2266ff">#2266ff</div>
<div class="color c229900">#229900</div>
<div class="color c229922">#229922</div>
<div class="color c229944">#229944</div>
<div class="color c229966">#229966</div>
<div class="color c229999">#229999</div>
<div class="color c2299aa">#2299aa</div>
<div class="color c2299cc">#2299cc</div>
<div class="color c2299ff">#2299ff</div>
<div class="color c22aa00">#22aa00</div>
<div class="color c22aa22">#22aa22</div>
<div class="color c22aa44">#22aa44</div>
<div class="color c22aa66">#22aa66</div>
<div class="color c22aa99">#22aa99</div>
<div class="color c22aaaa">#22aaaa</div>
<div class="color c22aacc">#22aacc</div>
<div class="color c22aaff">#22aaff</div>
<div class="color c22cc00">#22cc00</div>
<div class="color c22cc22">#22cc22</div>
<div class="color c22cc44">#22cc44</div>
<div class="color c22cc66">#22cc66</div>
<div class="color c22cc99">#22cc99</div>
<div class="color c22ccaa">#22ccaa</div>
<div class="color c22cccc">#22cccc</div>
<div class="color c22ccff">#22ccff</div>
<div class="color c22ff00">#22ff00</div>
<div class="color c22ff22">#22ff22</div>
<div class="color c22ff44">#22ff44</div>
<div class="color c22ff66">#22ff66</div>
<div class="color c22ff99">#22ff99</div>
<div class="color c22ffaa">#22ffaa</div>
<div class="color c22ffcc">#22ffcc</div>
<div class="color c22ffff">#22ffff</div>
<div class="color c440000">#440000</div>
<div class="color c440022">#440022</div>
<div class="color c440044">#440044</div>
<div class="color c440066">#440066</div>
<div class="color c440099">#440099</div>
<div class="color c4400aa">#4400aa</div>
<div class="color c4400cc">#4400cc</div>
<div class="color c4400ff">#4400ff</div>
<div class="color c442200">#442200</div>
<div class="color c442222">#442222</div>
<div class="color c442244">#442244</div>
<div class="color c442266">#442266</div>
<div class="color c442299">#442299</div>
<div class="color c4422aa">#4422aa</div>
<div class="color c4422cc">#4422cc</div>
<div class="color c4422ff">#4422ff</div>
<div class="color c444400">#444400</div>
<div class="color c444422">#444422</div>
<div class="color c444444">#444444</div>
<div class="color c444466">#444466</div>
<div class="color c444499">#444499</div>
<div class="color c4444aa">#4444aa</div>
<div class="color c4444cc">#4444cc</div>
<div class="color c4444ff">#4444ff</div>
<div class="color c446600">#446600</div>
<div class="color c446622">#446622</div>
<div class="color c446644">#446644</div>
<div class="color c446666">#446666</div>
<div class="color c446699">#446699</div>
<div class="color c4466aa">#4466aa</div>
<div class="color c4466cc">#4466cc</div>
<div class="color c4466ff">#4466ff</div>
<div class="color c449900">#449900</div>
<div class="color c449922">#449922</div>
<div class="color c449944">#449944</div>
<div class="color c449966">#449966</div>
<div class="color c449999">#449999</div>
<div class="color c4499aa">#4499aa</div>
<div class="color c4499cc">#4499cc</div>
<div class="color c4499ff">#4499ff</div>
<div class="color c44aa00">#44aa00</div>
<div class="color c44aa22">#44aa22</div>
<div class="color c44aa44">#44aa44</div>
<div class="color c44aa66">#44aa66</div>
<div class="color c44aa99">#44aa99</div>
<div class="color c44aaaa">#44aaaa</div>
<div class="color c44aacc">#44aacc</div>
<div class="color c44aaff">#44aaff</div>
<div class="color c44cc00">#44cc00</div>
<div class="color c44cc22">#44cc22</div>
<div class="color c44cc44">#44cc44</div>
<div class="color c44cc66">#44cc66</div>
<div class="color c44cc99">#44cc99</div>
<div class="color c44ccaa">#44ccaa</div>
<div class="color c44cccc">#44cccc</div>
<div class="color c44ccff">#44ccff</div>
<div class="color c44ff00">#44ff00</div>
<div class="color c44ff22">#44ff22</div>
<div class="color c44ff44">#44ff44</div>
<div class="color c44ff66">#44ff66</div>
<div class="color c44ff99">#44ff99</div>
<div class="color c44ffaa">#44ffaa</div>
<div class="color c44ffcc">#44ffcc</div>
<div class="color c44ffff">#44ffff</div>
<div class="color c660000">#660000</div>
<div class="color c660022">#660022</div>
<div class="color c660044">#660044</div>
<div class="color c660066">#660066</div>
<div class="color c660099">#660099</div>
<div class="color c6600aa">#6600aa</div>
<div class="color c6600cc">#6600cc</div>
<div class="color c6600ff">#6600ff</div>
<div class="color c662200">#662200</div>
<div class="color c662222">#662222</div>
<div class="color c662244">#662244</div>
<div class="color c662266">#662266</div>
<div class="color c662299">#662299</div>
<div class="color c6622aa">#6622aa</div>
<div class="color c6622cc">#6622cc</div>
<div class="color c6622ff">#6622ff</div>
<div class="color c664400">#664400</div>
<div class="color c664422">#664422</div>
<div class="color c664444">#664444</div>
<div class="color c664466">#664466</div>
<div class="color c664499">#664499</div>
<div class="color c6644aa">#6644aa</div>
<div class="color c6644cc">#6644cc</div>
<div class="color c6644ff">#6644ff</div>
<div class="color c666600">#666600</div>
<div class="color c666622">#666622</div>
<div class="color c666644">#666644</div>
<div class="color c666666">#666666</div>
<div class="color c666699">#666699</div>
<div class="color c6666aa">#6666aa</div>
<div class="color c6666cc">#6666cc</div>
<div class="color c6666ff">#6666ff</div>
<div class="color c669900">#669900</div>
<div class="color c669922">#669922</div>
<div class="color c669944">#669944</div>
<div class="color c669966">#669966</div>
<div class="color c669999">#669999</div>
<div class="color c6699aa">#6699aa</div>
<div class="color c6699cc">#6699cc</div>
<div class="color c6699ff">#6699ff</div>
<div class="color c66aa00">#66aa00</div>
<div class="color c66aa22">#66aa22</div>
<div class="color c66aa44">#66aa44</div>
<div class="color c66aa66">#66aa66</div>
<div class="color c66aa99">#66aa99</div>
<div class="color c66aaaa">#66aaaa</div>
<div class="color c66aacc">#66aacc</div>
<div class="color c66aaff">#66aaff</div>
<div class="color c66cc00">#66cc00</div>
<div class="color c66cc22">#66cc22</div>
<div class="color c66cc44">#66cc44</div>
<div class="color c66cc66">#66cc66</div>
<div class="color c66cc99">#66cc99</div>
<div class="color c66ccaa">#66ccaa</div>
<div class="color c66cccc">#66cccc</div>
<div class="color c66ccff">#66ccff</div>
<div class="color c66ff00">#66ff00</div>
<div class="color c66ff22">#66ff22</div>
<div class="color c66ff44">#66ff44</div>
<div class="color c66ff66">#66ff66</div>
<div class="color c66ff99">#66ff99</div>
<div class="color c66ffaa">#66ffaa</div>
<div class="color c66ffcc">#66ffcc</div>
<div class="color c66ffff">#66ffff</div>
<div class="color c990000">#990000</div>
<div class="color c990022">#990022</div>
<div class="color c990044">#990044</div>
<div class="color c990066">#990066</div>
<div class="color c990099">#990099</div>
<div class="color c9900aa">#9900aa</div>
<div class="color c9900cc">#9900cc</div>
<div class="color c9900ff">#9900ff</div>
<div class="color c992200">#992200</div>
<div class="color c992222">#992222</div>
<div class="color c992244">#992244</div>
<div class="color c992266">#992266</div>
<div class="color c992299">#992299</div>
<div class="color c9922aa">#9922aa</div>
<div class="color c9922cc">#9922cc</div>
<div class="color c9922ff">#9922ff</div>
<div class="color c994400">#994400</div>
<div class="color c994422">#994422</div>
<div class="color c994444">#994444</div>
<div class="color c994466">#994466</div>
<div class="color c994499">#994499</div>
<div class="color c9944aa">#9944aa</div>
<div class="color c9944cc">#9944cc</div>
<div class="color c9944ff">#9944ff</div>
<div class="color c996600">#996600</div>
<div class="color c996622">#996622</div>
<div class="color c996644">#996644</div>
<div class="color c996666">#996666</div>
<div class="color c996699">#996699</div>
<div class="color c9966aa">#9966aa</div>
<div class="color c9966cc">#9966cc</div>
<div class="color c9966ff">#9966ff</div>
<div class="color c999900">#999900</div>
<div class="color c999922">#999922</div>
<div class="color c999944">#999944</div>
<div class="color c999966">#999966</div>
<div class="color c999999">#999999</div>
<div class="color c9999aa">#9999aa</div>
<div class="color c9999cc">#9999cc</div>
<div class="color c9999ff">#9999ff</div>
<div class="color c99aa00">#99aa00</div>
<div class="color c99aa22">#99aa22</div>
<div class="color c99aa44">#99aa44</div>
<div class="color c99aa66">#99aa66</div>
<div class="color c99aa99">#99aa99</div>
<div class="color c99aaaa">#99aaaa</div>
<div class="color c99aacc">#99aacc</div>
<div class="color c99aaff">#99aaff</div>
<div class="color c99cc00">#99cc00</div>
<div class="color c99cc22">#99cc22</div>
<div class="color c99cc44">#99cc44</div>
<div class="color c99cc66">#99cc66</div>
<div class="color c99cc99">#99cc99</div>
<div class="color c99ccaa">#99ccaa</div>
<div class="color c99cccc">#99cccc</div>
<div class="color c99ccff">#99ccff</div>
<div class="color c99ff00">#99ff00</div>
<div class="color c99ff22">#99ff22</div>
<div class="color c99ff44">#99ff44</div>
<div class="color c99ff66">#99ff66</div>
<div class="color c99ff99">#99ff99</div>
<div class="color c99ffaa">#99ffaa</div>
<div class="color c99ffcc">#99ffcc</div>
<div class="color c99ffff">#99ffff</div>
<div class="color caa0000">#aa0000</div>
<div class="color caa0022">#aa0022</div>
<div class="color caa0044">#aa0044</div>
<div class="color caa0066">#aa0066</div>
<div class="color caa0099">#aa0099</div>
<div class="color caa00aa">#aa00aa</div>
<div class="color caa00cc">#aa00cc</div>
<div class="color caa00ff">#aa00ff</div>
<div class="color caa2200">#aa2200</div>
<div class="color caa2222">#aa2222</div>
<div class="color caa2244">#aa2244</div>
<div class="color caa2266">#aa2266</div>
<div class="color caa2299">#aa2299</div>
<div class="color caa22aa">#aa22aa</div>
<div class="color caa22cc">#aa22cc</div>
<div class="color caa22ff">#aa22ff</div>
<div class="color caa4400">#aa4400</div>
<div class="color caa4422">#aa4422</div>
<div class="color caa4444">#aa4444</div>
<div class="color caa4466">#aa4466</div>
<div class="color caa4499">#aa4499</div>
<div class="color caa44aa">#aa44aa</div>
<div class="color caa44cc">#aa44cc</div>
<div class="color caa44ff">#aa44ff</div>
<div class="color caa6600">#aa6600</div>
<div class="color caa6622">#aa6622</div>
<div class="color caa6644">#aa6644</div>
<div class="color caa6666">#aa6666</div>
<div class="color caa6699">#aa6699</div>
<div class="color caa66aa">#aa66aa</div>
<div class="color caa66cc">#aa66cc</div>
<div class="color caa66ff">#aa66ff</div>
<div class="color caa9900">#aa9900</div>
<div class="color caa9922">#aa9922</div>
<div class="color caa9944">#aa9944</div>
<div class="color caa9966">#aa9966</div>
<div class="color caa9999">#aa9999</div>
<div class="color caa99aa">#aa99aa</div>
<div class="color caa99cc">#aa99cc</div>
<div class="color caa99ff">#aa99ff</div>
<div class="color caaaa00">#aaaa00</div>
<div class="color caaaa22">#aaaa22</div>
<div class="color caaaa44">#aaaa44</div>
<div class="color caaaa66">#aaaa66</div>
<div class="color caaaa99">#aaaa99</div>
<div class="color caaaaaa">#aaaaaa</div>
<div class="color caaaacc">#aaaacc</div>
<div class="color caaaaff">#aaaaff</div>
<div class="color caacc00">#aacc00</div>
<div class="color caacc22">#aacc22</div>
<div class="color caacc44">#aacc44</div>
<div class="color caacc66">#aacc66</div>
<div class="color caacc99">#aacc99</div>
<div class="color caaccaa">#aaccaa</div>
<div class="color caacccc">#aacccc</div>
<div class="color caaccff">#aaccff</div>
<div class="color caaff00">#aaff00</div>
<div class="color caaff22">#aaff22</div>
<div class="color caaff44">#aaff44</div>
<div class="color caaff66">#aaff66</div>
<div class="color caaff99">#aaff99</div>
<div class="color caaffaa">#aaffaa</div>
<div class="color caaffcc">#aaffcc</div>
<div class="color caaffff">#aaffff</div>
<div class="color ccc0000">#cc0000</div>
<div class="color ccc0022">#cc0022</div>
<div class="color ccc0044">#cc0044</div>
<div class="color ccc0066">#cc0066</div>
<div class="color ccc0099">#cc0099</div>
<div class="color ccc00aa">#cc00aa</div>
<div class="color ccc00cc">#cc00cc</div>
<div class="color ccc00ff">#cc00ff</div>
<div class="color ccc2200">#cc2200</div>
<div class="color ccc2222">#cc2222</div>
<div class="color ccc2244">#cc2244</div>
<div class="color ccc2266">#cc2266</div>
<div class="color ccc2299">#cc2299</div>
<div class="color ccc22aa">#cc22aa</div>
<div class="color ccc22cc">#cc22cc</div>
<div class="color ccc22ff">#cc22ff</div>
<div class="color ccc4400">#cc4400</div>
<div class="color ccc4422">#cc4422</div>
<div class="color ccc4444">#cc4444</div>
<div class="color ccc4466">#cc4466</div>
<div class="color ccc4499">#cc4499</div>
<div class="color ccc44aa">#cc44aa</div>
<div class="color ccc44cc">#cc44cc</div>
<div class="color ccc44ff">#cc44ff</div>
<div class="color ccc6600">#cc6600</div>
<div class="color ccc6622">#cc6622</div>
<div class="color ccc6644">#cc6644</div>
<div class="color ccc6666">#cc6666</div>
<div class="color ccc6699">#cc6699</div>
<div class="color ccc66aa">#cc66aa</div>
<div class="color ccc66cc">#cc66cc</div>
<div class="color ccc66ff">#cc66ff</div>
<div class="color ccc9900">#cc9900</div>
<div class="color ccc9922">#cc9922</div>
<div class="color ccc9944">#cc9944</div>
<div class="color ccc9966">#cc9966</div>
<div class="color ccc9999">#cc9999</div>
<div class="color ccc99aa">#cc99aa</div>
<div class="color ccc99cc">#cc99cc</div>
<div class="color ccc99ff">#cc99ff</div>
<div class="color cccaa00">#ccaa00</div>
<div class="color cccaa22">#ccaa22</div>
<div class="color cccaa44">#ccaa44</div>
<div class="color cccaa66">#ccaa66</div>
<div class="color cccaa99">#ccaa99</div>
<div class="color cccaaaa">#ccaaaa</div>
<div class="color cccaacc">#ccaacc</div>
<div class="color cccaaff">#ccaaff</div>
<div class="color ccccc00">#cccc00</div>
<div class="color ccccc22">#cccc22</div>
<div class="color ccccc44">#cccc44</div>
<div class="color ccccc66">#cccc66</div>
<div class="color ccccc99">#cccc99</div>
<div class="color cccccaa">#ccccaa</div>
<div class="color ccccccc">#cccccc</div>
<div class="color cccccff">#ccccff</div>
<div class="color cccff00">#ccff00</div>
<div class="color cccff22">#ccff22</div>
<div class="color cccff44">#ccff44</div>
<div class="color cccff66">#ccff66</div>
<div class="color cccff99">#ccff99</div>
<div class="color cccffaa">#ccffaa</div>
<div class="color cccffcc">#ccffcc</div>
<div class="color cccffff">#ccffff</div>
<div class="color cff0000">#ff0000</div>
<div class="color cff0022">#ff0022</div>
<div class="color cff0044">#ff0044</div>
<div class="color cff0066">#ff0066</div>
<div class="color cff0099">#ff0099</div>
<div class="color cff00aa">#ff00aa</div>
<div class="color cff00cc">#ff00cc</div>
<div class="color cff00ff">#ff00ff</div>
<div class="color cff2200">#ff2200</div>
<div class="color cff2222">#ff2222</div>
<div class="color cff2244">#ff2244</div>
<div class="color cff2266">#ff2266</div>
<div class="color cff2299">#ff2299</div>
<div class="color cff22aa">#ff22aa</div>
<div class="color cff22cc">#ff22cc</div>
<div class="color cff22ff">#ff22ff</div>
<div class="color cff4400">#ff4400</div>
<div class="color cff4422">#ff4422</div>
<div class="color cff4444">#ff4444</div>
<div class="color cff4466">#ff4466</div>
<div class="color cff4499">#ff4499</div>
<div class="color cff44aa">#ff44aa</div>
<div class="color cff44cc">#ff44cc</div>
<div class="color cff44ff">#ff44ff</div>
<div class="color cff6600">#ff6600</div>
<div class="color cff6622">#ff6622</div>
<div class="color cff6644">#ff6644</div>
<div class="color cff6666">#ff6666</div>
<div class="color cff6699">#ff6699</div>
<div class="color cff66aa">#ff66aa</div>
<div class="color cff66cc">#ff66cc</div>
<div class="color cff66ff">#ff66ff</div>
<div class="color cff9900">#ff9900</div>
<div class="color cff9922">#ff9922</div>
<div class="color cff9944">#ff9944</div>
<div class="color cff9966">#ff9966</div>
<div class="color cff9999">#ff9999</div>
<div class="color cff99aa">#ff99aa</div>
<div class="color cff99cc">#ff99cc</div>
<div class="color cff99ff">#ff99ff</div>
<div class="color cffaa00">#ffaa00</div>
<div class="color cffaa22">#ffaa22</div>
<div class="color cffaa44">#ffaa44</div>
<div class="color cffaa66">#ffaa66</div>
<div class="color cffaa99">#ffaa99</div>
<div class="color cffaaaa">#ffaaaa</div>
<div class="color cffaacc">#ffaacc</div>
<div class="color cffaaff">#ffaaff</div>
<div class="color cffcc00">#ffcc00</div>
<div class="color cffcc22">#ffcc22</div>
<div class="color cffcc44">#ffcc44</div>
<div class="color cffcc66">#ffcc66</div>
<div class="color cffcc99">#ffcc99</div>
<div class="color cffccaa">#ffccaa</div>
<div class="color cffcccc">#ffcccc</div>
<div class="color cffccff">#ffccff</div>
<div class="color cffff00">#ffff00</div>
<div class="color cffff22">#ffff22</div>
<div class="color cffff44">#ffff44</div>
<div class="color cffff66">#ffff66</div>
<div class="color cffff99">#ffff99</div>
<div class="color cffffaa">#ffffaa</div>
<div class="color cffffcc">#ffffcc</div>
<div class="color cffffff">#ffffff</div>
              
            
!

CSS

              
                @import "compass/css3";

// LINEAR to LOGARITHMIC and vicev-ersa
@function re-gamma($n) { @if $n <= 0.0031308 { @return $n * 12.92; } @else { @return 1.055 * pow($n,1/2.4) - 0.055; } }

@function de-gamma($n) { @if $n <= 0.04045 { @return $n / 12.92; } @else { @return pow((($n + 0.055)/1.055),2.4); } }

// sRGB BT-709 BRIGHTNESS
@function brightness($c) {
	$rlin: de-gamma(red($c)/255);
	$glin: de-gamma(green($c)/255);
	$blin: de-gamma(blue($c)/255);
	@return re-gamma(0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
}

// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function contrast-color($color, $dark: #000000, $light: #FFFFFF) {
	@if $color == null {
		@return null;
	}
  
	@else {
		$color-brightness: brightness($color);
		$light-text-brightness: brightness($light);
		$dark-text-brightness: brightness($dark);

		@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
	}
}

/* DEMO INCLUDES */


.color{
	font-size:11px;
	width:12.5%;
	font-family:Courier New;
	padding:8px 0;
	text-align:center;
	font-weight:bold;
	display:inline-block;
	float:left;
}
.color:nth-child(8n+1){
	clear:both;
}



.c000000{background-color:#000000; color: contrast-color(#000000);}
.c000022{background-color:#000022; color: contrast-color(#000022);}
.c000044{background-color:#000044; color: contrast-color(#000044);}
.c000066{background-color:#000066; color: contrast-color(#000066);}
.c000099{background-color:#000099; color: contrast-color(#000099);}
.c0000aa{background-color:#0000aa; color: contrast-color(#0000aa);}
.c0000cc{background-color:#0000cc; color: contrast-color(#0000cc);}
.c0000ff{background-color:#0000ff; color: contrast-color(#0000ff);}
.c002200{background-color:#002200; color: contrast-color(#002200);}
.c002222{background-color:#002222; color: contrast-color(#002222);}
.c002244{background-color:#002244; color: contrast-color(#002244);}
.c002266{background-color:#002266; color: contrast-color(#002266);}
.c002299{background-color:#002299; color: contrast-color(#002299);}
.c0022aa{background-color:#0022aa; color: contrast-color(#0022aa);}
.c0022cc{background-color:#0022cc; color: contrast-color(#0022cc);}
.c0022ff{background-color:#0022ff; color: contrast-color(#0022ff);}
.c004400{background-color:#004400; color: contrast-color(#004400);}
.c004422{background-color:#004422; color: contrast-color(#004422);}
.c004444{background-color:#004444; color: contrast-color(#004444);}
.c004466{background-color:#004466; color: contrast-color(#004466);}
.c004499{background-color:#004499; color: contrast-color(#004499);}
.c0044aa{background-color:#0044aa; color: contrast-color(#0044aa);}
.c0044cc{background-color:#0044cc; color: contrast-color(#0044cc);}
.c0044ff{background-color:#0044ff; color: contrast-color(#0044ff);}
.c006600{background-color:#006600; color: contrast-color(#006600);}
.c006622{background-color:#006622; color: contrast-color(#006622);}
.c006644{background-color:#006644; color: contrast-color(#006644);}
.c006666{background-color:#006666; color: contrast-color(#006666);}
.c006699{background-color:#006699; color: contrast-color(#006699);}
.c0066aa{background-color:#0066aa; color: contrast-color(#0066aa);}
.c0066cc{background-color:#0066cc; color: contrast-color(#0066cc);}
.c0066ff{background-color:#0066ff; color: contrast-color(#0066ff);}
.c009900{background-color:#009900; color: contrast-color(#009900);}
.c009922{background-color:#009922; color: contrast-color(#009922);}
.c009944{background-color:#009944; color: contrast-color(#009944);}
.c009966{background-color:#009966; color: contrast-color(#009966);}
.c009999{background-color:#009999; color: contrast-color(#009999);}
.c0099aa{background-color:#0099aa; color: contrast-color(#0099aa);}
.c0099cc{background-color:#0099cc; color: contrast-color(#0099cc);}
.c0099ff{background-color:#0099ff; color: contrast-color(#0099ff);}
.c00aa00{background-color:#00aa00; color: contrast-color(#00aa00);}
.c00aa22{background-color:#00aa22; color: contrast-color(#00aa22);}
.c00aa44{background-color:#00aa44; color: contrast-color(#00aa44);}
.c00aa66{background-color:#00aa66; color: contrast-color(#00aa66);}
.c00aa99{background-color:#00aa99; color: contrast-color(#00aa99);}
.c00aaaa{background-color:#00aaaa; color: contrast-color(#00aaaa);}
.c00aacc{background-color:#00aacc; color: contrast-color(#00aacc);}
.c00aaff{background-color:#00aaff; color: contrast-color(#00aaff);}
.c00cc00{background-color:#00cc00; color: contrast-color(#00cc00);}
.c00cc22{background-color:#00cc22; color: contrast-color(#00cc22);}
.c00cc44{background-color:#00cc44; color: contrast-color(#00cc44);}
.c00cc66{background-color:#00cc66; color: contrast-color(#00cc66);}
.c00cc99{background-color:#00cc99; color: contrast-color(#00cc99);}
.c00ccaa{background-color:#00ccaa; color: contrast-color(#00ccaa);}
.c00cccc{background-color:#00cccc; color: contrast-color(#00cccc);}
.c00ccff{background-color:#00ccff; color: contrast-color(#00ccff);}
.c00ff00{background-color:#00ff00; color: contrast-color(#00ff00);}
.c00ff22{background-color:#00ff22; color: contrast-color(#00ff22);}
.c00ff44{background-color:#00ff44; color: contrast-color(#00ff44);}
.c00ff66{background-color:#00ff66; color: contrast-color(#00ff66);}
.c00ff99{background-color:#00ff99; color: contrast-color(#00ff99);}
.c00ffaa{background-color:#00ffaa; color: contrast-color(#00ffaa);}
.c00ffcc{background-color:#00ffcc; color: contrast-color(#00ffcc);}
.c00ffff{background-color:#00ffff; color: contrast-color(#00ffff);}
.c220000{background-color:#220000; color: contrast-color(#220000);}
.c220022{background-color:#220022; color: contrast-color(#220022);}
.c220044{background-color:#220044; color: contrast-color(#220044);}
.c220066{background-color:#220066; color: contrast-color(#220066);}
.c220099{background-color:#220099; color: contrast-color(#220099);}
.c2200aa{background-color:#2200aa; color: contrast-color(#2200aa);}
.c2200cc{background-color:#2200cc; color: contrast-color(#2200cc);}
.c2200ff{background-color:#2200ff; color: contrast-color(#2200ff);}
.c222200{background-color:#222200; color: contrast-color(#222200);}
.c222222{background-color:#222222; color: contrast-color(#222222);}
.c222244{background-color:#222244; color: contrast-color(#222244);}
.c222266{background-color:#222266; color: contrast-color(#222266);}
.c222299{background-color:#222299; color: contrast-color(#222299);}
.c2222aa{background-color:#2222aa; color: contrast-color(#2222aa);}
.c2222cc{background-color:#2222cc; color: contrast-color(#2222cc);}
.c2222ff{background-color:#2222ff; color: contrast-color(#2222ff);}
.c224400{background-color:#224400; color: contrast-color(#224400);}
.c224422{background-color:#224422; color: contrast-color(#224422);}
.c224444{background-color:#224444; color: contrast-color(#224444);}
.c224466{background-color:#224466; color: contrast-color(#224466);}
.c224499{background-color:#224499; color: contrast-color(#224499);}
.c2244aa{background-color:#2244aa; color: contrast-color(#2244aa);}
.c2244cc{background-color:#2244cc; color: contrast-color(#2244cc);}
.c2244ff{background-color:#2244ff; color: contrast-color(#2244ff);}
.c226600{background-color:#226600; color: contrast-color(#226600);}
.c226622{background-color:#226622; color: contrast-color(#226622);}
.c226644{background-color:#226644; color: contrast-color(#226644);}
.c226666{background-color:#226666; color: contrast-color(#226666);}
.c226699{background-color:#226699; color: contrast-color(#226699);}
.c2266aa{background-color:#2266aa; color: contrast-color(#2266aa);}
.c2266cc{background-color:#2266cc; color: contrast-color(#2266cc);}
.c2266ff{background-color:#2266ff; color: contrast-color(#2266ff);}
.c229900{background-color:#229900; color: contrast-color(#229900);}
.c229922{background-color:#229922; color: contrast-color(#229922);}
.c229944{background-color:#229944; color: contrast-color(#229944);}
.c229966{background-color:#229966; color: contrast-color(#229966);}
.c229999{background-color:#229999; color: contrast-color(#229999);}
.c2299aa{background-color:#2299aa; color: contrast-color(#2299aa);}
.c2299cc{background-color:#2299cc; color: contrast-color(#2299cc);}
.c2299ff{background-color:#2299ff; color: contrast-color(#2299ff);}
.c22aa00{background-color:#22aa00; color: contrast-color(#22aa00);}
.c22aa22{background-color:#22aa22; color: contrast-color(#22aa22);}
.c22aa44{background-color:#22aa44; color: contrast-color(#22aa44);}
.c22aa66{background-color:#22aa66; color: contrast-color(#22aa66);}
.c22aa99{background-color:#22aa99; color: contrast-color(#22aa99);}
.c22aaaa{background-color:#22aaaa; color: contrast-color(#22aaaa);}
.c22aacc{background-color:#22aacc; color: contrast-color(#22aacc);}
.c22aaff{background-color:#22aaff; color: contrast-color(#22aaff);}
.c22cc00{background-color:#22cc00; color: contrast-color(#22cc00);}
.c22cc22{background-color:#22cc22; color: contrast-color(#22cc22);}
.c22cc44{background-color:#22cc44; color: contrast-color(#22cc44);}
.c22cc66{background-color:#22cc66; color: contrast-color(#22cc66);}
.c22cc99{background-color:#22cc99; color: contrast-color(#22cc99);}
.c22ccaa{background-color:#22ccaa; color: contrast-color(#22ccaa);}
.c22cccc{background-color:#22cccc; color: contrast-color(#22cccc);}
.c22ccff{background-color:#22ccff; color: contrast-color(#22ccff);}
.c22ff00{background-color:#22ff00; color: contrast-color(#22ff00);}
.c22ff22{background-color:#22ff22; color: contrast-color(#22ff22);}
.c22ff44{background-color:#22ff44; color: contrast-color(#22ff44);}
.c22ff66{background-color:#22ff66; color: contrast-color(#22ff66);}
.c22ff99{background-color:#22ff99; color: contrast-color(#22ff99);}
.c22ffaa{background-color:#22ffaa; color: contrast-color(#22ffaa);}
.c22ffcc{background-color:#22ffcc; color: contrast-color(#22ffcc);}
.c22ffff{background-color:#22ffff; color: contrast-color(#22ffff);}
.c440000{background-color:#440000; color: contrast-color(#440000);}
.c440022{background-color:#440022; color: contrast-color(#440022);}
.c440044{background-color:#440044; color: contrast-color(#440044);}
.c440066{background-color:#440066; color: contrast-color(#440066);}
.c440099{background-color:#440099; color: contrast-color(#440099);}
.c4400aa{background-color:#4400aa; color: contrast-color(#4400aa);}
.c4400cc{background-color:#4400cc; color: contrast-color(#4400cc);}
.c4400ff{background-color:#4400ff; color: contrast-color(#4400ff);}
.c442200{background-color:#442200; color: contrast-color(#442200);}
.c442222{background-color:#442222; color: contrast-color(#442222);}
.c442244{background-color:#442244; color: contrast-color(#442244);}
.c442266{background-color:#442266; color: contrast-color(#442266);}
.c442299{background-color:#442299; color: contrast-color(#442299);}
.c4422aa{background-color:#4422aa; color: contrast-color(#4422aa);}
.c4422cc{background-color:#4422cc; color: contrast-color(#4422cc);}
.c4422ff{background-color:#4422ff; color: contrast-color(#4422ff);}
.c444400{background-color:#444400; color: contrast-color(#444400);}
.c444422{background-color:#444422; color: contrast-color(#444422);}
.c444444{background-color:#444444; color: contrast-color(#444444);}
.c444466{background-color:#444466; color: contrast-color(#444466);}
.c444499{background-color:#444499; color: contrast-color(#444499);}
.c4444aa{background-color:#4444aa; color: contrast-color(#4444aa);}
.c4444cc{background-color:#4444cc; color: contrast-color(#4444cc);}
.c4444ff{background-color:#4444ff; color: contrast-color(#4444ff);}
.c446600{background-color:#446600; color: contrast-color(#446600);}
.c446622{background-color:#446622; color: contrast-color(#446622);}
.c446644{background-color:#446644; color: contrast-color(#446644);}
.c446666{background-color:#446666; color: contrast-color(#446666);}
.c446699{background-color:#446699; color: contrast-color(#446699);}
.c4466aa{background-color:#4466aa; color: contrast-color(#4466aa);}
.c4466cc{background-color:#4466cc; color: contrast-color(#4466cc);}
.c4466ff{background-color:#4466ff; color: contrast-color(#4466ff);}
.c449900{background-color:#449900; color: contrast-color(#449900);}
.c449922{background-color:#449922; color: contrast-color(#449922);}
.c449944{background-color:#449944; color: contrast-color(#449944);}
.c449966{background-color:#449966; color: contrast-color(#449966);}
.c449999{background-color:#449999; color: contrast-color(#449999);}
.c4499aa{background-color:#4499aa; color: contrast-color(#4499aa);}
.c4499cc{background-color:#4499cc; color: contrast-color(#4499cc);}
.c4499ff{background-color:#4499ff; color: contrast-color(#4499ff);}
.c44aa00{background-color:#44aa00; color: contrast-color(#44aa00);}
.c44aa22{background-color:#44aa22; color: contrast-color(#44aa22);}
.c44aa44{background-color:#44aa44; color: contrast-color(#44aa44);}
.c44aa66{background-color:#44aa66; color: contrast-color(#44aa66);}
.c44aa99{background-color:#44aa99; color: contrast-color(#44aa99);}
.c44aaaa{background-color:#44aaaa; color: contrast-color(#44aaaa);}
.c44aacc{background-color:#44aacc; color: contrast-color(#44aacc);}
.c44aaff{background-color:#44aaff; color: contrast-color(#44aaff);}
.c44cc00{background-color:#44cc00; color: contrast-color(#44cc00);}
.c44cc22{background-color:#44cc22; color: contrast-color(#44cc22);}
.c44cc44{background-color:#44cc44; color: contrast-color(#44cc44);}
.c44cc66{background-color:#44cc66; color: contrast-color(#44cc66);}
.c44cc99{background-color:#44cc99; color: contrast-color(#44cc99);}
.c44ccaa{background-color:#44ccaa; color: contrast-color(#44ccaa);}
.c44cccc{background-color:#44cccc; color: contrast-color(#44cccc);}
.c44ccff{background-color:#44ccff; color: contrast-color(#44ccff);}
.c44ff00{background-color:#44ff00; color: contrast-color(#44ff00);}
.c44ff22{background-color:#44ff22; color: contrast-color(#44ff22);}
.c44ff44{background-color:#44ff44; color: contrast-color(#44ff44);}
.c44ff66{background-color:#44ff66; color: contrast-color(#44ff66);}
.c44ff99{background-color:#44ff99; color: contrast-color(#44ff99);}
.c44ffaa{background-color:#44ffaa; color: contrast-color(#44ffaa);}
.c44ffcc{background-color:#44ffcc; color: contrast-color(#44ffcc);}
.c44ffff{background-color:#44ffff; color: contrast-color(#44ffff);}
.c660000{background-color:#660000; color: contrast-color(#660000);}
.c660022{background-color:#660022; color: contrast-color(#660022);}
.c660044{background-color:#660044; color: contrast-color(#660044);}
.c660066{background-color:#660066; color: contrast-color(#660066);}
.c660099{background-color:#660099; color: contrast-color(#660099);}
.c6600aa{background-color:#6600aa; color: contrast-color(#6600aa);}
.c6600cc{background-color:#6600cc; color: contrast-color(#6600cc);}
.c6600ff{background-color:#6600ff; color: contrast-color(#6600ff);}
.c662200{background-color:#662200; color: contrast-color(#662200);}
.c662222{background-color:#662222; color: contrast-color(#662222);}
.c662244{background-color:#662244; color: contrast-color(#662244);}
.c662266{background-color:#662266; color: contrast-color(#662266);}
.c662299{background-color:#662299; color: contrast-color(#662299);}
.c6622aa{background-color:#6622aa; color: contrast-color(#6622aa);}
.c6622cc{background-color:#6622cc; color: contrast-color(#6622cc);}
.c6622ff{background-color:#6622ff; color: contrast-color(#6622ff);}
.c664400{background-color:#664400; color: contrast-color(#664400);}
.c664422{background-color:#664422; color: contrast-color(#664422);}
.c664444{background-color:#664444; color: contrast-color(#664444);}
.c664466{background-color:#664466; color: contrast-color(#664466);}
.c664499{background-color:#664499; color: contrast-color(#664499);}
.c6644aa{background-color:#6644aa; color: contrast-color(#6644aa);}
.c6644cc{background-color:#6644cc; color: contrast-color(#6644cc);}
.c6644ff{background-color:#6644ff; color: contrast-color(#6644ff);}
.c666600{background-color:#666600; color: contrast-color(#666600);}
.c666622{background-color:#666622; color: contrast-color(#666622);}
.c666644{background-color:#666644; color: contrast-color(#666644);}
.c666666{background-color:#666666; color: contrast-color(#666666);}
.c666699{background-color:#666699; color: contrast-color(#666699);}
.c6666aa{background-color:#6666aa; color: contrast-color(#6666aa);}
.c6666cc{background-color:#6666cc; color: contrast-color(#6666cc);}
.c6666ff{background-color:#6666ff; color: contrast-color(#6666ff);}
.c669900{background-color:#669900; color: contrast-color(#669900);}
.c669922{background-color:#669922; color: contrast-color(#669922);}
.c669944{background-color:#669944; color: contrast-color(#669944);}
.c669966{background-color:#669966; color: contrast-color(#669966);}
.c669999{background-color:#669999; color: contrast-color(#669999);}
.c6699aa{background-color:#6699aa; color: contrast-color(#6699aa);}
.c6699cc{background-color:#6699cc; color: contrast-color(#6699cc);}
.c6699ff{background-color:#6699ff; color: contrast-color(#6699ff);}
.c66aa00{background-color:#66aa00; color: contrast-color(#66aa00);}
.c66aa22{background-color:#66aa22; color: contrast-color(#66aa22);}
.c66aa44{background-color:#66aa44; color: contrast-color(#66aa44);}
.c66aa66{background-color:#66aa66; color: contrast-color(#66aa66);}
.c66aa99{background-color:#66aa99; color: contrast-color(#66aa99);}
.c66aaaa{background-color:#66aaaa; color: contrast-color(#66aaaa);}
.c66aacc{background-color:#66aacc; color: contrast-color(#66aacc);}
.c66aaff{background-color:#66aaff; color: contrast-color(#66aaff);}
.c66cc00{background-color:#66cc00; color: contrast-color(#66cc00);}
.c66cc22{background-color:#66cc22; color: contrast-color(#66cc22);}
.c66cc44{background-color:#66cc44; color: contrast-color(#66cc44);}
.c66cc66{background-color:#66cc66; color: contrast-color(#66cc66);}
.c66cc99{background-color:#66cc99; color: contrast-color(#66cc99);}
.c66ccaa{background-color:#66ccaa; color: contrast-color(#66ccaa);}
.c66cccc{background-color:#66cccc; color: contrast-color(#66cccc);}
.c66ccff{background-color:#66ccff; color: contrast-color(#66ccff);}
.c66ff00{background-color:#66ff00; color: contrast-color(#66ff00);}
.c66ff22{background-color:#66ff22; color: contrast-color(#66ff22);}
.c66ff44{background-color:#66ff44; color: contrast-color(#66ff44);}
.c66ff66{background-color:#66ff66; color: contrast-color(#66ff66);}
.c66ff99{background-color:#66ff99; color: contrast-color(#66ff99);}
.c66ffaa{background-color:#66ffaa; color: contrast-color(#66ffaa);}
.c66ffcc{background-color:#66ffcc; color: contrast-color(#66ffcc);}
.c66ffff{background-color:#66ffff; color: contrast-color(#66ffff);}
.c990000{background-color:#990000; color: contrast-color(#990000);}
.c990022{background-color:#990022; color: contrast-color(#990022);}
.c990044{background-color:#990044; color: contrast-color(#990044);}
.c990066{background-color:#990066; color: contrast-color(#990066);}
.c990099{background-color:#990099; color: contrast-color(#990099);}
.c9900aa{background-color:#9900aa; color: contrast-color(#9900aa);}
.c9900cc{background-color:#9900cc; color: contrast-color(#9900cc);}
.c9900ff{background-color:#9900ff; color: contrast-color(#9900ff);}
.c992200{background-color:#992200; color: contrast-color(#992200);}
.c992222{background-color:#992222; color: contrast-color(#992222);}
.c992244{background-color:#992244; color: contrast-color(#992244);}
.c992266{background-color:#992266; color: contrast-color(#992266);}
.c992299{background-color:#992299; color: contrast-color(#992299);}
.c9922aa{background-color:#9922aa; color: contrast-color(#9922aa);}
.c9922cc{background-color:#9922cc; color: contrast-color(#9922cc);}
.c9922ff{background-color:#9922ff; color: contrast-color(#9922ff);}
.c994400{background-color:#994400; color: contrast-color(#994400);}
.c994422{background-color:#994422; color: contrast-color(#994422);}
.c994444{background-color:#994444; color: contrast-color(#994444);}
.c994466{background-color:#994466; color: contrast-color(#994466);}
.c994499{background-color:#994499; color: contrast-color(#994499);}
.c9944aa{background-color:#9944aa; color: contrast-color(#9944aa);}
.c9944cc{background-color:#9944cc; color: contrast-color(#9944cc);}
.c9944ff{background-color:#9944ff; color: contrast-color(#9944ff);}
.c996600{background-color:#996600; color: contrast-color(#996600);}
.c996622{background-color:#996622; color: contrast-color(#996622);}
.c996644{background-color:#996644; color: contrast-color(#996644);}
.c996666{background-color:#996666; color: contrast-color(#996666);}
.c996699{background-color:#996699; color: contrast-color(#996699);}
.c9966aa{background-color:#9966aa; color: contrast-color(#9966aa);}
.c9966cc{background-color:#9966cc; color: contrast-color(#9966cc);}
.c9966ff{background-color:#9966ff; color: contrast-color(#9966ff);}
.c999900{background-color:#999900; color: contrast-color(#999900);}
.c999922{background-color:#999922; color: contrast-color(#999922);}
.c999944{background-color:#999944; color: contrast-color(#999944);}
.c999966{background-color:#999966; color: contrast-color(#999966);}
.c999999{background-color:#999999; color: contrast-color(#999999);}
.c9999aa{background-color:#9999aa; color: contrast-color(#9999aa);}
.c9999cc{background-color:#9999cc; color: contrast-color(#9999cc);}
.c9999ff{background-color:#9999ff; color: contrast-color(#9999ff);}
.c99aa00{background-color:#99aa00; color: contrast-color(#99aa00);}
.c99aa22{background-color:#99aa22; color: contrast-color(#99aa22);}
.c99aa44{background-color:#99aa44; color: contrast-color(#99aa44);}
.c99aa66{background-color:#99aa66; color: contrast-color(#99aa66);}
.c99aa99{background-color:#99aa99; color: contrast-color(#99aa99);}
.c99aaaa{background-color:#99aaaa; color: contrast-color(#99aaaa);}
.c99aacc{background-color:#99aacc; color: contrast-color(#99aacc);}
.c99aaff{background-color:#99aaff; color: contrast-color(#99aaff);}
.c99cc00{background-color:#99cc00; color: contrast-color(#99cc00);}
.c99cc22{background-color:#99cc22; color: contrast-color(#99cc22);}
.c99cc44{background-color:#99cc44; color: contrast-color(#99cc44);}
.c99cc66{background-color:#99cc66; color: contrast-color(#99cc66);}
.c99cc99{background-color:#99cc99; color: contrast-color(#99cc99);}
.c99ccaa{background-color:#99ccaa; color: contrast-color(#99ccaa);}
.c99cccc{background-color:#99cccc; color: contrast-color(#99cccc);}
.c99ccff{background-color:#99ccff; color: contrast-color(#99ccff);}
.c99ff00{background-color:#99ff00; color: contrast-color(#99ff00);}
.c99ff22{background-color:#99ff22; color: contrast-color(#99ff22);}
.c99ff44{background-color:#99ff44; color: contrast-color(#99ff44);}
.c99ff66{background-color:#99ff66; color: contrast-color(#99ff66);}
.c99ff99{background-color:#99ff99; color: contrast-color(#99ff99);}
.c99ffaa{background-color:#99ffaa; color: contrast-color(#99ffaa);}
.c99ffcc{background-color:#99ffcc; color: contrast-color(#99ffcc);}
.c99ffff{background-color:#99ffff; color: contrast-color(#99ffff);}
.caa0000{background-color:#aa0000; color: contrast-color(#aa0000);}
.caa0022{background-color:#aa0022; color: contrast-color(#aa0022);}
.caa0044{background-color:#aa0044; color: contrast-color(#aa0044);}
.caa0066{background-color:#aa0066; color: contrast-color(#aa0066);}
.caa0099{background-color:#aa0099; color: contrast-color(#aa0099);}
.caa00aa{background-color:#aa00aa; color: contrast-color(#aa00aa);}
.caa00cc{background-color:#aa00cc; color: contrast-color(#aa00cc);}
.caa00ff{background-color:#aa00ff; color: contrast-color(#aa00ff);}
.caa2200{background-color:#aa2200; color: contrast-color(#aa2200);}
.caa2222{background-color:#aa2222; color: contrast-color(#aa2222);}
.caa2244{background-color:#aa2244; color: contrast-color(#aa2244);}
.caa2266{background-color:#aa2266; color: contrast-color(#aa2266);}
.caa2299{background-color:#aa2299; color: contrast-color(#aa2299);}
.caa22aa{background-color:#aa22aa; color: contrast-color(#aa22aa);}
.caa22cc{background-color:#aa22cc; color: contrast-color(#aa22cc);}
.caa22ff{background-color:#aa22ff; color: contrast-color(#aa22ff);}
.caa4400{background-color:#aa4400; color: contrast-color(#aa4400);}
.caa4422{background-color:#aa4422; color: contrast-color(#aa4422);}
.caa4444{background-color:#aa4444; color: contrast-color(#aa4444);}
.caa4466{background-color:#aa4466; color: contrast-color(#aa4466);}
.caa4499{background-color:#aa4499; color: contrast-color(#aa4499);}
.caa44aa{background-color:#aa44aa; color: contrast-color(#aa44aa);}
.caa44cc{background-color:#aa44cc; color: contrast-color(#aa44cc);}
.caa44ff{background-color:#aa44ff; color: contrast-color(#aa44ff);}
.caa6600{background-color:#aa6600; color: contrast-color(#aa6600);}
.caa6622{background-color:#aa6622; color: contrast-color(#aa6622);}
.caa6644{background-color:#aa6644; color: contrast-color(#aa6644);}
.caa6666{background-color:#aa6666; color: contrast-color(#aa6666);}
.caa6699{background-color:#aa6699; color: contrast-color(#aa6699);}
.caa66aa{background-color:#aa66aa; color: contrast-color(#aa66aa);}
.caa66cc{background-color:#aa66cc; color: contrast-color(#aa66cc);}
.caa66ff{background-color:#aa66ff; color: contrast-color(#aa66ff);}
.caa9900{background-color:#aa9900; color: contrast-color(#aa9900);}
.caa9922{background-color:#aa9922; color: contrast-color(#aa9922);}
.caa9944{background-color:#aa9944; color: contrast-color(#aa9944);}
.caa9966{background-color:#aa9966; color: contrast-color(#aa9966);}
.caa9999{background-color:#aa9999; color: contrast-color(#aa9999);}
.caa99aa{background-color:#aa99aa; color: contrast-color(#aa99aa);}
.caa99cc{background-color:#aa99cc; color: contrast-color(#aa99cc);}
.caa99ff{background-color:#aa99ff; color: contrast-color(#aa99ff);}
.caaaa00{background-color:#aaaa00; color: contrast-color(#aaaa00);}
.caaaa22{background-color:#aaaa22; color: contrast-color(#aaaa22);}
.caaaa44{background-color:#aaaa44; color: contrast-color(#aaaa44);}
.caaaa66{background-color:#aaaa66; color: contrast-color(#aaaa66);}
.caaaa99{background-color:#aaaa99; color: contrast-color(#aaaa99);}
.caaaaaa{background-color:#aaaaaa; color: contrast-color(#aaaaaa);}
.caaaacc{background-color:#aaaacc; color: contrast-color(#aaaacc);}
.caaaaff{background-color:#aaaaff; color: contrast-color(#aaaaff);}
.caacc00{background-color:#aacc00; color: contrast-color(#aacc00);}
.caacc22{background-color:#aacc22; color: contrast-color(#aacc22);}
.caacc44{background-color:#aacc44; color: contrast-color(#aacc44);}
.caacc66{background-color:#aacc66; color: contrast-color(#aacc66);}
.caacc99{background-color:#aacc99; color: contrast-color(#aacc99);}
.caaccaa{background-color:#aaccaa; color: contrast-color(#aaccaa);}
.caacccc{background-color:#aacccc; color: contrast-color(#aacccc);}
.caaccff{background-color:#aaccff; color: contrast-color(#aaccff);}
.caaff00{background-color:#aaff00; color: contrast-color(#aaff00);}
.caaff22{background-color:#aaff22; color: contrast-color(#aaff22);}
.caaff44{background-color:#aaff44; color: contrast-color(#aaff44);}
.caaff66{background-color:#aaff66; color: contrast-color(#aaff66);}
.caaff99{background-color:#aaff99; color: contrast-color(#aaff99);}
.caaffaa{background-color:#aaffaa; color: contrast-color(#aaffaa);}
.caaffcc{background-color:#aaffcc; color: contrast-color(#aaffcc);}
.caaffff{background-color:#aaffff; color: contrast-color(#aaffff);}
.ccc0000{background-color:#cc0000; color: contrast-color(#cc0000);}
.ccc0022{background-color:#cc0022; color: contrast-color(#cc0022);}
.ccc0044{background-color:#cc0044; color: contrast-color(#cc0044);}
.ccc0066{background-color:#cc0066; color: contrast-color(#cc0066);}
.ccc0099{background-color:#cc0099; color: contrast-color(#cc0099);}
.ccc00aa{background-color:#cc00aa; color: contrast-color(#cc00aa);}
.ccc00cc{background-color:#cc00cc; color: contrast-color(#cc00cc);}
.ccc00ff{background-color:#cc00ff; color: contrast-color(#cc00ff);}
.ccc2200{background-color:#cc2200; color: contrast-color(#cc2200);}
.ccc2222{background-color:#cc2222; color: contrast-color(#cc2222);}
.ccc2244{background-color:#cc2244; color: contrast-color(#cc2244);}
.ccc2266{background-color:#cc2266; color: contrast-color(#cc2266);}
.ccc2299{background-color:#cc2299; color: contrast-color(#cc2299);}
.ccc22aa{background-color:#cc22aa; color: contrast-color(#cc22aa);}
.ccc22cc{background-color:#cc22cc; color: contrast-color(#cc22cc);}
.ccc22ff{background-color:#cc22ff; color: contrast-color(#cc22ff);}
.ccc4400{background-color:#cc4400; color: contrast-color(#cc4400);}
.ccc4422{background-color:#cc4422; color: contrast-color(#cc4422);}
.ccc4444{background-color:#cc4444; color: contrast-color(#cc4444);}
.ccc4466{background-color:#cc4466; color: contrast-color(#cc4466);}
.ccc4499{background-color:#cc4499; color: contrast-color(#cc4499);}
.ccc44aa{background-color:#cc44aa; color: contrast-color(#cc44aa);}
.ccc44cc{background-color:#cc44cc; color: contrast-color(#cc44cc);}
.ccc44ff{background-color:#cc44ff; color: contrast-color(#cc44ff);}
.ccc6600{background-color:#cc6600; color: contrast-color(#cc6600);}
.ccc6622{background-color:#cc6622; color: contrast-color(#cc6622);}
.ccc6644{background-color:#cc6644; color: contrast-color(#cc6644);}
.ccc6666{background-color:#cc6666; color: contrast-color(#cc6666);}
.ccc6699{background-color:#cc6699; color: contrast-color(#cc6699);}
.ccc66aa{background-color:#cc66aa; color: contrast-color(#cc66aa);}
.ccc66cc{background-color:#cc66cc; color: contrast-color(#cc66cc);}
.ccc66ff{background-color:#cc66ff; color: contrast-color(#cc66ff);}
.ccc9900{background-color:#cc9900; color: contrast-color(#cc9900);}
.ccc9922{background-color:#cc9922; color: contrast-color(#cc9922);}
.ccc9944{background-color:#cc9944; color: contrast-color(#cc9944);}
.ccc9966{background-color:#cc9966; color: contrast-color(#cc9966);}
.ccc9999{background-color:#cc9999; color: contrast-color(#cc9999);}
.ccc99aa{background-color:#cc99aa; color: contrast-color(#cc99aa);}
.ccc99cc{background-color:#cc99cc; color: contrast-color(#cc99cc);}
.ccc99ff{background-color:#cc99ff; color: contrast-color(#cc99ff);}
.cccaa00{background-color:#ccaa00; color: contrast-color(#ccaa00);}
.cccaa22{background-color:#ccaa22; color: contrast-color(#ccaa22);}
.cccaa44{background-color:#ccaa44; color: contrast-color(#ccaa44);}
.cccaa66{background-color:#ccaa66; color: contrast-color(#ccaa66);}
.cccaa99{background-color:#ccaa99; color: contrast-color(#ccaa99);}
.cccaaaa{background-color:#ccaaaa; color: contrast-color(#ccaaaa);}
.cccaacc{background-color:#ccaacc; color: contrast-color(#ccaacc);}
.cccaaff{background-color:#ccaaff; color: contrast-color(#ccaaff);}
.ccccc00{background-color:#cccc00; color: contrast-color(#cccc00);}
.ccccc22{background-color:#cccc22; color: contrast-color(#cccc22);}
.ccccc44{background-color:#cccc44; color: contrast-color(#cccc44);}
.ccccc66{background-color:#cccc66; color: contrast-color(#cccc66);}
.ccccc99{background-color:#cccc99; color: contrast-color(#cccc99);}
.cccccaa{background-color:#ccccaa; color: contrast-color(#ccccaa);}
.ccccccc{background-color:#cccccc; color: contrast-color(#cccccc);}
.cccccff{background-color:#ccccff; color: contrast-color(#ccccff);}
.cccff00{background-color:#ccff00; color: contrast-color(#ccff00);}
.cccff22{background-color:#ccff22; color: contrast-color(#ccff22);}
.cccff44{background-color:#ccff44; color: contrast-color(#ccff44);}
.cccff66{background-color:#ccff66; color: contrast-color(#ccff66);}
.cccff99{background-color:#ccff99; color: contrast-color(#ccff99);}
.cccffaa{background-color:#ccffaa; color: contrast-color(#ccffaa);}
.cccffcc{background-color:#ccffcc; color: contrast-color(#ccffcc);}
.cccffff{background-color:#ccffff; color: contrast-color(#ccffff);}
.cff0000{background-color:#ff0000; color: contrast-color(#ff0000);}
.cff0022{background-color:#ff0022; color: contrast-color(#ff0022);}
.cff0044{background-color:#ff0044; color: contrast-color(#ff0044);}
.cff0066{background-color:#ff0066; color: contrast-color(#ff0066);}
.cff0099{background-color:#ff0099; color: contrast-color(#ff0099);}
.cff00aa{background-color:#ff00aa; color: contrast-color(#ff00aa);}
.cff00cc{background-color:#ff00cc; color: contrast-color(#ff00cc);}
.cff00ff{background-color:#ff00ff; color: contrast-color(#ff00ff);}
.cff2200{background-color:#ff2200; color: contrast-color(#ff2200);}
.cff2222{background-color:#ff2222; color: contrast-color(#ff2222);}
.cff2244{background-color:#ff2244; color: contrast-color(#ff2244);}
.cff2266{background-color:#ff2266; color: contrast-color(#ff2266);}
.cff2299{background-color:#ff2299; color: contrast-color(#ff2299);}
.cff22aa{background-color:#ff22aa; color: contrast-color(#ff22aa);}
.cff22cc{background-color:#ff22cc; color: contrast-color(#ff22cc);}
.cff22ff{background-color:#ff22ff; color: contrast-color(#ff22ff);}
.cff4400{background-color:#ff4400; color: contrast-color(#ff4400);}
.cff4422{background-color:#ff4422; color: contrast-color(#ff4422);}
.cff4444{background-color:#ff4444; color: contrast-color(#ff4444);}
.cff4466{background-color:#ff4466; color: contrast-color(#ff4466);}
.cff4499{background-color:#ff4499; color: contrast-color(#ff4499);}
.cff44aa{background-color:#ff44aa; color: contrast-color(#ff44aa);}
.cff44cc{background-color:#ff44cc; color: contrast-color(#ff44cc);}
.cff44ff{background-color:#ff44ff; color: contrast-color(#ff44ff);}
.cff6600{background-color:#ff6600; color: contrast-color(#ff6600);}
.cff6622{background-color:#ff6622; color: contrast-color(#ff6622);}
.cff6644{background-color:#ff6644; color: contrast-color(#ff6644);}
.cff6666{background-color:#ff6666; color: contrast-color(#ff6666);}
.cff6699{background-color:#ff6699; color: contrast-color(#ff6699);}
.cff66aa{background-color:#ff66aa; color: contrast-color(#ff66aa);}
.cff66cc{background-color:#ff66cc; color: contrast-color(#ff66cc);}
.cff66ff{background-color:#ff66ff; color: contrast-color(#ff66ff);}
.cff9900{background-color:#ff9900; color: contrast-color(#ff9900);}
.cff9922{background-color:#ff9922; color: contrast-color(#ff9922);}
.cff9944{background-color:#ff9944; color: contrast-color(#ff9944);}
.cff9966{background-color:#ff9966; color: contrast-color(#ff9966);}
.cff9999{background-color:#ff9999; color: contrast-color(#ff9999);}
.cff99aa{background-color:#ff99aa; color: contrast-color(#ff99aa);}
.cff99cc{background-color:#ff99cc; color: contrast-color(#ff99cc);}
.cff99ff{background-color:#ff99ff; color: contrast-color(#ff99ff);}
.cffaa00{background-color:#ffaa00; color: contrast-color(#ffaa00);}
.cffaa22{background-color:#ffaa22; color: contrast-color(#ffaa22);}
.cffaa44{background-color:#ffaa44; color: contrast-color(#ffaa44);}
.cffaa66{background-color:#ffaa66; color: contrast-color(#ffaa66);}
.cffaa99{background-color:#ffaa99; color: contrast-color(#ffaa99);}
.cffaaaa{background-color:#ffaaaa; color: contrast-color(#ffaaaa);}
.cffaacc{background-color:#ffaacc; color: contrast-color(#ffaacc);}
.cffaaff{background-color:#ffaaff; color: contrast-color(#ffaaff);}
.cffcc00{background-color:#ffcc00; color: contrast-color(#ffcc00);}
.cffcc22{background-color:#ffcc22; color: contrast-color(#ffcc22);}
.cffcc44{background-color:#ffcc44; color: contrast-color(#ffcc44);}
.cffcc66{background-color:#ffcc66; color: contrast-color(#ffcc66);}
.cffcc99{background-color:#ffcc99; color: contrast-color(#ffcc99);}
.cffccaa{background-color:#ffccaa; color: contrast-color(#ffccaa);}
.cffcccc{background-color:#ffcccc; color: contrast-color(#ffcccc);}
.cffccff{background-color:#ffccff; color: contrast-color(#ffccff);}
.cffff00{background-color:#ffff00; color: contrast-color(#ffff00);}
.cffff22{background-color:#ffff22; color: contrast-color(#ffff22);}
.cffff44{background-color:#ffff44; color: contrast-color(#ffff44);}
.cffff66{background-color:#ffff66; color: contrast-color(#ffff66);}
.cffff99{background-color:#ffff99; color: contrast-color(#ffff99);}
.cffffaa{background-color:#ffffaa; color: contrast-color(#ffffaa);}
.cffffcc{background-color:#ffffcc; color: contrast-color(#ffffcc);}
.cffffff{background-color:#ffffff; color: contrast-color(#ffffff);}

              
            
!

JS

              
                
              
            
!
999px
What' a functional programmer's favorite animal? A lamb, duh!

Console