Tiny modern CSS color parser & converter (OKLCH-first).
npm install @toolsbee/coloraColora is a tiny, modern CSS color parser and converter with first-class OKLCH support.
It focuses on:
- correctness (CSS Color Level 4 friendly)
- predictable normalization
- perceptual color workflows using OKLCH
> Early development. API may evolve, but breaking changes will follow semantic versioning.
Maintained by toolsbee.com · https://www.toolsbee.com
---
npm install @toolsbee/colora
---
``js
import { parseColor } from "@toolsbee/colora";
parseColor("#0ea5e9").toRgb();
// { r: 14, g: 165, b: 233, a: 1 }
parseColor("rgb(10 20 30 / 0.5)").toHex();
// "#0A141E80"
parseColor("oklch(62% 0.18 240 / 0.9)").toCss();
// "oklch(62% 0.18 240 / 0.9)"
parseColor("hsl(0 100% 50%)").toRgb();
// { r: 255, g: 0, b: 0, a: 1 }
parseColor("color(display-p3 1 0 0)").toHex();
// "#FF0000" (Clamped to sRGB)
``
---
Colora exposes a single entry point and a small set of conversion methods.
Parses any supported CSS color format and returns a Color object.
`js`
const color = parseColor("rgba(255, 0, 0, 0.25)");
| Method | Description | Returns |
| --------- | ----------------------------------- | ------------------------ |
| toRgb() | Convert to sRGB with alpha | { r, g, b, a } |
| toHex() | Convert to hex with alpha if needed | "#RRGGBB" or "#RRGGBBAA" |
| toHsl() | Convert to HSL | { h, s, l, a } |
| toP3() | Convert to Display P3 | { r, g, b, a } |
| toOklch() | Convert to OKLCH (perceptual) | { l, c, h, a } |
| toCss() | Normalized CSS output | formatted string |
All conversions are bidirectional and preserve alpha.
---
`js
const base = parseColor("#0ea5e9").toOklch();
const darker = {
...base,
l: base.l - 0.1
};
parseColor(
oklch(${darker.l * 100}% ${darker.c} ${darker.h})
).toHex();
---
`js
parseColor("rgb(10,20,30)").toCss();
// "rgb(10 20 30)"
parseColor("rgb(10 20 30 / .5000)").toCss();
// "rgb(10 20 30 / 0.5)"
`
---
* #rgb
* #rgba
* #rrggbb
* #rrggbbaa
* rgb(1 2 3)
* rgb(1 2 3 / 0.5)
* rgb(1, 2, 3)
* rgba(1, 2, 3, 0.5)
* hsl(0 100% 50%)
* hsl(0, 100%, 50%)
* hsla(0, 100%, 50%, 0.5)
* color(display-p3 1 0 0)
* color(display-p3 1 0 0 / 0.5)
* oklch(62% 0.18 240)
* oklch(0.62 0.18 240)
* oklch(62% 0.18 240 / 0.9)
* Hue units supported: deg, rad, grad, turn
> Note: Parsing is strictly spec-compliant. Percentages must use %. Alpha in modern syntax must use /.
---
`html
Loading…
`
When using ES modules locally, run a local server. ES modules do not work reliably via file URLs.
---
`js``
try {
parseColor("not-a-color");
} catch (err) {
console.error(err.message);
}
---
* Small, dependency-free core
* Modern CSS Color Level 4 syntax
* Perceptual correctness via OKLCH
* ESM and CJS support
* CDN-friendly builds
---
MIT