CSS: from Knowledgable to Ninja

◈ Estelle Weyl

Course Outline

Part 6: Colors & Appearance

Color formats

  color: white;
  color: #fff;
  color: #FFFFFF;
  color: rgb(255,255,255);
  color: rgb(100%,100%,100%);
  color: rgba(255,255,255,1);
  color: rgba(100%,100%,100%, 1);
  color: hsl(0, 100%, 100%);
  color: hsla(0, 100%, 100%, 1);
  color: transparent;
  background-color: currentColor;

Color Keywords

aliceblue #F0F8FF
antiquewhite #FAEBD7
aqua/cyan#00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmond #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
burlywood #DEB887
cadetblue #5F9EA0
chartreuse #7FFF00
chocolate #D2691E
coral #FF7F50
cornflowerblue #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan/aqua#00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray/darkgrey#A9A9A9
darkgreen #006400
darkkhaki #BDB76B
darkmagenta #8B008B
darkolivegreen #556B2F
darkorange #FF8C00
darkorchid #9932CC
darkred #8B0000
darksalmon #E9967A
darkseagreen #8FBC8F
darkslateblue #483D8B
darkslategray/darkslategrey #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray/dimgrey #696969
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia/magenta#FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray/grey #808080
green #008000
greenyellow #ADFF2F
honeydew #F0FFF0
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush #FFF0F5
lawngreen #7CFC00
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
lightgoldenrodyellow #FAFAD2
lightgray/lightgrey#D3D3D3
lightgreen #90EE90
lightpink #FFB6C1
lightsalmon #FFA07A
lightseagreen #20B2AA
lightskyblue #87CEFA
lightslategray/lightslategrey #778899
lightsteelblue #B0C4DE
lightyellow #FFFFE0
lime #00FF00
limegreen #32CD32
linen #FAF0E6
maroon #800000
mediumaquamarine #66CDAA
mediumblue #0000CD
mediumorchid #BA55D3
mediumpurple #9370DB
mediumseagreen #3CB371
mediumslateblue #7B68EE
mediumspringgreen #00FA9A
mediumturquoise #48D1CC
mediumvioletred #C71585
midnightblue #191970
mintcream #F5FFFA
mistyrose #FFE4E1
moccasin #FFE4B5
navajowhite #FFDEAD
navy #000080
oldlace #FDF5E6
olive #808000
olivedrab #6B8E23
orange #FFA500
orangered #FF4500
orchid #DA70D6
palegoldenrod #EEE8AA
palegreen #98FB98
paleturquoise #AFEEEE
palevioletred #DB7093
papayawhip #FFEFD5
peachpuff #FFDAB9
peru #CD853F
pink #FFC0CB
plum #DDA0DD
powderblue #B0E0E6
purple #800080
red #FF0000
rosybrown #BC8F8F
royalblue #4169E1
saddlebrown #8B4513
salmon #FA8072
sandybrown #F4A460
seagreen #2E8B57
seashell #FFF5EE
sienna #A0522D
silver #C0C0C0
skyblue #87CEEB
slateblue #6A5ACD
slategray/slategrey #708090
snow #FFFAFA
springgreen #00FF7F
steelblue #4682B4
tan #D2B48C
teal #008080
thistle #D8BFD8
tomato #FF6347
turquoise #40E0D0
violet #EE82EE
wheat #F5DEB3
white #FFFFFF
whitesmoke #F5F5F5
yellow #FFFF00
yellowgreen #9ACD32

RGB / RGBA

#
Red 40
Green BF
Blue AC

rgb(
Red 64,
Green 191,
Blue 172
)

rgb(
Red 25%,
Green 75%,
Blue 67%
)

rgba(
Red 64,
Green 191,
Blue 172,
alpha 0.2
)

rgba(
Red 25%,
Green 75%,
Blue 67%,
alpha 0.2
)

HSL / HSLA

color:hsla(
   328, 	 H blah
   100%, 	 S 
   44%, 	 L 
   1.00 	 A 
);

HSLA Colors

HSLA / RGBA / HEX conversion

Github Repo
Color Picker home page

Opacity

Chrome 1
Safari 1.2
Firefox 0.9
Opera 9
IE 4* / IE 9

opacity: 1;

opacity: 0.75;

opacity: 0.5;

opacity: 0.25;

opacity: 0;

AlphaTransparency

color: rgba(0, 0, 0, 1);
background-color: rgba(58, 103, 171, 1);

