Topics
Sarah Drasner presents color theory – additive vs. subtractive color – as well as a number of tools and strategies for picking website palettes.
Below are a number of sites described in the lectures:
- Coolors: palette generator, trending palettes, palette from image, gradient maker, and trending gradients.
- Paletton
- Adobe Color
- Colorable Contrast Checker
- Palettab – Chrome extension that displays a color palette and font pair for each new tab
- Ultimate CSS Gradient Generator
- UI Gradients
- Tint and Shade Generator
- Canva Color Wheel
- Smashing Magazine article on creating palettes
- Sarah Drasner Codepen with HSL color generator
Lectures
Design for Developers, Section 4 – Color Theory, videos 1 -12
For the blog
Using any number of tools from the list above presented in the lectures, find two images from unsplash – a landscape and a still life/portrait. Generate a palette based on each image and embed the image with a generated palette and collage (Coolors does this best).
Next choose one of the two images/palettes and create a set of tints and shades for one color within the palette.
Finally using a tool of your choice layout some text over the image using colors from the monochromatic tints and shades.
Note the colors used in the typography – heading #fff087 and sub-heading #332d04.
Describe how you made your choices for final colors, also describe how you picked the palette with your image. Did you use the first generated palette from your image? Did you look at other options generated? Did you make custom adjustments?
