Shift Nudge - Interface Design Course - Core - Color

Color theory is fun and all, but this module will take a very practical look at color usage as well as do’s and don’ts. You will not be mystified by color usage any longer!

Color Picking Methods

Why


When you move beyond sketches, wireframes, and default styles in the world of interface design, you’re going to start using color.

Color can be overwhelming to choose so I’m going to first breakdown the methods of choosing colors and show you the pros and cons of each method as well as share my methods for color selection.

In this lesson we’ll lay the foundation for all of our color selecting needs for the future.

What


  1. You will spend a large amount of time with you color picker open and clicking around and adjust things. This will help demistify some of the terms and give you tips on navigating them as quickly as possible
  2. HSB is my favorite. There are subtle differences between software color pickers.
  3. Get the most comfortable with HSB and HEX. Any of these can be converted into any other formats. So don’t fret about final color format.
  • RGB (RGBa)
  • HEX
  • HSL
  • HSB (HSV)

RGB

This stands for Red, Green, and Blue. These are the three lights that create color on digital displays. The a you will sometimes see associated with RGB (eg. RGBa) refers to the alpha channel of the color. Alpha refers to the opacity.

Either three of these colors (RGB) can range from 0 – 255.

Black

An RGB value of (0, 0, 0) equals pure black.


White

An RGB value of (255, 255, 255) equals pure white.

Remembering and using RGB codes is not very intuitive, so you will often find heavier usage of HSB or HSL in design tools. Look at this image below. Would you ever remember and be able to easily recall and manipulate these three colors? Me neither, that’s why I don’t use RGB when I’m designing.

HEX

HEX is short for hexidecimal. This is a 6-digit shorthand color code of the RGB color spectrum. For example black would be represented in the following format. #00000

It’s not really any less confusing, but I have found this slightly easier to use over RGB. HEX and RBG can be used interchangeably without any changes. There is a conversion formula, but you don’t need to know it because all design tools do it for you.

In HEX format, their is a range of 16 possibilites for each of the 6 positions. Each position can range from 0-9 and A-F. 0-9 are the first 10 possibilites whereas A-F are the next 6 possibilites of color amount.

The lowest digit 0 represents no amount of color, and the highest position, F, represents the fullest amount of color.

  • Positions 1 and 2 determine amount of Red.#FF0000
  • Positions 3 and 4 determine amount of Green. #00FF00
  • Positions 5 and 6 determine amount of Blue. #0000FF

The color is not affected by lowercase or uppercase. That’s merely a personal preference.

Black

#000000

RGB(0, 0, 0)

White

#FFFFFF

RGB(255, 255, 255)

HEX shorthand

HEX codes can be shortened to three digits. In this case each of the 3 digits represent each pair of 6 digits. #000 is shorthand for #000000, for black. #FFF is shorthand for #FFFFFF, for white.

HSL

Similar to HSB, HSL stands for Hue, Saturation, and Lightness.

  • See this example on Figma’s color wheel

  • Contrast difference with Sketch’s

  • Walkthrough examples of each.

  • Saturation goes diagonally from lower left to upper right

  • Lightness goes diagonally from lower right to upper left (depending on Saturation level)

  1. HSB vs. HSL – worth noting the difference
  2. Figma is a better example for choosing HSL values over Sketch. Can be helpful when adjusting only the L value to finding other colors based on your base color.
  3. I still prefer HSB over HSL, but it’s worth noting that HSL can be useful in certain situations.

The ‘L’ in HSL can vary, depending on the software used. HSL can hence also mean ‘Hue, Saturation and Luminance’ or ‘Hue, Saturation and Lightness’. The exact definition of these may vary with the software—which is why I find this method a little confusing to use in most scenarios.

https://blog.adioma.com/wp-content/uploads/2017/02/oled-light-1.png

HSB

HSB is my favorite color method to design with. For me, it’s the most intuitive.

H stands for Hue. Hue spans Red, Green, Blue and everything in between. This number will range between Red at 0 and Red at 360. Think of it as a loop.

S stands for Saturation. This is a scale of 0–100. Zero being absolutely no saturation and 100 being fully saturated. You can also think of Saturation on the white scale. A 50% saturated color, will appear the same as a 100% saturated color with a white shape with 50% opacity on top of it.

