Gathering detailed insights and metrics for chroma-harmony
A minimal Color Harmony library built on top of chroma-js
Installations
npm install chroma-harmonyDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
16.16.0
NPM Version
8.11.0
Score
70.8
Supply Chain
84.4
Quality
75.5
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (91.23%)
JavaScript (8.77%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
2,003
Last Day
1
Last Week
15
Last Month
27
Last Year
1,439
GitHub Statistics
2 Stars
15 Commits
1 Watching
1 Branches
1 Contributors
Bundle Size
2.09 kB
Minified
866.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.1.0
Package Id
chroma-harmony@0.1.0
Unpacked Size
227.74 kB
Size
159.45 kB
File Count
16
NPM Version
8.11.0
Node Version
16.16.0
Publised On
26 Sept 2023
Total Downloads
Cumulative downloads
Total Downloads
2,003
Last day
0%
1
Compared to previous day
Last week
200%
15
Compared to previous week
Last month
2,600%
27
Compared to previous month
Last year
155.1%
1,439
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
6
Versions
chroma-harmony.js
A tiny TypeScript Color Harmony library built on top of chroma-js.
Try out with the interactive online editor!
Color Palettes
Use it in order to quickly generate sequential, diverging, or qualitative brewer color scales for data visualization:
Or Generate more general color palettes using simple color harmonies like complementary or analogous:
Color Spaces
Since this library uses chroma-js objects for color manipulations, we gain full advantage of advanced
color spaces for manipulating colors to generate automatic color palettes.
For example, a Triadic color harmony with a Red/Green/Blue may look like this using the generic HSL workflow:
And like this using the CSS4 oklch color space:
If using in a data visualization context, choosing the oklch triad may be preferred, as can be clearly seen in the following comparison where the hsl trid (on the left) makes the blue bars stand out much more against the red and green.
This is in contrast to the oklch triad (on the right), where no color is visually stronger than the other 2.
Install
First install the chroma-js peer-dependency:
npm install chroma-js
npm install chroma-harmony
API
1import Harmony from 'chroma-harmony'; 2 3/** 4 * {chroma.InterpolationMode} mode: https://gka.github.io/chroma.js/#scale-mode 5 * {boolean} correctLightness: https://gka.github.io/chroma.js/#scale-correctlightness 6 */ 7const generator = new Harmony(); 8 9// Generate a chroma.Scale object using a complementary color palette 10const complementary = generator.complementary(0x3182bd); 11 12// Generate a 3 color equidistant triadic color palette 13const triadic = generator.triadic(0xf03b20); // [chroma.Color, chroma.Color, chroma.Color]
TypeScript
To use in TypeScript, don't forget to install the chroma-js typings:
npm install @types/chroma-js
No vulnerabilities found.
No security vulnerabilities found.