# use-color-luminance

> Hook to determine a colour's luminance

Latest version **1.3.0** (published 2020-05-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-color-luminance
pnpm add use-color-luminance
yarn add use-color-luminance
bun add use-color-luminance
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2020-05-31 |
| First published | 2020-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Derk-Jan Karrenbeld |
| Maintainers | sleeplessbyte |

## Links

- npm: https://www.npmjs.com/package/use-color-luminance
- npm.io page: https://npm.io/package/use-color-luminance

## Recent versions

- 1.3.0 (latest) — 2020-05-31
- 1.2.1 — 2020-05-24
- 1.2.0 — 2020-05-24
- 1.1.1 — 2020-05-23
- 1.1.0 — 2020-05-23
- 1.0.5 — 2020-05-22
- 1.0.4 — 2020-05-22
- 1.0.3 — 2020-05-22
- 1.0.2 — 2020-05-22
- 1.0.1 — 2020-05-21
- 1.0.0 — 2020-05-21

## README

# use-color-luminance

Hooks to calculate color luminance and color contrasts.

## Installation

```bash
yarn add use-color-luminance
# assumes react is already installed
```

## Usage

Calculate the perceived luminance between 0 and 1:

```typescript
import { colorLuminance } from 'use-color-luminance';

colorLuminance('#fff');
// => 1

colorLuminance('#AA5522FF');
// => ~0.1516

colorLuminance([0, 255, 0]);
// => 0.7152
```

Calculate the contrast between two colors (between 1 and 21):

```typescript
import { contrast } from 'use-color-luminance';

contrast('#fff', '#000000');
// => 21

contrast('rgba(0, 0, 0, 1)', '#000');
// => 1

contrast('#00f', '#000');
// => 2.444
```

You can import `AA_THRESHOLD_CONTRAST`, `AAA_THRESHOLD_CONTRAST` if you want to compare the output with threshold values.

### Hooks

- `useColorLuminance` is the hook for `colorLuminance`

### Formats

Supported formats for string input are:

- `#rgb`
- `#rrggbb`
- `#rrggbbFF`
- `rgb(r, g, b)` _with `(0 <= rgb <= 255)`_
- `rgba(r, g, b, 1)` _with `(0 <= rgb <= 255)`_

Supported formats for array input are:

- `[r, g, b]` _with `(0 <= rgb <= 255)`_
- `[r, g, b, 1]` _with `(0 <= rgb <= 255)`_

### Opaque colors only

Calculating the luminance or contrast of a color, only works if it's fully opaque. In other words, they can not be translucent.

Colors with that are (semi-)translucent need to be alpha-blended, which means
that you need to know the background color(s) in order to calculate the color
that will show on screen.

The package `use-alpha-blended-color` has both a React hook as well as a general
utility function to blend colors.

```typescript
import { useAlphaBlendedColor } from 'use-alpha-blended-color';
```

**Note**: Even alpha blended colors might _not_ be fully opaque. An alpha blended color will **only** be fully opaque, if either the foreground or background is.

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