Color Psychology - Digital Interfaces
Color Lab
Each color triggers a physiological response before any conscious thought. Click a color to explore how it works in games and on the web.
Red
Urgency, danger, damage, loss aversion.
Open lab -Blue
Trust, calm, authority, security.
Open lab -Green
Safety, healing, success, go.
Open lab -Yellow
Attention, caution, wayfinding.
Open lab -Purple
Magic, luxury, creativity, rarity.
Open lab -01 - Red Lab
Red
Triggers fight-or-flight. Used for danger, urgency, and scarcity.
CLICK - TAKE DAMAGE
Game - Red
- Screen-edge red vignettes signal damage in FPS games (Battlefield, Halo, COD).
- Red activates the amygdala - the brain processes it as a threat signal before rational thought.
- Heart rate increases when the visual field is dominated by red.
- HP bars turn red near zero across virtually every game genre.
- Red critical hit numbers are used to signal high-value damage outputs to the player.
Web - Red
- Red countdown timers increase purchase conversion by exploiting loss aversion (Kahneman, 2011).
- "Sale" and "Out of stock" labels are almost universally red in e-commerce.
- Red error messages on forms are the global standard - broken input = red border.
- Red CTAs outperform green and blue in A/B tests on high-contrast light backgrounds.
- Red communicates urgency - the colour alone carries the message.
02 - Blue Lab
Blue
Reduces cortisol. Signals trust, security, and calm authority.
Game - Blue
- Mana / magic energy is blue in nearly every RPG - World of Warcraft, League of Legends, Diablo.
- Blue HUDs in strategy games (StarCraft, LoL) keep players in analytical mode rather than panic.
- Blue lighting in stealth games signals undetected / safe status.
- Rare-tier or legendary items in some games use blue loot text (varies by franchise).
- Water, sky, and cold environments are blue - players read it as distance or traversable space.
Web - Blue
- Facebook, Twitter, LinkedIn, PayPal, Stripe - blue dominates SaaS and fintech UI.
- Users rate blue interfaces as more trustworthy in eye-tracking studies.
- Blue primary action buttons show higher completion rates on high-stakes flows like payment.
- Blue focus rings on inputs (browser default) signal active/safe entry.
- Blue links are the oldest web convention - still the default in most browsers.
03 - Green Lab
Green
Permission, safety, and positive completion. The "go" signal across games and interfaces.
CLICK TO RESTORE HEALTH
Game - Green
- Health restoration is green in virtually every game - World of Warcraft, League of Legends, Genshin Impact.
- Green "safe zones" and extraction points appear in games like Escape from Tarkov.
- Quest completion markers frequently use green checkmarks.
- Minimap friendly units are typically shown in green, enemies in red.
Web - Green
- Green success toasts and checkmarks confirm completed actions (form submit, payment, upload).
- Green "active" and "online" indicator dots appear in Slack, Discord, Teams.
- "Go live" / "Publish" buttons are frequently green - signal to proceed.
- Positive graph trends and upward stats are styled green in dashboards and analytics tools.
- Accessibility-compliant green passes WCAG contrast ratios more reliably than yellow.
04 - Yellow Lab
Yellow
Peripheral attention without alarm. The yield signal - notice this, but don't panic.
YELLOW GUIDES WITHOUT BREAKING GAMEPLAY
Game - Yellow
- Quest markers, objective indicators, and loot highlights are yellow in GTA and various other games.
- Yellow draws peripheral vision effectively.
- Gold and collectibles are yellow - coins, stars, treasure chests.
- Interactable objects in many games use yellow outlines or glows.
Web - Yellow
- Warning toasts and banners use yellow/amber.
- Nielsen's severity scale maps yellow to "you should know about this" - not "stop everything".
- Yellow is used for cookie consent banners, maintenance notices, and non-critical system alerts.
- Input validation warnings (not yet errors) use yellow borders in many design systems.
- Yellow highlight on text (like browser Find function).
05 - Purple Lab
Purple
Magic, rarity, and luxury. Historically associated with royalty due to the cost of the dye.
PURPLE = MAGIC / ARCANE IN GAME DESIGN
Game - Purple
- Epic/Legendary rarity tier is purple in Diablo, Destiny, Borderlands..
- Arcane and void magic is purple across Warcraft, League of Legends, and Baldur's Gate.
- Poison and dark magic are sometimes purple where green is already used for standard poison.
- Purple portals and teleportation effects are common.
- Wraith, shadow, and undead enemies frequently use purple auras to signal supernatural threat.
- Unlimited projects
- Priority support
- Advanced analytics
Web - Purple
- Purple is used for premium, pro, and upgrade tiers - Twitch, GitHub, Figma, Notion.
- Historically, purple dye was more expensive than gold - the rarity association is pre-digital.
- Creative industries (art, design, beauty) use purple to signal creativity and originality.
- Purple "visited link" colour is a browser default - users have learned it means "already seen".
06 - Documentation
Showcase & Process
Layout, code architecture, design decisions, and iteration history.
Mode toggle
Demo area
Fact bullets
Image grid
Why this matters:
Easy Updates: Storing colors in :root variables means if you ever need to change a color, you only have to do it in one place.
Instant Theming: JavaScript simply updates the --accent variable when you switch pages, instantly changing the whole theme without the need for messy CSS classes.
Dark base. Near-black background gives each color maximum perceptual weight.
Bullet facts only. Fact panels use direct statements - no filler text.
Game + Web per colour. Shows the same psychological effect across two completely different contexts.
Image boxes. 4 slots per lab - 2 game, 2 web - to highlight usage of color.
Initial draft with light background, 8 labs, and long prose descriptions. Dropped - colour demos needed dark backgrounds for contrast, and text was too wordy.
Switched to dark theme. Removed Brown, Black, and Gray labs, focusing on 5 core colors (Red, Blue, Green, Yellow, Purple). Replaced prose with concise bullet facts.
Current - 5 labs, bullet-only content, 4 image slots per lab, and a full-width layout with the sidebar completely removed for better focus.
- -Elliot & Maier (2012) - Color psychology review
- -Kuppers (1973) - Color systems & perception
- -Nielsen (1993) - Severity scales in UI
- -Kahneman (2011) - Loss aversion & urgency
- -Norman (2013) - Emotional design principles