Example: mix Built-in

The mix function blends two colors by a weighted ratio.

Definition

---
module: color
title: Color Mixing
summary: Blend two colors by a weighted ratio.
category: color
since: 0.1.0
tags: [color, mixing, blend]
---

/// @name mix
/// @summary Blend two colors by weight.
/// @param $color1 <color|ref> The first color.
/// @param $color2 <color|ref> The second color.
/// @param $weight <number|percentage> Blend weight (0 = all $color2, 1 = all $color1). Default 0.5.
/// @returns <color>
/// @constraints $weight >= 0
/// @constraints $weight <= 1
/// @example mix(#ff0000, #0000ff, 0.5) → #800080
/// @example mix(white, black, 0.25) → #bfbfbf
@function mix($color1, $color2, $weight: 0.5) {
  @return mix($color1, $color2, $weight);
}

Usage in Tokens

{
  "color": {
    "surface": {
      "subtle": {
        "$value": "#f2f2f2",
        "$type": "color",
        "$extensions": {
          "org.dtcg-formulas": {
            "formula": "mix(white, {color.neutral.200}, 0.8)",
            "definition": "builtins#mix"
          }
        }
      }
    }
  }
}

Behavior

Expression	Result
mix(#ff0000, #0000ff, 0.5)	#800080 (equal blend)
mix(white, black, 0.25)	#bfbfbf (25% white)
mix(white, black, 1.0)	white (all first color)
mix(white, black, 0.0)	black (all second color)