This document provides guidance on developing a color palette for a website. It recommends starting with an existing photograph and extracting colors from it. A color worksheet is presented to select colors in the sRGB color space. Tools are listed for checking color contrast and generating color palettes, including color.adobe.com, coolors.co, and color.hailpixel.com. Examples of website color palettes are shown using neutrals with accents, monotones, warm colors, cool colors, and complementary colors. Resources for working with color in code and color theory are also referenced.

1. How to Develop
a Color Palette
for Your Website
Amanda McCoy

2. Think about your content…
photos long form text

3. Existing Branding

4. Starting with a Photograph
https://www.canva.com/color-palette/
Photo from unsplash.com
Photographer: Rachael Gorjestani
Photo from unsplash.com
Photographer: Brooke Lark
type type 2 linksmain colors type type 2 linksmain colors

5. Color worksheet—use srgb color space
A B O U T U S
Rafat Fadel
With his unique and dynamic style, Rafat designed a
range of residential and commercial projects through-
out the San Francisco Bay Area and internationally
while a lead designer at Peter Koenig Planning &
Design, and other offices throughout the Bay Area. He
A B O U T U S
Rafat Fadel
With his unique and dynamic style, Rafat designed a
range of residential and commercial projects through-
out the San Francisco Bay Area and internationally
while a lead designer at Peter Koenig Planning &
Design, and other offices throughout the Bay Area. He
A B O U T U S
Rafat Fadel
A B O U T U S
Rafat Fadel
A B O U T U S
Rafat Fadel
A B O U T U S
Rafat Fadel
A B O U T U S
Rafat Fadel
#9fc163
#8faa68
#ff7f7f
#669ca3
#5b7f84
#ffff7f
#31333e
#31333e
#265f3b

6. Color Contrast Checker
http://webaim.org/resources/contrastchecker/

7. #9c
cc
df
#8c
bc
cf
#7c
ac
bf
#6c
9c
af
#5c
8c
9f
#4c
7c
8f
#4c 7c 8f
#3c
6c
7f
#2c
5c
6f
#1c
4c
5f
#0c
3c
4f
For a more information on working with color through code:
https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
Adjusting color with hex

8. Neutrals with accent
nosidebar.com design: Brian Gardner

9. Subtle, high key
horlogerie.bilan.ch/# design: Heed Agency

10. Dark, low key
arielbeninca.com/ design: Ariel Beninca

11. Monotone
followbubble.com

12. Warm colors
pushpaproject.com/ design: Pen & Mouse

13. Cool colors
josefkjaergaard.com/

14. Muted color
cafefrida.ca design: Pier-Luc Cossette

15. Saturated, warm/cool
madebyfieldwork.com

16. Complementary colors
orangina.eu/

17. Colors with similar values
litmus.com/conference

18. Resources
PALETTE GENERATORS
color.adobe.com
Makes it easy to create analygous,
triad, complementary colors
coolors.co
Fun useful, will generate a whole set
of tints
color.hailpixel.com/
A very entertaining way to generate
a palette, maybe less practical.
www.colorhunt.co/
Shows full palettes
COLOR CONTRAST CHECKER
webaim.org/resources/
contrastchecker/
MORE ABOUT USING CODE
www.smashingmagazine.com/
2012/10/the-code-side-of-color/
COLOR BLENDING GAME
Blendoku 2
INTERESTING COLOR APP
Interaction of Color by Josef Albers
App
An interactive version of Josef
Albers influential book. Mac only.

19. COLOR CONTRAST CHECKER
http://webaim.org/resources/contrastchecker/
PALETTE GENERATORS
https://color.adobe.com
makes it easy to create analygous, triad, complementary colors
https://coolors.co
fun useful, will generate a whole set of tints
https://color.hailpixel.com/
a very entertaining way to generate a palette, maybe less practical.
http://www.colorhunt.co/
shows full palettes
MORE ABOUT USING CODE
https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
COLOR BLENDING GAME
Blendoku 2
Interaction of Color by Josef Albers App
An interactive version of Josef Albers very influential book. Mac only.