HTML/CSS Color Sampler

With contrast ratio coefficients

Font: Size: % Line Height: x Contrast Class:
Text
BG
Text
SelTxt
MnuBG

Body
Title
Subtitle
Text
BG
Link
Visited
Hover
Active



Caption
Cap BG

h2 Body Title

h3 Body Subtitle

Caption text
Body text Unvisited Link quo minus id, quod maxime placeat Visited Link Sed ut perspiciatis, unde omnis Hover Link Color iste natus error sit voluptatem accusantium Active Link Color doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

SelBG

Sidebar

Title
Text
BG
SelText
Sel BG
FootTxt
Foot BG





"Tooltip" number when hovering over text and sample areas is the contrast ratio coefficient relative to minimum contrast defined in WCAG 2.0 (Web Content Accessible Guidelines) Success Criterion 1.4.3. Less than 1.0 means element contrast does not meet standard as required by the European Commision for web content. The mimimum level is adjusted for font size, style, and contrast level by the contrast class selected (AA or AAA). This feature is a beta release. If it does not seem to work as expected, email Glenn at JavaScript needs to be enabled. Mention which portion isn't working right, what you expected, and what you actually got. Your assistance is appreciated.

NOTES

While there are plenty of color scheme tools available, none seem to show the selected colors in a realistic, assignable page mock up. So I've thrown together what I consider a realistic page mock up. I'm not even going to try to replicate a color scheme tool, so you'll have to manually paste or type the desired hex color values into the various fields. One possible source of hex color values is from the color list tab of the Color Scheme tool linked above. I also provide some basic text styling controls so the text better represents your actual page. Alternately, you can experiment with these to establish the font, size, and spacing that's ideal for your site's basic text. Be careful with the font name input, no validation is done, so type carefully.

Any designer will tell you that, while these mathmatical schemes are a good starting point, you will always need to adjust the colors to work with your actual application. Fortunately, once your initial color scheme is setup here, it's easy to tweak your settings because this page uses the JSColor picker library. You will see that a small color picker pops up anytime you click on any of the color number fields. The reason we show all four link pseudo classes instead of allowing them to behave normally is that we can't assign colors to link pseudo classes on the fly like we do for the other text and backgrounds. Also, this way, you can see how the selected color looks without having to move and click your mouse.

Your latest color selections are automatically saved in a browser cookie. If you leave the page, it will re-open exactly as you left it, at least if you return within 90 days. After that, the cookie crumbles and you will get the default settings again. To save data somewhere besides the local cookie, output the data to the text box below and then copy/paste that data into an empty text file using a text editor such as Notepad. To reload that data, paste it back into the text box and click Load Color Data. You can also save your color data by simply saving the complete HTML page.

Reset (must reload page to complete. If that does not work, delete bcw_colrs cookie for the glennmessersmith.com site & then reload page again)
Output Color Data


Load Color Data

If you don't like the way this page is set up, you could save the complete HTML page, then edit the HTML to your heart's content. The reason for the color picker spectrum being shown below is to be sure it gets saved with the complete page. Otherwise, the color picker will work, but without the image displayed to orient you.

There is one minor glitch with the color picker, in that when you paste a color number into a color field, the change event doesn't immediately trigger, which causes the associated element's color to fail to update to the new color. To force an update, simply click on the color picker's value slider (right side of main picker box) triangle. The element will then be updated.

color spectrum
Creative Commons License
Color Sampler by Glenn Messersmith (excluding external javascript files for forms, cookies, & jscolor) is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Based on a work at glennmessersmith.com/colorsamp/ColorSampler.html. Copyright © 2013 Glenn Messersmith. External javascript files are subject to their own terms. Jscolor is GPL licensed