Working with Colors and Gradients

# CHAPTER 4

Working with Colors and Gradients #

1. Introduction #

A beautifully structured arrangement of gray boxes is mathematically pleasing, but it will not evoke emotion or guide a user's attention. Color is arguably the most powerful psychological tool in a UI Designer's arsenal. Color tells a user where to click (a bright blue button), what to avoid (a red warning banner), and establishes the entire emotional identity of the brand. However, selecting colors for a digital product is not like finger painting; it requires a strict adherence to systems, digital formats, and accessibility laws. In this chapter, we will master Colors and Gradients in Figma. We will decode the mystery of HEX and RGB codes, establish a professional Primary/Secondary color palette, explore modern gradient aesthetics, and enforce the critical mandate of visual accessibility.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Apply Solid colors, Linear Gradients, and Drop Shadows to UI elements in Figma.

• Understand the digital color formats used in software design (HEX, RGB, HSL).

• Define the 60-30-10 rule for creating balanced UI color palettes.

• Distinguish between Primary, Secondary, and Semantic colors.

• Verify color contrast to meet WCAG Accessibility standards.

3. Applying Colors in Figma (The Fill Panel) #

To change the color of any shape or frame in Figma:

1. 1. Select the object.

1. 2. Look at the Right Properties panel and find the Fill section.

