Photoshop lies. The shop-perfect color you see in photoshop rarely make it to a web browser. Fonts blur and lighten, colors bleed. This is largely due to differences in the antialiasing routines and control over the color workspace. In any case, use this little javascript routine for some quick and dirty color and font tests.

First Block

And Then Something Happened

Na am, conse min hendrem iuscin vel ipis augait am, core digniamet nibh ent alisl dit wisi. Lor sequationse minim ad dolore facilluptat ilit lor ipsum quat esto doloreet iriure conullaor irilit acip eumsan velit lortismod modit am esectem dolortisci blaorper ipsuscin exerostie od mincinim zzriliquat praestisl irit vullum dolorem quat. Idunt praessit lore velit ad et ulla feugiatet nos augait, con ut landipit, vulla conse tem aut adit num init niat.



Second Block

And Then Something Happened

Na am, conse min hendrem iuscin vel ipis augait am, core digniamet nibh ent alisl dit wisi. Lor sequationse minim ad dolore facilluptat ilit lor ipsum quat esto doloreet iriure conullaor irilit acip eumsan velit lortismod modit am esectem dolortisci blaorper ipsuscin exerostie od mincinim zzriliquat praestisl irit vullum dolorem quat. Idunt praessit lore velit ad et ulla feugiatet nos augait, con ut landipit, vulla conse tem aut adit num init niat.

This page uses hex triplet codes. The color pickers of Photoshop, Flash, and many other applications produce the hex triplet of colors you pick-- look for a form field with six characters. All colors must be a six-color hex code, e.g. 000000 for black, ffffff for white. Do not use the # symbol.
For font sizes, use numerical values only. Font sizes are in pixels.

First Block

Headline
Color #
Font Size px
Font weight
Letter Spacing px
Line Height px
Font Face
Paragraph
Color #
Font Size px
Letter Spacing px
Line Height px
Font weight
Font Face
Block Background color #

Second Block

Headline
Color #
Font Size px
Font weight
Letter Spacing px
Line Height px
Font Face
Paragraph
Color #
Font Size px
Letter Spacing px
Line Height px
Font weight
Font Face
Block Background color #


Whole Page Background color #


Turn simulators off to change the text settings

What's this?
What's this?


Version 1.1.0 - added Mac/PC screen simulators, new fonts