--- title: Stop using the legacy color syntax | daily.dev description: Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha... canonical: https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Stop using the legacy color syntax | daily.dev og:description: Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha... og:url: https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6 og:image: https://api.daily.dev/og/posts/Q80ZGvmf6.png og:image:alt: Stop using the legacy color syntax 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. # Stop using the legacy color syntax **[Kevin Powell](https://daily.dev/sources/kevinpowell)** · 7 min read · 51 upvotes · 11 comments ## Summary Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha values (e.g., `rgb(255 0 0 / 0.5)`). This syntax is mandatory for newer color functions like OKLCH, LAB, and the color() function, which support wider color gamuts beyond sRGB. The most practical benefit is relative colors, which allow manipulating existing color variables on-the-fly, such as adding transparency to any color format using syntax like `hsl(from var(--color) h s l / 0.5)`. The legacy comma syntax still works and doesn't require refactoring existing 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. **@ezee** · 3 upvotes > hmmm, no, I don't think I will. **@michaelmastrucci** · 2 upvotes > wait, people don't press tab to complete autofill for whatever copilot suggests!? **@byteoutlaw** · 2 upvotes > Okay okay, heard, will do it right away! **@macjendr** · 1 upvotes > I already push oklch into our library at work. I became weirdly obsessive about it, despite that I don't understand much about underlying technology and specifications history regarding colors. But it really shines in terms of WCAG (calculating contrast ratio), better handling of things like setting state for hover/active etc. **@tsumanu** · 0 upvotes > More features in CSS! Developers will handle it, learn all of them, and use all of them! ## Similar posts on daily.dev - [How To Use CSS Hex Code Colors with Alpha Values](https://daily.dev/posts/how-to-use-css-hex-code-colors-with-alpha-values-ate3zqyun) · DigitalOcean Community · 4 upvotes · 1 comments - [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 - [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 - [Choosing colors \(for developers\)](https://daily.dev/posts/choosing-colors-for-developers--almguv7ft) · RUBYLAND · 7 upvotes · 4 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/stop-using-the-legacy-color-syntax-q80zgvmf6) ```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":"Stop using the legacy color syntax","url":"https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6"},"datePublished":"2025-12-17T14:11:39.293Z","dateModified":"2025-12-17T14:12:00.366Z","description":"Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha...","image":"https://i.ytimg.com/vi/Uynb7Ci8JMg/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/Uynb7Ci8JMg/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Kevin Powell","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":"Kevin Powell","logo":"https://media.daily.dev/image/upload/s--XK5Rf0kM--/f_auto/v1717745137/logos/kevinpowell","url":"https://daily.dev/sources/kevinpowell"},"commentCount":11,"discussionUrl":"https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":51},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":11}],"keywords":"webdev,css,frontend","timeRequired":"PT7M","video":{"@type":"VideoObject","name":"Stop using the legacy color syntax","description":"Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha...","thumbnailUrl":"https://i.ytimg.com/vi/Uynb7Ci8JMg/sddefault.jpg","uploadDate":"2025-12-17T14:11:39.293Z","duration":"PT7M","url":"https://api.daily.dev/r/Q80ZGvmf6","embedUrl":"https://www.youtube.com/embed/Uynb7Ci8JMg"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Kevin Powell","item":"https://daily.dev/sources/kevinpowell"},{"@type":"ListItem","position":3,"name":"Stop using the legacy color syntax"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/stop-using-the-legacy-color-syntax-q80zgvmf6","comment":[{"@type":"Comment","text":"hmmm, no, I don’t think I will.","datePublished":"2025-12-27T20:26:35.690Z","url":"https://daily.dev/posts/Q80ZGvmf6#c-ygwAi8YQS","author":{"@type":"Person","name":"E","url":"https://daily.dev/ezee","image":"https://media.daily.dev/image/upload/s--fCfktlbR--/f_auto/v1767451916/avatars/avatar_93JdfDmXtcEWkGXSGC1ne?_a=BAMAK+ZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"wait, people don’t press tab to complete autofill for whatever copilot suggests!?","datePublished":"2025-12-31T16:41:53.417Z","url":"https://daily.dev/posts/Q80ZGvmf6#c-LkkAolQaa","author":{"@type":"Person","name":"Michael Mastrucci","url":"https://daily.dev/michaelmastrucci","image":"https://avatars.githubusercontent.com/u/125901154?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Okay okay, heard, will do it right away!","datePublished":"2025-12-17T16:24:19.368Z","url":"https://daily.dev/posts/Q80ZGvmf6#c-ETa297S4s","author":{"@type":"Person","name":"Jacob B. Bonde","url":"https://daily.dev/byteoutlaw","image":"https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"I already push oklch into our library at work. I became weirdly obsessive about it, despite that I don’t understand much about underlying technology and specifications history regarding colors. But it really shines in terms of WCAG (calculating contrast ratio), better handling of things like setting state for hover/active etc.","datePublished":"2025-12-22T12:10:59.944Z","dateModified":"2025-12-22T12:23:43.400Z","url":"https://daily.dev/posts/Q80ZGvmf6#c-I7mTYcmvM","author":{"@type":"Person","name":"Maciej","url":"https://daily.dev/macjendr","image":"https://lh3.googleusercontent.com/a/ACg8ocKakth9c3FKk6v5oRe-WN5xDznRwuiU_XidZvMLaj0lTBhbjw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"More features in CSS! Developers will handle it, learn all of them, and use all of them!","datePublished":"2026-02-12T14:05:05.635Z","url":"https://daily.dev/posts/Q80ZGvmf6#c-jaAZftVzf","author":{"@type":"Person","name":"Adrian","url":"https://daily.dev/tsumanu","image":"https://media.daily.dev/image/upload/s--bbTggVj0--/f_auto/v1729056978/avatars/avatar_o83yJZhDlLH2O7iL41pEg"}}]} ```