mix

mix($color1, $color2, $weight:50%)

Mixes two colors together. Specifically, takes the average of each of the RGB components, optionally weighted by the given percentage. The opacity of the colors is also considered when weighting the components.

The weight specifies the amount of the first color that should be included in the returned color. The default, 50%, means that half the first color and half the second color should be used. 25% means that a quarter of the first color and three quarters of the second color should be used.

Examples:

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

Parameters:

  • $color1 (Color)
  • $color2 (Color)
  • $weight (Number) The relative weight of each color. Closer to 0% gives more weight to $color1, closer to 100% gives more weight to $color2

Returns:

  • (Color)

Raises:

  • (ArgumentError) if $weight is out of bounds or any parameter is the wrong type
doc_Sass
2016-11-11 13:09:16
Comments
Leave a Comment

Please login to continue.