-
Notifications
You must be signed in to change notification settings - Fork 132
/
index.html
79 lines (79 loc) · 36.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html><html data-reactid=".2f33nmgx88w" data-react-checksum="-91505148"><head data-reactid=".2f33nmgx88w.0"><meta charset="utf-8" data-reactid=".2f33nmgx88w.0.0"><title data-reactid=".2f33nmgx88w.0.1">Colorable</title><meta name="description" content="Color palette combination contrast tester" data-reactid=".2f33nmgx88w.0.2"><meta name="author" data-reactid=".2f33nmgx88w.0.3"><meta name="viewport" content="width=device-width, initial-scale=1" data-reactid=".2f33nmgx88w.0.4"><style data-reactid=".2f33nmgx88w.0.5">body{margin:0}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-family:inherit;font-size:1rem;box-sizing:border-box;margin-top:0;margin-bottom:0}label{vertical-align:middle}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}select{line-height:1.75;padding:.5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{line-height:1.75;padding:.5rem}fieldset{margin-left:0;margin-right:0;border:0}fieldset,legend{padding:0}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:500}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{line-height:1.5;font-size:100%}body,h1,h2,h3,h4,h5,h6{font-family:Helvetica Neue,Helvetica,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{font-size:1.125rem;margin-top:0;margin-bottom:1rem}code,pre,samp{font-family:Source Code Pro,Consolas,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:.875rem}h6{font-size:.75rem}body{color:#111;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:transparent;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.field{border:1px solid rgba(0,0,0,.125);border-radius:3px}.field.is-focused,.field:focus{outline:0;border-color:#0074d9;box-shadow:0 0 0 2px rgba(0,116,217,.5)}.field.is-disabled,.field:disabled{background-color:rgba(0,0,0,.125);opacity:.5}.field.is-read-only,.field:read-only:not(select){background-color:rgba(0,0,0,.125)}.field.is-success{border-color:#2ecc40}.field.is-success.is-focused,.field.is-success:focus{box-shadow:0 0 0 2px rgba(46,204,64,.5)}.field.is-warning{border-color:#ffdc00}.field.is-warning.is-focused,.field.is-warning:focus{box-shadow:0 0 0 2px rgba(255,220,0,.5)}.field.is-error,.field:invalid{border-color:#ff4136}.field.is-error.is-focused,.field.is-error:focus{box-shadow:0 0 0 2px rgba(255,65,54,.5)}.table-light td,.table-light th{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.btn{font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;display:inline-block;line-height:1.125rem;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none;color:inherit;background-color:transparent}.btn,.btn:hover{text-decoration:none}.btn:hover{border:1px solid rgba(0,0,0,.0625);box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.btn:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 0 3px rgba(0,0,0,.25)}.btn.is-active,.btn:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.btn.is-disabled,.btn:disabled{opacity:.5}.btn-primary{color:#fff;background-color:#0074d9;border-radius:3px}.btn-outline,.btn-outline:hover{border-color:currentcolor}.btn-outline{border-radius:3px}::-moz-focus-inner{border:0;padding:0}.h1{font-size:2rem}.h2{font-size:1.5rem}.h3{font-size:1.25rem}.h4{font-size:1.125rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.bold{font-weight:700;font-weight:500}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.border{border:1px solid rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black{color:#111}.gray{color:#aaa}.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.color-inherit{color:inherit}.muted{opacity:.5}.bg-black{background-color:#111}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}input[type=range]{vertical-align:middle;background-color:transparent;padding-top:.5rem;padding-bottom:.5rem}input[type=range]::-webkit-slider-thumb{position:relative;width:.5rem;height:1.25rem;cursor:pointer;margin-top:-.5rem}input[type=range]::-webkit-slider-thumb:before{content:'';display:block;position:absolute;top:-.5rem;left:-.875rem;width:2.25rem;height:2.25rem;opacity:0}input[type=range]::-moz-range-thumb{width:.5rem;height:1.25rem;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:.25rem;cursor:pointer}input[type=range]::-moz-range-track{height:.25rem;cursor:pointer}.range-light{color:inherit;background-color:transparent;-webkit-appearance:none}.range-light::-webkit-slider-thumb{-webkit-appearance:none;border-radius:3px;background-color:currentcolor}.range-light::-moz-range-thumb{border-radius:3px;border-color:transparent;border-width:0;background-color:currentcolor}.range-light::-webkit-slider-runnable-track{border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light::-moz-range-track{border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light:focus{outline:0}.range-light:focus::-webkit-slider-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.range-light:focus::-moz-range-thumb{outline:0;border:0;box-shadow:0 0 0 3px rgba(0,0,0,.25)}pre{padding:1rem;background-color:rgba(0,0,0,.0625)}.prose p:first-child{font-size:1.25rem}#carbonads{display:inline-block;font-size:14px;line-height:1.25;text-align:left}#carbonads a,#carbonads a:hover{text-decoration:none;color:inherit}#carbonads span{display:block}#carbonads>span:after,#carbonads>span:before{content:'';display:table}#carbonads>span:after{clear:both}.carbon-img{float:left;margin-right:.5em}.carbon-img>img{display:block}.carbon-text{overflow:hidden}.carbon-poweredby{float:left;margin-top:.25em;opacity:.5}@media (min-width:40em){#carbonads{max-width:20pc}}</style></head><body data-reactid=".2f33nmgx88w.1"><nav class="sm-flex border-bottom" data-reactid=".2f33nmgx88w.1.0"><a href="/colorable/" class="btn py2" data-reactid=".2f33nmgx88w.1.0.0">Colorable</a><a href="/colorable/demos" class="btn py2" data-reactid=".2f33nmgx88w.1.0.1">Demos</a><a href="/colorable/demos/text" class="btn py2 sm-show" data-reactid=".2f33nmgx88w.1.0.2">Text Demo</a><a href="/colorable/demos/matrix" class="btn py2 sm-show" data-reactid=".2f33nmgx88w.1.0.3">Matrix Demo</a><div class="flex-auto sm-show" data-reactid=".2f33nmgx88w.1.0.4"></div><a href="https://npmjs.com/package/colorable" class="btn py2" data-reactid=".2f33nmgx88w.1.0.5">npm</a><a href="https://github.com/jxnblk/colorable" class="btn py2" data-reactid=".2f33nmgx88w.1.0.6">GitHub</a></nav><main class="container px3" data-reactid=".2f33nmgx88w.1.1"><header class="py3" data-reactid=".2f33nmgx88w.1.1.0"><div class="sm-flex flex-center mxn2" data-reactid=".2f33nmgx88w.1.1.0.0"><div class="flex-auto px2 py3" data-reactid=".2f33nmgx88w.1.1.0.0.0"><h1 class="m0" data-reactid=".2f33nmgx88w.1.1.0.0.0.0">Colorable</h1><p class="h3 m0" data-reactid=".2f33nmgx88w.1.1.0.0.0.1">Color palette combination contrast tester</p></div><div class="px2 py3" data-reactid=".2f33nmgx88w.1.1.0.0.1"><script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&serve=CVYD42T&placement=jxnblkcom" id="_carbonads_js" data-reactid=".2f33nmgx88w.1.1.0.0.1.0"></script></div></div><div class="inline-block" data-reactid=".2f33nmgx88w.1.1.0.1"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Test color palettes for readable color combinations" data-via="jxnblk" data-size="large" data-reactid=".2f33nmgx88w.1.1.0.1.0">Tweet</a></div></header><div class="prose mb4" data-reactid=".2f33nmgx88w.1.1.1"><p>Take a set color palette and get contrast values for every possible combination –
useful for finding safe color combinations with predefined colors
and includes pass/fail scores for the
<a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast">WCAG accessibility guidelines</a>.</p>
<h2 id="getting-started">Getting Started</h2>
<pre><code class="lang-bash">npm i colorable
</code></pre>
<h2 id="usage">Usage</h2>
<p>Pass an array of color strings or an object with color strings as values. </p>
<pre><code class="lang-js">var colorable = require('colorable');
var colors = {
red: 'red',
green: 'green',
blue: 'blue'
};
var options = {
compact: true,
threshold: 0
};
var result = colorable(colors, options);
</code></pre>
<p>Returns an array of colors with combinations for all other colors and their
<a href="http://www.w3.org/TR/WCAG20/#visual-audio-contrast">WCAG contrast</a>
values.</p>
<pre><code class="lang-json">[
{
"hex": "#FF0000",
"name": "red",
"combinations": [
{
"hex": "#008000",
"name": "green",
"contrast": 1.28483997166146,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
},
{
"hex": "#0000FF",
"name": "blue",
"contrast": 2.148936170212766,
"accessibility": {
"aa": false,
"aaLarge": false,
"aaa": false,
"aaaLarge": false
}
}
]
},
...
]
</code></pre>
<h3 id="accessibility-object">Accessibility object</h3>
<p>Each key is a boolean value indicating if the color contrast meets the following criteria:</p>
<ul>
<li><code>aa</code> - greater than 4.5 (for normal sized text)</li>
<li><code>aaLarge</code> - greater than 3 (<a href="http://www.w3.org/TR/WCAG20/#larger-scaledef">for bold text or text larger than 24px</a>)</li>
<li><code>aaa</code> - greater than 7 </li>
<li><code>aaaLarge</code> - greater than 4.5 </li>
</ul>
<hr>
<h2 id="options">Options</h2>
<h3 id="-compact-"><code>compact</code></h3>
<p><em>Type: Boolean (default: <code>false</code>)</em></p>
<p>If set to <code>true</code>, the result will be a smaller object that only includes hex value color strings, a name for each color (if an object is passed to the function), contrast, and accessibility values.
When set to <code>false</code>, the result also includes the entire <a href="https://www.npmjs.com/package/color">harthur/color</a> object for each color, which includes other properties and methods for color manipulation.</p>
<h3 id="-threshold-"><code>threshold</code></h3>
<p><em>Type: Number (default: <code>0</code>)</em></p>
<p>When set, the colorable function only returns combinations that have a contrast above this value. This is useful for only seeing combinations that pass a minimum contrast level.</p>
<h3 id="-uniq-"><code>uniq</code></h3>
<p><em>Type: Boolean (default: true)</em></p>
<p>When set to <code>true</code>, the array of colors is passed through lodash.uniq to remove duplicates.</p>
<hr>
<p>MIT License</p>
</div></main><footer class="px2 py2 border-top" data-reactid=".2f33nmgx88w.1.2"><div class="container" data-reactid=".2f33nmgx88w.1.2.0"><div class="h5 flex flex-baseline flex-wrap mxn2" data-reactid=".2f33nmgx88w.1.2.0.0"><a href="http://jxnblk.com/colorable" class="btn" data-reactid=".2f33nmgx88w.1.2.0.0.0">colorable</a><span data-reactid=".2f33nmgx88w.1.2.0.0.1"><span data-reactid=".2f33nmgx88w.1.2.0.0.1.0">v</span><span data-reactid=".2f33nmgx88w.1.2.0.0.1.1">1.0.5</span></span><a href="https://npmjs.com/package/colorable" class="btn" data-reactid=".2f33nmgx88w.1.2.0.0.2">npm</a><a href="https://github.com/jxnblk/colorable" class="btn" data-reactid=".2f33nmgx88w.1.2.0.0.3">GitHub</a><div class="flex-auto" data-reactid=".2f33nmgx88w.1.2.0.0.4"></div><a href="http://jxnblk.com" class="btn" data-reactid=".2f33nmgx88w.1.2.0.0.5">Made by Jxnblk</a></div></div></footer><script id="initial-props" type="application/json" data-reactid=".2f33nmgx88w.1.3">{"path":"/colorable/","assets":{"main":"bundle.js"},"title":"Colorable","description":"Color palette combination contrast tester","version":"1.0.5","css":"body{margin:0}img{max-width:100%}svg{max-height:100%}fieldset,input,select,textarea{font-family:inherit;font-size:1rem;box-sizing:border-box;margin-top:0;margin-bottom:0}label{vertical-align:middle}input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week]{height:2.25rem;padding:.5rem;vertical-align:middle;-webkit-appearance:none}select{line-height:1.75;padding:.5rem}select:not([multiple]){height:2.25rem;vertical-align:middle}textarea{line-height:1.75;padding:.5rem}fieldset{margin-left:0;margin-right:0;border:0}fieldset,legend{padding:0}table{border-collapse:separate;border-spacing:0;max-width:100%;width:100%}th{text-align:left;font-weight:500}td,th{padding:.25rem 1rem;line-height:inherit}th{vertical-align:bottom}td{vertical-align:top}body{line-height:1.5;font-size:100%}body,h1,h2,h3,h4,h5,h6{font-family:Helvetica Neue,Helvetica,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.25;margin-top:1em;margin-bottom:.5em}dl,ol,p,ul{font-size:1.125rem;margin-top:0;margin-bottom:1rem}code,pre,samp{font-family:Source Code Pro,Consolas,monospace;font-size:inherit}pre{margin-top:0;margin-bottom:1rem;overflow-x:scroll}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:.875rem}h6{font-size:.75rem}body{color:#111;background-color:#fff}a{color:#0074d9;text-decoration:none}a:hover{text-decoration:underline}code,pre{background-color:transparent;border-radius:3px}hr{border:0;border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.field{border:1px solid rgba(0,0,0,.125);border-radius:3px}.field.is-focused,.field:focus{outline:0;border-color:#0074d9;box-shadow:0 0 0 2px rgba(0,116,217,.5)}.field.is-disabled,.field:disabled{background-color:rgba(0,0,0,.125);opacity:.5}.field.is-read-only,.field:read-only:not(select){background-color:rgba(0,0,0,.125)}.field.is-success{border-color:#2ecc40}.field.is-success.is-focused,.field.is-success:focus{box-shadow:0 0 0 2px rgba(46,204,64,.5)}.field.is-warning{border-color:#ffdc00}.field.is-warning.is-focused,.field.is-warning:focus{box-shadow:0 0 0 2px rgba(255,220,0,.5)}.field.is-error,.field:invalid{border-color:#ff4136}.field.is-error.is-focused,.field.is-error:focus{box-shadow:0 0 0 2px rgba(255,65,54,.5)}.table-light td,.table-light th{border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgba(0,0,0,.125)}.table-light tr:last-child td{border-bottom:0}.btn{font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;display:inline-block;line-height:1.125rem;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none;color:inherit;background-color:transparent}.btn,.btn:hover{text-decoration:none}.btn:hover{border:1px solid rgba(0,0,0,.0625);box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.btn:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 0 3px rgba(0,0,0,.25)}.btn.is-active,.btn:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.btn.is-disabled,.btn:disabled{opacity:.5}.btn-primary{color:#fff;background-color:#0074d9;border-radius:3px}.btn-outline,.btn-outline:hover{border-color:currentcolor}.btn-outline{border-radius:3px}::-moz-focus-inner{border:0;padding:0}.h1{font-size:2rem}.h2{font-size:1.5rem}.h3{font-size:1.25rem}.h4{font-size:1.125rem}.h5{font-size:.875rem}.h6{font-size:.75rem}.bold{font-weight:700;font-weight:500}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:\" \";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mxn1{margin-left:-.5rem;margin-right:-.5rem}.mxn2{margin-left:-1rem;margin-right:-1rem}.mxn3{margin-left:-2rem;margin-right:-2rem}.mxn4{margin-left:-4rem;margin-right:-4rem}.mx-auto{margin-left:auto;margin-right:auto}.p1{padding:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.lg-show,.md-show,.sm-show{display:none!important}@media (min-width:40em){.sm-show{display:block!important}}@media (min-width:52em){.md-show{display:block!important}}@media (min-width:64em){.lg-show{display:block!important}}@media (min-width:40em){.sm-hide{display:none!important}}@media (min-width:52em){.md-hide{display:none!important}}@media (min-width:64em){.lg-hide{display:none!important}}.display-none{display:none!important}.hide{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}.container{max-width:64em;margin-left:auto;margin-right:auto}.col{float:left}.col,.col-right{box-sizing:border-box}.col-right{float:right}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.flex-baseline{-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.flex-stretch{-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.flex-start{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.flex-end{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.flex-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.flex-auto{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.flex-grow{-webkit-box-flex:1;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto}.flex-none{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}@media (min-width:40em){.sm-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:52em){.md-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}@media (min-width:64em){.lg-flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}}.border{border:1px solid rgba(0,0,0,.125)}.border-top{border-top-style:solid;border-top-width:1px;border-top-color:rgba(0,0,0,.125)}.border-right{border-right-style:solid;border-right-width:1px;border-right-color:rgba(0,0,0,.125)}.border-bottom{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:rgba(0,0,0,.125)}.border-left{border-left-style:solid;border-left-width:1px;border-left-color:rgba(0,0,0,.125)}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.black{color:#111}.gray{color:#aaa}.silver{color:#ddd}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#85144b}.color-inherit{color:inherit}.muted{opacity:.5}.bg-black{background-color:#111}.bg-gray{background-color:#aaa}.bg-silver{background-color:#ddd}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#85144b}.bg-darken-1{background-color:rgba(0,0,0,.0625)}.bg-darken-2{background-color:rgba(0,0,0,.125)}.bg-darken-3{background-color:rgba(0,0,0,.25)}.bg-darken-4{background-color:rgba(0,0,0,.5)}input[type=range]{vertical-align:middle;background-color:transparent;padding-top:.5rem;padding-bottom:.5rem}input[type=range]::-webkit-slider-thumb{position:relative;width:.5rem;height:1.25rem;cursor:pointer;margin-top:-.5rem}input[type=range]::-webkit-slider-thumb:before{content:'';display:block;position:absolute;top:-.5rem;left:-.875rem;width:2.25rem;height:2.25rem;opacity:0}input[type=range]::-moz-range-thumb{width:.5rem;height:1.25rem;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:.25rem;cursor:pointer}input[type=range]::-moz-range-track{height:.25rem;cursor:pointer}.range-light{color:inherit;background-color:transparent;-webkit-appearance:none}.range-light::-webkit-slider-thumb{-webkit-appearance:none;border-radius:3px;background-color:currentcolor}.range-light::-moz-range-thumb{border-radius:3px;border-color:transparent;border-width:0;background-color:currentcolor}.range-light::-webkit-slider-runnable-track{border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light::-moz-range-track{border-radius:3px;background-color:rgba(0,0,0,.25)}.range-light:focus{outline:0}.range-light:focus::-webkit-slider-thumb{outline:0;border:0;box-shadow:0 0 1px 2px currentcolor}.range-light:focus::-moz-range-thumb{outline:0;border:0;box-shadow:0 0 0 3px rgba(0,0,0,.25)}pre{padding:1rem;background-color:rgba(0,0,0,.0625)}.prose p:first-child{font-size:1.25rem}#carbonads{display:inline-block;font-size:14px;line-height:1.25;text-align:left}#carbonads a,#carbonads a:hover{text-decoration:none;color:inherit}#carbonads span{display:block}#carbonads>span:after,#carbonads>span:before{content:'';display:table}#carbonads>span:after{clear:both}.carbon-img{float:left;margin-right:.5em}.carbon-img>img{display:block}.carbon-text{overflow:hidden}.carbon-poweredby{float:left;margin-top:.25em;opacity:.5}@media (min-width:40em){#carbonads{max-width:20pc}}","readme":"<p>Take a set color palette and get contrast values for every possible combination – \nuseful for finding safe color combinations with predefined colors\nand includes pass/fail scores for the\n<a href=\"http://www.w3.org/TR/WCAG20/#visual-audio-contrast\">WCAG accessibility guidelines</a>.</p>\n<h2 id=\"getting-started\">Getting Started</h2>\n<pre><code class=\"lang-bash\">npm i colorable\n</code></pre>\n<h2 id=\"usage\">Usage</h2>\n<p>Pass an array of color strings or an object with color strings as values. </p>\n<pre><code class=\"lang-js\">var colorable = require('colorable');\nvar colors = {\n red: 'red',\n green: 'green',\n blue: 'blue'\n};\nvar options = {\n compact: true,\n threshold: 0 \n};\nvar result = colorable(colors, options);\n</code></pre>\n<p>Returns an array of colors with combinations for all other colors and their\n<a href=\"http://www.w3.org/TR/WCAG20/#visual-audio-contrast\">WCAG contrast</a>\nvalues.</p>\n<pre><code class=\"lang-json\">[\n {\n "hex": "#FF0000",\n "name": "red",\n "combinations": [\n {\n "hex": "#008000",\n "name": "green",\n "contrast": 1.28483997166146,\n "accessibility": {\n "aa": false,\n "aaLarge": false,\n "aaa": false,\n "aaaLarge": false\n }\n },\n {\n "hex": "#0000FF",\n "name": "blue",\n "contrast": 2.148936170212766,\n "accessibility": {\n "aa": false,\n "aaLarge": false,\n "aaa": false,\n "aaaLarge": false\n }\n }\n ]\n },\n ...\n]\n</code></pre>\n<h3 id=\"accessibility-object\">Accessibility object</h3>\n<p>Each key is a boolean value indicating if the color contrast meets the following criteria:</p>\n<ul>\n<li><code>aa</code> - greater than 4.5 (for normal sized text)</li>\n<li><code>aaLarge</code> - greater than 3 (<a href=\"http://www.w3.org/TR/WCAG20/#larger-scaledef\">for bold text or text larger than 24px</a>)</li>\n<li><code>aaa</code> - greater than 7 </li>\n<li><code>aaaLarge</code> - greater than 4.5 </li>\n</ul>\n<hr>\n<h2 id=\"options\">Options</h2>\n<h3 id=\"-compact-\"><code>compact</code></h3>\n<p><em>Type: Boolean (default: <code>false</code>)</em></p>\n<p>If set to <code>true</code>, the result will be a smaller object that only includes hex value color strings, a name for each color (if an object is passed to the function), contrast, and accessibility values.\nWhen set to <code>false</code>, the result also includes the entire <a href=\"https://www.npmjs.com/package/color\">harthur/color</a> object for each color, which includes other properties and methods for color manipulation.</p>\n<h3 id=\"-threshold-\"><code>threshold</code></h3>\n<p><em>Type: Number (default: <code>0</code>)</em></p>\n<p>When set, the colorable function only returns combinations that have a contrast above this value. This is useful for only seeing combinations that pass a minimum contrast level.</p>\n<h3 id=\"-uniq-\"><code>uniq</code></h3>\n<p><em>Type: Boolean (default: true)</em></p>\n<p>When set to <code>true</code>, the array of colors is passed through lodash.uniq to remove duplicates.</p>\n<hr>\n<p>MIT License</p>\n","colors":["#7FDBFF","#0074D9","#01FF70","#001F3F","#39CCCC","#3D9970","#2ECC40","#FF4136","#85144B","#FF851B","#B10DC9","#FFDC00","#F012BE","#aaa","#fff","#111","#ddd"],"baseUrl":"/colorable/","routes":["/colorable/","/colorable/demos/","/colorable/demos/text/","/colorable/demos/matrix/"],"twitter":{"text":"Test color palettes for readable color combinations","script":"!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?\"http\":\"https\";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+\"://platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document, \"script\", \"twitter-wjs\");"}}</script><script src="/colorable/bundle.js" data-reactid=".2f33nmgx88w.1.4"></script></body></html>