# color-composite

> Composite semitransparent colors.

Latest version **2.0.1** (published 2026-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install color-composite
pnpm add color-composite
yarn add color-composite
bun add color-composite
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2026-07-22 |
| First published | 2017-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 1 |
| Unpacked size | 4.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jamen Marz |
| Maintainers | dfcreative, jamen, dy |
| Keywords | color-composite, alpha, layer, colorjs, color |

## Links

- npm: https://www.npmjs.com/package/color-composite
- Repository: https://github.com/colorjs/color-composite
- Issues: https://github.com/colorjs/color-composite/issues
- npm.io page: https://npm.io/package/color-composite

## Dependencies (1)

- [color-parse](https://npm.io/package/color-parse.md) ^2.1.0

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2026-07-22
- 2.0.0 — 2026-07-22
- 1.0.2 — 2019-08-17
- 1.0.1 — 2019-08-17
- 1.0.0 — 2019-08-17
- 0.1.0 — 2017-03-14
- 0.0.0 — 2017-03-14

## README

# color-composite [![test](https://github.com/colorjs/color-composite/actions/workflows/test.js.yml/badge.svg)](https://github.com/colorjs/color-composite/actions/workflows/test.js.yml) [![size](https://img.shields.io/bundlephobia/minzip/color-composite?label=size)](https://bundlephobia.com/result?p=color-composite) ![stable](https://img.shields.io/badge/stability-stable-green)

Composite semitransparent colors.

```js
import { composite } from 'color-composite'

const out = composite([
  'rgba(255, 0, 0, 0.3)',
  'rgba(0, 255, 0, 0.3)',
  'rgba(0, 0, 255, 0.3)'
])

console.log(out)
// => { space: 'rgb', values: [116, 82, 57], alpha: 0.657 }
```

## Install

```sh
npm i color-composite
```

## Usage

### `composite([ top, ..., bottom ])`

Composite an array of colors from `top` to `bottom` into one color.

Takes color strings or objects as input. Returns a color object.

```js
import { composite } from 'color-composite'

composite([
  'rgba(255, 0, 0, 0.3)',
  'rgba(0, 255, 0, 0.3)',
  'rgba(0, 0, 255, 0.3)'
])
// => { space: 'rgb', values: [116, 82, 57], alpha: 0.657 }
```

### `over(a, b)`

Compsites color A over color B.

Takes color strings or objects as input. Returns a color object.

```js
import { over } from 'color-composite'

over(
  'rgba(127, 195, 255, 0.5)',
  'rgba(195, 127, 255, 0.75)'
)
// => { space: 'rgb', values: [156, 166, 255], alpha: 0.875 }
```

Made from the [Alpha compositing "over operator"](https://en.wikipedia.org/wiki/Alpha_compositing#Description) on Wikipedia.

---
_Source: https://npm.io/package/color-composite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._