CSS Color Values

Named Colors

RGB

Red, green, & blue values (0-255)

RGBA

RGB (0-255), alpha transparency (0-1)

Hexadecimal

Also red, green, blue values,
but ranges from 00–ff

3 / 6 digit: #000 = #000000

Hexadecimal+

Future CSS: alpha transparency
4 / 8 digit:#000a = #000000aa

HSL

Hue (0-360), saturation (0-100%), & lightness (0-100%)

HSLA

HSL + alpha transparency (0-1)

currentColor

The OG CSS variable

currentColor = the CSS color applied to the selected element

CSS Global Values

• inherit
• initial
• global

CSS Color Properties

Color

Sets text color

Sets currentColor for element

Background-Color

Sets element’s background color

Border-Color

Sets element’s border color

Outline-Color

Sets element’s outline color

Box-Shadow

Sets element’s box-shadow

Text-Shadow

Sets element’s text-shadow

Column-Rule-Color

Sets element’s column rule color

Text-Emphasis-Color

Sets element’s text-emphasis color

Caret-Color

Sets element’s caret color

Fill

Set's an SVG element’s fill color

Stroke

Set's an SVG element’s stroke color

Filter Functions

Manipulate color, but don’t actually take color properties

CodePen Examples

Filter Example

Blend Modes

mix-blend-mode

background-blend-mode

An awesome talk of its own…

Choosing Colors

Use Math

hsl() really shines here!

1. Pick a Color

• Hue: 30deg
• Saturation: 100%
• Lightness: 45%

2. Get its Complement

• Hue: 30deg + 180deg
• Saturation: 100%
• Lightness: 45%

3. Neutralize the Complement

• Hue: 30deg + 180deg
• Saturation: 60%
• Lightness: 25%

Try Triad Colors

Move toward the opposite of the wheel the same amount clockwise & counter-clockwise

Try Adjacent Colors

Move slightly from the original color the same amount clockwise & counter-clockwise

Try a Tetrad

Move around the wheel in 90° increments

Easily Create Hover States

Bump the lightness value

Dim Less Important Colors

Reduce the saturation value

Preprocessors Help

You can easily convert & manipulate colors

$color-primary: #EF6C00;
$color-primary-hover:
  scale-color($color-primary, $lightness: -10%);
$color-primary-dim:
  change-color($color-primary, $saturation: 15%);
$color-complement:
  adjust-hue($color-primary, 180);

Practical Color Theory for People who Code

Natalya Shelburne

tallys.github.io/color-theory

Accessible Colors

WCAG

Goal: maximum readability for all users

AA & AAA rating

Small & large text

Text/Background Contrast

Check color combinations at WebAIM

Scan a live site with WAVE

Link Contrast

3:1 contrast ratio between copy & links

Never rely on color alone

Browsers underline links for a reason

Background Images

There’s no good way to check this contrast automatically.

Choose images with:

• Low amount of details
• Strong color contrast from text

Review

Color Values

• Named Colors
• RGB(A)
• Hex(a)
• HSL(A)
• currentColor
• Global Values

Color Properties

• color
• background-color
• border-color
• outline-color
• column-rule-color
• box-shadow
• text-shadow
• fill
• stroke
• Filters & blend modes

Choosing Colors

• HSL(A) makes math easy
• Adjust hue for additional colors
• Adjust lightness for hover states
• Adjust saturation to reduce importance

Accessibility

• WCAG: AA/AAA contrast levels
• Links should contrast from copy
• Don’t rely on color alone
• Use background images carefully

Resources

• MDN: Color Values
• WebAIM: Color Contrast
• WAVE Site Scanner
• Practical Color Theory for People who Code ~ Natalya Shelburne
• Creating Instagram Filters with CSS ~ Una Kravets
• ”The Perfect Sunset” Series (I, II, III) ~ Justin McDowell