B stands for Brightness. This is also a scale of 0–100. Zero being no brightness (black) and 100 being fully bright. You can think of Brightness on the black scale. A 50% brightness scale on a color, will appear the same as a 100% brightness color with a black shape with 50% opacity on top of it.

So for me, HSB is as simple as Color, Whiteness, and Blackness. Much easier to remember and use than RGB or HEX by itself.

  • Saturation goes left to right
  • Brightness goes top to bottom

Fun Fact

CMYK stand for Cyan, Magenta, Yellow, and Black. These are the four colors that are used in color printers. These are also the four colors that create the four color print process. CMYK colors will always print slightly differently than how they appear on the screen, because on the screen even CMYK colors are created with digital lights in the RGB space. So if you ever need to print something, never rely on the color you see on your screen. Print it out and test it that way.

Resources

https://cloudflare.design/color/

Homework


Quadruple Color Exercise in Sketch and Figma

Create a red rectangle, duplicate it into 4 rectangles on a 800x600 artboard

  • HSB
    • change only the HUE
    • change only the SATURATION
    • change only the BRIGHTNESS
  • HSL
    • change HUE and LIGHTNESS and you’ll see that the same changes occur
    • change the SATURATION and you’ll see that this is the difference (less desirable imo)
  • HEX
    • adjust the red postions
    • adjust the green positions
    • adjust the blue positions
    • PRO-TIP: You can enter shorthand HEX codes into Figma's HEX input field for quick colors.

Try the exercise in Sketch AND Figma to see how their color panels differ slightly.

No need to post this homework to Slack unless you had trouble or questions.

Bonus


I randomly found this on YouTube and it’s pretty great look into what makes color so tricky

https://www.youtube.com/watch?v=FTKP0Y9MVus

Color Contrast & Accessibility

Globally, at least 2.2 billion people have a vision impairment or blindness, of whom at least 1 billion have a vision impairment that could have been prevented or has yet to be addressed.

This 1 billion people includes those with moderate or severe distance vision impairment or blindness due to unaddressed refractive error, as well as near vision impairment. The majority of people with vision impairment are over the age of 50 years.

Reference: https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment


:point_right: WCAG 2.0

20/20 vision 3.0 contrast (AA Large)

20/40 vision have 1.5 contrast sensitivity loss, which is where the 4.5 score comes from (AA)

20/80 vision for 7.0 score (AAA) Not able to be corrected with glasses, etc.

Scores

Ways to check your color contrast

Gotcha situations

refer to video for example

  • bright brand colors for primary calls to action
  • placeholder copy for input fields
  • legal copy
  • deactivated items

Sweet Spot

AA or 4.5 is your sweet spot. If all of you text colors are hitting this score, you’re going to be very well positioned. Go lower or higher from here with a very calculated approach.

Titles and Body

7.0 gives you a nice even contrast for titles and body copy for lots of content without going too heavy in contrast.

Staying in the middle ground provides opportunities to go lighter or darker, for notifications, etc. that may need to be more heavily weighted.

CTAs, Links, Buttons, etc.

  • AA+ or AA works well for these, though it certainly won’t hurt to go with higher contrast.

Homework


  1. Explore the various options and decide on your color contrast checker of choice

  2. Read through https://usecontrast.com/guide

Structural vs. Interactive Colors

Why


Understanding the two types of colors and how they work together can help you break your color selection process into chunks, making it more of a systemiatic process rather than a totall guessing game.

Setting a general color direction as early as you can will help keep you focused during your project and allow you to make additional color decisions more quickly and easily.

Often times this can take a day or two of experimenation and sometimes you’ll end up tweaking final final hex codes until you’re ready to ship it.

What


refer to video examples

Structural colors

By, structural colors I’m referring to primarily the background color of your interface, the background color of any particular container or grouping of containers, as well as borders and dividers.

The majority of interfaces tend to have a white or light grey background (the inverse is true for dark mode enabled apps), however there maybe situations that call for a very colorful background.

In most cases, if you’re structural colors are primarily restrained in saturation (white, light grey, etc.) then you’re interactive buttons will be highly saturated. This is not the case for interfaces that use a fully desaturated color scheme for both structural and interactive colors—but in this case more care needs to be given to the position and color amount and reversal for interactive elements.

Interactive colors

Interactive colors are colors that you define some type of action. They can often have brand recognition associated with them. For example:

How


refer to video examples

Let primary button color drive your color scheme

  • pick a quite saturated primary color
  • check it’s contrast score to make sure it works!

