HTML/CSS Color Test

HTML/CSS Color Test

This simple page allows you to experiment with CSS text colors, background colors, border colors, and background images and see results as you type. There are plenty of web pages around that are far more advanced than this, but sometimes all you need is a simple tool, specially if, like me, you are not very intuitive with colors.

Just about all browsers allow one to specify stylesheet (CSS) colors in 3 different formats:

• By name: such as red, yellow, cyan.
• By hex code: such as #ff0000, #ffff00, #00ffff.
• By rgb (red/green/blue) values: such as rgb(255,0,0), rgb(255,255,0), rgb(0,255,255).

The hex code and rgb values are really the same thing, expressed in hexadecimal (base 16) or decimal (base 10) numbers. Each value represents the intensity of the red, green, and blue colors. the values are expressed as a number between 0 and 255 (or 00 and ff in hexadecimal). That is 8 bits per color for a total of 24 bits for all 3. The browser computes the resulting color by combining these values. Here is a color table reference.

Incidentally, you can use a shorthand expression for the hex value, but only if all 3 values are twin pairs of digits. For example #ff0088 can be abbreviated to #f08 and #cc44aa is the same as #c4a, and so on. But there is no shorthand for #8700ff since one of the values is not a twin pair.

In addition to colors, you can also specify a background image using http or https URL's (e.g. http://www.example.com/image.gif) and view it in tiled or centered format.

Enter colors and/or image above in any format and see results as you type.