Colors

Ajay Gandecha

UNC Department of Computer Science

COMP 426: Modern Web Programming (Spring 2025)

Module 5: Design

Lecture 24

Announcements

• F00: Idea Submission - feedback returned!
• If you got an email from me with a yellow dot in the subject, please follow up!

​

• F01: Final Project Prototyping - complete by Sunday (4/6)
• Make sure to fill out the presentation scheduling form as soon as possible!

​

• A08: Design Lab due Wednesday (4/9)
• Final coding assignment!

​

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

!

!

Recall: Principles of Design

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Simplicity: The user interface should be…
• Easy to use and painless to navigate
• Minimalistic: only include what you need (no clutter!)
• Consistency: The design of the user interface should be…
• Visually and functionally consistent across interfaces.
• User-Centricity: The app should should…
• Have the user’s goals / needs in mind. → User stories!
• Accessibility: Consider how non-traditional users interact with your app.

​

Colors

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Colors make up a large part of our UI designs.
• They also can separate a good design from a great design.
• Keeping to a specific color theme promotes the design principle of consistency.
• Can help define your app or company’s brand identity.
• Amazon
• Duolingo
• Netflix

Anatomy of a Color

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Hue: Determines the color family.
• Red? Orange? Yellow? etc…

​

• Saturation: Intensity of the color.
• From greyer to richest color.�
• Brightness: Amount of darkness applied.
• From darker to brighter.

Anatomy of a Color

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Hue: Determines the color family.
• Red? Orange? Yellow? etc…

​

• Saturation: Intensity of the color.
• From greyer to richest color.�
• Brightness: Amount of darkness applied.
• From darker to brighter.

Hue

Anatomy of a Color

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Hue: Determines the color family.
• Red? Orange? Yellow? etc…

​

• Saturation: Intensity of the color.
• From greyer to richest color.�
• Brightness: Amount of darkness applied.
• From darker to brighter.

Saturation

Anatomy of a Color

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Hue: Determines the color family.
• Red? Orange? Yellow? etc…

​

• Saturation: Intensity of the color.
• From greyer to richest color.�
• Brightness: Amount of darkness applied.
• From darker to brighter.

Brightness

Color Representations

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• There are many ways to represent colors.�

• RGB: Quantifies amount of red, green, and blue in a color.

rgb(160,120,140) Values range from 0-255

• HEX: Quantifies amount of red, green, and blue in a color as hexadecimals.

#3F89CC Values range from 0-FF (0-255 in hexadecimal)

• HSL: Quantifies hue, saturation, and brightness of a color.

hsl(160,100% ,50%) Hue values range from 0-360 (degree on color wheel)� Saturation + brightness values range from 0-100%.

Another Value: Alpha

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• We can add an alpha value to represent opacity of the color.

• RGBA: Quantifies amount of red, green, and blue in a color + alpha.

rgba(160,120,140,0.5) Alpha value ranges from 0-100%.

• HEX: We can add two more digits to represent the alpha.

#3F89CC3C Alpha value ranges from 0-FF.

• HSL: Quantifies hue, saturation, and brightness of a color.

hsl(160,100%,50%,0.5) Alpha value ranges from 0.0-1.0.

Creating a Color Palette

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• When designing a website, you want to select a set of colors that you want to base your design on.
• This set of colors is called a color palette.�

Creating a Color Palette

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Typically, a color palette for UI design consists of five parts:
• Background Color: This color is used for most of your site’s background.
• Text Color: This color is used for most of your site’s plain text.
• Primary Color: Main branding color for your site that is used throughout.
• Secondary Color: Color paired with the primary color with less prominence.
• Accent Color: Color that “pops” against the primary color for more prominence.

Creating a Color Palette

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• What do I mean by prominence?
• We want to “point out” certain UI elements to users.
• Some elements should appear more “emphasized” to the user than others.
• For example, consider these buttons:

M5: Design

L24

Save Changes

Cancel

Creates a hierarchy of importance / “weight” of action.

The “Save Changes” button performs a mutating action, the “Cancel” button does not.

Look! These animated pop ups have different prominence levels...

60-30-10 Rule

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• The 60-30-10 rule determines the rough appearance of colors on a page.
• 60% of colored items should be the “dominant” (primary) color.
• 30% of items should be colored with the “complement” (secondary) color.
• 10% of items should be colored with the “accent” color.
• Inspired by interior design!

Primary

Accent

Secondary

Colors

COMP 426: Modern Web Programming (Spring ‘25)

• Spend a few minutes checking out sites that you often visit with a partner.
• Try to identify primary, secondary, and accent colors just by this rule alone!

​

• Have at least one site to share! We can check it out together.

​

Your Turn!

!

M5: Design

L24

Generating a Color Palette

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• There are a few tools that make generating color palettes easy:
• Realtime Colors: Shows all five classes of colors and an example site.
• Coolors: Popular site for generating color palettes.

Pitfalls!

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• There are a few constraints that help to guide selecting colors.�
• Your background color and text color should have sufficient contrast.
• Otherwise, you could end up with something like this!

Or something like this…

• You can check contrast between two colors with a tool like this:
• Coolors Color Contrast Checker
• Sufficient contrast is essential (especially for those with visual impairment)

​

M5: Design

L24

Pitfalls!

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• There are a few constraints that help to guide selecting colors.�
• Color choices should pair well together and not be too jarring.
• Typically, colors with high saturations should be avoided.
• Instead, opt for colors with a lower saturation value!
• Contrast also plays a role.
• Blue and red together have very high contrast and look bad together…

… especially on top of each other! X _ x

​

M5: Design

L24

Pitfalls!

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• There are a few constraints that help to guide selecting colors.�
• Background and text colors are often neutral.
• This means they are very close to white/gray/black.

​

M5: Design

L24

Dark Mode

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• Consider dark mode as well!
• This often flips around colors across the palette.
• You often want two contrasting palettes for light mode and dark mode.

M5: Design

L24

Dark Mode

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• Consider dark mode as well!
• This often flips around colors across the palette.
• You often want two contrasting palettes for light mode and dark mode.

M5: Design

L24

Material Design

COMP 426: Modern Web Programming (Spring ‘25)

Colors

• Material is Google’s Design Standard.
• Great inspiration for color palettes �and themes.
• Good amount of the terminology �taught here correlates.�
• Material Theme Generator

M5: Design

L24

Color Palettes for Shadcn

COMP 426: Modern Web Programming (Spring ‘25)

Colors

M5: Design

L24

• Shadcn generates a very neutral (grayscale) color scheme.
• Learn how to customize themes here.

Colors

COMP 426: Modern Web Programming (Spring ‘25)

• With your groups…
• Start deciding on a color palette for your project!
• You may use any of the tools linked in these slides.
• Submit your initial pick as attendance to GradeScope.

​

• The TAs and I will walk around!

​

Your Turn!

!

M5: Design

L24