Can't wait for this to land is all evergreen browsers! Something I've always done is define my brand color as `--brand-rgb: r, g, b;` and then have `--brand: rgb(var(--brand-rgb));` so that I can later do something like `border: 3x solid rgba(var(--brand-rgb), 0.5);` and have all `brand` colors derive from a single source.
Same here but with HSL where I have a variable for each property (hue, saturation and luminosity). Something like: --brand-hue: 95; --brand-sat: 100%; --brand-lum: 50%; --brand-primary: hsl(var(--brand-hue), var(--brand-sat), var(--brand-lum)); --brand-secondary: hsl(calc(var(--brand-hue) - 180), var(--brand-sat), var(--brand-lum));
Awesome! I didn’t know this was coming and the moment you started explaining I was like “OMG we can extract the hue from a custom property for their brand colour” and it was like your second example at 3:37 😄 Very exciting!
Idk how I missed this! Can’t wait until Mozilla gets on board !! I’m always manually transforming rgb to oklch now (thanks for your gradient dot style gradient generator it’s sooo helpful !!
Subscribe to Chrome for Developers → goo.gle/ChromeDevs
Can't wait for this to land is all evergreen browsers! Something I've always done is define my brand color as `--brand-rgb: r, g, b;` and then have `--brand: rgb(var(--brand-rgb));` so that I can later do something like `border: 3x solid rgba(var(--brand-rgb), 0.5);` and have all `brand` colors derive from a single source.
Same here but with HSL where I have a variable for each property (hue, saturation and luminosity). Something like:
--brand-hue: 95;
--brand-sat: 100%;
--brand-lum: 50%;
--brand-primary: hsl(var(--brand-hue), var(--brand-sat), var(--brand-lum));
--brand-secondary: hsl(calc(var(--brand-hue) - 180), var(--brand-sat), var(--brand-lum));
Awesome! I didn’t know this was coming and the moment you started explaining I was like “OMG we can extract the hue from a custom property for their brand colour” and it was like your second example at 3:37 😄
Very exciting!
Filter hue rotation in different color spaces please
Amazing :)
Idk how I missed this! Can’t wait until Mozilla gets on board !! I’m always manually transforming rgb to oklch now (thanks for your gradient dot style gradient generator it’s sooo helpful !!
Imagine this plus upcoming HDR wide gamut colors
🤘🏻🙌🏻
Why we can't do - oklch(from currentColor calc(l - 20) c h) for hover color for example?
Can we lerp between two colors, suppose I have a brand color and I need to make shades and tints, I can lerp the color to black or white
🤔
Please search J Bravo and you know what I mean lol
🤔
🤔
🤔