colorsafe.co
Open in
urlscan Pro
192.30.252.153
Public Scan
URL:
http://colorsafe.co/
Submission: On March 17 via api from US — Scanned from DE
Submission: On March 17 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form accept-charset="utf-8" class="mtm-ns cf ng-pristine ng-valid">
<section class="phm pvm-ns text-white mw-950 center cf">
<div class="prl-ns tal span_3_of_12 fl">
<label for="backgroundColor" class="mvs db">Background Color</label>
<input colorpicker="" colorpicker-position="top" id="backgroundColor" class="pas f4 wi-full inputColor input ease ng-pristine ng-untouched ng-valid ng-not-empty" type="text" name="textfield" placeholder="Type hex or rgb value"
ng-model="backgroundColor.hex">
</div>
<div class="prl-ns tal span_3_of_12 fl">
<label for="fontFamily" class="mvs db">Font-Family</label>
<div class="pos-rel">
<select name="fontFamily" id="fontFamily" class="pvs phm f4 wi-full inputColor select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="fontFamily" ng-options="font.alias for font in allFontFamilies">
<option label="Arial" value="object:3">Arial</option>
<option label="Arial Black" value="object:4">Arial Black</option>
<option label="Arial Narrow" value="object:5">Arial Narrow</option>
<option label="Arial Rounded MT Bold" value="object:6">Arial Rounded MT Bold</option>
<option label="Avant Garde" value="object:7">Avant Garde</option>
<option label="Calibri" value="object:8">Calibri</option>
<option label="Candara" value="object:9">Candara</option>
<option label="Century Gothic" value="object:10">Century Gothic</option>
<option label="Franklin Gothic Medium" value="object:11">Franklin Gothic Medium</option>
<option label="Futura" value="object:12">Futura</option>
<option label="Geneva" value="object:13">Geneva</option>
<option label="Gill Sans" value="object:14">Gill Sans</option>
<option label="Helvetica" value="object:15" selected="selected">Helvetica</option>
<option label="Impact" value="object:16">Impact</option>
<option label="Lucida Grande" value="object:17">Lucida Grande</option>
<option label="Optima" value="object:18">Optima</option>
<option label="Segoe UI" value="object:19">Segoe UI</option>
<option label="Tahoma" value="object:20">Tahoma</option>
<option label="Trebuchet MS" value="object:21">Trebuchet MS</option>
<option label="Verdana" value="object:22">Verdana</option>
<option label="Baskerville" value="object:23">Baskerville</option>
<option label="Big Caslon" value="object:24">Big Caslon</option>
<option label="Bodoni MT" value="object:25">Bodoni MT</option>
<option label="Book Antiqua" value="object:26">Book Antiqua</option>
<option label="Calisto MT" value="object:27">Calisto MT</option>
<option label="Cambria" value="object:28">Cambria</option>
<option label="Didot" value="object:29">Didot</option>
<option label="Garamond" value="object:30">Garamond</option>
<option label="Georgia" value="object:31">Georgia</option>
<option label="Goudy Old Style" value="object:32">Goudy Old Style</option>
<option label="Hoefler Text" value="object:33">Hoefler Text</option>
<option label="Lucida Bright" value="object:34">Lucida Bright</option>
<option label="Palatino" value="object:35">Palatino</option>
<option label="Perpetua" value="object:36">Perpetua</option>
<option label="Rockwell" value="object:37">Rockwell</option>
<option label="Rockwell Extra Bold" value="object:38">Rockwell Extra Bold</option>
<option label="TimesNewRoman" value="object:39">TimesNewRoman</option>
<option label="Andale Mono" value="object:40">Andale Mono</option>
<option label="Consolas" value="object:41">Consolas</option>
<option label="Courier New" value="object:42">Courier New</option>
<option label="Lucida Console" value="object:43">Lucida Console</option>
<option label="Lucida Sans Typewriter" value="object:44">Lucida Sans Typewriter</option>
<option label="Monaco" value="object:45">Monaco</option>
<option label="Copperplate" value="object:46">Copperplate</option>
<option label="Papyrus" value="object:47">Papyrus</option>
<option label="Brush Script MT" value="object:48">Brush Script MT</option>
</select>
</div>
</div>
<div class="prl wi-half-s span_2_of_12-ns fl">
<label for="fontSize" class="mvs db">Font-Size (px)</label>
<input id="fontSize" class="pas f4 wi-full inputColor input ease ng-pristine ng-untouched ng-valid ng-not-empty" type="text" name="textfield" ng-model="fontSize">
</div>
<div class="prl-ns wi-half-s span_2_of_12-ns fl">
<label for="fontWeight" class="mvs db">Font-Weight</label>
<div class="pos-rel">
<select name="fontWeight" id="fontWeight" class="pvs phm f4 wi-full inputColor select ease ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="fontWeight" ng-options="value for value in fontWeights">
<option label="100" value="number:100">100</option>
<option label="200" value="number:200">200</option>
<option label="300" value="number:300">300</option>
<option label="400" value="number:400" selected="selected">400</option>
<option label="500" value="number:500">500</option>
<option label="600" value="number:600">600</option>
<option label="700" value="number:700">700</option>
<option label="800" value="number:800">800</option>
<option label="900" value="number:900">900</option>
</select>
</div>
</div>
<div class="span_2_of_12 fl">
<label for="WCAGlevel" class="mvs db pos-rel" ng-mouseenter="toggleWCAGToolTip()" ng-mouseleave="toggleWCAGToolTip()">
<!-- ngIf: showWCAGToolTip --> WCAG Standard <a href="javascript:void(0)" ng-click="toggleWCAGToolTip()">
<span class="dn di-ns ss-info pos-abs right-0 text-white"></span>
<span class="assistive-text">Click for more info on WCAG levels</span>
</a>
</label>
<div class="pos-rel">
<select name="WCAGlevel" id="WCAGlevel" class="pvs phm f4 wi-full inputColor select ease ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="WCAGlevel" ng-options="grade for grade in accessibilityGrades">
<option label="AA" value="string:AA" selected="selected">AA</option>
<option label="AAA" value="string:AAA">AAA</option>
</select>
</div>
</div>
</section>
<!-- TODO: make less hacky -->
<div id="pinToolbar" ng-class="{ 'ht-pinToolbar': pinToolbar }"></div>
<section ng-class="{ 'pinToolbar z-above pos-abs wi-full': pinToolbar }">
<div class="phm ptm mw-toolbar center cf">
<section class="span_4_of_12 border-dark-s opacity-0-ns fl l-slideOutFadeInAni-ns ng-hide" ng-show="pinToolbar">
<div class="wi-20-s span_3_of_12-ns ht-75 pos-rel fl ease" ng-style="setTileBgColor(currentTextColor);" style="background-color: rgb(0, 0, 0);">
<span class="arrow-right-ns pos-arrow-right-ns ease" style="border-left: 10px solid #000;"></span>
</div>
<button type="button" id="copyHexValue" data-clipboard-text="#000" title="Click to copy hex color" class="phm tac wi-40-s span_5_of_12-ns ht-75 fl bg-light-gray ease" ng-click="showInstructions2(currentTextColor)"
ng-show="colorModel.label === 'hex'">
<span ng-class="{ 'animated-delay1 bounceIn': animateToolbar }" class="f4 lht-75 ff-lato fw-light ng-binding">#000</span>
</button>
<button type="button" id="copyRgbValue" data-clipboard-text="rgb(0,0,0)" title="Click to copy rgb color" class="phm tac wi-40-s span_5_of_12-ns ht-75 fl bg-light-gray ease ng-hide" ng-click="showInstructions2(currentTextColor)"
ng-show="colorModel.label === 'rgb'">
<span ng-class="{ 'animated-delay2 bounceIn': animateToolbar }" class="f4 lht-75 ff-lato fw-light ng-binding">rgb(0,0,0)</span>
</button>
<div class="phm wi-40-s span_4_of_12-ns ht-75 fl bg-light-gray ease pos-rel">
<select name="colorModel" id="colorModel" class="plm prl f4 caps lht-75 select-colorModel ease ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="colorModel" ng-options="model.label for model in colorModels">
<option label="hex" value="object:49" selected="selected">hex</option>
<option label="rgb" value="object:50">rgb</option>
</select>
</div>
</section>
<div id="userContentTextArea" class="dn-s tal mw-950 center phm-ns" ng-class="{ 'phm-ns': !pinToolbar, 'span_5_of_12 fl': pinToolbar }">
<!-- ngIf: !pinToolbar --><label for="userContent" class="mvs text-white db ng-scope" ng-if="!pinToolbar">Editable Text</label><!-- end ngIf: !pinToolbar -->
<input id="userContent" ng-style="setUserContentStyles(fontFamily.name, fontSize, fontWeight, backgroundColor.hex, currentTextColor.hex)" class="ht-75 tac wi-full bg-white ban ng-pristine ng-untouched ng-valid br-s ng-not-empty"
ng-class="{ 'br-s': !pinToolbar }" ng-model="userContent" style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);">
</div>
<!-- ngIf: pinToolbar -->
</div>
<section class="phm mw-toolbar center fadeInAni cf ng-hide" ng-show="pinToolbar">
<ul class="pan dn db-ns fl-ns list-plain list-horz">
<li class="mhxs caps tac fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-all-filter bg-all-filter li-item-js" data-filter="all">
<button type="button" title="Show all">
<p class="f5 caps tac fw-700 lhxs"><span class="assistive-text">Show </span>All</p>
</button>
</li>
<!-- ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-green-filter bg-green-filter li-item-js" data-filter=".category-green">
<button type="button" title="Filter by green">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>green</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-blue-filter bg-blue-filter li-item-js" data-filter=".category-blue">
<button type="button" title="Filter by blue">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>blue</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-purple-filter bg-purple-filter li-item-js" data-filter=".category-purple">
<button type="button" title="Filter by purple">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>purple</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-gray-filter bg-gray-filter li-item-js" data-filter=".category-gray">
<button type="button" title="Filter by gray">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>gray</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-yellow-filter bg-yellow-filter li-item-js" data-filter=".category-yellow">
<button type="button" title="Filter by yellow">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>yellow</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-orange-filter bg-orange-filter li-item-js" data-filter=".category-orange">
<button type="button" title="Filter by orange">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>orange</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
<li ng-repeat="color in appFactory.colorCategories" class="mhxs caps fw-light color-filter filter circle border-fade-circle-ns border-thick border-white br-red-filter bg-red-filter li-item-js" data-filter=".category-red">
<button type="button" title="Filter by red">
<p class="f5 caps tac fw-700 lhxs opacity-0 ng-binding"><span class="assistive-text">Filter by </span>red</p>
</button>
</li><!-- end ngRepeat: color in appFactory.colorCategories -->
</ul>
<div class="mtm mbm-s tac fr-ns">
<button type="button" class="phm mrm-sm mrm-ns f5-ns ff-montserrat text-white dib pos-rel btn-secondary bg-darker ease" ng-click="slideToElement('section1', 400)">
<span class="mrs text-green fa fa-refresh"></span> Start Over </button>
<button type="button" class="phm f5-ns ff-montserrat text-white dib btn-secondary bg-darker ease" ng-click="toggleInfoPanel();">Who Made This</button>
</div>
</section>
</section>
<button type="button" class="pvm phl mvl db caps f4 ff-montserrat fw-bold center btn-primary ease" ng-click="slideToElement('userContentTextArea', 900); getCurrentRatio(); getPassingColors(); showInstructions1($event); activatePalette();"
ng-show="!pinToolbar" tabindex="">Generate Color Palette</button>
</form>Text Content
COLOR SAFE Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios. Get Started SET UP CANVAS AND TEXT Enter a background color, and determine the styling of your text. Accessible text colors are generated with WCAG Guidelines recommend contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold. Background Color Font-Family ArialArial BlackArial NarrowArial Rounded MT BoldAvant GardeCalibriCandaraCentury GothicFranklin Gothic MediumFuturaGenevaGill SansHelveticaImpactLucida GrandeOptimaSegoe UITahomaTrebuchet MSVerdanaBaskervilleBig CaslonBodoni MTBook AntiquaCalisto MTCambriaDidotGaramondGeorgiaGoudy Old StyleHoefler TextLucida BrightPalatinoPerpetuaRockwellRockwell Extra BoldTimesNewRomanAndale MonoConsolasCourier NewLucida ConsoleLucida Sans TypewriterMonacoCopperplatePapyrusBrush Script MT Font-Size (px) Font-Weight 100200300400500600700800900 WCAG Standard Click for more info on WCAG levels AAAAA #000 rgb(0,0,0) hexrgb Editable Text * Show All * Filter by green * Filter by blue * Filter by purple * Filter by gray * Filter by yellow * Filter by orange * Filter by red Start Over Who Made This Generate Color Palette