Color Semantics & Psychology: Research Summary

Research conducted for a system that assigns colors to directories/repos based on their purpose. This summary covers color psychology, semantic color systems, categorical perception, perceptual color spaces, developer-tool color usage, color coding for organization, and accessibility.

1. Color Psychology in UI Design

Evidence-based color associations

Color psychology research shows consistent (though context-dependent) associations between hues and emotional/functional meanings. Key findings:

Color	Common associations in UI	Evidence basis
Red	Danger, stop, error, urgency, attention	Strong cross-cultural evidence; red is the first color term acquired after black/white in Berlin & Kay’s hierarchy. Mehta & Zhu (2009, Science) found red induces avoidance motivation and enhances attention to detail.
Green	Success, go, positive, growth, safe	Widely replicated in UI contexts (success states, confirmations). Green/yellow are stage III-IV in Berlin & Kay, suggesting deep cognitive rooting.
Blue	Trust, calm, stability, approach motivation	Mehta & Zhu (2009) found blue induces approach motivation and enhances creative tasks. Blue is the most universally preferred color across cultures.
Yellow	Caution, warning, attention-grabbing	Used for warnings in virtually all design systems. High luminance makes it attention-getting but low contrast on light backgrounds limits text use.
Orange	Energy, enthusiasm, alert (between yellow and red)	Often used for secondary warnings or calls-to-action. Less universally “basic” than the above.
Purple	Creativity, luxury, distinctiveness	Stage VII color in Berlin & Kay; associated with uniqueness and premium quality.

Important caveats from the research

1. Associations are context-dependent, not absolute. Red means “danger” in a button but “love” in a Valentine’s card. A 2018 cross-cultural survey (Mohr et al., Benjamins) found color-emotion associations are “heterogeneous” partly because they relate to different contexts.

2. Mehta & Zhu (2009) replication issues. Their finding that red enhances detail-oriented tasks and blue enhances creativity has had mixed replication success (Steele 2014 failed to replicate the anagram effect). The directional effect may be real but smaller than originally reported, and modulated by personal color preferences (Frontiers in Psychology, 2016).

3. Universal patterns do exist. A 2023 study (Jonauskaite et al., “Universal Patterns in Color-Emotion Associations”) found that across 30 countries, color-emotion associations showed significant universality, particularly for red-anger/excitement and blue-calm/sadness.

Application to directory/repo color assignment

• Reserve red for dangerous/critical-path repos (production deployments, infra).

• Green for stable, well-tested, or “go” repos.

• Blue for trusted core libraries or calm utility repos.

• Yellow/amber for repos under active development or with known issues.

• Purple for experimental or creative projects.

• Do NOT rely on color alone for meaning; pair with a label or icon.

2. Semantic Color Systems in Design Systems

How major design systems organize colors into semantic roles

Tailwind CSS uses a raw color scale approach (not semantic by default). Colors are named by hue and intensity (e.g., blue-500, red-700). Semantic usage is left to the developer. This provides flexibility but requires discipline to maintain consistency. Tailwind’s philosophy: the framework provides the palette; the app defines semantics via composition.

Radix UI Colors uses a functional/numbered scale approach. Each color has 12 steps with fixed semantic roles:

• Steps 1-2: App/dark backgrounds

• Steps 3-4: Raised/element backgrounds

• Steps 5-6: Hover/active borders

• Steps 7-8: Low-contrast text/solid backgrounds

• Steps 9: The “accent” / solid button color

• Steps 10-12: High-contrast text and borders

This is the most rigorously engineered semantic system: every step has a defined role, and foreground/background pairs are pre-validated for contrast.

Material Design (Google) defines semantic roles: primary, onPrimary, secondary, onSecondary, error, onError, surface, onSurface, background, onBackground. Material 3 (Material You) adds dynamic color theming where the system derives a palette from a seed color, generating tonal palettes mapped to semantic roles.

Apple HIG uses system semantic colors that adapt to light/dark mode: label, secondaryLabel, tertiaryLabel, quaternaryLabel, systemBlue, systemRed, systemGreen, systemOrange, systemYellow, systemPurple, systemPink, systemTeal, systemIndigo, separator, opaqueSeparator, link. Apple emphasizes Clarity, Deference, and Depth: colors should be clear and functional, defer to content, and convey hierarchy. Semantic colors automatically adapt between light and dark appearances.

Common semantic role pattern

Across all systems, the following roles recur:

• Primary / Accent: The main brand/action color

• Secondary / Neutral: Supporting, non-focal elements

• Success / Positive: Green-family

• Warning / Caution: Yellow/amber-family

• Error / Danger / Negative: Red-family

• Info: Blue-family

• Surface / Background: Layered backgrounds for depth

• Foreground / Text: Text with varying emphasis levels

Key principle: Design tokens

The most effective approach is token-based semantic naming (Imperavi, UXPin). Colors are named by their role, not their appearance: primary/bg-accent, error/fg, surface/border-subtle. This decouples meaning from specific color values, enabling theming and dark mode without rewriting components.

Application to directory/repo color assignment

• Define semantic roles for repo categories (e.g., infra, library, app, experiment, deprecated) and map each to a hue family.

• Use a token layer: the system should store “this repo is category: infra” and resolve infra to a color at render time, so themes can remap colors without touching data.

• Follow Radix’s insight: maintain consistent lightness/chroma across all category colors so they feel like a cohesive set, not random hues.

3. Color Grouping & Categorical Color Perception

Berlin & Kay’s Basic Color Terms (1969)

Brent Berlin and Paul Kay’s landmark study found that basic color terms across languages follow a predictable evolutionary sequence:

• Stage I: Black (dark/cool) and white (light/warm)

• Stage II: + Red

• Stage III: + Green OR yellow

• Stage IV: + Both green and yellow

• Stage V: + Blue

• Stage VI: + Brown

• Stage VII: + Purple, pink, orange, or gray

English has 11 basic color terms (the maximum). The key insight: colors are not acquired randomly. If a language has a term for blue, it necessarily has terms for all earlier stages. This suggests a universal, biologically grounded hierarchy of color salience.

Categorical perception

Research on categorical color perception (CP) shows that humans discriminate colors between categories faster and more accurately than colors within a category, even when the physical (wavelength) distance is identical. Key findings:

• Infants show categorical perception before language acquisition (PNAS, 2016; Franklin et al.), suggesting a biological basis, not purely linguistic.

• Language modulates categories: Learning color labels sharpens category boundaries in toddlers (Journal of Experimental Child Psychology, 2009).

• CP is lateralized to the right hemisphere in adults (PNAS, 2008), with the left hemisphere showing language-mediated effects.

Implications for color system design

1. Use the 11 basic color categories as anchors. These are the most cognitively salient and universally recognized. A system using red, orange, yellow, green, blue, purple, pink, brown, gray, black, white will be immediately intuitive.

2. Maximize between-category distance. Colors from different basic categories (e.g., red vs. blue) are easier to distinguish than colors within the same category (e.g., two reds). For a category-coloring system, prefer distinct hue families over shade variations.

3. Limit the number of categories. Berlin & Kay show that even the most color-rich languages settle at ~11 basic terms. This aligns with cognitive load research (see Section on optimal numbers below).

Application to directory/repo color assignment

• Map repo categories to basic color categories (red, orange, yellow, green, teal, blue, indigo, purple, pink, gray).

• If more than ~11 categories are needed, use a secondary visual dimension (icon, pattern, label) rather than subdividing hues into near-indistinguishable shades.

• Prefer hue rotation (jumping between basic color families) over fine hue gradients for maximum discriminability.

4. Perceptual Color Organization (OKLCH)

What OKLCH is

OKLCH is a perceptually uniform color space developed by Bjorn Ottosson (2020), adopted in CSS Color Module Level 4. It represents colors as:

• L: Lightness (0-1, perceptual, not relative luminance)

• C: Chroma (colorfulness, 0 to ~0.4)

• H: Hue (0-360 degrees)

Why it matters for color system design

1. Perceptual uniformity: Equal numerical changes in OKLCH produce equal perceived changes. HSL and RGB do NOT have this property (e.g., HSL’s “50% lightness” yellow is perceptually much lighter than “50% lightness” blue). This means colors generated by evenly spacing hues in OKLCH at constant L and C will look equally bright and equally saturated.

2. Consistent lightness across hues: You can generate a palette where all colors have the same perceived lightness (e.g., oklch(0.7 0.15 <hue>)), producing a set that feels coherent and balanced. This is critical for a directory-coloring system: all category colors should feel equally “prominent.”

3. Contrast prediction: Because L is perceptual, you can estimate WCAG contrast more reliably than with HSL. Colors at the same L will have similar contrast against a given background.

4. Wide gamut support: OKLCH can represent P3 / Display gamut colors, falling back to sRGB gracefully via color-gamut media queries.

Practical guidance from practitioners

• Evil Martians (2025): “OKLCH solves the problem where HSL colors with the same S and L look wildly different in perceived brightness.” They recommend OKLCH as the default for new CSS.

• oklch.net / oklch.fyi: Tools for generating perceptually uniform palettes by holding L and C constant and varying H.

• ColorBox (OKLCH mode): Allows customizable curves for hue, saturation, and luminosity to generate accessible palettes.

Application to directory/repo color assignment

• Generate category colors in OKLCH: oklch(L C hue) with constant L and C, varying hue. This guarantees all directory colors look equally vivid and distinguishable.

• Pick L based on context: For icon/badge colors on a dark terminal background, use higher L (e.g., 0.65-0.75). For text, ensure contrast against background.

• Vary C for emphasis: Primary categories can have higher chroma (more vivid); secondary/deprecated categories can have lower chroma (more muted) to convey reduced importance.

• Hue spacing: For N categories, space hues at 360/N degree intervals in OKLCH. For 8 categories: hues at 0, 45, 90, 135, 180, 225, 270, 315 degrees.

5. Color in Developer Tools (IDEs)

VS Code

VS Code uses a two-layer color system:

1. TextMate grammar scopes (syntactic): Token types like keyword, string, comment, function are mapped to colors via theme JSON.

2. Semantic tokens (LSP-based): More precise token types like variable.readwrite, property.static, function.declaration allow finer-grained coloring based on actual language semantics.

VS Code’s theme color IDs (workbench colors) number in the hundreds, covering: editor backgrounds, gutter, minimap, status bar, activity bar, sidebar, terminal ANSI colors, list items (active/inactive/hover), and more. The status bar changes color based on mode (blue=normal, orange=debug, purple=extension development).

File tree icons: VS Code’s default file icon theme (Seti) uses color to distinguish file types: JS files get yellow, JSON gets orange, CSS gets blue, Markdown gets blue-gray, images get pink/purple, etc. Material Icon Theme extends this with more colors.

Sublime Text

Sublime uses color schemes (.sublime-color-scheme JSON) with scope-based coloring similar to TextMate. Scopes map to color variables. The sidebar and file tree can be colored via theme settings, but default Sublime is more minimalist than VS Code.

JetBrains (IntelliJ, PyCharm, etc.)

JetBrains uses semantic highlighting where each identifier gets a consistent color based on its declaration, helping distinguish variables with the same name in different scopes. The Project View (file tree) can be configured to color files by type, status (modified=blue, added=green, ignored=gray in VCS), or custom rules. Semantic highlighting can be toggled: each variable/parameter gets a unique hue derived from its name hash, aiding navigation.

Key patterns from IDE color usage

1. Color = identity + state: Files are colored by type (identity) AND by VCS status (state). These are orthogonal dimensions.

2. Semantic over syntactic: The trend is moving from grammar-based (syntactic) to LSP-based (semantic) coloring for more meaningful distinctions.

3. Consistency is key: The same identifier always gets the same color within a session, aiding recognition.

4. Status bar as mode indicator: A single color change on a persistent UI element signals a mode shift.

5. Name-based hashing for uniqueness: JetBrains’ approach of hashing names to colors ensures stable, distinguishable coloring without a central registry.

Application to directory/repo color assignment

• Color by identity (purpose/category): The primary dimension should be the repo’s semantic category (infra, app, library, etc.).

• Consider a secondary state dimension: Modified/uncommitted repos could get a visual indicator (dot, border) in a state color (e.g., amber for dirty, green for clean).

• Stable hashing fallback: For repos without a defined category, derive a color from a hash of the repo name so it’s stable across sessions. JetBrains proves this pattern works.

• Mode-aware: If the tool has modes (e.g., “deploy view” vs. “browse view”), consider contextual color emphasis.

6. Color Coding for Organization & Navigation

Research on color-coded information navigation

1. Folder color coding in physical filing: Color-coded filing systems are a well-established practice in records management. Color provides a spatial-visual index that allows rapid scanning of large collections. The principle: color creates “visual chunks” that the eye can locate faster than reading text labels. ChromaLabel and Southwest Solutions document productivity gains of 200-300% in filing retrieval with color coding.

2. Digital folder color coding: macOS, Windows, and tools like Folder Marker allow users to assign colors to folders. User studies (Folder Marker blog, organizingphotos.net) show users naturally develop color schemes: red=urgent, green=complete, yellow=in-progress, blue=reference, etc. This is an emergent convention.

3. Information foraging theory (Pirolli & Card): Humans navigate information spaces by following “scent” cues. Color is a strong scent cue because it’s pre-attentively processed (detected before conscious attention, within ~200ms). Color-coded categories allow users to “forage” through directories faster.

4. Pre-attentive processing: Research in visual perception (Treisman & Gelade, 1980; Wolfe’s Guided Search) shows color is processed pre-attentively, meaning colored targets “pop out” from displays regardless of the number of distractors. This makes color the single most effective visual dimension for rapid visual search in a list.

5. Tag colors in note/knowledge apps: Notion, Obsidian, Google Keep, and Trello all allow colored tags/folders. User convention: users assign warm colors (red, orange, yellow) to high-priority/active items and cool colors (blue, green, purple) to stable/reference items. This mirrors the temperature-arousal dimension in color psychology.

Best practices for color-coded organization

• Limit to 5-8 color categories for primary organization (see optimal number research below).

• Use color + label, never color alone: Color should augment, not replace, text labels (accessibility + cognitive offloading).

• Maintain consistent mapping: Once a color is assigned to a category, never reassign it to a different category (violates learned associations).

• Use saturation/lightness for hierarchy: Within a color family, more saturated = more important/active; desaturated = archived/reference.

• Warm colors for action items, cool colors for reference: This leverages deep-seated color-temperature associations.

Application to directory/repo color assignment

• Color repos by purpose category (the primary organizational axis).

• Use warm colors (red, orange, yellow) for repos requiring attention/action (production, active dev, failing CI).

• Use cool colors (blue, green, teal) for stable/reference repos (libraries, docs, archived).

• Keep color assignments stable and persistent so users build spatial memory (“the blue repos are always on the left”).

• Consider lightness for staleness: faded/desaturated versions for repos with no recent commits.

7. Accessibility Considerations

WCAG contrast requirements

WCAG 2.2 (current standard) defines contrast ratios:

Level	Normal text (<18pt / <14pt bold)	Large text (>=18pt / >=14pt bold)	UI components & graphics
AA (minimum)	4.5:1	3.0:1	3.0:1
AAA (enhanced)	7.0:1	4.5:1	4.5:1

• Color contrast is the #1 WCAG violation on the web (ratedwithai.com, 2026). Most failures are insufficient text-to-background contrast.

• For non-text elements (icons, borders, focus indicators), the minimum is 3:1 against adjacent colors.

Color blindness considerations

Approximately 8% of men and 0.5% of women have some form of color vision deficiency (CVD):

Type	Prevalence	Confusion
Deuteranomaly (most common)	~5% of men	Green-red confusion
Protanomaly	~1% of men	Green-red confusion
Tritanomaly	~0.01%	Blue-yellow confusion
Achromatopsia	~0.003%	No color perception

Key accessibility principles for color-coded systems

1. Never use color as the sole indicator (WCAG 1.4.1). Always pair color with text, icon, or pattern. This is a Level A (mandatory) requirement.

2. ColorBrewer finding: In Cynthia Brewer’s ColorBrewer research, no palette with more than 4 discrete categories was fully distinguishable by color-blind test participants. This is a critical constraint: if you need >4 categories that must be color-blind-distinguishable, you need additional visual encoding.

3. Avoid red-green pairs as the sole differentiator (the most common CVD type conflates these). Blue-yellow and blue-orange pairs are safer.

4. Test with simulators: Tools like Coblis, Stark, and devpalettes.com simulate how UIs appear to users with various CVDs. WCAG also requires testing.

5. Contrast for color swatches/badges: If directory colors appear as small badges or dots, ensure they have at least 3:1 contrast against the background. On a dark terminal theme, this means avoiding very dark colors; on a light theme, avoiding very light colors.

Strategies for accessible category coloring

• Pair color with icon/label: Each category gets both a color and a short text label or icon glyph.

• Use lightness variation, not just hue: Two categories that might confuse a color-blind user (e.g., red and green) can be made distinguishable by giving them very different lightness values (dark red vs. light green), which survives even in deuteranopia.

• Limit to 4-5 hue-distinct categories if relying on color alone for distinction; beyond that, add secondary encoding.

• Provide a text-only/monochrome fallback: A high-contrast mode that replaces colors with patterns, icons, or text labels.

Application to directory/repo color assignment

• Never rely on color alone; always show the category name or icon alongside the color indicator.

• Design the palette to be color-blind safe: verify with a simulator that all category colors remain distinguishable in deuteranopia (the most common CVD).

• Use OKLCH to ensure distinct lightness values between potentially confusable hue pairs (red/green).

• Provide a --no-color or accessibility mode that uses icons/text instead of color.

• Ensure color indicators meet 3:1 contrast against terminal/editor backgrounds in both light and dark themes.

Optimal Number of Color Categories for Human Discrimination

Research converges on a small number

Multiple lines of evidence point to a practical limit of 5-12 distinct color categories for reliable human discrimination:

1. Miller’s 7 +/- 2 (1956): Working memory holds ~7 chunks. While this is about memory, not perception, it suggests that a color legend with more than ~7 entries overloads the user’s ability to hold the mapping in mind. Note: Miller’s number has been criticized (Mr. Joe Leech, 2020) as being about “chunks” not raw items, and later research (Cowan, 2001) suggests the real limit may be closer to 4 +/- 1. Either way, fewer is better.

2. ColorBrewer / Cynthia Brewer’s research: For map-reading tasks, palettes were tested for distinguishability. No palette with more than 4 categories was fully color-blind-safe. For non-color-blind users, palettes of up to ~12 qualitative categories exist but with decreasing reliability.

3. Maureen Stone’s “optimal palette”: 8 colors, specifically tuned for contrast, differentiation, perceptibility, and color blindness. 8 is described as a “practical number” for distinct data series.

4. Berlin & Kay’s 11 basic color terms: Even the most color-rich languages settle at ~11 basic terms, suggesting this is near the cognitive ceiling for natural color categorization.

5. Pre-attentive pop-out: Color pop-out works for a single target color among distractors, but with multiple target colors, performance degrades. Research suggests ~4-6 simultaneous color categories can be tracked pre-attentively.

