Search

HTML CSS Colour Tester Tool

Use our HTML CSS Colour Tester tool to test & experiment with your CSS text colors, background colors, border colors, and background images and see instant results as you type.

 

HTML CSS Colour Tester

HTML CSS Colour Tester

The HTML CSS Colour Tester to is a simple page allows you to experiment with CSS text colors, background colors, border colors, and background images and see results as you type.

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 below in any format and see instant results as you type.

Text Color

Background Color

Border Color

Background Image URL with http://

Image Position

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
  • aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  • consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore

sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. MadSubmitter.com


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie

consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Support our Webmaster Tools

Our webmaster tools are completely free to use however, they require time & money to maintain.
Each query uses our server's resource so feel free to donate towards our free services.
You can donate in two ways:

A- by donating any amount of money using Paypal or
B- by adding a small link or banner to your website.
Please support us by linking to our website

Please note: Donations will help our team to develop new tools & keep existing tools running efficiently.