→ and → to change slides. 2 for comments.

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

Course Outline

  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography

Part 6: Colors

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

Next ➹