Color opacity modifier

Append /{opacity} to a color token — red.300/40, {colors.black/50}, or red/half. Panda emits color-mix (opens in a new tab) only when the suffix is present; plain values like white stay as token references. Works on color-connected utilities from @pandacss/preset-base: background, color, borderColor, and others. Browsers without color-mix use the solid token.

Examples

Basic example

css({
  bg: 'red.300/40',
  color: 'white'
})

@layer utilities {
  .bg_red\.300\/40 {
    --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
    background: var(--mix-background, var(--colors-red-300));
  }
 
  .text_white {
    color: var(--colors-white);
  }
}

Using a custom property

For --* variables in css(), wrap the token path in curly braces and reference it with var():

css({
  '--overlay': '{colors.black/50}',
  bg: 'var(--overlay)'
})

// ❌ Not resolved
'--overlay': 'colors.black/50'
 
// ✅ Resolved to color-mix
'--overlay': '{colors.black/50}'

Usage with virtual colors

See virtual colors for the full colorPalette API:

css({
  colorPalette: 'blue',
  '--tint': '{colors.colorPalette.500/50}',
  bg: 'var(--tint)'
})

Usage in custom utilities

Support {color}/{opacity} on your own utilities through the colorMix helper on utils:

export default defineConfig({
  utilities: {
    background: {
      shorthand: 'bg',
      className: 'bg',
      values: 'colors',
      transform(value, args) {
        const mix = args.utils.colorMix(value)
        if (mix.invalid) return { background: value }
 
        return {
          background: mix.value
        }
      }
    }
  }
})

Using createColorMixTransform

import type { PropertyTransform } from '@pandacss/types'
 
export const createColorMixTransform =
  (prop: string): PropertyTransform =>
  (value, args) => {
    const mix = args.utils.colorMix(value)
    if (mix.invalid) return { [prop]: value }
    const cssVar = '--mix-' + prop
    return {
      [cssVar]: mix.value,
      [prop]: `var(${cssVar}, ${mix.color})`
    }
  }

export default defineConfig({
  utilities: {
    background: {
      shorthand: 'bg',
      className: 'bg',
      values: 'colors',
      transform: createColorMixTransform('background')
    }
  }
})