WCAG Farbkontrastprüfer
Prüfen, anpassen und konvertieren Sie Vorder- und Hintergrundfarbkombinationen auf Übereinstimmung mit den W3C Zugänglichkeitsrichtlinien.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html class="noJS minCSS desktop" lang=en-GB itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<script id=declare_globals>
var LS = {
globalJS : "342-globalJS",
prismCSS : "155-prismCSS",
prismJS : "112-prismJS",
socialCSS : "129-socialCSS",
disqusCSS : "107-disqusCSS",
disqusJS : "118-disqusJS"
};
var device="desktop",hasDemo='',d=document,useJS=!1,useCSS=!1,useLocalStorage=!1,useTouch=!1,addDisqus="1",tidyLS = false;
!function(){"use strict";var e=d.documentElement,a=function(){try{return"localStorage"in window&&null!==window.localStorage}catch(e){return!1}}();useLocalStorage=a,e.className=e.className.replace("noJS","hasJS"),d.addEventListener&&d.documentElement.classList&&d.documentElement.classList&&window.File&&window.FileReader&&window.FileList&&(useJS=!0,e.className=e.className.replace("hasJS","useJS")),"ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0?(useTouch=!0,e.className+=" useTouch"):e.className+=" noTouch","flex"in e.style&&(useCSS=!0,e.className=e.className.replace("minCSS","useCSS")),performance&&performance.mark&&performance.mark("timeToTitle")}();
if(window.location.hash==="#noAnimations"){d.documentElement.className+=" noAnimations"}
function removeIdNode(i){i&&(i=d.getElementById(i))&&i.parentNode.removeChild(i)}
function scriptWriter(i,s,c){var a=d.createElement("script");a.src=s;a.async=!0;a.id=i;c&&(a.onload=c);d.body.appendChild(a)}
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t||200),a&&n.apply(i,o)}}
window.getFile=k;
function k(l,e,a,f,g,h){var c=d.getElementById(a);if(useJS&&useCSS&&c){if(useLocalStorage)for(a=localStorage.length;a--;)if(localStorage.key(a)===e){c.innerHTML=localStorage.getItem(e);g=!0;removeIdNode(f);break}if(!g){var b=new XMLHttpRequest;b.version=e;b.onload=function(){var a=b.version;200===this.status&&(c.innerHTML=this.responseText,useLocalStorage&&a&&"X"!==a&&(localStorage[a]=this.responseText,tidyLS=!0,console.log(a+" added to local storage")),removeIdNode(f))};b.open("get",l,!0);b.send()}if(h)return h(c)}};
</script>
<style id=basic_styles>
.button,a{text-decoration:none}html{font-family:sans-serif;box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}.mobile{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}body{background:#fafafd;color:#3a2c49}h1,h2,h3,h4{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#4B3D5A;font-weight:400}h2,h3,h4,code{letter-spacing:-.01em}b,strong{font-weight:700}a{color:#236ECE;border-bottom:1px solid #236ECE}a:active,a:focus,a:hover{color:#014cac;border-color:#014cac}a:focus{background-color:#fff;outline:#fff solid .25rem}h1 a,h1 a:active,h1 a:focus,h1 a:hover{color:#4B3D5A;cursor:text;border:0 solid}img{border:0;max-width:100%;vertical-align:top}fieldset{border:0;padding:0;margin:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-decoration,search-cancel-button{-webkit-appearance:none}em,i,q{font-style:italic;padding-right:.1rem}code,kbd,pre{font-family:monospace,monospace}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button,select{text-transform:none}button{cursor:pointer;overflow:visible;vertical-align:bottom}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}pre{overflow:hidden;background-color:#FCFDFA}pre>code{overflow-x:scroll;display:block;padding:1rem}.hide{position:absolute;left:-200em;margin:0}.noscript{font-weight:700;color:#c00}.list--unstyled{list-style-type:none;padding-left:0}.button{display:block;color:#fff;background-color:#666;border:1px solid #242424;text-align:center;cursor:pointer;letter-spacing:1px;border-radius:4px;padding:.618em 1.618em}.smaller{font-size:smaller}small{font-size:small}
.skipToContent{display:block;position:absolute;left:0;top:-4em;padding:.618em 1em;transition:all .4s}
.skipToContent:focus{top:.384em;color:#fff;background:#3B2D4A;z-index:10;left:.384em;outline:.125rem solid #b3d4ff}
</style>
<style id=minimum_styles>
h1{font-size:26px}h2{font-size:22px}h3{font-size:20px}small{font-size:small}hr{box-sizing:content-box;height:0;color:#fff}input{line-height:normal;padding:.156em;width:195px}body{line-height:24px;margin:16px;max-width:34em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACIAQMAAADgcTgQAAAAA1BMVEXu7u6DSdFtAAAADElEQVR4XmNAAaMAAAEQAAHPBGa9AAAAAElFTkSuQmCC) 0 -32px repeat-x}article,aside,footer,header,main,nav,section{display:block}h1,h2,h3{margin:42px 0 24px;line-height:1.2em}li{margin:0 0 16px}p{margin:0 0 24px}.content .r{margin:42px 0}.c,.list-nav .logo-li,.logo-svg,.main-header .r,.noJS .js-required,.search-input+button>svg{display:none}ul{margin:0}.list-nav li{display:inline-block;padding-right:1em}article .smaller{margin-bottom:10px}article h2{margin-bottom:6px}.content ul,pre{margin:24px 0}pre>code{padding:12px}
</style>
<style id=local_styles>
.inputarea {
position:relative;
margin-bottom:1.618rem;
background-color: rgba(255,255,255,.4);
border: 2px dashed #f90;
padding: 1rem;
}
.flex-wide {display:flex; xxxflex-flow:row wrap; margin:0 auto 1.618rem}
.inputarea .inp_bg,
.inputarea .inp_fg,
output {flex:1}
.colours {margin-bottom: 0}
.colours .button{flex:1}
.colours > :first-child{margin-left:0}
.colours > :last-child{margin-right:0}
.lbl-foreground {margin-bottom:.146rem}
.lbl-background {margin-top:.618rem; margin-bottom:.146rem}
.inp_fg_selector,
.inp_bg_selector {position:absolute;padding:0;opacity:0}
.inp_bg_selector,
.inp_fg_selector {opacity:0; cursor:pointer}
.button.adjust {line-height:1rem; min-height:2.85rem; padding:0 .5rem; border:1px solid #242424; border-radius:.25rem}
.button.adjust.color {padding:0}
.button.adjust.aa,
.button.adjust.color {font-size:1.25rem; width:2.61rem; text-align:center;}
.button.adjust.plus,
.button.adjust.minus {padding:.25rem}
XXX.button.adjust:hover {box-shadow: 0 0 2px rgba(0,0,0,0.3); xxx:, 0 .618rem 1rem rgba(255,255,255,1) inset;, -1rem 0 1rem rgba(0,0,0,1) inset}
.button.adjust:active{
text-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 0 rgba(255, 255, 255, 0) inset,
0 0 5px rgba(0, 0, 0, 0.5) inset,
0 20px 0 rgba(255, 255, 255, 0.03) inset,
0 -20px 20px rgba(0, 0, 0, 0.15) inset,
0 20px 20px rgba(255, 255, 255, 0.05) inset;
}
.svg.minus,
.svg.plus {width:2rem}
.svg.minus path,
.svg.plus path,
.svg.color path {fill:none;stroke-width:2.7;stroke-linecap:square;stroke:#fff}
.dark .svg.color path {stroke:#000}
.aaa-green{background-color:#008b00}
.aa-green{background-color:#568409}
.aa-amber{background-color:#d94001}
.aa-red{background-color:#f00000}
.options2 {margin:.382rem;}
output {
display:inline-block;
position:relative;
margin:-0.1em auto 0;
text-align:center;
color:#FFF;
}
output .error {
font-size:14px;
letter-spacing:.5px;
display:block;
}
.button.output {
font-size:20px;
line-height:1;
margin:0 .382rem;
padding:.618rem;
}
/* reset button */
a:visited.button,
a:hover.button,
a:focus.button,
a:active.button{color:#fff}
.button.reset {padding:0 .618rem; line-height:3.2rem}
.button.swap {padding:0 .618rem}
.button.swap,
.button.clear {margin:0}
.results.OFF{max-height:0; margin:0}
.results{
max-height:5rem;
text-align: center;
overflow:hidden;
margin:1rem 1rem .618rem;
transition: max-height .5s ease-in-out;
}
.results ul{padding-left:1.618rem}
.results :last-child{margin-bottom:0}
.color-display{
position:relative;
margin:1.618rem 0;
}
.original {margin:0}
.display {padding:.618rem; margin-bottom:1.618rem; text-align: center}
.button.set,
.button.reset{line-height:inherit; padding:.146rem .618rem; xxxbackground-color:#777; margin:.382rem}
.original-text{flex:1; display:block; text-align:center; line-height:2rem; margin:.382rem}
.fixedfont {line-height:1; margin-bottom:0;}
.fixedfont span {line-height:1; white-space:nowrap; display:block;}
.ff-14pt {font-size:14pt ! important; font-weight:bold ! important}
.ff-18pt {font-size:18pt ! important}
.options2 {margin:0}
.color-display,
.options2 {display:none}
.button {background-color:#777; border-color:#555; margin:0; display: block}/* default - off */
.button:disabled,
.button.disabled {opacity:.1; filter:blur(1px); box-shadow:none}
.ON .button:hover, /* extended hover shadow to match input focus - reapply globally */
.ON .button:focus {
text-decoration: none;
box-shadow: rgba(0,0,0,.5) 0 2px 5px,inset rgba(255,255,255,.25) 0 1px 0,inset rgba(0,0,0,.25) 0 0 0,inset rgba(255,255,255,.03) 0 1.25rem 0,inset rgba(0,0,0,.15) 0 -1.25rem 1.25rem,inset rgba(255,255,255,.05) 0 1.25rem 1.25rem, 0 .25rem .25rem rgba(0,0,0,0.3);
}
.content input::-webkit-input-placeholder {color: #787777; opacity:1;}
.content input:focus::-webkit-input-placeholder{color:transparent;} /* iOS */
.content input:-moz-placeholder {color: #787777; opacity:1;} /* Firefox 18- */
.content input::-moz-placeholder {color: #787777; opacity:1;} /* Firefox 19+ */
.content input:focus::-moz-placeholder {opacity:0.5;} /* Firefox 19+ */
.content input:-ms-input-placeholder {color: #787777; opacity:1;}
.content input[type="text"] {
display: block;
margin: 0;
border: 1px solid #ccc;
min-width: 4rem;
padding: .618rem;
}
.content input[type="text"] {
transition: box-shadow .3s ease-out;
}
.content input[type="text"]:hover,
.content input[type="text"]:focus {
box-shadow: 0 4px 4px rgba(0,0,0,0.3);
}
@media screen and (min-width:25rem) {
.button{margin:0 .2rem}
.content .inp_fg[type="text"]{margin:0 .2rem}
.content .inp_bg[type="text"]{margin:0 .2rem}
.aa {margin-left:0}
.color{margin-right:0}
}
.exampleText {
font-size: 16px !important;
margin: .618rem 0 0;
padding: .2rem 1.618rem;
text-align: center;
border: 1px solid #ccc;
}
.exampleText.OFF {
display:none;
}
.pt14bold {
font-size:14pt !important;
font-weight: 700;
}
.pt18 {
font-size:18pt !important;
}
.share{margin:1.618rem 0;border:1px solid rgba(96,96,128,.1);background-color:rgba(255,255,255,.3);position:sticky;top:4.618rem}
.share-in{border:1px solid rgba(255,255,255,.7);padding:.618rem 1rem 1rem;font-style:italic}
.share_ttl,.share_strp{margin:0 0 .618rem}
.btn-twitter{background-color:hsl(200, 72%, 40%);padding:calc(.618rem + 2px) .236rem calc(.618rem - 2px) .618rem;width:100%}
.btn-twitter:focus{background-color:#37A7DF}
.svg-twitter{width:1.8rem;height:1.8rem;fill:currentColor;vertical-align:middle;display:inline-block;margin:-.236rem .236rem 0 0}
</style>
</head>
<body id="color_contrast" class="color_contrast">
<main id=main aria-label="Page content" tabindex=-1 itemscope itemtype="http://schema.org/BlogPosting" class=inactive>
<header id=main_header aria-labelledby="main_h" class="main-header flex fp ">
<div class=l>
<h1 id=main_h itemprop=headline><a href="/tools/wcag-colour-contrast-checker/" tabindex=-1 itemprop=url>
<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Farbkontrastprüfer</a></h1>
<p itemprop=description><i>
Prüfen, anpassen und konvertieren Sie Vorder- und Hintergrundfarbkombinationen auf Übereinstimmung mit den
<abbr title="World Wide Web Consortium">W3C</abbr> Zugänglichkeitsrichtlinien.</i></p>
</div>
<div class=c></div>
<div class=r aria-hidden=true>
<svg class=header_svg viewBox="0 0 96 96">
<path d="M56 18c-20-5-41 2-54 17v2a52 52 0 0 0 92 24v-2c-4-20-19-36-38-41zM43 69c-12-3-19-15-16-26 3-12 15-19 26-16 12 3 19 15 16 26-3 12-15 19-26 16zm4-30a14 14 0 1 1-7 27 14 14 0 0 1 7-27z"/>
</svg>
<style>
.main-header > .r {
background: linear-gradient(hsla(0, 100%, 40%, 0.25) 0%, hsla(0, 100%, 40%, 0.25) 33%, hsla(120, 100%, 40%, 0.25) 33.001%, hsla(120, 100%, 40%, 0.25) 66%, hsla(240, 100%, 40%, 0.25) 66.001%, hsla(240, 100%, 40%, 0.25) 100% );
}
</style>
</div>
</header>
<div class="content flex fp">
<div class=l itemprop=articleBody>
<div id=content-l>
<div class=js-required>
<h2 class=hide>Colour contrast check, amendment and Hex to RGB conversion</h2>
<div id=inputArea class=inputarea>
<label id=fg class="hide lbl-foreground" for=foreground>Foreground colour:</label>
<div class=flex-wide>
<button id=fg_aa class="button adjust aa" disabled><span class=hide>Resolve foreground colour to the nearest AA shade </span>AA</button>
<button id=fg_minus class="button adjust minus" disabled>
<svg class="svg minus" viewBox="0 0 38 38">
<title>Darken foreground colour</title>
<path d="M10.5 19l17 0"/>
</svg>
</button>
<input id=foreground class=inp_fg placeholder="Foreground colour" type=text>
<button id=fg_plus class="button adjust plus" disabled>
<svg class="svg plus" viewBox="0 0 38 38">
<title>Lighten foreground colour</title>
<path d="M10.5 19l17 0M19 10.5l0 17"/>
</svg>
</button>
<label id=lbl_fg_selector class="button adjust color disabled" for=inp_fg_selector>
<span class=hide>Select foreground colour:</span>
<input class=inp_fg_selector id=inp_fg_selector type=color disabled>
<svg class="svg color" viewBox="0 0 38 38">
<title>Browser colour panel</title>
<path d="M7 10.5l23.2 0"/>
<rect id="fg_red" x="9" y="6" width="6" height="9" style="fill:#f00"/>
<path d="M7 20.5l23.2 0"/>
<rect id="fg_green" x="22" y="16" width="6" height="9" style="fill:#0f0"/>
<path d="M7 30.5l23.2 0"/>
<rect id="fg_blue" x="15" y="26" width="6" height="9" style="fill:#00f"/>
</svg>
</label>
</div>
<label id="bg" class="hide lbl-background" for="background">Background colour:</label>
<div class="flex-wide">
<button id="bg_aa" class="button adjust aa" disabled><span class="hide">Resolve foreground colour to the nearest AA shade </span>AA</button>
<button id="bg_minus" class="button adjust minus" disabled>
<svg class="svg minus" viewBox="0 0 38 38">
<title>Darken background colour</title>
<path d="M10.5 19l17 0"/>
</svg>
</button>
<input id="background" class="inp_bg" placeholder="Background colour" type=text>
<button id="bg_plus" class="button adjust plus" disabled>
<svg class="svg plus" viewBox="0 0 38 38">
<title>Lighten background colour</title>
<path d="M10.5 19l17 0M19 10.5l0 17"/>
</svg>
</button>
<label id="lbl_bg_selector" class="button adjust color disabled" for="inp_bg_selector">
<span class="hide">Select background colour:</span>
<input class="inp_bg_selector" id="inp_bg_selector" type="color" disabled>
<svg class="svg color" viewBox="0 0 38 38">
<title>Browser colour panel</title>
<path d="M7 10.5l23.2 0"/>
<rect id="bg_red" x="9" y="6" width="6" height="9" style="fill:#f00"/>
<path d="M7 20.5l23.2 0"/>
<rect id="bg_green" x="22" y="16" width="6" height="9" style="fill:#0f0"/>
<path d="M7 30.5l23.2 0"/>
<rect id="bg_blue" x="15" y="26" width="6" height="9" style="fill:#00f"/>
</svg>
</label>
</div>
<div id=colours class="flex-wide colours">
<button id=btn_hex class="button adjust hex" disabled><span class=hide>Convert to </span>Hex</button>
<button id=btn_rgb class="button adjust rgb" disabled><span class=hide>Convert to </span>RGB</button>
<button id=btn_rgba class="button adjust rgba" disabled><span class=hide>Convert to </span>RGBa</button>
</div>
<div class="results OFF" id="results"></div>
<div id=exampleText class="exampleText OFF">
Example: 16px normal copy,
<span class="pt14bold">19px bold,</span>
<span class=pt18>24px large.</span>
</div>
</div>
<div class="color-display cubes">
<div id="backgroundDisplay" class="display">
<p class="arial">This <span id="fontSizeSpan"></span> text sample attempts to visually demonstrate how readable this colour combination is, for normal or <strong>bold</strong> text.</p>
<p class="fixedfont arial"><span class="ff-14pt">Chunky 14pt bold text.</span> <span class="ff-18pt">Large 18pt text.</span></p>
</div>
<div id="original" class="flex-wide original">
<button id="set" class="button set">Set<span class="hide"> from current colours</span></button>
<span class="original-text arial ellipsis">Original colours for comparison.</span>
<button id="reset" class="button reset">Reset<span class="hide"> the current colours</span></button>
</div>
</div>
<div class="options2 flex-wide">
<button id="swap" class="button swap">Swap<span class="hide"> colours</span></button>
<output onclick="document.getElementById('results').classList.toggle('OFF')" class="button output" tabindex="0">
<strong>?</strong>
<span class="error"></span>
<span class="hide">Show details</span>
</output>
<button id="clear" class="button orange clear">Clear<span class="hide"> colours</span></button>
</div>
<div class="color-display" id="foregroundDisplay"></div>
<p><strong><i>Mit gutem Farbkontrast erreichen Sie mehr Nutzer!!</i></strong></p>
<p>Weitere Informationen: <a href="https://contrastrebellion.com/"> Kontrastrebellion</a>
und
<a href="https://www.nngroup.com/articles/low-contrast/"> kontrastarmer Text sind keine Lösung .</a>.</p>
</div>
</div>
<script>
function loaded() {
d.getElementById("content-l").classList.remove("loading");
setTimeout(function(){
d.getElementById("foreground").classList.remove("initial");
d.getElementById("foreground").focus();
}, 700);
}
if (useJS) {
//window.addEventListener("load", loaded, false);
}
</script>
</div>
<div class=c></div>
<aside class="r performance">
<div class="js-required">
<h2 class="mt0"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Wie benutzt man</font></font></h2>
<ul class="list--unstyled px0">
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Fügen Sie Farbwerte in die beiden Eingabefelder ein oder geben Sie sie ein.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Die AA-Taste wird grün, um ein Passen anzuzeigen.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Wenn die AA-Schaltfläche orange oder rot ist, klicken Sie darauf, um die nächste AA-Farbe zu finden.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Die Plus-/Minus-Tasten erhöhen/verringern den Farbton um 1, oder mit der Shift-Taste um 10.</font></font></li>
</ul>
<h2 class="mt0"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Zusätzliche Funktionen</font></font></h2>
<ul class="list--unstyled px0">
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Die Schieberegler-Schaltfläche, sofern vorhanden, greift auf das Farbbedienfeld des Browsers zu.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Die Hex-, RGB- und RGBa-Schaltflächen konvertieren beide Eingaben in dieses Format.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Platzieren Sie bei RGB- oder HSL-Farben den Cursor links neben einer Zahl und drücken Sie dann die Aufwärts-/Abwärtspfeiltasten, um diesen bestimmten Wert um 1 zu erhöhen/zu verringern, oder mit der Umschalttaste um 10.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Unterstützte Formate: </font></font><abbr title="Rot, Blau, Grün"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">RGB</font></font></abbr><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> , </font></font><abbr title="Rot, Blau, Grün, Alpha"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">RGBa</font></font></abbr><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> , </font></font><abbr title="Farbton, Sättigung, Helligkeit, Alpha"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">HSLa</font></font></abbr><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> , hexadezimal und Schlüsselwörter.</font></font></li>
<li><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Kann auch verwendet werden, um Hex in RGB oder RGB in Hex umzuwandeln.</font></font></li>
</ul>
</div>
</aside>
</div>
</main>
<div id=bottom class=bottom role=contentinfo aria-label="Footer navigation">
<!--
<script type="application/ld+json">{"@context":"http://schema.org","@type":"Organization","name":"webSemantics","url":"https://websemantics.uk","sameAs":["https://www.facebook.com/webSemantics-1626870820902273/","https://twitter.com/webSemanticsUK","https://codepen.io/2kool2/pens/popular/?grid_type=list#","https://github.com/2kool2?tab=repositories","https://www.linkedin.com/in/mikefoskett"]}</script>
</div>
-->
<script id=local_scripts>
//<script src="prefixfree.min.js">
/**
* StyleFix 1.0.3 & PrefixFree 1.0.7
* @author Lea Verou
* MIT license
*/(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t},camelCase:function(e){return e.replace(/-([a-z])/g,function(e,t){return t.toUpperCase()}).replace("-","")},deCamelCase:function(e){return e.replace(/[A-Z]/g,function(e){return"-"+e.toLowerCase()})}};(function(){setTimeout(function(){t('link[rel="stylesheet"]').forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()})();(function(e){function t(e,t,r,i,s){e=n[e];if(e.length){var o=RegExp(t+"("+e.join("|")+")"+r,"gi");s=s.replace(o,i)}return s}if(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree={prefixCSS:function(e,r,i){var s=n.prefix;n.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l={uses:0};for(var c in e){var h=e[c];l.uses<h&&(l={prefix:c,uses:h})}n.prefix="-"+l.prefix+"-";n.Prefix=StyleFix.camelCase(n.prefix);n.properties=[];for(var a=0;a<t.length;a++){var f=t[a];if(f.indexOf(n.prefix)===0){var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)}}n.Prefix=="Ms"&&!("transform"in s)&&!("MsTransform"in s)&&"msTransform"in s&&n.properties.push("transform","transform-origin");n.properties.sort()})();(function(){function i(e,t){r[t]="";r[t]=e;return!!r[t]}var e={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};e["repeating-linear-gradient"]=e["repeating-radial-gradient"]=e["radial-gradient"]=e["linear-gradient"];var t={initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display"};n.functions=[];n.keywords=[];var r=document.createElement("div").style;for(var s in e){var o=e[s],u=o.property,a=s+"("+o.params+")";!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)}for(var f in t){var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)}})();(function(){function s(e){i.textContent=e+"{}";return!!i.sheet.cssRules.length}var t={":read-only":null,":read-write":null,":any-link":null,"::selection":null},r={keyframes:"name",viewport:null,document:'regexp(".")'};n.selectors=[];n.atrules=[];var i=e.appendChild(document.createElement("style"));for(var o in t){var u=o+(t[o]?"("+t[o]+")":"");!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)}for(var a in r){var u=a+" "+(r[a]||"");!s("@"+u)&&s("@"+n.prefix+u)&&n.atrules.push(a)}e.removeChild(i)})();n.valueProperties=["transition","transition-property"];e.className+=" "+n.prefix;StyleFix.register(n.prefixCSS)})(document.documentElement);
//<script src="color.js">
// Extend Math.round to allow for precision
Math.round = (function(){
var round = Math.round;
return function (number, decimals) {
decimals = +decimals || 0;
var multiplier = Math.pow(10, decimals);
return round(number * multiplier) / multiplier;
};
})();
(function(){
var _ = self.Color = function(rgba) {
if (rgba === 'transparent') {
rgba = [0, 0, 0, 0];
}
else if (typeof rgba === 'string') {
var rgbaString = rgba;
rgba = rgbaString.match(/rgba?\(([\d.]+), ([\d.]+), ([\d.]+)(?:, ([\d.]+))?\)/);
if (rgba) {
rgba.shift();
}
else {
throw new Error('Invalid string: ' + rgbaString);
}
}
if (rgba[3] === undefined) {
rgba[3] = 1;
}
rgba = rgba.map(function (a) { return Math.round(a, 3) });
this.rgba = rgba;
}
_.prototype = {
get rgb () {
return this.rgba.slice(0, 3);
},
get alpha () {
return this.rgba[3];
},
set alpha (alpha) {
this.rgba[3] = alpha;
},
get luminance () {
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
var rgba = this.rgba.slice();
for(var i=0; i<3; i++) {
var rgb = rgba[i];
rgb /= 255;
rgb = rgb < .03928 ? rgb / 12.92 : Math.pow((rgb + .055) / 1.055, 2.4);
rgba[i] = rgb;
}
return .2126 * rgba[0] + .7152 * rgba[1] + 0.0722 * rgba[2];
},
get inverse () {
return new _([
255 - this.rgba[0],
255 - this.rgba[1],
255 - this.rgba[2],
this.alpha
]);
},
toString: function() {
return 'rgb' + (this.alpha < 1? 'a' : '') + '(' + this.rgba.slice(0, this.alpha >= 1? 3 : 4).join(', ') + ')';
},
clone: function() {
return new _(this.rgba);
},
// Overlay a color over another
overlayOn: function (color) {
var overlaid = this.clone();
var alpha = this.alpha;
if (alpha >= 1) {
return overlaid;
}
for(var i=0; i<3; i++) {
overlaid.rgba[i] = overlaid.rgba[i] * alpha + color.rgba[i] * color.rgba[3] * (1 - alpha);
}
overlaid.rgba[3] = alpha + color.rgba[3] * (1 - alpha)
return overlaid;
},
contrast: function (color) {
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
var alpha = this.alpha;
if (alpha >= 1) {
if (color.alpha < 1) {
color = color.overlayOn(this);
}
var l1 = this.luminance + .05,
l2 = color.luminance + .05,
ratio = l1/l2;
if (l2 > l1) {
ratio = 1 / ratio;
}
ratio = Math.round(ratio, 1);
return {
ratio: ratio,
error: 0,
min: ratio,
max: ratio
}
}
var onBlack = this.overlayOn(_.BLACK).contrast(color).ratio,
onWhite = this.overlayOn(_.WHITE).contrast(color).ratio;
var max = Math.max(onBlack, onWhite);
var closest = this.rgb.map(function(c, i) {
return Math.min(Math.max(0, (color.rgb[i] - c * alpha)/(1-alpha)), 255);
});
closest = new _(closest);
var min = this.overlayOn(closest).contrast(color).ratio;
return {
ratio: Math.round((min + max) / 2, 2),
error: Math.round((max - min) / 2, 2),
min: min,
max: max,
closest: closest,
farthest: onWhite == max? _.WHITE : _.BLACK
};
}
}
_.BLACK = new _([0,0,0]);
_.GRAY = new _([127.5, 127.5, 127.5]);
_.WHITE = new _([255,255,255]);
})();
(function(){function h(d){d=(d+"").replace(/^0+/,"");var c=d.indexOf(".");return-1===c?{integer:d.length,decimals:0}:{integer:c,decimals:d.length-1-c}}(window.Incrementable=function(d,c,b){var e=this;this.textField=d;this.step=+d.getAttribute("step")||+d.getAttribute("data-step")||1;this.multiplier=c||function(a){return a.shiftKey?10:a.ctrlKey?.1:1};b&&(this.units=b);this.changed=!1;this.textField.addEventListener("keydown",function(a){var d=e.multiplier(a);if(d&&(38==a.keyCode||40==a.keyCode)){e.changed=
!1;var c=this.selectionStart,b="value"in this?"value":"textContent";this[b]=this[b].replace(new RegExp("^([\\s\\S]{0,"+c+"}[^-0-9\\.])?(-?[0-9]*(?:\\.?[0-9]+)(?:"+e.units+"))\\b","i"),function(b,f,g){f=f||"";return f.length<=c&&f.length+g.length>=c?(b=e.stepValue(g,40==a.keyCode,d),c+=b.length-g.length,e.changed={add:b,del:g,start:f.length},b=255<b?255:b,f+(0>b?0:b)):f+g});e.changed&&(this.setSelectionRange(c,c),a.preventDefault(),a.stopPropagation(),a=document.createEvent("HTMLEvents"),a.initEvent("input",
!0,!0),a.add=e.changed.add,a.del=e.changed.del,a.start=e.changed.start,a.incrementable=!0,this.dispatchEvent(a))}},!1);this.textField.addEventListener("keypress",function(a){!e.changed||38!=a.keyCode&&40!=a.keyCode||a.preventDefault();a.stopPropagation();e.changed=!1},!1)}).prototype={stepValue:function(d,c,b){var e=parseFloat(d);c=(c?-1:1)*(b||1)*this.step;b=h(e);var a=h(c);return parseFloat((e+c).toPrecision(Math.max(b.integer,a.integer)+Math.max(b.decimals,a.decimals)))+d.replace(/^-|[0-9]+|\./g,
"")},units:"|%|deg|px|r?em|ex|ch|in|cm|mm|pt|pc|vmin|vmax|vw|vh|gd|m?s"}})();
if (window.Incrementable) {
new Incrementable(background);
new Incrementable(foreground);
}
// TinyColor v1.1.2 - https://github.com/bgrins/TinyColor - Brian Grinstead, MIT License
(function(){function e(a,c){var b,d,l,f,h;a=a?a:"";c=c||{};if(a instanceof e)return a;if(!(this instanceof e))return new e(a,c);d=a;h={r:0,g:0,b:0};var v=1;l=b=!1;if("string"==typeof d)a:{d=d.replace(D,"").replace(E,"").toLowerCase();var n=!1;if(w[d])d=w[d],n=!0;else if("transparent"==d){d={r:0,g:0,b:0,a:0,format:"name"};break a}d=(f=r.rgb.exec(d))?{r:f[1],g:f[2],b:f[3]}:(f=r.rgba.exec(d))?{r:f[1],g:f[2],b:f[3],a:f[4]}:(f=r.hsl.exec(d))?{h:f[1],s:f[2],l:f[3]}:(f=r.hsla.exec(d))?{h:f[1],s:f[2],l:f[3],
a:f[4]}:(f=r.hsv.exec(d))?{h:f[1],s:f[2],v:f[3]}:(f=r.hsva.exec(d))?{h:f[1],s:f[2],v:f[3],a:f[4]}:(f=r.hex8.exec(d))?{a:parseInt(f[1],16)/255,r:parseInt(f[2],16),g:parseInt(f[3],16),b:parseInt(f[4],16),format:n?"name":"hex8"}:(f=r.hex6.exec(d))?{r:parseInt(f[1],16),g:parseInt(f[2],16),b:parseInt(f[3],16),format:n?"name":"hex"}:(f=r.hex3.exec(d))?{r:parseInt(f[1]+""+f[1],16),g:parseInt(f[2]+""+f[2],16),b:parseInt(f[3]+""+f[3],16),format:n?"name":"hex"}:!1}if("object"==typeof d){if(d.hasOwnProperty("r")&&
d.hasOwnProperty("g")&&d.hasOwnProperty("b"))h=d.g,b=d.b,h={r:255*k(d.r,255),g:255*k(h,255),b:255*k(b,255)},b=!0,l="%"===String(d.r).substr(-1)?"prgb":"rgb";else if(d.hasOwnProperty("h")&&d.hasOwnProperty("s")&&d.hasOwnProperty("v")){d.s=u(d.s);d.v=u(d.v);l=d.h;n=d.s;h=d.v;l=6*k(l,360);n=k(n,100);h=k(h,100);b=t.floor(l);var q=l-b;l=h*(1-n);f=h*(1-q*n);n=h*(1-(1-q)*n);b%=6;h={r:255*[h,f,l,l,n,h][b],g:255*[n,h,h,f,l,l][b],b:255*[l,l,n,h,h,f][b]};b=!0;l="hsv"}else d.hasOwnProperty("h")&&d.hasOwnProperty("s")&&
d.hasOwnProperty("l")&&(d.s=u(d.s),d.l=u(d.l),h=F(d.h,d.s,d.l),b=!0,l="hsl");d.hasOwnProperty("a")&&(v=d.a)}v=y(v);d=d.format||l;l=m(255,p(h.r,0));f=m(255,p(h.g,0));h=m(255,p(h.b,0));this._originalInput=a;this._r=l;this._g=f;this._b=h;this._a=v;this._roundA=g(100*this._a)/100;this._format=c.format||d;this._gradientType=c.gradientType;1>this._r&&(this._r=g(this._r));1>this._g&&(this._g=g(this._g));1>this._b&&(this._b=g(this._b));this._ok=b;this._tc_id=G++}function z(a,c,b){a=k(a,255);c=k(c,255);b=
k(b,255);var d=p(a,c,b),e=m(a,c,b),f,h=(d+e)/2;if(d==e)f=e=0;else{var g=d-e,e=.5<h?g/(2-d-e):g/(d+e);switch(d){case a:f=(c-b)/g+(c<b?6:0);break;case c:f=(b-a)/g+2;break;case b:f=(a-c)/g+4}f/=6}return{h:f,s:e,l:h}}function F(a,c,b){function d(a,b,c){0>c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}a=k(a,360);c=k(c,100);b=k(b,100);if(0===c)b=c=a=b;else{var e=.5>b?b*(1+c):b+c-b*c,f=2*b-e;b=d(f,e,a+1/3);c=d(f,e,a);a=d(f,e,a-1/3)}return{r:255*b,g:255*c,b:255*a}}function A(a,
c,b){a=k(a,255);c=k(c,255);b=k(b,255);var d=p(a,c,b),e=m(a,c,b),f,g=d-e;if(d==e)f=0;else{switch(d){case a:f=(c-b)/g+(c<b?6:0);break;case c:f=(b-a)/g+2;break;case b:f=(a-c)/g+4}f/=6}return{h:f,s:0===d?0:g/d,v:d}}function B(a,c,b,d){a=[q(g(a).toString(16)),q(g(c).toString(16)),q(g(b).toString(16))];return d&&a[0].charAt(0)==a[0].charAt(1)&&a[1].charAt(0)==a[1].charAt(1)&&a[2].charAt(0)==a[2].charAt(1)?a[0].charAt(0)+a[1].charAt(0)+a[2].charAt(0):a.join("")}function C(a,c,b,d){return[q(Math.round(255*
parseFloat(d)).toString(16)),q(g(a).toString(16)),q(g(c).toString(16)),q(g(b).toString(16))].join("")}function H(a,c){c=0===c?0:c||10;var b=e(a).toHsl();b.s-=c/100;b.s=m(1,p(0,b.s));return e(b)}function I(a,c){c=0===c?0:c||10;var b=e(a).toHsl();b.s+=c/100;b.s=m(1,p(0,b.s));return e(b)}function J(a){return e(a).desaturate(100)}function K(a,c){c=0===c?0:c||10;var b=e(a).toHsl();b.l+=c/100;b.l=m(1,p(0,b.l));return e(b)}function L(a,c){c=0===c?0:c||10;var b=e(a).toRgb();b.r=p(0,m(255,b.r-g(255*-(c/100))));
b.g=p(0,m(255,b.g-g(255*-(c/100))));b.b=p(0,m(255,b.b-g(255*-(c/100))));return e(b)}function M(a,c){c=0===c?0:c||10;var b=e(a).toHsl();b.l-=c/100;b.l=m(1,p(0,b.l));return e(b)}function N(a,c){var b=e(a).toHsl(),d=(g(b.h)+c)%360;b.h=0>d?360+d:d;return e(b)}function O(a){a=e(a).toHsl();a.h=(a.h+180)%360;return e(a)}function P(a){var c=e(a).toHsl(),b=c.h;return[e(a),e({h:(b+120)%360,s:c.s,l:c.l}),e({h:(b+240)%360,s:c.s,l:c.l})]}function Q(a){var c=e(a).toHsl(),b=c.h;return[e(a),e({h:(b+90)%360,s:c.s,
l:c.l}),e({h:(b+180)%360,s:c.s,l:c.l}),e({h:(b+270)%360,s:c.s,l:c.l})]}function R(a){var c=e(a).toHsl(),b=c.h;return[e(a),e({h:(b+72)%360,s:c.s,l:c.l}),e({h:(b+216)%360,s:c.s,l:c.l})]}function S(a,c,b){c=c||6;b=b||30;var d=e(a).toHsl();b=360/b;a=[e(a)];for(d.h=(d.h-(b*c>>1)+720)%360;--c;)d.h=(d.h+b)%360,a.push(e(d));return a}function T(a,c){c=c||6;for(var b=e(a).toHsv(),d=b.h,g=b.s,b=b.v,f=[],h=1/c;c--;)f.push(e({h:d,s:g,v:b})),b=(b+h)%1;return f}function y(a){a=parseFloat(a);if(isNaN(a)||0>a||1<
a)a=1;return a}function k(a,c){var b=a;"string"==typeof b&&-1!=b.indexOf(".")&&1===parseFloat(b)&&(a="100%");b="string"===typeof a&&-1!=a.indexOf("%");a=m(c,p(0,parseFloat(a)));b&&(a=parseInt(a*c,10)/100);return 1E-6>t.abs(a-c)?1:a%c/parseFloat(c)}function q(a){return 1==a.length?"0"+a:""+a}function u(a){1>=a&&(a=100*a+"%");return a}var D=/^[\s,#]+/,E=/\s+$/,G=0,t=Math,g=t.round,m=t.min,p=t.max,x=t.random;e.prototype={isDark:function(){return 128>this.getBrightness()},isLight:function(){return!this.isDark()},
isValid:function(){return this._ok},getOriginalInput:function(){return this._originalInput},getFormat:function(){return this._format},getAlpha:function(){return this._a},getBrightness:function(){var a=this.toRgb();return(299*a.r+587*a.g+114*a.b)/1E3},getLuminance:function(){var a=this.toRgb(),c,b;c=a.r/255;b=a.g/255;a=a.b/255;return.2126*(.03928>=c?c/12.92:Math.pow((c+.055)/1.055,2.4))+.7152*(.03928>=b?b/12.92:Math.pow((b+.055)/1.055,2.4))+.0722*(.03928>=a?a/12.92:Math.pow((a+.055)/1.055,2.4))},setAlpha:function(a){this._a=
y(a);this._roundA=g(100*this._a)/100;return this},toHsv:function(){var a=A(this._r,this._g,this._b);return{h:360*a.h,s:a.s,v:a.v,a:this._a}},toHsvString:function(){var a=A(this._r,this._g,this._b),c=g(360*a.h),b=g(100*a.s),a=g(100*a.v);return 1==this._a?"hsv("+c+", "+b+"%, "+a+"%)":"hsva("+c+", "+b+"%, "+a+"%, "+this._roundA+")"},toHsl:function(){var a=z(this._r,this._g,this._b);return{h:360*a.h,s:a.s,l:a.l,a:this._a}},toHslString:function(){var a=z(this._r,this._g,this._b),c=g(360*a.h),b=g(100*a.s),
a=g(100*a.l);return 1==this._a?"hsl("+c+", "+b+"%, "+a+"%)":"hsla("+c+", "+b+"%, "+a+"%, "+this._roundA+")"},toHex:function(a){return B(this._r,this._g,this._b,a)},toHexString:function(a){return"#"+this.toHex(a)},toHex8:function(){return C(this._r,this._g,this._b,this._a)},toHex8String:function(){return"#"+this.toHex8()},toRgb:function(){return{r:g(this._r),g:g(this._g),b:g(this._b),a:this._a}},toRgbString:function(){return 1==this._a?"rgb("+g(this._r)+", "+g(this._g)+", "+g(this._b)+")":"rgba("+
g(this._r)+", "+g(this._g)+", "+g(this._b)+", "+this._roundA+")"},toPercentageRgb:function(){return{r:g(100*k(this._r,255))+"%",g:g(100*k(this._g,255))+"%",b:g(100*k(this._b,255))+"%",a:this._a}},toPercentageRgbString:function(){return 1==this._a?"rgb("+g(100*k(this._r,255))+"%, "+g(100*k(this._g,255))+"%, "+g(100*k(this._b,255))+"%)":"rgba("+g(100*k(this._r,255))+"%, "+g(100*k(this._g,255))+"%, "+g(100*k(this._b,255))+"%, "+this._roundA+")"},toName:function(){return 0===this._a?"transparent":1>this._a?
!1:U[B(this._r,this._g,this._b,!0)]||!1},toFilter:function(a){var c="#"+C(this._r,this._g,this._b,this._a),b=c,d=this._gradientType?"GradientType = 1, ":"";a&&(b=e(a).toHex8String());return"progid:DXImageTransform.Microsoft.gradient("+d+"startColorstr="+c+",endColorstr="+b+")"},toString:function(a){var c=!!a;a=a||this._format;var b=!1,d=1>this._a&&0<=this._a;if(!c&&d&&("hex"===a||"hex6"===a||"hex3"===a||"name"===a))return"name"===a&&0===this._a?this.toName():this.toRgbString();"rgb"===a&&(b=this.toRgbString());
"prgb"===a&&(b=this.toPercentageRgbString());if("hex"===a||"hex6"===a)b=this.toHexString();"hex3"===a&&(b=this.toHexString(!0));"hex8"===a&&(b=this.toHex8String());"name"===a&&(b=this.toName());"hsl"===a&&(b=this.toHslString());"hsv"===a&&(b=this.toHsvString());return b||this.toHexString()},_applyModification:function(a,c){var b=a.apply(null,[this].concat([].slice.call(c)));this._r=b._r;this._g=b._g;this._b=b._b;this.setAlpha(b._a);return this},lighten:function(){return this._applyModification(K,
arguments)},brighten:function(){return this._applyModification(L,arguments)},darken:function(){return this._applyModification(M,arguments)},desaturate:function(){return this._applyModification(H,arguments)},saturate:function(){return this._applyModification(I,arguments)},greyscale:function(){return this._applyModification(J,arguments)},spin:function(){return this._applyModification(N,arguments)},_applyCombination:function(a,c){return a.apply(null,[this].concat([].slice.call(c)))},analogous:function(){return this._applyCombination(S,
arguments)},complement:function(){return this._applyCombination(O,arguments)},monochromatic:function(){return this._applyCombination(T,arguments)},splitcomplement:function(){return this._applyCombination(R,arguments)},triad:function(){return this._applyCombination(P,arguments)},tetrad:function(){return this._applyCombination(Q,arguments)}};e.fromRatio=function(a,c){if("object"==typeof a){var b={},d;for(d in a)a.hasOwnProperty(d)&&(b[d]="a"===d?a[d]:u(a[d]));a=b}return e(a,c)};e.equals=function(a,
c){return a&&c?e(a).toRgbString()==e(c).toRgbString():!1};e.random=function(){return e.fromRatio({r:x(),g:x(),b:x()})};e.mix=function(a,c,b){b=0===b?0:b||50;a=e(a).toRgb();c=e(c).toRgb();b/=100;var d=2*b-1,g=c.a-a.a,d=((-1==d*g?d:(d+g)/(1+d*g))+1)/2,g=1-d;return e({r:c.r*d+a.r*g,g:c.g*d+a.g*g,b:c.b*d+a.b*g,a:c.a*b+a.a*(1-b)})};e.readability=function(a,c){var b=e(a),d=e(c);return(Math.max(b.getLuminance(),d.getLuminance())+.05)/(Math.min(b.getLuminance(),d.getLuminance())+.05)};e.isReadable=function(a,
c,b){a=e.readability(a,c);c=!1;var d;d=b||{level:"AA",size:"small"};b=(d.level||"AA").toUpperCase();d=(d.size||"small").toLowerCase();"AA"!==b&&"AAA"!==b&&(b="AA");"small"!==d&&"large"!==d&&(d="small");switch(b+d){case "AAsmall":case "AAAlarge":c=4.5<=a;break;case "AAlarge":c=3<=a;break;case "AAAsmall":c=7<=a}return c};e.mostReadable=function(a,c,b){var d=null,g=0,f,h,k,n;b=b||{};h=b.includeFallbackColors;k=b.level;n=b.size;for(var m=0;m<c.length;m++)f=e.readability(a,c[m]),f>g&&(g=f,d=e(c[m]));if(e.isReadable(a,
d,{level:k,size:n})||!h)return d;b.includeFallbackColors=!1;return e.mostReadable(a,["#fff","#000"],b)};var w=e.names={aliceblue:"f0f8ff",antiquewhite:"faebd7",aqua:"0ff",aquamarine:"7fffd4",azure:"f0ffff",beige:"f5f5dc",bisque:"ffe4c4",black:"000",blanchedalmond:"ffebcd",blue:"00f",blueviolet:"8a2be2",brown:"a52a2a",burlywood:"deb887",burntsienna:"ea7e5d",cadetblue:"5f9ea0",chartreuse:"7fff00",chocolate:"d2691e",coral:"ff7f50",cornflowerblue:"6495ed",cornsilk:"fff8dc",crimson:"dc143c",cyan:"0ff",
darkblue:"00008b",darkcyan:"008b8b",darkgoldenrod:"b8860b",darkgray:"a9a9a9",darkgreen:"006400",darkgrey:"a9a9a9",darkkhaki:"bdb76b",darkmagenta:"8b008b",darkolivegreen:"556b2f",darkorange:"ff8c00",darkorchid:"9932cc",darkred:"8b0000",darksalmon:"e9967a",darkseagreen:"8fbc8f",darkslateblue:"483d8b",darkslategray:"2f4f4f",darkslategrey:"2f4f4f",darkturquoise:"00ced1",darkviolet:"9400d3",deeppink:"ff1493",deepskyblue:"00bfff",dimgray:"696969",dimgrey:"696969",dodgerblue:"1e90ff",firebrick:"b22222",
floralwhite:"fffaf0",forestgreen:"228b22",fuchsia:"f0f",gainsboro:"dcdcdc",ghostwhite:"f8f8ff",gold:"ffd700",goldenrod:"daa520",gray:"808080",green:"008000",greenyellow:"adff2f",grey:"808080",honeydew:"f0fff0",hotpink:"ff69b4",indianred:"cd5c5c",indigo:"4b0082",ivory:"fffff0",khaki:"f0e68c",lavender:"e6e6fa",lavenderblush:"fff0f5",lawngreen:"7cfc00",lemonchiffon:"fffacd",lightblue:"add8e6",lightcoral:"f08080",lightcyan:"e0ffff",lightgoldenrodyellow:"fafad2",lightgray:"d3d3d3",lightgreen:"90ee90",
lightgrey:"d3d3d3",lightpink:"ffb6c1",lightsalmon:"ffa07a",lightseagreen:"20b2aa",lightskyblue:"87cefa",lightslategray:"789",lightslategrey:"789",lightsteelblue:"b0c4de",lightyellow:"ffffe0",lime:"0f0",limegreen:"32cd32",linen:"faf0e6",magenta:"f0f",maroon:"800000",mediumaquamarine:"66cdaa",mediumblue:"0000cd",mediumorchid:"ba55d3",mediumpurple:"9370db",mediumseagreen:"3cb371",mediumslateblue:"7b68ee",mediumspringgreen:"00fa9a",mediumturquoise:"48d1cc",mediumvioletred:"c71585",midnightblue:"191970",
mintcream:"f5fffa",mistyrose:"ffe4e1",moccasin:"ffe4b5",navajowhite:"ffdead",navy:"000080",oldlace:"fdf5e6",olive:"808000",olivedrab:"6b8e23",orange:"ffa500",orangered:"ff4500",orchid:"da70d6",palegoldenrod:"eee8aa",palegreen:"98fb98",paleturquoise:"afeeee",palevioletred:"db7093",papayawhip:"ffefd5",peachpuff:"ffdab9",peru:"cd853f",pink:"ffc0cb",plum:"dda0dd",powderblue:"b0e0e6",purple:"800080",rebeccapurple:"663399",red:"f00",rosybrown:"bc8f8f",royalblue:"4169e1",saddlebrown:"8b4513",salmon:"fa8072",
sandybrown:"f4a460",seagreen:"2e8b57",seashell:"fff5ee",sienna:"a0522d",silver:"c0c0c0",skyblue:"87ceeb",slateblue:"6a5acd",slategray:"708090",slategrey:"708090",snow:"fffafa",springgreen:"00ff7f",steelblue:"4682b4",tan:"d2b48c",teal:"008080",thistle:"d8bfd8",tomato:"ff6347",turquoise:"40e0d0",violet:"ee82ee",wheat:"f5deb3",white:"fff",whitesmoke:"f5f5f5",yellow:"ff0",yellowgreen:"9acd32"},U=e.hexNames=function(a){var c={},b;for(b in a)a.hasOwnProperty(b)&&(c[a[b]]=b);return c}(w),r={rgb:/rgb[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,
rgba:/rgba[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,hsl:/hsl[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,hsla:/hsla[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,
hsv:/hsv[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,hsva:/hsva[\s|\(]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))[,|\s]+((?:[-\+]?\d*\.\d+%?)|(?:[-\+]?\d+%?))\s*\)?/,hex3:/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,hex6:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,hex8:/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/};
"undefined"!==typeof module&&module.exports?module.exports=e:"function"===typeof define&&define.amd?define(function(){return e}):window.tinycolor=e})();
//<script src="contrast-ratio.js">
// contrast-ratio.min.js
function $(a,b){return"string"===typeof a?(b||document).querySelector(a):a}function $$(a,b){return Array.prototype.slice.call((b||document).querySelectorAll(a))}$$("[id]").forEach(function(a){window[a.id]=a});
var messages={semitransparent:"The background is semi-transparent so the contrast ratio cannot be precise. It depends on what colour is underneath",fail:"Fails WCAG 2.0","aa-large":"Passes WCAG 2 level AA for large text (above 24px or in bold above 19px)",aa:"Passes WCAG 2 level AA for any size text and AAA for large text (above 24px or in bold above 19px)",aaa:"Passes WCAG 2 level AAA for any size text"},output=$("output"),levels={fail:{range:[0,3],color:"#f00000"},"aa-large":{range:[3,
4.5],color:"#ff4001"},aa:{range:[4.5,7],color:"#0c8b14"},aaa:{range:[7,22],color:"#006900"}};function rangeIntersect(a,b,c,e){return(b<c?b:c)-(e<a?a:e)}function updateLuminance(a){a.title="Relative luminance: ";var b=a.color;a.title=1>a.color.alpha?a.title+(b.overlayOn(Color.BLACK).luminance+" - "+b.overlayOn(Color.WHITE).luminance):a.title+b.luminance}
function update(){if(foreground.color&&background.color){/*if(foreground.value!==foreground.defaultValue||background.value!==background.defaultValue)window.onhashchange=null,location.hash="#"+encodeURIComponent(foreground.value)+"-on-"+encodeURIComponent(background.value),setTimeout(function(){window.onhashchange=hashchange},10);*/var a=background.color.contrast(foreground.color);updateLuminance(background);updateLuminance(foreground);var b=a.min,c=a.max,e=c-b,f=[],g=[],d;for(d in levels){var h=levels[d].range,
k=h[0],h=h[1];b<h&&c>=k&&(f.push(d),g.push({level:d,percentage:100*rangeIntersect(b,c,h,k)/e}))}$("strong",output).textContent=a.ratio.toFixed(2);d=$(".error",output);a.error?(d.textContent="\u00b1"+a.error.toFixed(2),d.title=b+" - "+c):(d.textContent="",d.title="");if(1>=f.length){results.innerHTML=messages[f[0]],output.style.backgroundImage="",output.style.backgroundColor=levels[f[0]].color;results.classList.remove("OFF");exampleText.classList.remove("OFF");}else{
d=document.createDocumentFragment();
a=document.createElement("p");
a.textContent=messages.semitransparent;
d.appendChild(a);
//b=document.createElement("ul");
//for(a=0;a<f.length;a++)c=document.createElement("li"),c.textContent=messages[f[a]],b.appendChild(c);
//d.appendChild(b);
results.textContent="";
results.appendChild(d);b=[];for(a=c=0;a<2*g.length;a++)e=g[a%g.length],d=e.level,d=levels[d].color,e=c+e.percentage/2,b.push(d+" "+c+"%",d+" "+e+"%"),c=e;-1<PrefixFree.functions.indexOf("linear-gradient")?(g="linear-gradient(-45deg, "+b.join(", ")+")",output.style.backgroundImage=PrefixFree.prefix+g):(g="linear-gradient(135deg, "+
b.join(", ")+")",output.style.backgroundImage=g)}output.className="button output "+f.join(" ");bg_aa.style.backgroundColor=levels[f[0]].color;fg_aa.style.backgroundColor=levels[f[0]].color}}
function colorChanged(a){var b=a==foreground,c=b?foregroundDisplay:backgroundDisplay,e=getComputedStyle(c).backgroundColor;c.style.background=a.value;return(c=getComputedStyle(c).backgroundColor)&&a.value&&(c!==e||"transparent"===c||"rgba(0, 0, 0, 0)"===c)?(b&&(backgroundDisplay.style.color=a.value),a.color=new Color(c),!0):!1}
function hashchange(){/*if(location.hash){var a=location.hash.slice(1).split("-on-");foreground.value=decodeURIComponent(a[0]);background.value=decodeURIComponent(a[1])}else foreground.value=foreground.defaultValue,background.value=background.defaultValue;background.oninput();foreground.oninput()*/}
background.oninput=foreground.oninput=function(){colorChanged(this)&&update()};
function swapForegroundBackground(){updateExample();var a=background.value;document.getElementById("results").classList.add("OFF");background.value=foreground.value;foreground.value=a;a=fg_alpha;fg_alpha=bg_alpha;bg_alpha=a;colorChanged(background);colorChanged(foreground);setDisplayColor();update()}swap.onclick=swapForegroundBackground;window.encodeURIComponent=function(){var a=window.encodeURIComponent;return function(b){return a(b).replace(/[()]/g,function(a){return escape(a)})}}();
window.decodeURIComponent=function(){var a=window.decodeURIComponent;return function(b){return-1<b.search(/%[\da-f]/i)?a(b):b}}();
//(onhashchange=hashchange)();
function updateExample () {
if (foreground.color) {
exampleText.style.color = foreground.color;
}
if (background.color) {
exampleText.style.backgroundColor = background.color;
}
}
foreground.addEventListener("change", updateExample, false);
background.addEventListener("change", updateExample, false);
</script>
<script>
// Globals
var fg_alpha = 1,
bg_alpha = 1,
fg_format = null,
bg_format = null,
fg_original,
bg_original;
if (foreground && background) {
fg_alpha = hasAlpha(foreground.value) || 1;
bg_alpha = hasAlpha(background.value) || 1;
fg_format = tinycolor(foreground.value);
if (fg_format.isValid()) {
fg_format = fg_format.getFormat();
}
bg_format = tinycolor(background.value);
if (bg_format.isValid()) {
bg_format = bg_format.getFormat();
}
}
setDisplayColor();
// http://www.quirksmode.org/blog/archives/2015/03/better_modern_i.html
function supportsType(input) {
var desiredType = input.getAttribute('type');
var supported = false;
if (input.type === desiredType) {
supported = true;
}
input.value = 'Hello world';
var helloWorldAccepted = (input.value === 'Hello world');
switch (desiredType) {
case "email":
case "url":
if (!input.validationMessage) {
supported = false;
}
break;
case "color":
case "date":
case "datetime":
case "month":
case "number":
case "time":
case "week":
if (helloWorldAccepted) {
supported = false;
}
break;
}
input.value = '';
return supported;
}
if (!supportsType(inp_fg_selector)) {
inp_fg_selector.style.display = "none";
inp_bg_selector.style.display = "none";
}
function hasAlpha(color) {
// returns the alpha component or false
var match,
result = [],
number = /\b(\d+)\b/g,
tiny;
while (match = number.exec(color)) {
result.push(match[1]);
}
if (result.length > 3) {
tiny = tinycolor(color);
if (tiny.isValid) {
return tiny.getAlpha();
}
}
return false;
}
function convertColor(id, isBg) {
var tiny,
alpha = isBg ? bg_alpha : fg_alpha,
color,
ground = isBg ? background : foreground;
tiny = tinycolor(ground.value);
if (tiny.isValid) {
alpha = setGlobalAlpha(isBg);
switch (id) {
case "btn_hex" :
color = tiny.toHexString();
setFormat(color, isBg);
ground.value = color;
break;
case "btn_rgb" :
color = tiny.setAlpha(1).toRgbString();
setFormat(color, isBg);
ground.value = color;
break;
case "btn_rgba" :
color = tiny.setAlpha(alpha).toRgbString();
if (tinycolor(color).isValid) {
if (!color.match("rgba")) {
color = color.replace('rgb(', 'rgba(').replace(')', ', 1)'); // force full RGBa syntax
}
setFormat(color, isBg);
ground.value = color;
}
break;
}
}
}
function stepRGB(color, increment, isShift, isBg) {
color = tinycolor(color);
if (color.isValid) {
var alpha = isBg ? bg_alpha : fg_alpha,
number = /\b(\d+)\b/g,
match = 0,
result = [];
color = color.toRgbString();
while (match = number.exec(color)) {
result.push(match[1]);
}
i = 3; // ignore anything past the rgb components
while (i--) {
if (increment) {
if (isShift) {
if (result[i] < 245) {
result[i] = result[i] * 1 + 10;
} else {
result[i] = 255;
}
} else {
if (result[i] < 255) {
result[i]++;
}
}
} else {
if (isShift) {
if (result[i] > 9) {
result[i] = result[i] * 1 - 10;
} else {
result[i] = 0;
}
} else {
if (result[i] > 0) {
result[i]--;
}
}
}
}
color = "rgba(" + result[0] + ", " + result[1] + ", " + result[2] + ", " + alpha + ")";
color = tinycolor(color);
if (color.isValid()) {
color = tinycolor(color).toString(isBg ? bg_format : fg_format);
}
return color;
}
}
function getFirstReadableColor(id, isBg) {
var color2test, staticColor, bg, fg, isReadable, cup, cdown, i;
if (background && foreground) {
if (tinycolor(foreground.value).isValid && tinycolor(background.value).isValid) {
isReadable = tinycolor.isReadable(foreground.value, background.value);
if (isReadable) {
return tinycolor(isBg ? background.value : foreground.value).toRgbString();
} else {
bg = tinycolor(background.value).toRgbString();
fg = tinycolor(foreground.value).toRgbString();
// run step tests against the colours
color2test = isBg ? bg : fg;
staticColor = isBg ? fg : bg;
colorUp = tinycolor(color2test).toRgb();
colorDown = colorUp;
//console.log("initial value = ", colorUp);
for (i = 0; i < 256; i++) {
colorUp = {
r: (colorUp.r == 255) ? 255 : colorUp.r + 1,
g: (colorUp.g == 255) ? 255 : colorUp.g + 1,
b: (colorUp.b == 255) ? 255 : colorUp.b + 1,
a: colorUp.a
};
//console.log(i, "colorUp:", colorUp);
if (tinycolor.isReadable(colorUp, staticColor)) {
return tinycolor(colorUp).toRgbString();
}
// dec colorDown
colorDown = {
r: (colorDown.r == 0) ? 0 : colorDown.r - 1,
g: (colorDown.g == 0) ? 0 : colorDown.g - 1,
b: (colorDown.b == 0) ? 0 : colorDown.b - 1,
a: colorDown.a
};
//console.log(i, "colorDown:", colorDown);
if (tinycolor.isReadable(colorDown, staticColor)) {
return tinycolor(colorDown).toRgbString();
}
}
}
}
}
return false;
}
function setGlobalAlpha(isBg) {
// get alpha if it exists as the 4th value in an rgb format
if (isBg) {
if (tinycolor(background.value).getFormat() === "rgb") { // true for rgba too
bg_alpha = hasAlpha(background.value) || bg_alpha;
return bg_alpha;
}
} else {
if (tinycolor(foreground.value).getFormat() === "rgb") { // true for rgba too
fg_alpha = hasAlpha(foreground.value) || fg_alpha;
return fg_alpha;
}
}
}
function setFormat(color, isBg) {
if (isBg) {
bg_format = tinycolor(color).getFormat();
} else {
fg_format = tinycolor(color).getFormat();
}
}
function outputInCurrentFormat(color, isBg) {
return tinycolor(color).toString(isBg ? bg_format : fg_format);
}
(function () {
// Button actions: control colour settings and format
"use strict";
var buttons, i;
function adjustColour(e) {
var id = this.id,
isBg = false,
isShift = false,
alpha,
aa_color;
if (background && foreground) {
// Is the shift key pressed?
if (window.event) {
isShift = !!window.event.shiftKey; // typecast to boolean
} else {
isShift = !!e.shiftKey;
}
// Which button pressed?
switch (id) {
case "bg_aa" : background.value = outputInCurrentFormat(getFirstReadableColor(id, isBg = true), isBg) || background.value; break;
case "bg_minus" : background.value = stepRGB(tinycolor(background.value), false, isShift, isBg = true); break;
case "bg_plus" : background.value = stepRGB(tinycolor(background.value), true, isShift, isBg = true); break;
//case "bg_hex" :
//case "bg_rgb" :
//case "bg_rgba" : convertColor(id, isBg = true); break;
case "fg_aa" : foreground.value = outputInCurrentFormat(getFirstReadableColor(id, isBg), isBg) || foreground.value; break;
case "fg_minus" : foreground.value = stepRGB(tinycolor(foreground.value), false, isShift, isBg); break;
case "fg_plus" : foreground.value = stepRGB(tinycolor(foreground.value), true, isShift, isBg); break;
case "btn_hex" :
case "btn_rgb" :
case "btn_rgba" : convertColor(id, isBg); convertColor(id, isBg = true); break;
}
setGlobalAlpha(isBg);
swapForegroundBackground();
swapForegroundBackground();
updateExample();
}
}
if (inputArea) {
buttons = inputArea.getElementsByTagName("button");
i = buttons.length;
while (i--) {
buttons[i].addEventListener('click', adjustColour, false);
}
}
}());
// px size of content area
if (fontSizeSpan && backgroundDisplay) {
fontSizeSpan.innerHTML = getComputedStyle(backgroundDisplay).fontSize;
window.addEventListener('resize', function () {
fontSizeSpan.innerHTML = getComputedStyle(backgroundDisplay).fontSize;
}, false);
}
function setOriginalColors() {
var color = tinycolor(foreground.value);
if (color.isValid()) {
original.style.color = color;
}
color = tinycolor(background.value);
if (color.isValid()) {
original.style.backgroundColor = color;
}
swapForegroundBackground();
swapForegroundBackground();
updateExample();
update();
}
function resetOriginalColors() {
var color = tinycolor(fg_original);
if (color.isValid()) {
foreground.value = color;
}
color = tinycolor(bg_original);
if (color.isValid()) {
background.value = color;
}
swapForegroundBackground();
swapForegroundBackground();
updateExample();
update();
}
function setDisplayColor() {
var color = tinycolor(foreground.value);
if (color.isValid()) {
lbl_fg_selector.style.backgroundColor = color;
inp_fg_selector.value = tinycolor(color).toHexString();
backgroundDisplay.style.color = color;
if (color.isLight()) {
lbl_fg_selector.classList.add('dark');
} else {
lbl_fg_selector.classList.remove('dark');
}
fg_red.setAttribute("x", color.toRgb().r / 11 + 4);
fg_green.setAttribute("x", color.toRgb().g / 11 + 4);
fg_blue.setAttribute("x", color.toRgb().b / 11 + 4);
}
color = tinycolor(background.value);
if (color.isValid()) {
lbl_bg_selector.style.backgroundColor = color;
inp_bg_selector.value = tinycolor(color).toHexString();
backgroundDisplay.style.backgroundColor = color;
if (color.isLight()) {
lbl_bg_selector.classList.add('dark');
} else {
lbl_bg_selector.classList.remove('dark');
}
bg_red.setAttribute("x", color.toRgb().r / 11 + 4);
bg_green.setAttribute("x", color.toRgb().g / 11 + 4);
bg_blue.setAttribute("x", color.toRgb().b / 11 + 4);
}
}
// original color set /reset
if (original && set && reset && foreground && background) {
fg_original = foreground.value;
bg_original = background.value;
setOriginalColors();
set.addEventListener('click', setOriginalColors, false);
reset.addEventListener('click', resetOriginalColors, false);
}
// color selector
function setColorSelector(){
var id = this.id,
color = tinycolor(this.value);
if (color.isValid()){
switch (id) {
case "inp_fg_selector" : foreground.value = color.toString(fg_format); break;
case "inp_bg_selector" : background.value = color.toString(bg_format); break;
default : console.log(id)
}
swapForegroundBackground();
swapForegroundBackground();
updateExample();
update();
}
}
inp_fg_selector.addEventListener('change', setColorSelector, false);
inp_bg_selector.addEventListener('change', setColorSelector, false);
(function () {
// clear colours back to default black on white
"use strict";
function clearColors() {
foreground.value = "rgb(0, 0, 0)";
background.value = "rgb(255, 255, 255)";
fg_original = foreground.value;
original.style.color = fg_original;
bg_original = background.value;
original.style.backgroundColor = bg_original;
swapForegroundBackground();
swapForegroundBackground();
updateExample();
update();
}
clear.addEventListener('click', clearColors, false);
}());
function showButtons() {
var id = this.id,
color = tinycolor(this.value);
function enableColorButtons(){
btn_hex.removeAttribute("disabled");
btn_rgba.removeAttribute("disabled");
btn_rgb.removeAttribute("disabled");
//example.style.color = foreground.value;
//example.style.backgroundColor = background.value;
}
if (color.isValid()){
switch (id) {
case "foreground" :
fg_aa.removeAttribute("disabled");
fg_minus.removeAttribute("disabled");
fg_plus.removeAttribute("disabled");
inp_fg_selector.removeAttribute("disabled");
lbl_fg_selector.classList.remove("disabled");
enableColorButtons();
break;
case "background" :
bg_aa.removeAttribute("disabled");
bg_minus.removeAttribute("disabled");
bg_plus.removeAttribute("disabled");
inp_bg_selector.removeAttribute("disabled");
lbl_bg_selector.classList.remove("disabled");
enableColorButtons();
break;
default : console.log(id)
}
swapForegroundBackground();
swapForegroundBackground();
updateExample();
update();
}
}
foreground.addEventListener('change',showButtons,false);
background.addEventListener('change',showButtons,false);
</script>
</body>
</html>