nhb-toolbox 4.0.48 → 4.0.50

package/dist/cjs/colors/Color.js

@@ -156,10 +156,10 @@ class Color {
      * @returns A new `Color` instance with the modified darkness.
      */
     applyDarkness(percent) {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const newL = Math.max(0, l - percent);
         const newHSL = `hsl(${h}, ${s}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Lightens the color by increasing the lightness by the given percentage.
@@ -167,10 +167,10 @@ class Color {
      * @returns A new `Color` instance with the modified lightness.
      */
     applyBrightness(percent) {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const newL = Math.min(100, l + percent);
         const newHSL = `hsl(${h}, ${s}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Reduces the saturation of the color to make it appear duller.
@@ -178,10 +178,10 @@ class Color {
      * @returns A new `Color` instance with the modified saturation.
      */
     applyDullness(percent) {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const newS = Math.max(0, s - percent);
         const newHSL = `hsl(${h}, ${newS}%, ${l}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Softens the color toward white by reducing saturation and increasing lightness based on a percentage.
@@ -190,15 +190,17 @@ class Color {
      * @returns A new `Color` instance shifted toward white.
      */
     applyWhiteShade(percent) {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         // Cap values to avoid overshooting
         const newS = Math.max(0, s - (s * percent) / 100);
         const newL = Math.min(100, l + ((100 - l) * percent) / 100);
         const newHSL = `hsl(${h}, ${newS}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Blends the current color with another color based on the given weight.
+     *
+     * - **NOTE:** *If any of the input colors has opacity (alpha channel), it might be lost from the generated alpha variants of the respective color formats.*
      * @param other - The color in any 6 `(Hex, Hex8 RGB, RGBA, HSL or HSLA)` to blend with.
      * @param weight - A number from 0 to 1 indicating the weight of the other color. Defaults to `0.5`.
      * 				 - `weight = 0` → only the original color (this)
@@ -209,11 +211,20 @@ class Color {
     blendWith(other, weight = 0.5) {
         const w = Math.max(0, Math.min(1, weight));
         const converted = new Color(other);
-        const rgb1 = (0, helpers_1._extractSolidColorValues)(this.rgb);
-        const rgb2 = (0, helpers_1._extractSolidColorValues)(converted.rgb);
-        const blended = rgb1.map((c, i) => Math.round(c * (1 - w) + rgb2[i] * w));
-        const blendedRGB = `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
-        return new Color(blendedRGB);
+        const [r1, b1, g1, a1] = (0, helpers_1._extractAlphaColorValues)(this.rgba);
+        const [r2, b2, g2, a2] = (0, helpers_1._extractAlphaColorValues)(converted.rgba);
+        const alpha = a1 * (1 - w) + a2 * w;
+        // ! Original code for solid color
+        // const blended = rgb1.map((c, i) =>
+        // 	Math.round(c * (1 - w) + rgb2[i] * w),
+        // ) as ColorNumbers;
+        // const blendedRGB = `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
+        const blendChannel = (c1, c2) => Math.round((c1 * a1 * (1 - w) + c2 * a2 * w) / alpha);
+        const r = blendChannel(r1, r2);
+        const g = blendChannel(g1, g2);
+        const b = blendChannel(b1, b2);
+        const blended = `rgba(${r}, ${g}, ${b}, ${+alpha.toFixed(2)})`;
+        return new Color(blended);
     }
     /**
      * @instance Calculates the contrast ratio between this color and another color (WCAG).
@@ -243,10 +254,10 @@ class Color {
      * @returns A new Color that is the complement of the current color.
      */
     getComplementaryColor() {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const newHue = (h + 180) % 360;
         const newHSL = `hsl(${newHue}, ${s}%, ${l}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Generates a color scheme of analogous colors, including the base color.
@@ -254,10 +265,11 @@ class Color {
      * @returns An array of three Color instances: [base, left, right].
      */
     getAnalogousColors() {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const left = `hsl(${(h + 330) % 360}, ${s}%, ${l}%)`;
         const right = `hsl(${(h + 30) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(left), new Color(right)];
+        const analogous = [this, new Color(left), new Color(right)];
+        return analogous.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Generates a color triad scheme including the base color.
@@ -265,10 +277,11 @@ class Color {
      * @returns An array of three Color instances: [base, triad1, triad2].
      */
     getTriadColors() {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const c1 = `hsl(${(h + 120) % 360}, ${s}%, ${l}%)`;
         const c2 = `hsl(${(h + 240) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(c1), new Color(c2)];
+        const triad = [this, new Color(c1), new Color(c2)];
+        return triad.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Generates a tetradic color scheme including the base color.
@@ -276,11 +289,12 @@ class Color {
      * @returns An array of four Color instances: [base, tetrad1, tetrad2, tetrad3].
      */
     getTetradColors() {
-        const [h, s, l] = (0, helpers_1._extractSolidColorValues)(this.hsl);
+        const [h, s, l, a] = (0, helpers_1._extractAlphaColorValues)(this.hsla);
         const c1 = `hsl(${(h + 90) % 360}, ${s}%, ${l}%)`;
         const c2 = `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
         const c3 = `hsl(${(h + 270) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(c1), new Color(c2), new Color(c3)];
+        const tetrad = [this, new Color(c1), new Color(c2), new Color(c3)];
+        return tetrad.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Gets the `WCAG` accessibility rating between this and another color.

package/dist/dts/colors/Color.d.ts

@@ -1,4 +1,4 @@
-import type { ColorType, Hex6, Hex8, HSL, HSLA, Percent, RGB, RGBA } from './types';
+import type { Analogous, ColorType, Hex6, Hex8, HSL, HSLA, Percent, RGB, RGBA, Tetrad, Triad } from './types';
 /**
  * * Class representing a color and its conversions among `Hex`, `Hex8` `RGB`, `RGBA`, `HSL` and `HSLA` formats.
  * * It has 13 instance methods to manipulate and play with the color values.
@@ -82,7 +82,7 @@ export declare class Color {
      */
     constructor(toConvert: ColorType);
     /** - Iterates over the color representations (Hex, RGB, HSL). */
-    [Symbol.iterator](): Generator<Hex6 | RGB | HSL | Hex8 | RGBA | HSLA, void, unknown>;
+    [Symbol.iterator](): Generator<RGB | HSL | Hex6 | RGBA | Hex8 | HSLA, void, unknown>;
     /**
      * @instance Applies or modifies the opacity of a color. Mutate the original instance.
      * - For solid colors (Hex6/RGB/HSL): Adds an alpha channel with the specified opacity.
@@ -129,6 +129,8 @@ export declare class Color {
     applyWhiteShade(percent: Percent): Color;
     /**
      * @instance Blends the current color with another color based on the given weight.
+     *
+     * - **NOTE:** *If any of the input colors has opacity (alpha channel), it might be lost from the generated alpha variants of the respective color formats.*
      * @param other - The color in any 6 `(Hex, Hex8 RGB, RGBA, HSL or HSLA)` to blend with.
      * @param weight - A number from 0 to 1 indicating the weight of the other color. Defaults to `0.5`.
      * 				 - `weight = 0` → only the original color (this)
@@ -153,19 +155,19 @@ export declare class Color {
      * Analogous colors are next to each other on the color wheel (±30°).
      * @returns An array of three Color instances: [base, left, right].
      */
-    getAnalogousColors(): [Color, Color, Color];
+    getAnalogousColors(): Analogous;
     /**
      * @instance Generates a color triad scheme including the base color.
      * Triadic colors are evenly spaced (120° apart) on the color wheel.
      * @returns An array of three Color instances: [base, triad1, triad2].
      */
-    getTriadColors(): [Color, Color, Color];
+    getTriadColors(): Triad;
     /**
      * @instance Generates a tetradic color scheme including the base color.
      * Tetradic colors form a rectangle on the color wheel (90° apart).
      * @returns An array of four Color instances: [base, tetrad1, tetrad2, tetrad3].
      */
-    getTetradColors(): [Color, Color, Color, Color];
+    getTetradColors(): Tetrad;
     /**
      * @instance Gets the `WCAG` accessibility rating between this and another color.
      * @param other - The other color to test contrast against.

package/dist/dts/colors/Color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../src/colors/Color.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAIX,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,OAAO,EACP,GAAG,EACH,IAAI,EAEJ,MAAM,SAAS,CAAC;AAKjB;;;;;;;;;;;GAWG;AACH,qBAAa,KAAK;;IACV,GAAG,EAAE,IAAI,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;;IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;gBACS,SAAS,EAAE,SAAS;IAwFhC,iEAAiE;IAChE,CAAC,MAAM,CAAC,QAAQ,CAAC;IASlB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAkBrC;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUtC;;;;OAIG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUxC;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUtC;;;;;OAKG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAYxC;;;;;;;;OAQG;IACH,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,SAAM,GAAG,KAAK;IAgBhD;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAyBvC;;;OAGG;IACH,qBAAqB,IAAI,KAAK;IAU9B;;;;OAIG;IACH,kBAAkB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;IAS3C;;;;OAIG;IACH,cAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;IASvC;;;;OAIG;IACH,eAAe,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;IAU/C;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK;IAQtD;;;OAGG;IACH,YAAY,IAAI,OAAO;IAQvB;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIzC;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIzC;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;CAkD3C"}
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../src/colors/Color.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAEX,SAAS,EAET,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,OAAO,EACP,GAAG,EACH,IAAI,EAEJ,MAAM,EACN,KAAK,EACL,MAAM,SAAS,CAAC;AAKjB;;;;;;;;;;;GAWG;AACH,qBAAa,KAAK;;IACV,GAAG,EAAE,IAAI,CAAC;IACV,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,IAAI,EAAE,IAAI,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;;IAGH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoCG;gBACS,SAAS,EAAE,SAAS;IAwFhC,iEAAiE;IAChE,CAAC,MAAM,CAAC,QAAQ,CAAC;IASlB;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAkBrC;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUtC;;;;OAIG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUxC;;;;OAIG;IACH,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAUtC;;;;;OAKG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,GAAG,KAAK;IAYxC;;;;;;;;;;OAUG;IACH,SAAS,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,SAAM,GAAG,KAAK;IA4BhD;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAyBvC;;;OAGG;IACH,qBAAqB,IAAI,KAAK;IAU9B;;;;OAIG;IACH,kBAAkB,IAAI,SAAS;IAa/B;;;;OAIG;IACH,cAAc,IAAI,KAAK;IAWvB;;;;OAIG;IACH,eAAe,IAAI,MAAM;IAczB;;;;OAIG;IACH,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK;IAQtD;;;OAGG;IACH,YAAY,IAAI,OAAO;IAQvB;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIzC;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;IAI3C;;;;;OAKG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,GAAG;IAIzC;;;;;OAKG;IACH,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,IAAI;CAkD3C"}

package/dist/dts/colors/types.d.ts

@@ -1,4 +1,5 @@
 import type { Branded } from '../types';
+import type { Color } from './Color';
 /** - A string, number for generating color. */
 export type ColorInput = string | number;
 /** - An array of strings/numbers or nested arrays of strings/numbers for generating colors. */
@@ -115,4 +116,7 @@ export interface Colors {
     /** - `HSLA` color (e.g., `hsla(14, 100%, 60%, 1)`) */
     hsla: HSLA;
 }
+export type Analogous = [Color, Color, Color];
+export type Triad = [Color, Color, Color];
+export type Tetrad = [Color, Color, Color, Color];
 //# sourceMappingURL=types.d.ts.map

package/dist/dts/colors/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"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"}

package/dist/esm/colors/Color.js

@@ -153,10 +153,10 @@ export class Color {
      * @returns A new `Color` instance with the modified darkness.
      */
     applyDarkness(percent) {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const newL = Math.max(0, l - percent);
         const newHSL = `hsl(${h}, ${s}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Lightens the color by increasing the lightness by the given percentage.
@@ -164,10 +164,10 @@ export class Color {
      * @returns A new `Color` instance with the modified lightness.
      */
     applyBrightness(percent) {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const newL = Math.min(100, l + percent);
         const newHSL = `hsl(${h}, ${s}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Reduces the saturation of the color to make it appear duller.
@@ -175,10 +175,10 @@ export class Color {
      * @returns A new `Color` instance with the modified saturation.
      */
     applyDullness(percent) {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const newS = Math.max(0, s - percent);
         const newHSL = `hsl(${h}, ${newS}%, ${l}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Softens the color toward white by reducing saturation and increasing lightness based on a percentage.
@@ -187,15 +187,17 @@ export class Color {
      * @returns A new `Color` instance shifted toward white.
      */
     applyWhiteShade(percent) {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         // Cap values to avoid overshooting
         const newS = Math.max(0, s - (s * percent) / 100);
         const newL = Math.min(100, l + ((100 - l) * percent) / 100);
         const newHSL = `hsl(${h}, ${newS}%, ${newL}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Blends the current color with another color based on the given weight.
+     *
+     * - **NOTE:** *If any of the input colors has opacity (alpha channel), it might be lost from the generated alpha variants of the respective color formats.*
      * @param other - The color in any 6 `(Hex, Hex8 RGB, RGBA, HSL or HSLA)` to blend with.
      * @param weight - A number from 0 to 1 indicating the weight of the other color. Defaults to `0.5`.
      * 				 - `weight = 0` → only the original color (this)
@@ -206,11 +208,20 @@ export class Color {
     blendWith(other, weight = 0.5) {
         const w = Math.max(0, Math.min(1, weight));
         const converted = new Color(other);
-        const rgb1 = _extractSolidColorValues(this.rgb);
-        const rgb2 = _extractSolidColorValues(converted.rgb);
-        const blended = rgb1.map((c, i) => Math.round(c * (1 - w) + rgb2[i] * w));
-        const blendedRGB = `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
-        return new Color(blendedRGB);
+        const [r1, b1, g1, a1] = _extractAlphaColorValues(this.rgba);
+        const [r2, b2, g2, a2] = _extractAlphaColorValues(converted.rgba);
+        const alpha = a1 * (1 - w) + a2 * w;
+        // ! Original code for solid color
+        // const blended = rgb1.map((c, i) =>
+        // 	Math.round(c * (1 - w) + rgb2[i] * w),
+        // ) as ColorNumbers;
+        // const blendedRGB = `rgb(${blended[0]}, ${blended[1]}, ${blended[2]})`;
+        const blendChannel = (c1, c2) => Math.round((c1 * a1 * (1 - w) + c2 * a2 * w) / alpha);
+        const r = blendChannel(r1, r2);
+        const g = blendChannel(g1, g2);
+        const b = blendChannel(b1, b2);
+        const blended = `rgba(${r}, ${g}, ${b}, ${+alpha.toFixed(2)})`;
+        return new Color(blended);
     }
     /**
      * @instance Calculates the contrast ratio between this color and another color (WCAG).
@@ -240,10 +251,10 @@ export class Color {
      * @returns A new Color that is the complement of the current color.
      */
     getComplementaryColor() {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const newHue = (h + 180) % 360;
         const newHSL = `hsl(${newHue}, ${s}%, ${l}%)`;
-        return new Color(newHSL);
+        return new Color(newHSL).applyOpacity((a * 100));
     }
     /**
      * @instance Generates a color scheme of analogous colors, including the base color.
@@ -251,10 +262,11 @@ export class Color {
      * @returns An array of three Color instances: [base, left, right].
      */
     getAnalogousColors() {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const left = `hsl(${(h + 330) % 360}, ${s}%, ${l}%)`;
         const right = `hsl(${(h + 30) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(left), new Color(right)];
+        const analogous = [this, new Color(left), new Color(right)];
+        return analogous.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Generates a color triad scheme including the base color.
@@ -262,10 +274,11 @@ export class Color {
      * @returns An array of three Color instances: [base, triad1, triad2].
      */
     getTriadColors() {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const c1 = `hsl(${(h + 120) % 360}, ${s}%, ${l}%)`;
         const c2 = `hsl(${(h + 240) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(c1), new Color(c2)];
+        const triad = [this, new Color(c1), new Color(c2)];
+        return triad.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Generates a tetradic color scheme including the base color.
@@ -273,11 +286,12 @@ export class Color {
      * @returns An array of four Color instances: [base, tetrad1, tetrad2, tetrad3].
      */
     getTetradColors() {
-        const [h, s, l] = _extractSolidColorValues(this.hsl);
+        const [h, s, l, a] = _extractAlphaColorValues(this.hsla);
         const c1 = `hsl(${(h + 90) % 360}, ${s}%, ${l}%)`;
         const c2 = `hsl(${(h + 180) % 360}, ${s}%, ${l}%)`;
         const c3 = `hsl(${(h + 270) % 360}, ${s}%, ${l}%)`;
-        return [this, new Color(c1), new Color(c2), new Color(c3)];
+        const tetrad = [this, new Color(c1), new Color(c2), new Color(c3)];
+        return tetrad.map((c) => c.applyOpacity((a * 100)));
     }
     /**
      * @instance Gets the `WCAG` accessibility rating between this and another color.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhb-toolbox",
-  "version": "4.0.48",
+  "version": "4.0.50",
   "description": "A versatile collection of smart, efficient, and reusable utility functions for everyday development needs.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",