Child pages
  • SSOColorChangeCSS
Skip to end of metadata
Go to start of metadata

Changing Colors in CSS

One thing to keep in mind is that colors can be described in various ways. While we recommend using hexidecimal values, it's good to understand the options out there and how to implement each when customizing your ISIS login page's file.

HTML 4 Keywords.

Keywords are the simplest means of specifying color in CSS, but aren't very specific. You can specify one of 16 keywords as a color value. Your rule would look like this:

color: blue;

It's important to spell words correctly (ie fuchsia) - if you don't the text should revert to the default color but may actually not display at all.

RGB values (Hexadecimal style)

If you've done some web design in the past, this should be very familiar. The standard way is to have a pound sign then values for red, green, and blue ranging from 0-F (#RRGGBB). The lower the symbol, the weaker that color is represented... #FFFFFF is pure white, #000000 is black, #333333 dark gray, #0000FF bright blue, #FF0000 bright red, etc. The UCLA blue is #536895. A shortcut method is to merely write out the values in the "sixteens" place and have them copy to the "ones" place (#RGB). This works well for solid or simpler colors, white is #FFF, black #000, light grey #CCC etc. If we represent UCLA blue in this format it would be #569, which the browser will treat as #556699 - not the exact shade we are used to seeing.

color: #536895;

Is similar to:

color: #569;


color: #FFCC99;

Is the same as:

color: #FC9;

If you have a hard time calculating this in your head, almost every popular graphics program has a color wheel (or something similar) where you can visually select which color you want. It should list the hexidecimal value of the color currently selected, which you can copy/paste into the stylesheet. You can use upper or lower case, I try to stick with upper case as it stands out better on a style sheet.

RGB Values (Functional style)

You can specify color using either 3 decimal figures (0-255) or percentages (0.0%-100.0%) like this:

color: rgb(255,128,0);

Is the same as:

color: rgb(100%,50%,0%);

This method isn't generally used by web designers, I would recommend sticking with #RGB or #RRGGBB based on your need for specificity.