1. 3. Click the color square (usually default gray #D9D9D9) to open the Color Picker.

1. 4. You can drag the circle around the rainbow spectrum, or simply use the Eyedropper tool (I) to click and steal a color from anywhere else on your screen!

*Strokes:* Right below Fill is the Stroke section. This adds a colored border *around* your shape, allowing you to change the border's thickness and color independently of the inside Fill.

4. Digital Color Codes (HEX, RGB, HSL) #

When a designer hands a blue button to a developer, they don't say "make it ocean blue." They give the developer a mathematical code.

• HEX (Hexadecimal): A 6-character alphanumeric code. This is the absolute standard for web design. *Example:* #000000 is pure black. #FFFFFF is pure white. #4F46E5 is a specific modern indigo.

• RGB (Red, Green, Blue): Defines how much of each light color the screen monitor should emit, ranging from 0 to 255. *Example:* rgb(255, 0, 0) is pure red.

• HSL (Hue, Saturation, Lightness): The favorite format of professional designers because it is intuitive. Hue is the actual color (0-360 degrees on a wheel), Saturation is how vibrant it is (0-100%), and Lightness is how dark/bright it is (0-100%).

5. UI Color Theory (The 60-30-10 Rule) #

A common beginner mistake is using 10 different colors on a single screen, resulting in a chaotic, ugly app. Professional UI relies on strict restraint. The 60-30-10 Rule is a classic design principle:

• 60% Background Colors: Whites, light grays, or dark grays. This is the canvas.

• 30% Secondary Colors: Used for structural elements like navigation bars or cards.

• 10% Primary (Accent) Colors: Your brand color (e.g., Spotify Green, Facebook Blue). Used *only* for the most important actions, like the "Checkout" button or active icons. By restricting the Primary color to 10%, you guarantee it violently draws the user's eye!

*Semantic Colors:* These are colors universally reserved for communication. Red is ALWAYS Error/Delete. Green is ALWAYS Success/Save. Yellow is ALWAYS Warning. Never use Red as your primary brand color for a "Submit" button unless you want to terrify your users!

6. Gradients #

A solid color is flat. A Gradient is a smooth transition between two or more colors. In the Figma Color Picker, change the dropdown at the top left from "Solid" to "Linear."

• Linear Gradient: Transitions colors in a straight line (e.g., from top to bottom, or left to right).

• *Modern Aesthetic Tip:* Do not mix wildly different colors (like Red to Green). To create a premium, modern SaaS look, use a gradient of two very similar colors (e.g., a dark indigo transitioning into a slightly lighter purple).

7. Accessibility (WCAG Contrast) #

Designing a beautiful light-gray text on a white background might look "clean," but a user with visual impairments, or a user standing outside in the sun, will not be able to read it. As a UI Designer, you are legally and ethically obligated to follow WCAG (Web Content Accessibility Guidelines).

• *The Rule:* The contrast ratio between the text color and the background color must be at least 4.5:1 for normal text.

• *How to check:* You don't guess. You install a free Figma plugin like "Stark" or "Contrast" which mathematically calculates the ratio and tells you if your design passes or fails the legal accessibility standards.

8. Diagrams/Visual Suggestions #

*Visual Concept: The 60-30-10 Breakdown* Provide an image of a clean, modern SaaS Dashboard.

• Overlay a massive 60% pie chart over the massive light-gray background of the app.

• Overlay a 30% pie chart over the dark-gray left-hand sidebar menu.

• Overlay a tiny 10% pie chart over the bright purple "Create New Project" button in the top right corner.

This instantly teaches the concept of visual hierarchy and restraint.

9. Best Practices #

• Never Use Pure Black: Pure black (#000000) does not exist in nature. On a digital screen, pure black text on a pure white background causes severe eye strain and visual smearing. Professional designers use very dark grays (e.g., #1A1A1A or #1E293B) for typography. It looks like black to the human eye, but is vastly softer and more legible.

10. Common Mistakes #

• The "Skittles" UI: A beginner designs a form: The "Cancel" button is Red, the "Submit" button is Green, the "Help" button is Blue, and the "Back" button is Yellow. The screen looks like a bag of Skittles. The user is overwhelmed and confused. *The Fix:* Make the primary action (Submit) the brand color (Blue). Make every other secondary action (Cancel, Back) a boring, neutral Gray outline. Only the primary action gets the vibrant color!

11. Mini Project: Build a Gradient Button #

Let's design a highly clickable, modern CTA (Call to Action) button.

1. 1. Draw a Rectangle (R). Width: 200, Height: 56. Corner Radius: 100 (This creates a perfectly pill-shaped button).

1. 2. Go to Fill. Change "Solid" to "Linear".

1. 3. Click the top color square on the gradient slider. Set the HEX to #FF512F (A vibrant orange).

1. 4. Click the bottom color square on the gradient slider. Set the HEX to #DD2476 (A vibrant pink), and ensure the Opacity slider is at 100%.

1. 5. Drag the gradient angle so the Orange is on the far left, and the Pink is on the far right.

1. 6. Under the Properties panel, click the + next to Effects. It will default to a "Drop Shadow."

1. 7. You now have a stunning, modern Web3-style gradient button!

12. Practice Exercises #

1. 1. Define the 60-30-10 rule and explain why restricting the Primary brand color to 10% of the UI significantly improves the user experience.

1. 2. Select an object in Figma and practice switching its color format between HEX, RGB, and HSL. Note how changing the 'L' (Lightness) in HSL makes the color darker or brighter without changing the base hue.

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the concept of "Semantic Colors" in UI Design. If your company's primary brand color is a bright, vibrant Red, why is it a terrible idea to use that exact Red as the background color for the primary "Save Changes" button?

• Q: Why do senior UI designers aggressively avoid using absolute pure black (#000000) for paragraphs of text on a white background? What HEX codes or concepts would you use instead?

• Q: Walk me through your process for ensuring a new mobile app design is legally accessible to users with visual impairments. What specific ratio are you looking for regarding text and backgrounds?

15. FAQs #

Q: How do I pick a color palette if I'm bad at matching colors? A: Never guess! Professional designers rarely invent color palettes from scratch. Use free algorithmic tools like Coolors.co or the Material Design Color Palette Generator. These tools use color theory math (analogous, complementary) to instantly generate 5 colors that are mathematically guaranteed to look beautiful together.

16. Summary #

In Chapter 4, we transformed our structural wireframes into vibrant, emotional interfaces. We decoded the mathematical language of digital colors, establishing the HEX code as the ultimate bridge between designers and developers. We disciplined our aesthetic urges by enforcing the 60-30-10 rule, ensuring our Primary brand colors act as focal points rather than overwhelming noise. We embraced the modern, premium aesthetic of Linear Gradients while explicitly avoiding the harsh, eye-straining reality of pure black. Finally, we accepted our ethical responsibility as designers, mandating strict WCAG contrast ratios to ensure our products are accessible to all users.

17. Next Chapter Recommendation #

Our buttons are beautifully colored, but they are completely blank. We need to tell the user what the button does. Proceed to Chapter 5: Typography and Text Design.