diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47c2159..f00f80a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 2.4.0
+
+- New plugin: Color harmonies generator ❤️ [@EricRovell](https://github.com/EricRovell)
+
### 2.3.0
- Add new `isEqual` method ❤️ [@EricRovell](https://github.com/EricRovell)
diff --git a/README.md b/README.md
index 618acae..5824083 100644
--- a/README.md
+++ b/README.md
@@ -502,29 +502,25 @@ colord("#008080").mix("#808000", 0.35).toHex(); // "#50805d"
- .harmonies(type = "complimentary")
(harmonies plugin)
+ .harmonies(type = "complementary")
(harmonies plugin)
-Provides functionatity to generate [harmony colors](https://en.wikipedia.org/wiki/Harmony_(color)).
+Provides functionality to generate [harmony colors](). Returns an array of `Colord` instances.
```js
import { colord, extends } from "colord";
-import { harmonies } from "colord/plugins/harmonies";
+import harmoniesPlugin from "colord/plugins/harmonies";
-const color = colord("FF0000");
+extend([harmoniesPlugin]);
-color.harmonies("analogous")
- .map(color => color.toHex()); // [ "#FF0080", "#FF0000", "#FF8000"]
-color.harmonies("complimentary")
- .map(color => color.toHex()); // [ "#FF0000", "#00FFFF" ]
-color.harmonies("rectangle")
- .map(color => color.toHex()); // [ "#FF0000", "#FFFF00", "#00FFFF", "#0000FF" ]
-color.harmonies("tetradic")
- .map(color => color.toHex()); // [ "#FF0000", "#80FF00", "#00FFFF", "#8000FF" ]
-color.harmonies("triadic" )
- .map(color => color.toHex()); // [ "#FF0000", "#00FF00", "#0000FF" ]
-color.harmonies("split-complimentary")
- .map(color => color.toHex()); // [ "#FF0000", "#00FF80", "#0080FF" ]
+const color = colord("#ff0000");
+color.harmonies("analogous").map((c) => c.toHex()); // ["#ff0080", "#ff0000", "#ff8000"]
+color.harmonies("complementary").map((c) => c.toHex()); // ["#ff0000", "#00ffff"]
+color.harmonies("rectangle").map((c) => c.toHex()); // ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]
+color.harmonies("split-complementary").map((c) => c.toHex()); // ["#ff0000", "#00ff80", "#0080ff"]
+color.harmonies("tetradic").map((c) => c.toHex()); // ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
+color.harmonies("triadic").map((c) => c.toHex()); // ["#ff0000", "#00ff00", "#0000ff"]
```
+
### Color analysis
@@ -731,6 +727,28 @@ colord("device-cmyk(0% 61% 72% 0% / 50%)").toHex(); // "#ff634780"
+
+ harmonies
(Color harmonies) 0.15 KB
+
+Provides functionality to generate [harmony colors]().
+
+```js
+import { colord, extends } from "colord";
+import harmonies from "colord/plugins/harmonies";
+
+extend([harmonies]);
+
+const color = colord("#ff0000");
+color.harmonies("analogous").map((c) => c.toHex()); // ["#ff0080", "#ff0000", "#ff8000"]
+color.harmonies("complementary").map((c) => c.toHex()); // ["#ff0000", "#00ffff"]
+color.harmonies("rectangle").map((c) => c.toHex()); // ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]
+color.harmonies("split-complementary").map((c) => c.toHex()); // ["#ff0000", "#00ff80", "#0080ff"]
+color.harmonies("tetradic").map((c) => c.toHex()); // ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
+color.harmonies("triadic").map((c) => c.toHex()); // ["#ff0000", "#00ff00", "#0000ff"]
+```
+
+
+
hwb
(HWB color model) 0.8 KB
diff --git a/package.json b/package.json
index f727d83..061ff32 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "colord",
- "version": "2.3.0",
+ "version": "2.4.0",
"description": "👑 A tiny yet powerful tool for high-performance color manipulations and conversions",
"keywords": [
"color",
@@ -20,7 +20,7 @@
"a11y",
"cmyk",
"mix",
- "harmony colors"
+ "harmonies"
],
"repository": "omgovich/colord",
"author": "Vlad Shilov ",
diff --git a/src/plugins/harmonies.ts b/src/plugins/harmonies.ts
index 2dccc42..7c3a449 100644
--- a/src/plugins/harmonies.ts
+++ b/src/plugins/harmonies.ts
@@ -1,19 +1,19 @@
import { Plugin } from "../extend";
-export type Harmony =
+export type HarmonyType =
| "analogous"
- | "complimentary"
+ | "complementary"
| "rectangle"
+ | "split-complementary"
| "tetradic"
- | "triadic"
- | "split-complimentary";
+ | "triadic";
declare module "../colord" {
interface Colord {
/**
* Returns an array of harmony colors as `Colord` instances.
*/
- harmonies(type: Harmony): Colord[];
+ harmonies(type?: HarmonyType): Colord[];
}
}
@@ -25,16 +25,16 @@ const harmoniesPlugin: Plugin = (ColordClass): void => {
/**
* Harmony colors are colors with particular hue shift of the original color.
*/
- const hueShifts: Record = {
+ const hueShifts: Record = {
analogous: [-30, 0, 30],
- complimentary: [0, 180],
+ complementary: [0, 180],
rectangle: [0, 60, 180, 240],
tetradic: [0, 90, 180, 270],
triadic: [0, 120, 240],
- "split-complimentary": [0, 150, 210],
+ "split-complementary": [0, 150, 210],
};
- ColordClass.prototype.harmonies = function (type = "complimentary") {
+ ColordClass.prototype.harmonies = function (type = "complementary") {
return hueShifts[type].map((shift) => this.rotate(shift));
};
};
diff --git a/tests/plugins.test.ts b/tests/plugins.test.ts
index e55f387..ac8e2c6 100644
--- a/tests/plugins.test.ts
+++ b/tests/plugins.test.ts
@@ -1,7 +1,7 @@
import { colord, getFormat, extend } from "../src/";
import a11yPlugin from "../src/plugins/a11y";
import cmykPlugin from "../src/plugins/cmyk";
-import harmoniesPlugin from "../src/plugins/harmonies";
+import harmoniesPlugin, { HarmonyType } from "../src/plugins/harmonies";
import hwbPlugin from "../src/plugins/hwb";
import labPlugin from "../src/plugins/lab";
import lchPlugin from "../src/plugins/lch";
@@ -95,50 +95,20 @@ describe("cmyk", () => {
describe("harmonies", () => {
extend([harmoniesPlugin]);
- const color = colord("#FF0000");
-
- it("Generates analogous colors", () => {
- expect(color.harmonies("analogous").map((value) => value.toHex())).toEqual([
- "#ff0080",
- "#ff0000",
- "#ff8000",
- ]);
- });
- it("Generates complimentary colors", () => {
- expect(color.harmonies("complimentary").map((value) => value.toHex())).toEqual([
- "#ff0000",
- "#00ffff",
- ]);
- });
- it("Generates rectangle colors", () => {
- expect(color.harmonies("rectangle").map((value) => value.toHex())).toEqual([
- "#ff0000",
- "#ffff00",
- "#00ffff",
- "#0000ff",
- ]);
- });
- it("Generates tetradic colors", () => {
- expect(color.harmonies("tetradic").map((value) => value.toHex())).toEqual([
- "#ff0000",
- "#80ff00",
- "#00ffff",
- "#8000ff",
- ]);
- });
- it("Generates triadic colors", () => {
- expect(color.harmonies("triadic").map((value) => value.toHex())).toEqual([
- "#ff0000",
- "#00ff00",
- "#0000ff",
- ]);
- });
- it("Generates splitcomplimentary colors", () => {
- expect(color.harmonies("split-complimentary").map((value) => value.toHex())).toEqual([
- "#ff0000",
- "#00ff80",
- "#0080ff",
- ]);
+ const check = (type: HarmonyType | undefined, input: string, expected: string[]) => {
+ const harmonies = colord(input).harmonies(type);
+ const hexes = harmonies.map((value) => value.toHex());
+ return expect(hexes).toEqual(expected);
+ };
+
+ it("Generates harmony colors", () => {
+ check(undefined, "#ff0000", ["#ff0000", "#00ffff"]); // "complementary"
+ check("analogous", "#ff0000", ["#ff0080", "#ff0000", "#ff8000"]);
+ check("complementary", "#ff0000", ["#ff0000", "#00ffff"]);
+ check("rectangle", "#ff0000", ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]);
+ check("tetradic", "#ff0000", ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]);
+ check("triadic", "#ff0000", ["#ff0000", "#00ff00", "#0000ff"]);
+ check("split-complementary", "#ff0000", ["#ff0000", "#00ff80", "#0080ff"]);
});
});