--- title: Choosing colors (for developers) | daily.dev description: A practical technique for generating cohesive color palettes using CSS OKLCH color space, deriving brand, neutral, and accent scales from a single hue variable... canonical: https://daily.dev/posts/choosing-colors-for-developers--almguv7ft twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Choosing colors (for developers) | daily.dev og:description: A practical technique for generating cohesive color palettes using CSS OKLCH color space, deriving brand, neutral, and accent scales from a single hue variable... og:url: https://daily.dev/posts/choosing-colors-for-developers--almguv7ft og:image: https://api.daily.dev/og/posts/AlMgUv7FT.png og:image:alt: Choosing colors (for developers) 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. # Choosing colors (for developers) **[RUBYLAND](https://daily.dev/sources/rubyla)** · 7 min read · 7 upvotes · 4 comments ## Summary A practical technique for generating cohesive color palettes using CSS OKLCH color space, deriving brand, neutral, and accent scales from a single hue variable instead of managing eleven hex values by hand. Covers how to choose a brand hue based on industry conventions, how to alias neutral colors to a --gray variable for easy theme swaps, and how to use color theory math (analogous, complementary, split-complementary, triadic) via CSS calc() to generate accent palettes. Includes full copy-pasteable CSS variable setups and promotes the author's Rails UI component library. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I generate a full color palette from a single OKLCH hue value in CSS? Define a CSS custom property for the hue, then build each shade (50 through 950) as oklch() values that keep lightness and chroma fixed per step while referencing the hue variable, for example --brand-500: oklch(.6 .18 var(--brand-hue)). Changing the hue variable updates every shade at once since lightness and chroma never shift, keeping the palette harmonious. _daily.dev surfaces CSS color techniques like this for developers refining their design system._ ### How do I create a complementary accent color palette using OKLCH in CSS? Add 180 degrees to the brand hue using calc(), for example --accent-500: oklch(.6 .18 calc(var(--brand-hue) + 180)). This produces the simplest high-contrast color scheme, complementary, good for CTAs and accents. Other options include analogous (±30 degrees), split complementary (±150 degrees), and triadic (+120 and +240 degrees) for different contrast levels. _Developers comparing color scheme approaches can find CSS techniques like this on daily.dev._ ### How do I build a neutral gray palette that matches my brand color in CSS? Reuse the brand hue but drop the chroma close to zero, for example --gray-500: oklch(.64 .01 var(--brand-hue)). This produces grays that read as neutral but carry a faint undertone of the brand color, making backgrounds and borders feel cohesive with the rest of the palette rather than matchy-matchy. _daily.dev helps developers track practical CSS color and theming techniques like this one._ ## Community discussion Top comments from developers on daily.dev. **@jataki** · 1 upvotes > OKLCH is truly overpowered. We have been inferring states on any hierarchy with simple math. Game changer **@devmount** · 0 upvotes > This is neat, especially for apps where users can define a primary color. **@agustinbarrientos** · 0 upvotes > Thanks for keeping the OKLCH explanation practical. The white-label theme example ties the color math to a real design decision. ## 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 - [Dynamic Colour Schemes With Modern CSS](https://daily.dev/posts/dynamic-colour-schemes-with-modern-css-unbd3csjb) · Always Twisted · 5 upvotes · 0 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 - [Links to CSS colour palettes](https://daily.dev/posts/links-to-css-colour-palettes-9ttdrn8lj) · Julia Evans · 6 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/choosing-colors-for-developers--almguv7ft) ```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":"Choosing colors (for developers)","url":"https://daily.dev/posts/choosing-colors-for-developers--almguv7ft","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/choosing-colors-for-developers--almguv7ft"},"datePublished":"2026-08-13T11:57:03.450Z","dateModified":"2026-09-14T09:01:17.068Z","description":"A practical technique for generating cohesive color palettes using CSS OKLCH color space, deriving brand, neutral, and accent scales from a single hue variable...","image":"https://media.daily.dev/image/upload/s--foaA6JGU--/f_auto/v1722860399/public/Placeholder%2004","thumbnailUrl":"https://media.daily.dev/image/upload/s--foaA6JGU--/f_auto/v1722860399/public/Placeholder%2004","isAccessibleForFree":true,"articleSection":"RUBYLAND","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":"RUBYLAND","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/rubyla","url":"https://daily.dev/sources/rubyla"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/choosing-colors-for-developers--almguv7ft","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"css,tailwind-css,design-systems","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"RUBYLAND","item":"https://daily.dev/sources/rubyla"},{"@type":"ListItem","position":3,"name":"Choosing colors (for developers)"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/choosing-colors-for-developers--almguv7ft","comment":[{"@type":"Comment","text":"OKLCH is truly overpowered. We have been inferring states on any hierarchy with simple math. Game changer","datePublished":"2026-08-15T19:59:16.987Z","url":"https://daily.dev/posts/AlMgUv7FT#c-fHCH5HwwC","author":{"@type":"Person","name":"Manu","url":"https://daily.dev/jataki","image":"https://media.daily.dev/image/upload/s--ZkGZoSg9--/f_auto/v1786360868/avatars/avatar_boM1zeIEEMcERdMpasALr?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"This is neat, especially for apps where users can define a primary color.","datePublished":"2026-08-27T07:01:17.582Z","url":"https://daily.dev/posts/AlMgUv7FT#c-4FxEypAII","author":{"@type":"Person","name":"Andreas","url":"https://daily.dev/devmount","image":"https://media.daily.dev/image/upload/s--0yHQgkD3--/f_auto/v1730121566/avatars/avatar_wkPuMtV83z5WseTrVc5QU"}},{"@type":"Comment","text":"Thanks for keeping the OKLCH explanation practical. The white-label theme example ties the color math to a real design decision.","datePublished":"2026-08-27T13:22:57.092Z","url":"https://daily.dev/posts/AlMgUv7FT#c-xiHmJTndb","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/choosing-colors-for-developers--almguv7ft#faq","mainEntity":[{"@type":"Question","name":"How do I generate a full color palette from a single OKLCH hue value in CSS?","acceptedAnswer":{"@type":"Answer","text":"Define a CSS custom property for the hue, then build each shade (50 through 950) as oklch() values that keep lightness and chroma fixed per step while referencing the hue variable, for example --brand-500: oklch(.6 .18 var(--brand-hue)). Changing the hue variable updates every shade at once since lightness and chroma never shift, keeping the palette harmonious. daily.dev surfaces CSS color techniques like this for developers refining their design system."}},{"@type":"Question","name":"How do I create a complementary accent color palette using OKLCH in CSS?","acceptedAnswer":{"@type":"Answer","text":"Add 180 degrees to the brand hue using calc(), for example --accent-500: oklch(.6 .18 calc(var(--brand-hue) + 180)). This produces the simplest high-contrast color scheme, complementary, good for CTAs and accents. Other options include analogous (±30 degrees), split complementary (±150 degrees), and triadic (+120 and +240 degrees) for different contrast levels. Developers comparing color scheme approaches can find CSS techniques like this on daily.dev."}},{"@type":"Question","name":"How do I build a neutral gray palette that matches my brand color in CSS?","acceptedAnswer":{"@type":"Answer","text":"Reuse the brand hue but drop the chroma close to zero, for example --gray-500: oklch(.64 .01 var(--brand-hue)). This produces grays that read as neutral but carry a faint undertone of the brand color, making backgrounds and borders feel cohesive with the rest of the palette rather than matchy-matchy. daily.dev helps developers track practical CSS color and theming techniques like this one."}}]} ```