Icon Design Color Theory & Application in Icons 2 — Questions and Answers
Question 1: What does 'saturation' describe in a color's properties?
- How light or dark a color appears
- The dominant wavelength of the color
- The intensity or vividness of a color (Correct answer)
- The transparency of the color layer
Correct answer: The intensity or vividness of a color
Saturation measures how vivid or pure a color is; fully saturated colors appear rich and intense, while desaturated colors appear closer to gray.
Question 2: Why should icon designers generally avoid using highly saturated colors throughout an entire icon set?
- Saturated colors increase file size significantly
- They cause visual fatigue and make it harder to establish hierarchy (Correct answer)
- Modern operating systems do not support high saturation
- Saturated colors cannot be exported as SVG
Correct answer: They cause visual fatigue and make it harder to establish hierarchy
When all icons use high saturation equally, there is no visual hierarchy, causing eye fatigue and making it difficult for users to prioritize elements.
Question 3: What are complementary colors, and how are they used in icon design?
- Colors adjacent on the color wheel, used to create harmony
- Colors directly opposite each other on the color wheel, used to create high contrast (Correct answer)
- Colors from the same temperature family, used for cohesion
- Colors with identical saturation levels, used for consistency
Correct answer: Colors directly opposite each other on the color wheel, used to create high contrast
Complementary colors sit opposite each other on the color wheel (e.g., blue and orange) and create maximum contrast when placed together, useful for drawing attention.
Question 4: In the HSB color model, what does 'B' stand for?
- Blue
- Balance
- Brightness (Correct answer)
- Border
Correct answer: Brightness
HSB stands for Hue, Saturation, and Brightness; Brightness (also called Value) describes how light or dark a color is on a scale from 0% (black) to 100% (full color).
Question 5: What is the difference between a 'tint' and a 'shade' of a color?
- Tint adds black; shade adds white
- Tint adds white; shade adds black (Correct answer)
- Tint reduces saturation; shade increases saturation
- Tint warms a color; shade cools it
Correct answer: Tint adds white; shade adds black
A tint is created by adding white to a hue (making it lighter), while a shade is created by adding black (making it darker).
Question 6: How does warm versus cool color temperature affect the perception of icons in a UI?
- Warm colors recede visually; cool colors advance
- Warm colors tend to feel energetic or urgent; cool colors feel calm or trustworthy (Correct answer)
- Cool colors are used for warnings; warm colors indicate success
- Color temperature only affects photographic content, not flat icons
Correct answer: Warm colors tend to feel energetic or urgent; cool colors feel calm or trustworthy
Warm colors (reds, oranges, yellows) evoke energy, urgency, or excitement, while cool colors (blues, greens, purples) communicate calm, stability, and trust — both are leveraged intentionally in icon design.
Question 7: What is a split-complementary color scheme?
- Two hues that are adjacent on the color wheel
- A base color plus the two colors on either side of its direct complement (Correct answer)
- Three evenly spaced hues forming a triangle on the color wheel
- Any combination of warm and cool colors
Correct answer: A base color plus the two colors on either side of its direct complement
A split-complementary scheme uses a base color and the two colors flanking its complement, providing high contrast with more visual variety and less tension than a true complementary pair.
Icon Design Color Theory & Application in Icons 2
What does 'saturation' describe in a color's properties?