# @dkuku/tailwind-color-palette

> Personalized color palettes for Tailwindcss.

Latest version **1.0.1** (published 2019-09-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dkuku/tailwind-color-palette
pnpm add @dkuku/tailwind-color-palette
yarn add @dkuku/tailwind-color-palette
bun add @dkuku/tailwind-color-palette
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-09-27 |
| First published | 2019-09-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 35 |
| Author | Kyle Coburn |
| Maintainers | dkuku |
| Keywords | tailwind, chroma |

## Links

- npm: https://www.npmjs.com/package/@dkuku/tailwind-color-palette
- Repository: https://github.com/ky-is/tailwind-color-palette
- Homepage: https://github.com/ky-is/tailwind-color-palette#readme
- Issues: https://github.com/ky-is/tailwind-color-palette/issues
- npm.io page: https://npm.io/package/@dkuku/tailwind-color-palette

## Dependencies (2)

- [chroma-js](https://npm.io/package/chroma-js.md) ^2.0.3
- [@types/chroma-js](https://npm.io/package/@types/chroma-js.md) ^1.4.3

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-09-27
- 1.0.0 — 2019-09-25

## README

# tailwind-color-palette

Personalized color palettes for Tailwindcss. Generates the nine `100`–`900` classes for your color, plus optional UI and grayscale colors (based on https://github.com/adevade/color-scheme-generator).

For Tailwind 1.0:
```bash
npm install --save-dev @ky-is/tailwind-color-palette
```

For Tailwind 0.x, see the [0.x branch](https://github.com/ky-is/tailwind-color-palette/tree/tailwind-0.x).

## Configuration

In `tailwind.config.js`:

```js
module.exports = {
  theme: {
    colors: require('@ky-is/tailwind-color-palette')('#e7a', {grayscale: true, ui: true}),
// ...
```

This generates the following colors, tinted by the provided color:
- Brand: `brand-(100–900)`
- Grayscale: `gray-(100–900)`
- UI: `cta-(100–900)`, `info-(100–900)`, `warning-(100–900)`, `success-(100–900)`, `danger-(100–900)`

## Options

The first parameter is the `color` to generate the palette from. The second is an optional object with:

- `name` (String, default: 'brand'): The class name prefix for this color (e.g. `text-brand-light` for the default).
- `ui` (Boolean, default: false): Whether to generate UI color classes (`cta`, `info`, `warning`, `success`, `danger`), tinted with `color`.
- `grayscale` (Boolean, default: false): Whether to generate grayscale color classes, tinted with `color`.

### Advanced Options

- `uiMix` (Number, default: 0.2, range: 0-1): The proportion of the `color` parameter to mix into the UI colors.
- `grayscaleMix` (Number, default: 0.03, range: 0-1): The proportion of the `color` parameter to mix into the gray colors.
- `palette` (Object, default: {}): An object of existing color definitions to be appended to.

## Examples

Simple all colors:
```js
const colors = tailwindColorPalette('#FFC0CB', {grayscale: true, ui: true})
```

Primary + secondary:
```js
const primaryColors = tailwindColorPalette('#38C172', {name: 'primary', grayscale: true, ui: true})
const secondaryColors = tailwindColorPalette('#3490DC', {name: 'secondary'})
const colors = Object.assign(secondaryColors, primaryColors)
```

No color mixing:
```js
const colors = tailwindColorPalette('#E3342F', {grayscale: true, grayscaleMix: 0, ui: true, uiMix: 0})
```

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