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"]); }); });