All the Colors of the Internet

WordPress DC, August 2016

Beth Soderberg | @bethsoderberg

Photo by dhester at Morguefile.com

How do humans see color?

Humans don't see the same colors as one another because color is not a physical property of objects.

Color is a psychophysical property.

Color perception is the result of the spectrum of wavelengths reflected by a given object reaching our eyes, the response of the photoreceptors in our eyes, and the interpretation of that response by our brains.

Rods

All rods:

  • contain one photoreceptor
  • have the same sensitivity to wavelengths
  • respond to low light levels

Cones

Humans have three types of cones:

  • short-wavelength ("blue")
  • medium-wavelength ("green")
  • long-wavelength ("red")

Trichromatic Color Theory

Our visual system is defined by numbers that correspond to the proportional outputs of the three photoreceptor types.

Photo by svklimkin at Morguefile.com

Photo by Fir0002/Flagstaffotos via Wikipedia.com

Photo by AcrylicArtist at Morguefile.com

What about red, yellow, and blue?

Opaque objects reflect all or part of the light they receive.

If an object absorbs all light...

Photo by o0o0xmods0o0o at Morguefile.com

If an object reflects all light...

Photo by BrandonMenth at Morguefile.com

If an object absorbs absorbs blue and green wavelengths...

Photo by HizumiSakurai at Morguefile.com

When we "mix" paint colors, we are mixing opaque pigments, not light.

Pigment Colors

Primaries

  • Cyan

  • Magenta

  • Yellow

Secondaries

  • Red

  • Green

  • Blue

When we "mix" light colors, we are combining wavelengths of light.

Mixing pigment colors and light colors have opposite effects.

pigment and light based color mixtures

Light Colors

Primaries

  • Red

  • Green

  • Blue

Secondaries

  • Cyan

  • Magenta

  • Yellow

Web designers tend to work with subtractive color palettes because these mirror the natural world that we live in.

Computers generate color using additive systems.

Web Safe Colors

216 colors were identified as "web safe" at the time when computer monitors were limited to 256 colors.

Hex Colors

Format

Hex Colors

Values

  • Each digit can range from 0 to f, with 0 being the lowest value, and f being the highest value.
  • 16.7 million potential combinations
  • #000000

  • #000011

  • #000022

  • #000033

  • #000044

  • #000055

  • #000066

  • #000077

  • #000088

  • #000099

  • #0000AA

  • #0000BB

  • #0000CC

  • #0000DD

  • #0000EE

  • #0000FF

RGB Colors

Format

RGB Colors

Values

  • Each digit can range from 0 to 255, with 0 being the lowest value, and 255 being the highest value.
  • 16.7 million potential combinations

Don't forget RGBA!

Part of what makes the RGB color model awesome is the ability to add an alpha channel, which controls opacity (in IE9 and up).

Format

RGBA Colors

Values

  • RGB values follow the same rules as regular RGB.
  • Alpha values can be a value between 0 and 1 or a percentage between 0% and 100%, with 0/0% being fully transparent and 1/100% being fully opaque.
  • rgb(0,0,0)

  • rgb(0,0,17)

  • rgb(0,0,34)

  • rgb(0,0,51)

  • rgb(0,0,68)

  • rgb(0,0,85)

  • rgb(0,0,102)

  • rgb(0,0,119)

  • rgb(0,0,136)

  • rgb(0,0,153)

  • rgb(0,0,170)

  • rgb(0,0,187)

  • rgb(0,0,204)

  • rgb(0,0,221)

  • rgb(0,0,238)

  • rgb(0,0,255)

HSL Colors

Format

HSLA Colors

Format

HSL Colors

Values

  • Hue: degree ranging from 0 to 360
  • Saturation: percentage from 0% to 100% with 0% being fully desaturated and 100% being fully saturated
  • Lightness: percentage from 0% to 100% with 0% being black and 100% being white
  • Alpha Channel: value between 0 and 1 or a percentage between 0% and 100%, with 0/0% being fully transparent and 1/100% being fully opaque

HSL Colors

HSL color model graphic

HSL Colors

hue distribution

Saturation

Lightness

HSL Colors

color picker from PhotoShop

What about non-web color formats?

Not all screen colors can be printed and not all print colors can be displayed on a screen.

spectrum of colors available using different color models

CMYK

CMYK printing is based off the concept of spot colors: cyan, magenta, yellow, black. Spot color values range from 0% to 100%.

Conversion Tools

  • Color picker in Photoshop or Illustrator
  • Online conversion tool like Rapid Tables

Pantone

Pantone is a proprietary color model where color mixes are generated using thirteen specific spot color pigments and black.

Conversion Tools

Principle 1: Perceivable

"Information and user interface components must be presentable to users in ways they can perceive."

Guideline 1.4: Distinguishable

"Make it easier for users to see and hear content including separating foreground from background."

Guideline 1.4.1: Use of Color

"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"

screenshot of dots game
screenshot of dots game
inaccessible line graph
inaccessible line graph
inaccessible pie chart
inaccessible pie chart
inaccessible form
accessible form
more accessible form

Guideline 1.4.3 Contrast (Minimum)

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)"

  • Large Text: "Large-scale text and images of large-scale text have a contrast ratio of at least 3:1."
  • Incidental: "Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."
  • Logotypes: "Text that is part of a logo or brand name has no minimum contrast requirement."

WCAG Guideline 1.4.6 Contrast (Enhanced)

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)"

  • Large Text: "Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;"
  • Incidental
  • Logotypes

Normal Text

  • less than 18 point (approximately 24px)
  • between 14 point (approximately 18.66px) and 18 point and regular weight

Large Text

  • 14 point and bold or larger
  • 18 point and larger
  • "Digital design is like painting, except the paint never dries."
    — Neville Brody
  • "Digital design is like painting, except the paint never dries."
    — Neville Brody

Tools to Test Color Accessibility

Tools to Test Contrast Accessibility

Ok...so what colors should I use?

Complementary vs. Triadic vs. Split Complementary vs. Analogous

  • Color Wheel

    color wheel
  • Complementary

    complimentary colors
  • Triadic

    triadic colors
  • Split Complementary

    split complementary colors
  • Analogous

    analagous colors

But...have you ever seen a website that looks good and has only these colors?

Color Palette Guidelines

Choose:

  • a base color
  • an accent color
  • a super light neutral
  • a super dark neutral
  • a mid-level intensity neutral
  • #5DBA3B

  • #AC4CC1

  • #ffffff

  • #081105

  • #939E98

Tools to Choose Colors

Utilize color to maximize conversion.

Use accent colors to draw attention.

Test continually!

There is an evolutionary basis for the psychological responses we have to color.

Always remember: perception of color is personal!

Where to Learn More

Articles and Resources

CMYK Conversion Tools

  • Color picker in Photoshop or Illustrator
  • Online conversion tool like Rapid Tables

Pantone Conversion Tools

Tools to Test Color Accessibility

Tools to Test Contrast Accessibility

Tools to Choose Colors

Thank you!

@bethsoderberg

bethsoderberg.com

http://bethsoderberg.com/slides/2016/wordcamp-dc/index.html#/