# @wedgekit/color

> ## Purpose

Latest version **4.6.0** (published 2022-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wedgekit/color
pnpm add @wedgekit/color
yarn add @wedgekit/color
bun add @wedgekit/color
```

## 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 | 4.6.0 |
| Published | 2022-07-25 |
| First published | 2019-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rerskine, hpokharel, daniel.z, djkirlin, timmy2654, jfiller, dmsidevel, mada1113, sarah.adams, hbiede.dmsi, bpowers_dmsi, jaradpiniarski, kolson, dreadman3716, jgreazel, zkerkman, msuiter |

## Links

- npm: https://www.npmjs.com/package/@wedgekit/color
- npm.io page: https://npm.io/package/@wedgekit/color

## Dependencies (1)

- [@wedgekit/palette](https://npm.io/package/@wedgekit/palette.md) ^1.0.0

## Recent versions

- 4.6.0 (latest) — 2022-07-25
- 4.6.0-tc.1 (test) — 2022-07-22
- 4.5.3-tc.0 — 2022-02-23
- 4.5.3 — 2022-02-18
- 4.6.0-tc.0 — 2022-02-17
- 4.5.2 — 2021-09-01
- 4.5.1 — 2021-08-20
- 4.5.0 — 2021-06-18
- 4.4.0 — 2021-04-30
- 4.3.2 — 2021-04-26
- 4.3.1 — 2021-04-05
- 4.3.0 — 2021-03-12
- 4.2.1-tc.0 — 2021-03-12
- 4.2.1 — 2021-02-25
- 4.2.0 — 2021-02-13
- … 13 more at https://npm.io/package/@wedgekit/color/versions

## README

# Color

## Purpose

The color package allows users to generate colors approved by the design system.

The default export of `@wedgekit/color` is an object in which each key is a [ColorTag](#colortag) and each value is a color represented in hex.

## Usage

```jsx
import styled from 'styled-components';

import color from '@wedgekit/color';

const ColorSwatch = styled.div`
  height: 90px;
  width: 90px;
  background: ${color.G700};
`;

const Example = () => <ColorSwatch />;

render(<Example />);
```

## ColorTag

A `ColorTag` is a string that combines a color family abbreviation (i.e. Blue -> B) and three digit number indicating a color in that family. As a rule, higher numbers are darker. For example:

`color.N700` is black.

`color.N050` is white.

Further reading on avaliable colors avaliable [here](/visualGuidelines/color/design)

### Usage

```typescript static
import { ColorTag } from '@wedgekit/color';
```

## Other Exports

[contextualize](https://github.com/dmsi-io/wedgekit/blob/develop/public/color/src/DOCUMENTATION.md#contextualize)

[getContrastColors](https://github.com/dmsi-io/wedgekit/blob/develop/public/color/src/DOCUMENTATION.md#getcontrastcolors)

[hexToRGBA](https://github.com/dmsi-io/wedgekit/blob/develop/public/color/src/DOCUMENTATION.md#hextorgba)

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