Colors in HTML with CSS

Control Colors with Cascading Style Sheets (CSS)

Colors can be set by name, but this relies on browsers supporting the same set of color names. And it requires you to know the specific names, which is no big deal if you only use a few bright colors but it is a hassle if you want subtle colors on your web pages.

It's just as easy and far safer to specify colors by hexadecimal (base 16) descriptions. #000000 and #000 are black, #FF0000 and #F00 are red, #FFFF00 and #FF0 are yellow, #FF00FF and #F0F are magenta, and so on.

Find the operating system color definitions

Let's build a table using the standard X graphical display system colors. Linux, OpenBSD and Solaris store the standard X11 color definitions in slightly different places, but we can find it easily enough. Look for a file named rgb.txt somewhere under /usr.

Linux% find /usr -name rgb.txt
/usr/share/X11/rgb.txt

FreeBSD% find /usr -name rgb.txt
/usr/lib/X11/rgb.txt

OpenBSD% find /usr -name rgb.txt
/usr/X11R6/share/X11/rgb.txt

Solaris% find /usr -name rgb.txt
/usr/X11/lib/X11/rgb.txt

Convert rgb.txt to an HTML table

Now we just need a simple awk program to turn that data into HTML:

#!/usr/bin/awk -f

BEGIN {	printf("<table border=\"1\" style=\"font-family: Courier, monospace;\">\n");
	printf("<tr><td style=\"text-align: center;\">Name</td>");
	printf("<td style=\"text-align: center;\">R G B</td>");
	printf("<td style=\"text-align: center;\">Color</td>\n");
}

/* Only non-grey colors */
$1 != $2 || $2 != $3 {
	printf("<tr><td>");
	for (i = 4; i <= NF; i++) {
		printf("%s ", $i);
	}
	printf("<td>%02x %02x %02x</td>", $1, $2, $3);
	printf("<td style=\"background: #%02x%02x%02x;\"> </td>", $1, $2, $3);
	printf("</tr>\n");
}

END {	printf("</table>\n"); }

HTML Colors

Here is the result of running that awk script on the local rbg.txt file: