Naming Colors - CourtneyR.dev's 2nd Brain

Naming Colors ![rw-book-cover](https://img.youtube.com/vi/ZY7_1M11vMk/maxresdefault.jpg) 🔗 **Source:** [Naming Colors](https://www.youtube.com/watch?v=ZY7_1M11vMk) > [!note]+ Document Notes > tags: #design-systems #color-theory #naming-conventions > author: Pimbot > source: YouTube > reference: https://www.youtube.com/watch?v=ZY7_1M11vMk > date created: 2024-12-19 14:30 > > # 🏷️ Title: Naming colors >  ## 🧰 Action Inbox - [H1] Establish consistent naming rules for all colors in design system — 00:35 #design-systems - [H2] Implement compound color naming technique for hue variations — 01:42 #color-theory - [H3] Define lightness and saturation variation naming conventions — 02:15 #naming-conventions ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Pimbot Course](https://pimpot.app/courses) ## 📝 Summary - What happened: A design tutorial explaining systematic approaches to naming colors in design systems - Why it matters: Consistent color naming creates shared language between team members and prevents confusion in design discussions - Key stakeholders: Designers, developers, design system maintainers - Risks and tradeoffs: Without consistent naming, teams struggle with color communication and design handoffs become error-prone - Bottom line takeaway: Use compound naming techniques, consistent rules, and concise names to create an accessible color vocabulary ## 📖 Main Content This tutorial addresses the universal challenge of creating consistent color naming conventions in design systems. The presenter acknowledges that color perception is subjective and varies between individuals, including differences due to colorblindness and regional language variations (like US vs British English spellings). The core methodology revolves around three main principles: consistent naming rules across all colors, using the most concise names possible, and implementing compound color naming for hue variations. The compound naming technique borrowed from painting class uses a two-part structure where the primary hue (like "pink") comes second, and the closest adjacent hue (like "purple") comes first, creating names like "purple-pink." For design systems with multiple variations, the tutorial recommends adding descriptors for lightness (light/dark or lightest/lighter/light/dark/darker/darkest) and saturation (muted/vivid or soft/strong). When dealing with more than six lightness variations, numerical ramps become more practical than descriptive names. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/ZY7_1M11vMk?t=0) — [H1] Color naming challenges introduction - Key idea: Color naming is universally difficult due to perception differences and language variations - Evidence: "Creating a shared language around color is really hard" #### ⏱️ [00:15](https://youtu.be/ZY7_1M11vMk?t=15) — [H2] Perception variability factors - Key idea: Multiple factors make color communication subjective even among non-colorblind individuals - Evidence: "We all perceive color slightly differently" #### ⏱️ [00:35](https://youtu.be/ZY7_1M11vMk?t=35) — [H1] Consistency rule establishment - Key idea: Consistent naming rules must apply to all colors in the system - Evidence: "Use naming rules consistently for all your colors" #### ⏱️ [00:45](https://youtu.be/ZY7_1M11vMk?t=45) — [H2] Concise naming principle - Key idea: Avoid unnecessary complexity in color names when simple options suffice - Evidence: "If you only have blue, green, and red in your color palette, there's no need to get fancy" #### ⏱️ [01:15](https://youtu.be/ZY7_1M11vMk?t=75) — [H1] Compound color naming technique - Key idea: Use two-part naming where secondary hue comes first, primary hue comes second - Evidence: "The second part of the color name is the hue itself, like pink. The first part is the hue that is next closest" #### ⏱️ [01:42](https://youtu.be/ZY7_1M11vMk?t=102) — [H2] Hue variation examples - Key idea: Systematic application creates predictable names like purple-pink and orange-yellow - Evidence: "Purple, pink, orange, yellow, and green, blue" #### ⏱️ [02:00](https://youtu.be/ZY7_1M11vMk?t=120) — [H2] Multiple hue naming strategy - Key idea: Additional descriptors needed when multiple variations of same base hue exist - Evidence: "You'll probably want to add an additional variation to the name related to its lightness or saturation" #### ⏱️ [02:15](https://youtu.be/ZY7_1M11vMk?t=135) — [H3] Lightness variation naming - Key idea: Scale naming systems from simple light/dark to complex six-level hierarchies - Evidence: "It might be lightest, lighter, light, dark, darker, darkest" #### ⏱️ [02:30](https://youtu.be/ZY7_1M11vMk?t=150) — [H3] Numerical ramp threshold - Key idea: Switch to numbers when descriptive names become unwieldy - Evidence: "If you have more than six, then maybe it's time to think about using a ramp of numbers" #### ⏱️ [02:45](https://youtu.be/ZY7_1M11vMk?t=165) — [H3] Saturation descriptors - Key idea: Specific term pairs work best for describing saturation variations - Evidence: "Terms like muted and vivid or soft and strong" #### ⏱️ [03:00](https://youtu.be/ZY7_1M11vMk?t=180) — [H2] Off-color naming convention - Key idea: "Off" prefix indicates near-but-not-quite versions of absolute colors - Evidence: "Off black is a black that is slightly lighter, and off-white is a white that has a slightly saturated hue" #### ⏱️ [03:20](https://youtu.be/ZY7_1M11vMk?t=200) — [H1] Similarity complexity relationship - Key idea: More similar colors require more nuanced naming variations - Evidence: "The more similar your colors are to each other, the more likely you'll need variations on those names" #### ⏱️ [03:35](https://youtu.be/ZY7_1M11vMk?t=215) — [H1] Shared language benefits - Key idea: Consistent color naming prevents team confusion and improves design discussions - Evidence: "Giving colors names and using them consistently creates a shared language with your co-workers" ## 📚 References - [Pimbot Courses](https://pimpot.app/courses) ## 🗣️ Paraphrase - Color naming requires systematic approaches because human color perception varies significantly and subjective interpretations make communication difficult - Effective color naming follows three principles: consistent rules across all colors, concise naming without unnecessary complexity, and compound naming that places secondary hue first and primary hue second - Complex color systems need additional descriptors for lightness variations (light/dark scales) and saturation differences (muted/vivid), with numerical systems replacing descriptive names when more than six variations exist ## 📰 Newsletter Color naming might seem like a small detail, but it's the foundation of effective design system communication. This week's highlight comes from a practical tutorial on creating consistent color vocabularies that prevent the confusion we've all experienced with paint names like "Whispered Peach" and "Moonlit Sage." The key insight? Use compound naming borrowed from art class - secondary hue first, primary hue second. So that pinkish-purple becomes "purple-pink" and that yellowish-green becomes "yellow-green." Add lightness descriptors (light/dark) and saturation terms (muted/vivid) only when needed, and switch to numbers when you hit six or more variations. This systematic approach creates shared language between designers and developers, making handoffs smoother and design discussions more precise. Perfect for teams building or refining their design systems. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Design: Audit WordPress admin color schemes for naming consistency, create compound naming guidelines for new UI colors - Documentation: Document color naming conventions in design system guidelines, create examples for theme developers #### DevRel - Education: Create workshop materials on design system color naming, develop tutorials for theme developers on consistent color vocabularies ## 🧪 Hypotheses - Compound color naming reduces miscommunication between designers and developers by 40% compared to arbitrary naming systems - Teams using systematic color naming complete design handoffs 25% faster than teams with inconsistent naming conventions - Color naming systems with more than 6 lightness variations show decreased adoption rates compared to numerical systems - Design systems with consistent color naming show higher developer satisfaction scores in usability surveys ### 📊 Methodology - A/B testing compound vs. arbitrary naming systems in design handoff scenarios measuring error rates and completion time - Survey analysis of design teams measuring communication effectiveness before and after implementing systematic naming - Usability testing of design systems comparing descriptive vs. numerical naming for complex color variations ### ❓ Questions - How do different cultural color associations affect the adoption of systematic naming conventions in global design teams? - What's the optimal balance between descriptive precision and naming simplicity for developer adoption? - How do accessibility tools interact with different color naming conventions in design systems? ### 🔮 Future Research - Cross-cultural studies on color naming effectiveness in international design teams - Integration patterns between color naming systems and accessibility testing tools - Automated color naming systems using perceptual color distance algorithms ### 💡 Implications - Practice: Design teams need documented color naming conventions before scaling design systems - Policy: Style guides should mandate consistent color naming across all design deliverables - Education: Design education should include systematic color naming as part of design system curricula - Tooling: Design tools could implement automated compound naming suggestions based on color relationships ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade #### 👀 Visual learners - Present: Color swatches and naming examples throughout video - Improve: Color wheel diagram showing compound naming relationships, before/after naming comparison charts #### 🔊 Aural learners - Present: Clear verbal explanations with pronunciation of color names - Improve: Audio mnemonics for remembering compound naming rules #### 🗣️ Verbal learners - Present: Clear definitions of lightness, saturation, and hue terminology - Improve: Analogies comparing color naming to other categorization systems #### 🧩 Kinesthetic learners - Present: Step-by-step naming process demonstration - Improve: Interactive color naming exercises, hands-on palette creation workshops #### 🧠 Logical learners - Present: Systematic rules and decision trees for naming variations - Improve: Flowcharts for naming decisions, comparison tables of naming approaches #### 🧑‍🤝‍🧑 Social learners - Present: Discussion of team communication benefits - Improve: Collaborative naming workshops, peer review exercises for color systems #### 🧘‍♀️ Solitary learners - Present: Self-contained tutorial format - Improve: Self-assessment checklists, personal color naming practice exercises #### 🌿 Naturalistic learners - Present: Reference to natural color relationships and paint class experience - Improve: Nature-based color examples, seasonal color naming patterns ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear verbal descriptions of color relationships - Improve: Alternative text for color examples, semantic markup for color lists #### Contrast and readability - Present: Clear visual contrast in color examples - Improve: High contrast mode compatibility, colorblind-friendly examples #### Cultural breadth - Present: Acknowledgment of language variations (US vs British English) - Improve: Examples from multiple cultural color naming traditions #### Inclusive language - Present: Plain language explanations without jargon - Improve: Alternatives to vision-dependent descriptions ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Strong logical progression from color perception challenges to systematic solutions - Inductive strength: Good use of specific examples (purple-pink, off-white) to support general principles - Analogical strength: Effective analogy to childhood painting class for compound naming technique #### Fallacies - False dichotomy: Implies only systematic vs. arbitrary naming without discussing hybrid approaches - Appeal to authority: References painting class without explaining why this approach is optimal #### Tone of voice - Overall tone: Practical and instructional, using personal anecdotes ("when I was little") to make concepts approachable while maintaining professional credibility ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attack patterns present - Reverse victim/offender: No reversal patterns present - Emotional cues and rhetoric: Positive, instructional tone focused on practical problem-solving ## 🎯 Conclusion Systematic color naming transforms subjective color discussions into precise communication tools. The compound naming technique, combined with consistent rules for lightness and saturation variations, creates shared vocabulary that improves design team collaboration and reduces handoff errors. Teams should implement these naming conventions early in their design system development to maximize adoption and effectiveness. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad ### [H1] Compound color naming improves team communication > [!quote] [Naming colors](https://www.youtube.com/watch?v=ZY7_1M11vMk) by [[Pimbot]] via [[YouTube]]. Published [MISSING]. Accessed 2024-12-19. > "Giving colors names and using them consistently creates a shared language with your co-workers." Primary evidence for systematic naming benefits in design teams. [view highlight](https://youtu.be/ZY7_1M11vMk?t=215#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] Numerical systems scale better than descriptive naming > [!quote] [Naming colors](https://www.youtube.com/watch?v=ZY7_1M11vMk) > "If you have more than six, then maybe it's time to think about using a ramp of numbers instead of names." Threshold principle for complex color variation systems. [view highlight](https://youtu.be/ZY7_1M11vMk?t=150#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) #### [Z1] Color perception varies between individuals - Universal challenge affecting all design communication - Referenced at timestamp 00:15 - Links: [[Design-Systems]] [[Accessibility]] #### [Z2] Compound naming uses secondary-primary hue structure - Technique from art education applied to design systems - Referenced at timestamp 01:15 - Links: [[Naming-Conventions]] [[Color-Theory]] --- ### ✏️ Fleeting Queue - [F1] Research cultural color naming conventions for global teams — video discussion #fleeting #inbox - [F2] Create color naming workshop for design team — practical application #fleeting #inbox - [F3] Audit current color names against compound naming principles — system improvement #fleeting #inbox --- ## Full Transcript [00:04] Let's take a quick diversion into [00:06] discussing color names because let's [00:09] face it, creating a shared language [00:11] around color is really hard. And that's [00:14] not just because US English and British [00:17] English have different spellings for [00:19] gray. Even if we're not colorblind, we [00:22] all perceive color slightly differently. [00:25] And if you talk to many designers, it [00:27] can be a surprisingly subjective topic. [00:29] When we're decorating a room, haven't we [00:31] all been baffled by paint color names? [00:34] Here are a few tips that I use to make [00:37] naming colors consistent, easy to [00:39] remember, and accessible. One, use [00:42] naming rules consistently for all your [00:44] colors. Colors only become easy to find [00:47] if you name them consistently. Two, use [00:51] the most concise name possible. If you [00:54] only have blue, green, and red in your [00:56] color palette, there's no need to get [00:58] fancy with names like dark blue, muted [01:01] yellow, green, or deep red. For hue [01:04] variations, use the compound color name [01:07] technique that I learned in painting [01:08] class when I was little. The second part [01:11] of the color name is the hue itself, [01:13] like pink. The first part of the color [01:16] name is the hue that is next closest, [01:18] like purple. So this is purple, pink, [01:22] orange, yellow, and green, blue. If you [01:25] have multiple hues of the same color, [01:27] you'll probably want to add an [01:29] additional variation to the name related [01:32] to its lightness or its saturation. [01:35] For lightness variations, it depends on [01:37] how many variations you have. It might [01:39] be light and dark. It might be lightest, [01:42] lighter, light, dark, darker, darkest. [01:45] If you have more than six, then maybe [01:47] it's time to think about using a ramp of [01:50] numbers instead of names. And if you get [01:53] into variations on saturation, then you [01:56] might want to use terms like muted and [01:58] vivid or soft and strong. When it comes [02:01] to black and white, we have another [02:03] variation common in UI design that [02:06] doesn't fit all colors, off. Off [02:09] describes a shade that is not quite [02:10] black and not quite right. Off black is [02:13] a black that is slightly lighter, and [02:16] off-white is a white that has a slightly [02:19] saturated hue. The more similar your [02:21] colors are to each other, the more [02:23] likely you'll need variations on those [02:26] names. Giving colors names and using [02:29] them consistently creates a shared [02:31] language with your co-workers, and [02:33] importantly, it can prevent confusion in [02:36] your design discussions. Join us at [02:39] pimpot.app/courses. app/courses.  📄 **Full text:** ![[Full Document Contents/Articles/Naming Colors|Naming Colors, YouTube]] ## Highlights - all been baffled by paint color names? Here are a few tips that I use to make naming colors consistent, easy to remember, and accessible. One, use naming rules consistently for all your colors. Colors only become easy to find if you name them consistently. Two, use the most concise name possible. If you only have blue, green, and red in your color palette, there's no need to get fancy with names like dark blue, muted ([View Highlight](https://read.readwise.io/read/01kmzkmjw1feex1v9ssrqx3cv0)) - Tags: 👻 ai highlighted