@philiprehberger/color-kit

Lightweight color parsing, conversion, and manipulation

Installation

npm install @philiprehberger/color-kit

Usage

import { color } from '@philiprehberger/color-kit';

const c = color('#3b82f6');
c.lighten(20).toHex();       // lighter blue
c.opacity(0.5).toRGB();      // "rgba(59, 130, 246, 0.5)"
c.contrast(color('#ffffff')); // WCAG contrast ratio
c.isDark();                   // true
c.mix(color('#ef4444'), 0.5); // blended color

Color Harmonies

color('#3b82f6').complementary(); // [Color]
color('#3b82f6').analogous();     // [Color, Color]
color('#3b82f6').triadic();       // [Color, Color]

API

| Method | Description | |--------|-------------| | color(input) | Parse hex, rgb(), hsl(), or named color | | .toHex() / .toRGB() / .toHSL() / .toHSB() | Convert | | .lighten(n) / .darken(n) | Adjust lightness | | .saturate(n) / .desaturate(n) | Adjust saturation | | .opacity(a) / .invert() / .grayscale() | Transform | | .mix(other, ratio) | Blend two colors | | .contrast(other) | WCAG 2.1 contrast ratio | | .isLight() / .isDark() | Luminance check | | .complementary() / .analogous() / .triadic() | Harmonies |

Development

npm install
npm run build
npm test

Support

If you find this project useful:

⭐ Star the repo

🐛 Report issues

💡 Suggest features

❤️ Sponsor development

🌐 All Open Source Projects

💻 GitHub Profile

🔗 LinkedIn Profile

License

MIT