6. UX Stack Exchange consensus: Practitioners converge on 6-8 as the sweet spot for categorical color coding, with 12 as an upper limit beyond which discrimination errors rise sharply.

Recommended approach for a directory/repo color system

Number of categories	Recommendation
1-4	Use distinct hue families (red, blue, green, amber). Fully color-blind safe.
5-8	Sweet spot. Use 8 hues at 45-degree spacing in OKLCH. Add lightness variation for color-blind safety. Pair with labels.
9-12	Approaching the limit. Must use OKLCH for perceptual spacing. Color-blind safety requires lightness variation + secondary encoding.
>12	Do NOT use color alone. Use a hash-based color (stable per-name) + text label + icon. Color becomes a recognition aid, not a category code.

For a directory/repo purpose-coloring system, design for 5-8 primary categories with the option to fall back to name-hashed colors for repos that don’t fit a primary category.

Summary: Key Principles for Directory/Repo Color Assignment

1. Map semantic categories to basic color families (red=danger/infra, green=stable/safe, blue=core/trusted, amber=active-dev, purple=experiment, etc.) following universal color associations.

2. Use OKLCH for palette generation: constant L and C, hue-rotated, ensures perceptual uniformity and equal visual weight.

3. Limit primary categories to 5-8; beyond that, fall back to stable name-hashed colors.

4. Never use color alone: always pair with a label, icon, or text. This is both an accessibility requirement (WCAG 1.4.1) and a cognitive aid.

5. Design for color blindness: verify the palette in deuteranopia simulation; use lightness variation to separate red-green pairs; keep color-blind-safe categories to ~4 if color is the sole differentiator.

6. Use a token/semantic layer: store the category, not the color. Resolve category to color at render time for theme flexibility.

7. Keep color assignments stable: users build spatial memory. Never reassign a color to a different category.

8. Use warm colors for action-required, cool colors for reference: leverages deep-seated color-temperature associations.

9. Vary saturation/lightness for emphasis: vivid=active/important, muted=archived/reference.

10. Ensure contrast: color indicators must meet 3:1 contrast against backgrounds in both light and dark themes.

Sources

• Berlin, B. & Kay, P. (1969). Basic Color Terms: Their Universality and Evolution. UC Press.

• Mehta, R. & Zhu, R.J. (2009). “Blue or Red? Exploring the Effect of Color on Cognitive Task Performances.” Science, 323, 1226-1229.

• Jonauskaite et al. (2023). “Universal Patterns in Color-Emotion Associations.” (via Academia.edu)

• Mohr et al. (2018). “Time for a cross-cultural survey on emotion associations with colour.” Benjamins.

• Brewer, C. ColorBrewer (colorbrewer2.org) and associated publications.

• Stone, M. “Optimal Colors for Graphs” (via ksrowell.com).

• Miller, G.A. (1956). “The Magical Number Seven, Plus or Minus Two.” Psychological Review.

• Cowan, N. (2001). “The magical number 4 in short-term memory.” Behavioral and Brain Sciences.

• Franklin et al. (2008-2016). Categorical color perception in infants. PNAS.

• Ottosson, B. (2020). OKLCH color space. Adopted in CSS Color Module Level 4.

• Evil Martians (2025). “OKLCH in CSS: why we moved from RGB and HSL.”

• Imperavi (2024). “Designing semantic colors for your system.”

• Radix UI Colors (radix-ui.com/colors).

• VS Code Semantic Highlight Guide (code.visualstudio.com/api).

• WCAG 2.2 (w3.org/TR/WCAG22/).

• Section508.gov. “Making Color Usage Accessible.”

• Treisman, A. & Gelade, G. (1980). Feature-integration theory of attention. Cognitive Psychology.

• Wolfe, J. Guided Search theory.

• Pirolli, P. & Card, S. (1995). “Information foraging as a foundation for code navigation.” ACM.