--- title: CSS Relative Colors | daily.dev description: CSS relative colors enable dynamic color generation directly in CSS without the need for pre-processors like Sass. This post explores how to apply opacity,... canonical: https://daily.dev/posts/css-relative-colors-nowgpdj4g twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Relative Colors | daily.dev og:description: CSS relative colors enable dynamic color generation directly in CSS without the need for pre-processors like Sass. This post explores how to apply opacity,... og:url: https://daily.dev/posts/css-relative-colors-nowgpdj4g og:image: https://api.daily.dev/og/posts/nOWgpdj4G.png og:image:alt: CSS Relative Colors 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. # CSS Relative Colors **[Ahmad Shadeed](https://daily.dev/sources/ishadeed)** · 15 min read · 389 upvotes · 10 comments ## Summary CSS relative colors enable dynamic color generation directly in CSS without the need for pre-processors like Sass. This post explores how to apply opacity, create lighter or darker variations of a color, and use different color spaces (hsl and oklch) with practical examples. The article includes detailed explanations, code snippets, and interactive demos to help readers understand and implement this powerful feature in their projects. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@mrshashikant** · 1 upvotes > Thanks for it **@devopsanti** · 1 upvotes > Great Share **@hybit** · 0 upvotes > Very good one. Old and bruised CSS veteran speaking. **@tagman** · 0 upvotes > I think we can now ditch more sass in some of our projects. **@itsmnthn** · 0 upvotes > Good Read ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend) [View this post on daily.dev](https://daily.dev/posts/css-relative-colors-nowgpdj4g) ```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":"CSS Relative Colors","url":"https://daily.dev/posts/css-relative-colors-nowgpdj4g","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-relative-colors-nowgpdj4g"},"datePublished":"2025-03-09T20:38:55.286Z","dateModified":"2025-03-09T20:39:10.619Z","description":"CSS relative colors enable dynamic color generation directly in CSS without the need for pre-processors like Sass. This post explores how to apply opacity,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/af45a5341157c5638a7dcbec6516f7ea?_a=AQAEuj9","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/af45a5341157c5638a7dcbec6516f7ea?_a=AQAEuj9","isAccessibleForFree":true,"articleSection":"Ahmad Shadeed","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":"Ahmad Shadeed","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/2bcc7ec837854040856ba4a4eb8946d0","url":"https://daily.dev/sources/ishadeed"},"commentCount":10,"discussionUrl":"https://daily.dev/posts/css-relative-colors-nowgpdj4g","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":389},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":10}],"keywords":"webdev,css,frontend","timeRequired":"PT15M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Ahmad Shadeed","item":"https://daily.dev/sources/ishadeed"},{"@type":"ListItem","position":3,"name":"CSS Relative Colors"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-relative-colors-nowgpdj4g","comment":[{"@type":"Comment","text":"Thanks for it","datePublished":"2025-03-30T17:48:19.283Z","url":"https://daily.dev/posts/nOWgpdj4G#c-pSIisYBql","author":{"@type":"Person","name":"Shashikant","url":"https://daily.dev/mrshashikant","image":"https://media.daily.dev/image/upload/s--0a0DNpGm--/f_auto/v1742805748/avatars/avatar_3ol7U9KxtqdmtEKVKR6Ek"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Great Share","datePublished":"2025-03-11T20:12:18.172Z","url":"https://daily.dev/posts/nOWgpdj4G#c-2bAxwd8Xi","author":{"@type":"Person","name":"Alex","url":"https://daily.dev/devopsanti","image":"https://media.daily.dev/image/upload/s--HWnjMi6p--/f_auto/v1740612186/avatars/avatar_KiXJFYZ0RxJdEUXwuv29d"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Very good one. Old and bruised CSS veteran speaking.","datePublished":"2025-05-21T14:45:06.853Z","url":"https://daily.dev/posts/nOWgpdj4G#c-5Pfq2FMkc","author":{"@type":"Person","name":"Tobias von Essen","url":"https://daily.dev/hybit","image":"https://media.daily.dev/image/upload/s--yhbn5KQl--/f_auto,q_auto/v1/avatars/avatar_5bfNK4zyHWgHijxrHSQUo"}},{"@type":"Comment","text":"I think we can now ditch more sass in some of our projects.","datePublished":"2025-05-31T16:48:04.942Z","url":"https://daily.dev/posts/nOWgpdj4G#c-rg6nzaYWA","author":{"@type":"Person","name":"Chris Hartig","url":"https://daily.dev/tagman","image":"https://lh3.googleusercontent.com/a/ACg8ocKiDFCVOL3lkaklWJ7rtBtqVd0Bp-gmJjs9dIvgqCy8T7GeUg=s96-c"}},{"@type":"Comment","text":"Good Read","datePublished":"2025-03-14T05:45:38.388Z","url":"https://daily.dev/posts/nOWgpdj4G#c-heFppCMpM","author":{"@type":"Person","name":"Manthankumar Satani","url":"https://daily.dev/itsmnthn","image":"https://media.daily.dev/image/upload/s--XpFWj1ND--/f_auto/v1749054653/avatars/avatar_iBTDQoV5Y?_a=BAMClqUq0"}}]} ```