Greyscale or tinted structural colors

  • white, medium grey, and dark colors for structural
  • same but tinted warm, cool, etc. depending on primary action color
  • try using a consistent hue for a rich color theme

Things to consider

  • Determine supporting overall color scheme
  • Pure white background with shallow Z-axis?
  • Light grey background with white modules and subtle shadow? (iOS, Facebook, App Store)
  • Completely desaturated foundational colors or slightly saturated?
  • Cool color scheme or Warm color scheme
  • Shifting colors?
  • Heavy color usage?
  • See if strong brand color already exists and use that to determine if primary action should be the same

Avoid Muddy Colors

Muddiness occurs when the contrast between two objects is too low. This can typically be found with certain color combinations as well as drop shadows on certain items.

Links

12Stone Components .sketch

Steady Wireframes .sketch

Roadie Style Guide Handoff .sketch

Babycents Responsive Web .sketch

Figma file for homework .fig

Remember: You can open .sketch files inside of Figma!

Homework


https://www.figma.com/file/ytxVRM0X0w0w4FHNXz1ktH/Structural-vs.-Interactive?node-id=1%3A44

Create a few mobile or dribbble shot–sized screens. We’re going to focus on structural and interactive colors.

  • Light grey background (start with #f5f5f5 or darker)
  • Draw a white rectangular “card” on top of it (335x300 or so) with rounded edges
  • Try multiple options for styling this card
    • see how light grey you can make the background before it starts to become too light
    • try a 1px stroke on the card—see how light you can go with the border color before it loses it’s usefulness (it may be lighter than you think!)
    • try no border and a large subtle dropshadow (like 10% black with a 40px blur and a 40px Y value
    • play around with the combination of bg color and dropshadow strength, they will interact with each other to create a darker color. the darker your background, the less the 10% shadow will show up and you may need to bump up the opacity
  • add a pill shaped rectangle to the bottom of the card with a very brightly saturated color (red, green, blue, etc. you decide)
    • make sure the pill shaped button is around 44-40px tall and it stretches the full width of the card (minus some padding on the left, right, and bottom)
    • use a text field with the button “label” or “button” or whatever you want (try 16px bold)

Continue to explore

  • duplicate and iterate through several versions of background (structural) colors and primary (interactive colors)
  • see if you can come up with a combination you really love
  • remember to use your HUE color as an anchor for your color selection

Primary, Secondary, & Tertiary

The primary action needs to stand out more than the others. It should pass the squint test. It should be the focal point and unmistakably “the thing to do to perform the action.”

There should only ever be one primary action on screen. If it helps you, make a simple ordered list with the most important action as number one.

Common primary actions

  • Sign Up (basecamp)
  • Sign In (google)
  • Save (edit profile)
  • Post (pinterest)
  • Etc.

Common secondary actions

  • Cancel
  • Edit
  • Skip
  • Filter
  • Sort
  • Go Back
  • Close

refer to video for examples

Just because there might only be one action on the screen, doesn’t make it a primary action.

Use high contrast or high saturation color levels for primary actions. Avoid thin and dainty primary actions as they simply don’t command enough attention.

Links

MyMonero Marketing Site .sketch

MyMonero Desktop UI .sketch

Homework


https://www.figma.com/file/L65bKFrTWHL0txq9npaXyb/Colors-%E2%80%93-Primary-Defintions?node-id=0%3A1

  • Redesign google.com as your own. Rename it if you want or keep it as “Google”
    • Choose a single primary color that passes AA accessibility with a score of 4.5 or higher
    • Design desktop or mobile, you decide—but in both options present a primary “search” button or with a search icon (or icon + label)
    • Make sure the color is strong and full. No border buttons on this assignment! =)
    • Use any type of input field style you’d like
    • Keep it very simple overall. Focus on your color usage.
    • Add a few navigation items at the top (about, store, gmail, images) plus a Sign In button. Don’t use black or a fully desaturated color for these text items. They can appear greyscale if you’d like, but make sure they are very intentionally saturated, if only by 2-5%
    • Feel free to rename the nav items.
    • Focus on the exact color you are using for the primary call-to-action and the navigation items

Pay special attention to the following:

  • the primary color you choose for you search button
  • the secondary color you choose for your sign in button
  • the navigation text color you choose
  • the border or the background color of the input field and search icon
  • the global background color

Make two versions

  1. For the first version, use only one HUE (HSB) for all of the colors. Keep the HUE exactly the same throughout and only adjust the saturation and brightness for all other colors. Produce a little swatch palette off to the side, to help show the variety of swatches.

  2. For the second version duplicate your frame. Use two HUES—one for your primary action and different one for your secondary action. Use either your primary or secondary HUE to make decisions on all of the other colors and combinations.

https://twitter.com/mds/status/1215695449224634368?s=20

Strategic Color Definitions

Color definitions to consider:

  • This color will always be used for navigating back
  • This color will always be used for primary actions
  • This color will always be used for selected objects
  • This color will always be used for secondary actions when a primary action is present
  • This color will always be the background
  • This color will always be used for borders and dividers
  • This color will always be used for icons presenting a status
  • This color will always be used for icons and links that are actions
  • This color will always be used for “doing something” (action)
  • This color will always be used for “going somewhere” (navigation)
  • This color will always be used as a background color behind a primary call-to-action

https://www.figma.com/file/L65bKFrTWHL0txq9npaXyb/Colors-%E2%80%93-Primary-Defintions?node-id=0%3A1

Homework


refer to video for example

  • Design an extra screen from your previous google.com redesign that includes search results of your phrase of choice. (Eg. time of day in Singapore)
  • Very carefully choose and use the same colors from your previous assignment. Add 1 or 2 new variations of colors if you need to for new items introduced.

When you’re done…

  • Create a small style guide of swatches for your structural and interactive colors from the previous lesson.
  • Be sure to be very specific with your definitions.
  • If you realize there is some inconsistencies, then adjust your designs to match the document.

Color Amount & Modification

The method in this video will serve as a great foundation for your color choosing challenges. Following this simple process will give you superpowers when it comes to adjusting your colors.

Using completely desaturated blacks, grays, and whites isn’t necessarily a bad thing, but you will find there are LOTS of subtle colors at play in rich interfaces. Especially in the colors that seem to be simple white, grey, and black.

Different locations in interfaces that can be treated with modified base colors. (Note: Don’t assume a variation of an accessible base color will also be accessible. Make sure you test each one before locking it in.)

Some of your earliest decisions to consider will be how much or how little color to use. There is no right or wrong answer. You are the designer, you choose. It’s OK to go down a path 10 screens deep and change your mind and tweak the initial color palette.

https://www.figma.com/file/tX222unNlG7KGTk7ITUpkz/Color-%E2%80%93-Amount-and-Modification?node-id=0%3A1

https://www.figma.com/file/miMcjKf4jM7lwDPdZMGZzK/Color-Calendar?node-id=0%3A1

Homework


Design a small calendar widget modal for creating a new event. Can be mobile or more of a floating UI in a 800px wide canvas.

Try to show someone who has filled it halfway out so far. So some input has been added, other inputs have not been completed, and one of them as currently selected. See wireframe above.

Keep in mind all of the Typography and Layout principles we’ve colored, but focus primarily on COLOR on this one.

  • Name of event
  • Location of event
  • All-day [check box]
  • starts [date]
  • ends [date]
  • alert

Things to think about

  • Explore varying degrees of saturation to give your interface just the right feel.
  • Choosing and rotating the hue
  • Color for type
  • Color for header
  • Color for dividers
  • Color for background
  • Color for icons
  • Define your colors

Additional Resources

Gradients

They can be used for adding visual interest—jazzing things up or making them pop.

They can be used for utility—fading things out or making smooth transitions.

And They can also be used for interactivity—creating depth

refer to video for examples

Pro-tips

For creating visual interest you have a little more leeway for changing your HSB values,

for utility and interactive gradients try to be very subtle with your shifts in color. It’s really easy to overdo it.

When in doubt go extremely subtle and use restraint.

https://www.figma.com/file/FYJfHrqkIGsqGInmGTm8VQ/Color-%E2%80%93-Gradients?node-id=0%3A1

Homework


  1. Recreate the Sketch icon with shapes and gradients
  2. Recreate the stripe.com background using the exact colors then create a new version with completely different hues
  3. Add a utility gradient to some body of text on one of your old assignments
  4. Create a few different buttons that use an analgous gradient and a monochrome gradient for creating very subtle depth.

Bonus CSS tip for gradients

It’s not currently possible to animate gradients with CSS, but you can fake it by adding the gradient to a psuedo element and then animating the opacity of that element. This will give the effect of animating a gradient on hover. :+1:

Checkout some video homework reviews for this lesson

Nifty Shades of Grey

And it’s 100% ok to have a range of grey to use, as long as you are very strategic and intentional about them.

Your developers will thank if you’ve had the foresight to be very specific and purposeful with your color choices and conventions.

Common example

  1. Dark color for most text. Usually in the #000 to #444 range

  2. Medium grey for AA readable text

  3. Medium light grey for AA Large text or icon usage

  4. Light grey for divider lines or hover backgrounds for certain elements

  5. Super light grey for a background color

It’s ok to have a range of grays to use. Make sure you use them strategically though. You don’t want to end up with 12 different grays without reconciling which is used where, and why. You’re developers will thank you if you’ve had the foresight to be very specific and purposeful with your color names and conventions.

https://www.figma.com/file/JYJNkyKIIQ0dBN9ZtByin6/Shades-of-Grey?node-id=0%3A1

https://twitter.com/steveschoger/status/975796307196604417?s=20

Homework


Design a simple calculator with three different color schemes.

  1. Neutral grey
  2. Warm or Cool grey
  3. Fully colorful with lighter and darker variants used as “colorful” greys

You decide the HUE, but used limited saturation and brightness for the grey buttons.

Mac and iOS calculators for reference…



Thoughts about “grey” vs. “gray”

https://twitter.com/mds/status/1217871471072153600?s=20

White & Almost White

Make your decisions about white and light grey colors based on:

  • information density
    • the more information the more varied you may need to get with background grey bg colors, lighter modules, and dividers
    • the less information, the more you can use negative space as the primary mechanism for content seperation without the need for too many module backgrounds or dividers
  • design direction
    • do want to have a “floating tile” look for you interface with dropshadows and does that make sense for what you’re working on?
    • do you prefer a flatter interface with no shadows
    • style preference and general direction will play a big role in deciding this

Biggest takeaways

  • Pay special attention with how you use the color white, specifically with structural colors.
  • All white backgrounds with light grey modules can be a very clean and modern look, but it’s tricky to hit just the right amount of grey without being too dark. You’ll need to do lots of tests and variations.
  • For more complex interfaces it can be easier to separate the content from the background with white modules on top of a light grey background. Alternatively you can achieve a similar effect with using big drop shadows on your modules.
  • With less complicated data and interfaces you can use less borders, background, and module dividers.

Z-index tips and tricks

  • If you’re using light structural colors in your interface, white will pop forward to the foreground (higher on the z-index or z-axis)
  • Darker grey colors will appear slightly sunk-in.

Ways to modify light structural colors

(applies to dark UIs too, it’s just 2x tricker and more important when going dark)

  • Background color shift
  • Border color shift
  • Shadow shift
  • Combination border/shadow shift

https://twitter.com/jamesm/status/1219316580812759042?s=21

https://www.figma.com/file/2za6ytkC745FYTzENmMLad/White?node-id=0%3A1

Homework


Design a little chat app with a conversation between two people.

  • Chat bubble thread with avatars
  • Create a fun conversation between friends or characters.
  • Bonus points for inserting emoji. :blush::+1: ⌘ control spacebar on the mac

Really focus on white vs. very subtle light grey.

Try three types:

  1. White background with subtle grey chat bubbles
  2. Light grey backround with white chat bubbles (consider borders, subtle shadows, etc.)
  3. If you’re feeling fancy, push the concept further and introduce a bright color to see how that completely changes things.

Look at these for reference:

  • Twitter DMs
  • Facebook Messenger
  • Slack private messages
  • iOS Text messages
  • Anything else with messaging

Secrets of Dark UI

Below is the full redesign at 1x speed. Long video, but packed with lots of on the spot decision making process. Talking through every selection and every choice.

https://www.figma.com/file/PPx3BNKYXyetUjYIqQWOYQ/Dark-UI?node-id=0%3A1

Homework


  1. Redesign a portion of the Garmin app. What can you do to this screen that can make the dark UI work better.
  2. Choose any app screenshot of your preference that doesn’t have dark mode and try to recreate it as a dark UI using these dark mode principles.
1 Like

This course is property of Studio MDS, LLC. It has been stolen and illegally uploaded (partially). A DMCA prosecution and takedown is underway. This is a clear violation of Section 5 of the terms of service shiftnudge dot com/terms