Colors

  • Colors
    • Named colors
    • CurrentColor
    • hexadecimal, rgb(), and hsl()
  • AlphaTrasparency
  • Opacity
  • Developer Tools
  • Exercise

estelle.github.io/CSS/colors/

Color formats

  color: white;
  color: #fff;
  color: #FFFFFF;
  color: #FFFFFFFF;
  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;
  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
  • rebeccapurple #663399
  • 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

currentColor

RGB / RGBA

  •   #
  • Red 40
  • Green BF
  • Blue AC
  •   rgb(
  • Red 64,
  • Green 191,
  • Blue 172
  •   )
  •   rgb(
  • Red 25%,
  • Green 75%,
  • Blue 67%
  •   )
  •   #
  • Red 40
  • Green BF
  • Blue AC
  • alpha 33
  •   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

#rrggbbaa hex color notation

#RRGGBBAA

100% — FF
 95% — F2
 90% — E6
 85% — D9
 80% — CC
 75% — BF
 70% — B3
 65% — A6
 60% — 99
 55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
 5% — 0D
 0% — 00
CanIUse.com

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.

Opacity v. Alphatransparency

Opacity

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);

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;}

DevTools

Look at the color picker.

  • select different color
  • click on color icon while holding shift to change color format

Check color contrast

  • turn on accessibility tools to see color contrast ratio
  • select a color with enough contrast

Use color eye-dropper to select color

Check out CSS variables

  • Inspect the header at the top of this page

Exercise

Let's continue on with our card example just a bit.

  1. Make the diamond and hearts cards red.
  2. Make the spades and clubs black
  3. Make the letter/number in corners bigger.
  4. Make the text node (the heart, diamond, spade, club) bigger
HTML | CSS

Solution

HTML | CSS

Solution

Make the diamond and hearts cards red.

/* red cards */
[data-type="H" i],
[data-type="D" i] {
   color: red;
 }

Make the spades and clubs black

/* black cards */
[data-type="C" i],
[data-type="S" i] {
   color: black;
 }

Make the letter/number in corners bigger.

Make the text node (the heart, diamond, spade, club) bigger

.face {
  font-size: 2rem;
}

Math & Variables

Next ➹