Now I would like to go over all the options of the Color
Picker. The Color Picker dialog is brought up whenever you click
on one of the color picker icons (
) next to either the
color or
background-color
textboxes.
The first thing you'll notice about this color picker is
that there's a big image at the top of it showing you a wide variety
of different colors. This is called a color spectrum. If
you move your mouse over this color spectrum the color of your selected
property (either color or
background-color)
will be updated instantly with the color that's currently underneath your
mouse cursor. Also, you should notice whenever your mouse is moved
over the color spectrum your mouse cursor should turn into a crosshair
(
).
OK, so now that we know how to try out different colors,
how do we decide on a color we want? Well, you do that by simply clicking
down once with the left mouse button. When you click down once, it
selects that color (the color under your mouse) as your color choice and
it stops auto-updating the text with the new color. If you would like to
choose a different color simply click the left mouse button down a second
time inside the color spectrum to have it update again.
If you look right below the color spectrum you'll see two
radio buttons, "Text Color" and "Background Color". These radio buttons
represent which property you are currently editing. You can also switch
back and forth between the two at any time.
Below the "Text Color" and "Background Color" radio buttons
is a checkbox labeled "Auto-Calculate Inverse". If this option is
checked (selected), the opposite property of the property you are
currently editing will be automatically calculated to be the inverse
of your current property's value. So, for example, if I check the
"Auto-Calculate Inverse" checkbox and I select "Blue" (#0000FF)
for my "Text Color", my "Background Color" will be automatically
calculated to be the inverse of "Blue" which is #FFFF00, and so on.
With this option, you can test out both "Text Color" and "Background Color"
combinations at the same time.
Below the "Auto-Calculate Inverse" checkbox you should see
6 textboxes labeled: H, S, V, R, G, and B. H stands for Hue, S stands for
Saturation, V stands for Value, R stands for Red, G stands for Green,
and B stands for Blue. These are all different ways (or methods) of
describing a color. RGB is one way
and HSV is another. You
can modify these properties individually to whatever values you want to
find just the right color for your text. Here's a tip. If you click
inside one of these textboxes and you press the Up or Down arrow keys
it will increase or decrease it's value by 1 respectively.
Below those 6 textboxes you will notice a dropdown list
which contains the 216 websafe colors. This is just there to give you
quick access to the 216 websafe colors in case you are the type of
person who only likes to include "web safe" colors in your pages.
Below that you will find another dropdown list of what
I call "Common Colors". These are just colors that people may already
be familar with (such as Red, Orange, Yellow, Green, Blue, etc.) and
they want quick access to.
Below that you will find another dropdown list entitled
"Named Colors". This is an absolutely humongous list of just about every single
named color I could possibly find (after hours of searching). In case you are not feeling very creative and you don't
want to try your hand with the color spectrum, the named color list
gives you quick access to over 1,000 named colors to choose from.
Note: The actual color names won't be
included in your generated CSS Code, it's their respective Hexadecimal
codes that will be included instead.
Finally, the last part of the Color Picker dialog is the
Hex textbox. This textbox shows you the current Hex value of the color
you've chosen. You can also edit this box manually if you like. You can
also press the Up and Down arrow keys inside this textbox to increase
or decrease the value of your color.
Once you've chosen a color you like simply press the "OK"
button to save your selection and close the dialog. If you'd like to
close the dialog without saving your selection (and revert back to your
old color selection), simply press the "Cancel" button.