[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-css-color-mix-native-color-mixing":32,"code:css:true:j1pq84":247,"code:css:true:u45dv4":248,"code:css:true:15usok9":249,"code:css:true:fz9lry":250,"code:css:true:197ri3":251,"code:css:true:lbh305":252,"code:css:true:1q5sepd":253,"code:css:true:1pvkdf1":254},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":231,"seo":232,"translationGroupId":235,"thread":236,"assessments":238,"translations":243,"quiz":245},"019fe660-a1fc-740c-9df4-b60a02de8afa","css-color-mix-native-color-mixing","You reach for Sass to mix colors. `color-mix()` does it natively.",null,"Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser with no build step required.","\u002Fmedia\u002Fcovers\u002Fcss-color-mix-native-color-mixing.png",4,"2026-07-29T08:47:34.803Z",57,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":64},1,{"slug":34,"title":66},"color-mix() — native CSS color blending",{"blocks":68,"version":64},[69,73,76,81,84,89,92,96,99,102,105,108,112,115,118,121,124,128,131,134,137,141,144,148,151,154,158,161,164,167,170,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222],{"id":70,"html":71,"type":72},"b1","\u003Cp>Every design system has this pattern: one brand color, eight shade variants, a slightly darkened hover state, and a lightened disabled state. For years, CSS had no way to produce those programmatically. You either committed all twelve values by hand or you pulled in Sass for its \u003Ccode>darken()\u003C\u002Fcode>, \u003Ccode>lighten()\u003C\u002Fcode>, and \u003Ccode>mix()\u003C\u002Fcode> functions.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"type":72},"b2","\u003Cp>\u003Ccode>color-mix()\u003C\u002Fcode> is the native CSS answer. It has been in every major browser since mid-2023, and it removes the preprocessor dependency entirely.\u003C\u002Fp>",{"id":77,"html":78,"text":79,"type":80,"level":31},"b3","What \u003Ccode>color-mix()\u003C\u002Fcode> does","What color-mix() does","heading",{"id":82,"html":83,"type":72},"b4","\u003Cp>The function blends two colors at a specified ratio inside a chosen color space.\u003C\u002Fp>",{"id":85,"code":86,"type":87,"language":49,"highlight":88},"b5","color-mix(in \u003Ccolor-space>, \u003Ccolor1> \u003Cpercentage>, \u003Ccolor2>)","code",[],{"id":90,"html":91,"type":72},"b6","\u003Cp>In practice:\u003C\u002Fp>",{"id":93,"code":94,"type":87,"language":49,"highlight":95},"b7",".button {\n  background: color-mix(in srgb, #3b82f6 80%, black);\n}",[],{"id":97,"html":98,"type":72},"b8","\u003Cp>That gives you \u003Ccode>#3b82f6\u003C\u002Fcode> mixed 80% with black — a darkened variant of your brand blue. Swap \u003Ccode>black\u003C\u002Fcode> for \u003Ccode>white\u003C\u002Fcode> and you get a lightened variant.\u003C\u002Fp>",{"id":100,"html":101,"type":72},"b9","\u003Cp>The percentage controls how much of \u003Ccode>color1\u003C\u002Fcode> survives in the blend. \u003Ccode>80%\u003C\u002Fcode> means 80% of the first color and 20% of the second. You can also specify both percentages explicitly: \u003Ccode>color-mix(in srgb, blue 30%, red 70%)\u003C\u002Fcode>.\u003C\u002Fp>",{"id":103,"html":104,"text":104,"type":80,"level":31},"b10","Why the color space argument matters",{"id":106,"html":107,"type":72},"b11","\u003Cp>This is the part most tutorials rush past. The color space changes what the blend actually looks like.\u003C\u002Fp>",{"id":109,"code":110,"type":87,"language":49,"highlight":111},"b12","\u002F* Midpoint mix: srgb vs oklch *\u002F\n.demo-srgb  { background: color-mix(in srgb,  #0000ff 50%, #ffff00); }\n.demo-oklch { background: color-mix(in oklch, #0000ff 50%, #ffff00); }",[],{"id":113,"html":114,"type":72},"b13","\u003Cp>In \u003Ccode>srgb\u003C\u002Fcode>, mixing blue and yellow at 50% produces a muddy gray — the channels average to near-neutral values. In \u003Ccode>oklch\u003C\u002Fcode> (a perceptually uniform color space), the midpoint is a vivid violet-green, because the mix travels through perceptually meaningful color space rather than raw channel math.\u003C\u002Fp>",{"id":116,"html":117,"type":72},"b14","\u003Cp>For tints and shades — mixing your brand color with white or black — the difference is more subtle but still real. \u003Ccode>oklch\u003C\u002Fcode> tends to preserve the perceived saturation of the original color better than \u003Ccode>srgb\u003C\u002Fcode> as you move toward white or black. \u003Ccode>srgb\u003C\u002Fcode> is predictable and is the right default when you want results that match what Sass historically produced.\u003C\u002Fp>",{"id":119,"html":120,"text":120,"type":80,"level":31},"b15","Replacing Sass color functions",{"id":122,"html":123,"type":72},"b16","\u003Cp>Sass's three most-used color manipulation functions map directly to \u003Ccode>color-mix()\u003C\u002Fcode>:\u003C\u002Fp>",{"id":125,"code":126,"type":87,"language":49,"highlight":127},"b17","\u002F* Sass: darken($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, black)\n\n\u002F* Sass: lighten($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, white)\n\n\u002F* Sass: mix($color1, $color2, 60%) *\u002F\ncolor-mix(in srgb, var(--color1) 60%, var(--color2))",[],{"id":129,"html":130,"type":72},"b18","\u003Cp>The Sass percentage refers to how much \u003Cem>change\u003C\u002Fem> to apply; the \u003Ccode>color-mix()\u003C\u002Fcode> percentage refers to how much of the first color \u003Cem>remains\u003C\u002Fem>. That means \u003Ccode>darken($color, 15%)\u003C\u002Fcode> becomes \u003Ccode>color-mix(in srgb, $color 85%, black)\u003C\u002Fcode> — subtract the darkening amount from 100.\u003C\u002Fp>",{"id":132,"html":133,"text":133,"type":80,"level":31},"b19","Building a token system without a preprocessor",{"id":135,"html":136,"type":72},"b20","\u003Cp>The real power emerges when you combine \u003Ccode>color-mix()\u003C\u002Fcode> with CSS custom properties. You can define a single source color and derive the full scale from it, entirely in CSS.\u003C\u002Fp>",{"id":138,"code":139,"type":87,"language":49,"highlight":140},"b21",":root {\n  --brand: #3b82f6;\n\n  --brand-50:  color-mix(in oklch, var(--brand) 10%, white);\n  --brand-100: color-mix(in oklch, var(--brand) 20%, white);\n  --brand-200: color-mix(in oklch, var(--brand) 35%, white);\n  --brand-300: color-mix(in oklch, var(--brand) 55%, white);\n  --brand-400: color-mix(in oklch, var(--brand) 75%, white);\n  --brand-500: var(--brand);\n  --brand-600: color-mix(in oklch, var(--brand) 85%, black);\n  --brand-700: color-mix(in oklch, var(--brand) 70%, black);\n  --brand-800: color-mix(in oklch, var(--brand) 55%, black);\n  --brand-900: color-mix(in oklch, var(--brand) 35%, black);\n}",[],{"id":142,"html":143,"type":72},"b22","\u003Cp>Now a button component can use the scale without knowing any hex values:\u003C\u002Fp>",{"id":145,"code":146,"type":87,"language":49,"highlight":147},"b23",".button {\n  background: var(--brand-500);\n  border-color: var(--brand-600);\n  color: white;\n}\n\n.button:hover {\n  background: var(--brand-600);\n  border-color: var(--brand-700);\n}\n\n.button:disabled {\n  background: var(--brand-200);\n  color: var(--brand-400);\n}",[],{"id":149,"html":150,"type":72},"b24","\u003Cp>Change \u003Ccode>--brand\u003C\u002Fcode> in one place and every derived shade updates automatically — across the entire page, in every component, with no build step and no recompilation.\u003C\u002Fp>",{"id":152,"html":153,"type":72},"b25","\u003Cp>This also composes cleanly with theme switching:\u003C\u002Fp>",{"id":155,"code":156,"type":87,"language":49,"highlight":157},"b26","@media (prefers-color-scheme: dark) {\n  :root {\n    --brand: #60a5fa; \u002F* lighter blue reads better on dark backgrounds *\u002F\n  }\n}",[],{"id":159,"html":160,"type":72},"b27","\u003Cp>The full shade scale re-derives itself from the new source color without any additional changes.\u003C\u002Fp>",{"id":162,"html":163,"text":163,"type":80,"level":31},"b28","Browser support",{"id":165,"html":166,"type":72},"b29","\u003Cp>\u003Ccode>color-mix()\u003C\u002Fcode> is \u003Cstrong>Baseline 2023\u003C\u002Fstrong>: Chrome 111 (March 2023), Firefox 113 (May 2023), Safari 16.2 (December 2022).\u003C\u002Fp>",{"id":168,"html":169,"type":72},"b30","\u003Cp>Unsupported browsers ignore the declaration, so the fallback is whatever value appeared before — usually the original custom property. For a graceful fallback, supply a pre-computed value first:\u003C\u002Fp>",{"id":171,"code":172,"type":87,"language":49,"highlight":173},"b31",".button {\n  background: #3b82f6; \u002F* fallback *\u002F\n  background: color-mix(in oklch, var(--brand) 100%, transparent);\n}",[],{"id":175,"html":176,"type":72},"b32","\u003Cp>There is no polyfill needed for the browsers that ship to production today.\u003C\u002Fp>",{"id":178,"html":179,"type":72},"b33","\u003C!-- playground:start -->",{"id":181,"html":182,"text":182,"type":80,"level":31},"b34","🎮 Try it yourself",{"id":184,"html":185,"type":72},"b35","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-29-css-color-mix-native-color-mixing\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":187,"html":188,"type":72},"b36","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":190,"html":191,"type":72},"b37","\u003C!-- playground:end -->",{"id":193,"html":194,"type":72},"b38","\u003C!-- quiz:start -->",{"id":196,"html":197,"text":197,"type":80,"level":31},"b39","🧠 Test yourself",{"id":199,"html":200,"type":72},"b40","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-29-css-color-mix-native-color-mixing\">Take the 7-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":202,"html":203,"type":72},"b41","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":205,"html":206,"type":72},"b42","\u003C!-- quiz:end -->",{"id":208,"html":209,"text":209,"type":80,"level":31},"b43","The takeaway",{"id":211,"html":212,"type":72},"b44","\u003Cp>Search your codebase for \u003Ccode>darken(\u003C\u002Fcode>, \u003Ccode>lighten(\u003C\u002Fcode>, or \u003Ccode>mix(\u003C\u002Fcode> from Sass. Each one is a preprocessor dependency that now has a native CSS equivalent. Replace them with \u003Ccode>color-mix()\u003C\u002Fcode> and move the color scale into custom properties so the whole system reacts to a single source value.\u003C\u002Fp>",{"id":214,"html":215,"type":72},"b45","\u003Cp>The native platform keeps absorbing what used to need a build step. Color manipulation was one of the last practical reasons to reach for a CSS preprocessor in new projects. That reason is gone.\u003C\u002Fp>",{"id":217,"type":218},"b46","divider",{"id":220,"html":221,"type":72},"b47","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":223,"type":224,"items":225,"ordered":18},"b48","list",[226,227,228,229,230],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Every design system has this pattern: one brand color, eight shade variants, a slightly darkened hover state, and a lightened disabled state. For years, CSS had no way to produce those programmatically. You either committed all twelve values by hand or you pulled in Sass for its `darken()`, `lighten()`, and `mix()` functions.\n\n`color-mix()` is the native CSS answer. It has been in every major browser since mid-2023, and it removes the preprocessor dependency entirely.\n\n## What `color-mix()` does\n\nThe function blends two colors at a specified ratio inside a chosen color space.\n\n```css\ncolor-mix(in \u003Ccolor-space>, \u003Ccolor1> \u003Cpercentage>, \u003Ccolor2>)\n```\n\nIn practice:\n\n```css\n.button {\n  background: color-mix(in srgb, #3b82f6 80%, black);\n}\n```\n\nThat gives you `#3b82f6` mixed 80% with black — a darkened variant of your brand blue. Swap `black` for `white` and you get a lightened variant.\n\nThe percentage controls how much of `color1` survives in the blend. `80%` means 80% of the first color and 20% of the second. You can also specify both percentages explicitly: `color-mix(in srgb, blue 30%, red 70%)`.\n\n## Why the color space argument matters\n\nThis is the part most tutorials rush past. The color space changes what the blend actually looks like.\n\n```css\n\u002F* Midpoint mix: srgb vs oklch *\u002F\n.demo-srgb  { background: color-mix(in srgb,  #0000ff 50%, #ffff00); }\n.demo-oklch { background: color-mix(in oklch, #0000ff 50%, #ffff00); }\n```\n\nIn `srgb`, mixing blue and yellow at 50% produces a muddy gray — the channels average to near-neutral values. In `oklch` (a perceptually uniform color space), the midpoint is a vivid violet-green, because the mix travels through perceptually meaningful color space rather than raw channel math.\n\nFor tints and shades — mixing your brand color with white or black — the difference is more subtle but still real. `oklch` tends to preserve the perceived saturation of the original color better than `srgb` as you move toward white or black. `srgb` is predictable and is the right default when you want results that match what Sass historically produced.\n\n## Replacing Sass color functions\n\nSass's three most-used color manipulation functions map directly to `color-mix()`:\n\n```css\n\u002F* Sass: darken($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, black)\n\n\u002F* Sass: lighten($color, 15%) *\u002F\ncolor-mix(in srgb, var(--brand) 85%, white)\n\n\u002F* Sass: mix($color1, $color2, 60%) *\u002F\ncolor-mix(in srgb, var(--color1) 60%, var(--color2))\n```\n\nThe Sass percentage refers to how much *change* to apply; the `color-mix()` percentage refers to how much of the first color *remains*. That means `darken($color, 15%)` becomes `color-mix(in srgb, $color 85%, black)` — subtract the darkening amount from 100.\n\n## Building a token system without a preprocessor\n\nThe real power emerges when you combine `color-mix()` with CSS custom properties. You can define a single source color and derive the full scale from it, entirely in CSS.\n\n```css\n:root {\n  --brand: #3b82f6;\n\n  --brand-50:  color-mix(in oklch, var(--brand) 10%, white);\n  --brand-100: color-mix(in oklch, var(--brand) 20%, white);\n  --brand-200: color-mix(in oklch, var(--brand) 35%, white);\n  --brand-300: color-mix(in oklch, var(--brand) 55%, white);\n  --brand-400: color-mix(in oklch, var(--brand) 75%, white);\n  --brand-500: var(--brand);\n  --brand-600: color-mix(in oklch, var(--brand) 85%, black);\n  --brand-700: color-mix(in oklch, var(--brand) 70%, black);\n  --brand-800: color-mix(in oklch, var(--brand) 55%, black);\n  --brand-900: color-mix(in oklch, var(--brand) 35%, black);\n}\n```\n\nNow a button component can use the scale without knowing any hex values:\n\n```css\n.button {\n  background: var(--brand-500);\n  border-color: var(--brand-600);\n  color: white;\n}\n\n.button:hover {\n  background: var(--brand-600);\n  border-color: var(--brand-700);\n}\n\n.button:disabled {\n  background: var(--brand-200);\n  color: var(--brand-400);\n}\n```\n\nChange `--brand` in one place and every derived shade updates automatically — across the entire page, in every component, with no build step and no recompilation.\n\nThis also composes cleanly with theme switching:\n\n```css\n@media (prefers-color-scheme: dark) {\n  :root {\n    --brand: #60a5fa; \u002F* lighter blue reads better on dark backgrounds *\u002F\n  }\n}\n```\n\nThe full shade scale re-derives itself from the new source color without any additional changes.\n\n## Browser support\n\n`color-mix()` is **Baseline 2023**: Chrome 111 (March 2023), Firefox 113 (May 2023), Safari 16.2 (December 2022).\n\nUnsupported browsers ignore the declaration, so the fallback is whatever value appeared before — usually the original custom property. For a graceful fallback, supply a pre-computed value first:\n\n```css\n.button {\n  background: #3b82f6; \u002F* fallback *\u002F\n  background: color-mix(in oklch, var(--brand) 100%, transparent);\n}\n```\n\nThere is no polyfill needed for the browsers that ship to production today.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-29-css-color-mix-native-color-mixing\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 7-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-29-css-color-mix-native-color-mixing)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nSearch your codebase for `darken(`, `lighten(`, or `mix(` from Sass. Each one is a preprocessor dependency that now has a native CSS equivalent. Replace them with `color-mix()` and move the color scale into custom properties so the whole system reacts to a single source value.\n\nThe native platform keeps absorbing what used to need a build step. Color manipulation was one of the last practical reasons to reach for a CSS preprocessor in new projects. That reason is gone.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":35,"canonical":233,"description":234},"https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-color-mix-native-color-mixing","Sass's `darken()`, `lighten()`, and `mix()` functions solved real problems CSS couldn't handle for decades. `color-mix()` is the native answer, and it ships in every modern browser","019fe660-a1fc-740c-9df4-baf4d1378bf3",{"id":237,"locked":18},"019fe660-a8ec-753d-a085-2ba3acfa046a",[239],{"id":240,"slug":34,"title":66,"_count":241},"019fe776-8f61-731d-a629-257c1a7f998c",{"questions":242},7,[244],{"locale":13,"slug":34},{"id":240,"slug":34,"title":66,"_count":246,"questionCount":242},{"questions":242},"\u003Cdiv class=\"shj shj-lang-css shj-oneline\" data-lang=\"css\">\u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> <\u003Cspan class=\"shj-num\">color-space\u003C\u002Fspan>>, <color\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>> <\u003Cspan class=\"shj-num\">percentage\u003C\u002Fspan>>, <color\u003Cspan class=\"shj-num\">2\u003C\u002Fspan>>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">srgb\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">#3b82f6\u003C\u002Fspan> \u003Cspan class=\"shj-num\">80\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* Midpoint mix: srgb vs oklch *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.demo-srgb\u003C\u002Fspan>  \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">srgb\u003C\u002Fspan>,  \u003Cspan class=\"shj-num\">#0000ff\u003C\u002Fspan> \u003Cspan class=\"shj-num\">50\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">#ffff00\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-var\">.demo-oklch\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">#0000ff\u003C\u002Fspan> \u003Cspan class=\"shj-num\">50\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">#ffff00\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F* Sass: darken($color, 15%) *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">srgb\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">85\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* Sass: lighten($color, 15%) *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">srgb\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">85\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F* Sass: mix($color1, $color2, 60%) *\u002F\u003C\u002Fspan>\n\u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">srgb\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--color\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">60\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--color\u003Cspan class=\"shj-num\">2\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">:root\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  --\u003Cspan class=\"shj-var\">brand\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">#3b82f6\u003C\u002Fspan>;\n\n  --\u003Cspan class=\"shj-var\">brand-50\u003C\u002Fspan>:  \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">10\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-100\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">20\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-200\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">35\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-300\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">55\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-400\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">75\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-500\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-600\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">85\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-700\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">70\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-800\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">55\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  --\u003Cspan class=\"shj-var\">brand-900\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">35\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">black\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">500\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">border-color\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">600\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">color\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">white\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan>\u003Cspan class=\"shj-var\">:hover\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">600\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">border-color\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">700\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan>\u003Cspan class=\"shj-var\">:disabled\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">200\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">color\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand-\u003C\u002Fspan>\u003Cspan class=\"shj-num\">400\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">@media\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">prefers-color-scheme\u003C\u002Fspan>: \u003Cspan class=\"shj-kwd\">dark\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">:root\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    --\u003Cspan class=\"shj-var\">brand\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">#60a5fa\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F* lighter blue reads better on dark backgrounds *\u002F\u003C\u002Fspan>\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.button\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">#3b82f6\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F* fallback *\u002F\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">background\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">color-mix\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">in\u003C\u002Fspan> \u003Cspan class=\"shj-num\">oklch\u003C\u002Fspan>, \u003Cspan class=\"shj-func\">var\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>--\u003Cspan class=\"shj-num\">brand\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-num\">100\u003C\u002Fspan>\u003Cspan class=\"shj-var\">%\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">transparent\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]