rgb(from hotpink r g b / alpha)

Relative Color Syntax

Create a new color from another color.

Break a color into variables, modify those variables, and return the edits for the newly defined color's values.

spec | caniuse

  • oklch(from
    #ff0 l c h)

    The basics.

    This CSS has only converted the hex color from srgb to oklch. Color space conversion.

    (l) will be the lightness of that yellow hex as it is in oklch; same for chroma (c) and hue (h).

    var(--cyan) l a b)

    Works with custom properties.

    Maybe even best with custom properties.

    Your var(--brand) custom property has never been more useful.

    var(--lime) calc(h - 180) s l)

    Do math on the pieces with calc()

    This finds the color on the opposite side of the wheel by spinning the hue 180deg

    You also have access to clamp(), min(), max(), sin(), cos(), etc!

    var(--transparent-yellow) l c h / calc(alpha / 2))

    Access an alpha channel value.

    Here I cut the opacity in half, relatively adjusting opacity.

    var(--transparent-yellow) l c h / .5)

    Pass an entirely new value.

    I call this an absolute change vs a relative change, where a relative change would have taken into consideration the value of the variable.

    Here I don't use the alpha channel at all, I squash it by passing it a brand new value.

    var(--magenta) h calc(s / 2) l)

    Desaturate a color.

    Cut the saturation or chroma values in half (depending on your colorspace of choice).

    var(--magenta) h 20% l)

    Desaturate by just setting a new value.

    Particularly effective in oklch and oklab.

    var(--lime) l .4 h)

    Chroma boost

    Convert an srgb color to oklch and set a high value for chroma. Very likely will exceed the srgb colors vibrancy and might even change hue if your lucky (I mean not lucky).

    var(--blue) calc(l + 20) a b)

    Reliably lighten.

    Lighten responsibly in oklab or oklch, working within that great perceptual lightness channel and free from random hue shifts.

    var(--red) calc(l - 20) a b)

    Reliably darken.

    Different color spaces will give different results.

    var(--yellow) none s l)

    Remove the hue.

    Take the hue away from any color in a color space with an (h) by setting the value to none.

    var(--cyan) l none h)

    Go grayscale.

    Different color spaces will give different results.

    var(--orange) calc(h + 180) s l)

    The complimentary.

    Yeah this was demoed earlier, but it didn't get the sweet gripping title.

    yellow calc(1 - r) calc(1 - g) calc(1 - b))


    The strategy shown here works for RGB but will need altered for color spaces like LCH and LAB.

    var(--yellow) alpha b g / r)

    Mix & match.

    Reuse the channel value anywhere you want.

    var(--hotpink) g g g)


    Reuse the channel value as many times as you want.

    var(--yellow) srgb r g b)

    Gotcha with color().

    The colorspace comes after the "from color" / origin color.