color: rgba(0, 0, 0, 0.75);
background-color: rgba(58, 103, 171, 0.75);

color: rgba(0, 0, 0, 0.5;
background-color: rgba(58, 103, 171, 0.5);

color: rgba(0, 0, 0, 0.25);
background-color: rgba(58, 103, 171, 0.25);

color: rgba(0, 0, 0, 0)
background-color: rgba(58, 103, 171, 0);

Chrome 1
Safari 1.2
Firefox 0.9
Opera 9
IE 9

AlphaTransparency Tips

Used in RGBA & HSLA colors

rgba(58, 103, 171, 0.5);
hsla(216, 49%, 45%, 0.5);

Transparent Shadows

.trans { box-shadow: -10px 10px rgba(0,0,0,0.3);
         text-shadow: 0 21px 1px rgba(0,0,0,0.3);}

Solid Shadows

.solid { box-shadow: -10px 10px #999;
         text-shadow: 0 21px 1px #999;}

Color Tips

transparent == rgba(0, 0, 0, 0);
CurrentColor == current Text color
Accessibility: Color is NOT the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
appearance: Changes the appearance of buttons and other controls to resemble native controls.

Deprecated Color Names

ActiveBorder: Active window border.
ActiveCaption: Active window caption.
AppWorkspace: Background color of multiple document interface.
Background: Desktop background.
ButtonFace: The face background color for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonHighlight: The color of the border facing the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonShadow: The color of the border away from the light source for 3-D elements that appear 3-D due to one layer of surrounding border.
ButtonText: Text on push buttons.
CaptionText: Text in caption, size box, and scrollbar arrow box.
GrayText: Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color.
Highlight: Item(s) selected in a control.
HighlightText: Text of item(s) selected in a control.
InactiveBorder: Inactive window border.
InactiveCaption: Inactive window caption.
InactiveCaptionText: Color of text in an inactive caption.
InfoBackground: Background color for tooltip controls.
InfoText: Text color for tooltip controls.
Menu: Menu background.
MenuText: Text in menus.
Scrollbar: Scroll bar gray area.
ThreeDDarkShadow: The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDFace: The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDHighlight: The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDLightShadow: The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
ThreeDShadow: The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
Window: Window background.
WindowFrame: Window frame.
WindowText: Text in windows.

-moz-appearance:

none: No special styling is applied. (Default)
button: The element is drawn like a button.
checkbox: The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container: The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally a would contain a label and a checkbox.
checkbox-small: Obsolete since Gecko 1.9.1
dialog: The element is styled like a dialog box, which includes background color and other properties.
listbox
menuitem: The element is styled as menu item, item is highlighted when hovered.
menulist
menulist-button: The element is styled as a button that would indicate a menulist can be opened.
menulist-textfield: The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup
progressbar: The element is styled like a progress bar.
radio: The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container: The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally would contain a label and a radio button.
radio-small: Obsolete since Gecko 1.9.1
resizer
scrollbar
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbartrack-horizontal
scrollbartrack-vertical
separator
statusbar
tab
tab-left-edge: Obsolete
tabpanels
textfield
textfield-multiline
toolbar
toolbarbutton
toolbox
tooltip
treeheadercell
treeheadersortarrow
treeitem
treetwisty
treetwistyopen
treeview
window
mac-unified-toolbar: New in Firefox 3.5 Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
win-borderless-glass: New in Firefox 4.0Used for Windows Vista and later. This style applies the Aero Glass effect -- but without a border -- to the element.
win-browsertabbar-toolbox: New in Firefox 3Windows Vista and later. This toolbox style is meant to be used for the tab bar in a browser.
win-communications-toolbox: New in Firefox 3Windows Vista and later. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
win-glass: New in Firefox 3.5 Windows Vista and later. This style applies the Aero Glass effect to the element.
win-media-toolbox: New in Firefox 3Windows Vista and later. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.

-webkit-appearance:

button
button-bevel
caret
checkbox
default-button
listbox
listitem
media-fullscreen-button
media-mute-button
media-play-button
media-seek-back-button
media-seek-forward-button
media-slider
media-sliderthumb
menulist
menulist-button
menulist-text
menulist-textfield
none
push-button
radio
searchfield
searchfield-cancel-button
searchfield-decoration
searchfield-results-button
searchfield-results-decoration
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
square-button
textarea
textfield
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbarbutton-up
scrollbargripper-horizontal
scrollbargripper-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbartrack-horizontal
scrollbartrack-vertical

Part 7: Fonts, Shadows & Text Effects

Next ➹