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).

    oklab(from
    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.

    hsl(from
    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!

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

    Access an alpha channel value.

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

    lch(from
    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.

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

    Desaturate a color.

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

    hsl(from
    var(--magenta) h 20% l)

    Desaturate by just setting a new value.

    Particularly effective in oklch and oklab.

    oklch(from
    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).

    oklab(from
    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.

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

    Reliably darken.

    Different color spaces will give different results.

    hsl(from
    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.

    oklch(from
    var(--cyan) l none h)

    Go grayscale.

    Different color spaces will give different results.

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

    The complimentary.

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

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

    Invert.

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

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

    Mix & match.

    Reuse the channel value anywhere you want.

    rgb(from
    var(--hotpink) g g g)

    Repeat.

    Reuse the channel value as many times as you want.

    color(from
    var(--yellow) srgb r g b)

    Gotcha with color().

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