--- title: Where Color Gets Its Meaning | daily.dev description: Color in interfaces operates on two distinct layers: technical (how color is encoded as numbers) and cultural (what a color means to a viewer). The technical... canonical: https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Where Color Gets Its Meaning | daily.dev og:description: Color in interfaces operates on two distinct layers: technical (how color is encoded as numbers) and cultural (what a color means to a viewer). The technical... og:url: https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7 og:image: https://api.daily.dev/og/posts/uaHnBT8Q7.png og:image:alt: Where Color Gets Its Meaning og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Where Color Gets Its Meaning **[Medium](https://daily.dev/sources/medium_js)** · 13 min read · 0 upvotes · 0 comments ## Summary Color in interfaces operates on two distinct layers: technical (how color is encoded as numbers) and cultural (what a color means to a viewer). The technical layer covers color notations — RGB, HEX, HSL, HSB, and OKLCH — explaining what each represents and when to use them. OKLCH is highlighted as the most perceptually accurate model, now supported in all major browsers. The cultural layer examines how color meaning is learned, not innate: red signals error in Western UIs but wealth in Chinese stock apps. For red-branded products (YouTube, Netflix), the solution is separating brand tokens from semantic tokens so error states don't dissolve into brand identity. The post also covers cross-cultural color differences in East Asia around white and red, and argues that color meanings should be treated as hypotheses about a specific audience, localized like copy, and stored in tokens for easy remapping. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [A pragmatic guide to modern CSS colours - part two](https://daily.dev/posts/a-pragmatic-guide-to-modern-css-colours---part-two-xlpotvmhm) · Piccalilli · 20 upvotes · 1 comments - [Choosing colors \(for developers\)](https://daily.dev/posts/choosing-colors-for-developers--almguv7ft) · RUBYLAND · 7 upvotes · 4 comments - [Chris’ Corner: Colors](https://daily.dev/posts/chris-corner-colors-kfj1vfntx) · CodePen · 3 upvotes · 1 comments - [Modern CSS colors: oklch\(\) and color-mix\(\)](https://daily.dev/posts/modern-css-colors-oklch-and-color-mix--elb1blipu) · Flavio Copes · 22 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility), [#figma](https://daily.dev/tags/figma), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Where Color Gets Its Meaning","url":"https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7"},"datePublished":"2026-07-22T07:31:16.144Z","dateModified":"2026-07-22T07:31:41.555Z","description":"Color in interfaces operates on two distinct layers: technical (how color is encoded as numbers) and cultural (what a color means to a viewer). The technical...","image":"https://media.daily.dev/image/upload/s--CxzD6vbw--/f_auto/v1722860399/public/Placeholder%2005","thumbnailUrl":"https://media.daily.dev/image/upload/s--CxzD6vbw--/f_auto/v1722860399/public/Placeholder%2005","isAccessibleForFree":true,"articleSection":"Medium","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Medium","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/medium","url":"https://daily.dev/sources/medium_js"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/where-color-gets-its-meaning-uahnbt8q7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,accessibility,figma,design-systems","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Medium","item":"https://daily.dev/sources/medium_js"},{"@type":"ListItem","position":3,"name":"Where Color Gets Its Meaning"}]} ```