# postcss-color-hct

> PostCSS plugin to transform hct() function to more compatible CSS (rgb() or rgba()).

Latest version **0.0.3** (published 2023-03-08) · Apache 2.0 license · 0 weekly downloads

## Install

```sh
npm install postcss-color-hct
pnpm add postcss-color-hct
yarn add postcss-color-hct
bun add postcss-color-hct
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-03-08 |
| First published | 2022-05-26 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 56.3 KB |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Rody Davis |
| Maintainers | rodydavis |
| Keywords | postcss, css, postcss-plugin, color, rgb, hct |

## Links

- npm: https://www.npmjs.com/package/postcss-color-hct
- Repository: https://github.com/rodydavis/postcss-color-hct
- Homepage: https://github.com/rodydavis/postcss-color-hct#readme
- Issues: https://github.com/rodydavis/postcss-color-hct/issues
- npm.io page: https://npm.io/package/postcss-color-hct

## Dependencies (3)

- [postcss](https://npm.io/package/postcss.md) 5
- [reduce-function-call](https://npm.io/package/reduce-function-call.md) 1
- [@material/material-color-utilities](https://npm.io/package/@material/material-color-utilities.md) ^0.1.2

## 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

- 0.0.3 (latest) — 2023-03-08
- 0.0.2 — 2022-05-26
- 0.0.1 — 2022-05-26

## README

# postcss-color-hct

[![Tests](https://github.com/rodydavis/postcss-color-hct/actions/workflows/tests.yml/badge.svg)](https://github.com/rodydavis/postcss-color-hct/actions/workflows/tests.yml)
[![npm package](https://badgen.net/npm/v/postcss-color-hct)](https://npmjs.com/package/postcss-color-hct)

> [PostCSS](https://github.com/postcss/postcss) plugin to transform [hct() color](https://www.npmjs.com/package/@material/material-color-utilities) to compatible CSS (#hex or rgba()).

## Overview

Using the new [HCT](https://www.npmjs.com/package/@material/material-color-utilities) color space for [Material 3](https://m3.material.io/styles/color/overview) this plugin convert the hct color syntax to compatible CSS.

Implementation based on the [postcss-color-hcl](https://github.com/devgru/postcss-color-hcl) plugin.

CSS Custom properties are **not supported** as input for values:

```css
body {
  --hue: 20;
  color: hct(var(--hue), 70%, 50%, 0.5);
}
```

Using the HCT color space at runtime can be done with the [Material Color Utilities](https://www.npmjs.com/package/@material/material-color-utilities) package for use in javascript.

## Installation

```bash
$ npm install postcss-color-hct
```

## Usage

```js
// dependencies
var fs = require("fs");
var postcss = require("postcss");
var colorHct = require("postcss-color-hct");

// css to be processed
var css = fs.readFileSync("input.css", "utf8");

// process css
var output = postcss().use(colorHct()).process(css).css;
```

Using this `input.css`:

```css
body {
  color: hct(21, 70%, 50%, 0.5);
  background: hct(0, 0%, 50%);
}
```

you will get:

```css
body {
  color: rgb(221 52 80 / 0.5);
  background: rgb(119, 119, 119);
}
```

Checkout [tests](test) for more examples.

---

## Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

    $ git clone https://github.com/rodydavis/postcss-color-hct.git
    $ git checkout -b patch-1
    $ npm install
    $ npm test

## [Changelog](CHANGELOG.md)

## [License](LICENSE)

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