diff --git a/package.json b/package.json index be67149..d7a83eb 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@devlander/colors", "description": "Color utility package used between packages", - "version": "0.0.3", + "version": "0.0.4", "browser": "dist/umd/index.js", "main": "dist/cjs/index.js", "types": "typings/index.d.ts", diff --git a/src/__tests__/adjustColor.test.ts b/src/__tests__/adjustColor.test.ts index c317b72..6647890 100644 --- a/src/__tests__/adjustColor.test.ts +++ b/src/__tests__/adjustColor.test.ts @@ -1,45 +1,44 @@ import { adjustColor } from "../adjustColor"; -import { AlphaValue } from "../types/alpha-value.type"; describe("adjustColor", () => { it("should return the input color if it is a valid CSS color name", () => { - const result = adjustColor("transparent", 0.5 as AlphaValue, "light"); + const result = adjustColor("transparent", 0.5, "light"); expect(result).toBe("transparent"); }); - it("should return default color if alphaValue is out of range", () => { - const result = adjustColor("#FFFFFF", -1 as AlphaValue, "light"); + it("should return default color is out of range", () => { + const result = adjustColor("#FFFFFF", -1, "light"); expect(result).toBe("#FF0000"); }); it("should lighten the color in light mode", () => { - const result = adjustColor("#000000", 0.5 as AlphaValue, "light"); + const result = adjustColor("#000000", 0.5, "light"); expect(result).toMatch(/^#[0-9A-F]{6}$/i); // Regex to match hex color }); it("should darken the color in dark mode", () => { - const result = adjustColor("#FFFFFF", 0.5 as AlphaValue, "dark"); + const result = adjustColor("#FFFFFF", 0.5, "dark"); expect(result).toMatch(/^#[0-9A-F]{6}$/i); // Regex to match hex color }); it("should return default color for invalid color format", () => { - const result = adjustColor("invalidColor", 0.5 as AlphaValue, "light"); + const result = adjustColor("invalidColor", 0.5, "light"); expect(result).toBe("#FF0000"); }); it("should apply alpha to RGB color", () => { - const result = adjustColor("rgb(0, 0, 0)", 0.5 as AlphaValue, "light"); + const result = adjustColor("rgb(0, 0, 0)", 0.5, "light"); expect(result).toMatch(/^rgba\(\d{1,3}, \d{1,3}, \d{1,3}, 0(\.\d+)?\)$/i); // Regex to match RGBA color }); it("should apply alpha to RGBA color", () => { - const result = adjustColor("rgba(0, 0, 0, 1)", 0.5 as AlphaValue, "light"); + const result = adjustColor("rgba(0, 0, 0, 1)", 0.5, "light"); expect(result).toMatch(/^rgba\(\d{1,3}, \d{1,3}, \d{1,3}, 0(\.\d+)?\)$/i); // Regex to match RGBA color }); it("should handle exceptions and return default color", () => { jest.spyOn(console, "log").mockImplementation(() => {}); // Mock console.log - const result = adjustColor("#12345G", 0.5 as AlphaValue, "light"); + const result = adjustColor("#12345G", 0.5, "light"); expect(result).toBe("#FF0000"); expect(console.log).toHaveBeenCalledWith( expect.stringContaining("Error adjusting color with value"), diff --git a/src/__tests__/color.test.ts b/src/__tests__/color.test.ts index 3bffb4a..e939081 100644 --- a/src/__tests__/color.test.ts +++ b/src/__tests__/color.test.ts @@ -33,7 +33,7 @@ describe("Color class", () => { test("should blend the color with another color", () => { const color = new Color("#ff6464"); const secondaryColor: HexDecimalObject = { r: 0, g: 0, b: 255 }; - color.blend(0.5, secondaryColor); + color.blend(50, secondaryColor); expect(color.getColor()).toEqual({ r: 128, g: 50, b: 178 }); }); diff --git a/src/adjustColor.ts b/src/adjustColor.ts index befee33..af0b7e2 100644 --- a/src/adjustColor.ts +++ b/src/adjustColor.ts @@ -1,106 +1,107 @@ -import { applyAlphaToColor } from './applyAlphaToColor' -import { canBeConvertedIntoColor } from './canBeConvertedToColor' +import { applyAlphaToColor } from "./applyAlphaToColor"; +import { canBeConvertedIntoColor } from "./canBeConvertedToColor"; -import { lightenColor } from './lightenColor' -import { darkenColor } from './darkenColor' -import { toHexColor } from './toHexColor' -import { toRgbString } from './toRgbString' -import { blendColors } from './blendColors' -import { parseRgbString } from './parseRgbString' -import { isValidHex } from './isValidHex' -import { isValidRgb } from './isValidRgb' -import { isValidRgba } from './isValidRgba' -import { AlphaValue } from './types/alpha-value.type' -import { ThemeType } from './types/theme.type' -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { hexesToDecimals, RgbWithAHexObject } from './hexToDecimals' -import { parseHex } from './parseHex' -import { NumberRange1To100 } from './types/number-range-hundred.type' +import { lightenColor } from "./lightenColor"; +import { darkenColor } from "./darkenColor"; +import { toHexColor } from "./toHexColor"; +import { toRgbString } from "./toRgbString"; +import { blendColors } from "./blendColors"; +import { parseRgbString } from "./parseRgbString"; +import { isValidHex } from "./isValidHex"; +import { isValidRgb } from "./isValidRgb"; +import { isValidRgba } from "./isValidRgba"; +import { ThemeType } from "./types/theme.type"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { hexesToDecimals, RgbWithAHexObject } from "./hexToDecimals"; +import { parseHex } from "./parseHex"; +import { AlphaScale } from "./types/alpha-scale.type"; export interface AdjustColorFunc { ( colorValue: string, - alphaValue: NumberRange1To100, + alphaValue: AlphaScale, mode: ThemeType, cssColorNames?: string[], - ): string + ): string; } -const defaultCssColorNames = ['transparent'] +const defaultCssColorNames = ["transparent"]; export const log = (message: string): void => { - if (typeof console !== 'undefined' && typeof console.log === 'function') { - console.log(message) + if (typeof console !== "undefined" && typeof console.log === "function") { + console.log(message); } -} +}; export const adjustColor: AdjustColorFunc = ( colorValue: string, - alphaValue: NumberRange1To100, + alphaValue: AlphaScale, mode: ThemeType, cssColorNames = defaultCssColorNames, ): string => { try { - if (cssColorNames.includes(colorValue)) return colorValue + if (cssColorNames.includes(colorValue)) return colorValue; - if (alphaValue < 0 || alphaValue > 1) { - log('Alpha value should be between 0.0 and 1.0. Returning default color.') - return '#FF0000' // Default color (Red in this case) + if (alphaValue < 0 || alphaValue > 100) { + log( + "Alpha value should be between 0.0 and 1.0. Returning default color.", + ); + return "#FF0000"; // Default color (Red in this case) } if (canBeConvertedIntoColor(colorValue)) { - let color: HexDecimalObject | null = null + let color: HexDecimalObject | null = null; if (isValidHex(colorValue)) { - const hexObject = parseHex(colorValue) - color = hexesToDecimals(hexObject as RgbWithAHexObject) + const hexObject = parseHex(colorValue); + color = hexesToDecimals(hexObject as RgbWithAHexObject); } else if (isValidRgb(colorValue)) { - color = parseRgbString(colorValue) + color = parseRgbString(colorValue); } else if (isValidRgba(colorValue)) { - color = parseRgbString(colorValue) + color = parseRgbString(colorValue); } else { - throw new Error('Invalid color format') + throw new Error("Invalid color format"); } if (!color) { - throw new Error('Failed to parse color') + throw new Error("Failed to parse color"); } - const brightnessFactor = mode === 'light' ? 0.2 : -0.2 + const brightnessFactor = mode === "light" ? 0.2 : -0.2; color = - mode === 'light' + mode === "light" ? lightenColor(color, brightnessFactor) - : darkenColor(color, brightnessFactor) + : darkenColor(color, brightnessFactor); - const alphaScale = alphaValue + const alphaScale = alphaValue; if (isValidHex(colorValue)) { const mixedColor = blendColors( color, { r: 255, g: 255, b: 255 }, alphaScale, - ) - return toHexColor(mixedColor) + ); + return toHexColor(mixedColor); } else { - const colorWithAlpha = applyAlphaToColor(color, alphaScale) - return toRgbString(colorWithAlpha) + const colorWithAlpha = applyAlphaToColor(color, alphaScale); + return toRgbString(colorWithAlpha); } } else { log( `Failed to convert ${colorValue} into a color. Returning default color.`, - ) - return '#FF0000' // Default color (Red in this case) + ); + return "#FF0000"; // Default color (Red in this case) } } catch (error) { if (error instanceof Error) { log( `Error adjusting color with value: ${colorValue}. Returning default color. Error: ${error.message}`, - ) + ); } else { log( `Error adjusting color with value: ${colorValue}. Returning default color. Unknown error.`, - ) + ); } - return '#FF0000' // Default color (Red in this case) + return "#FF0000"; // Default color (Red in this case) } -} +}; diff --git a/src/applyAlphaToColor.ts b/src/applyAlphaToColor.ts index b6261be..a74daf4 100644 --- a/src/applyAlphaToColor.ts +++ b/src/applyAlphaToColor.ts @@ -1,6 +1,35 @@ +import { AlphaScale } from "./types/alpha-scale.type"; + +/** + * Applies a new alpha value to an RGBA color object. + * The alpha value can be provided in the range 0-1 or 0-100. + * + * @param {object} color - The original color object with properties r, g, b, and optionally a. + * @param {AlphaScale} alphaValue - The new alpha value. It can be in the range 0-1 or 0-100. + * @returns {object} - The new color object with the updated alpha value. + * + * @example + * const color = { r: 52, g: 152, b: 219 }; + * const newColor = applyAlphaToColor(color, 50); + * // newColor will be { r: 52, g: 152, b: 219, a: 0.5 } + */ export const applyAlphaToColor = ( color: { r: number; g: number; b: number; a?: number }, - alphaValue: number, + alphaValue: AlphaScale, ): { r: number; g: number; b: number; a: number } => { - return { ...color, a: alphaValue } -} + let alpha; + + // Check if alphaValue is in the 0-1 range or 0-100 range + if (alphaValue > 1) { + // Assume alphaValue is in the 0-100 range + alpha = alphaValue / 100; + } else { + // Assume alphaValue is in the 0-1 range + alpha = alphaValue; + } + + // Ensure the new alpha value is within the valid range (0 to 1) + const clampedAlpha = Math.min(Math.max(alpha, 0), 1); + + return { ...color, a: clampedAlpha }; +}; diff --git a/src/blendColors.ts b/src/blendColors.ts index 060a700..e8f33bc 100644 --- a/src/blendColors.ts +++ b/src/blendColors.ts @@ -1,14 +1,52 @@ -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { NumberRange1To100 } from './types/number-range-hundred.type' +import { AlphaScale } from "./types/alpha-scale.type"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +/** + * Blends two colors based on the given alpha scale. + * The alpha scale can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * + * @param {HexDecimalObject} color1 - The first color object with properties r, g, b. + * @param {HexDecimalObject} color2 - The second color object with properties r, g, b. + * @param {AlphaScale} alphaScale - The alpha scale value. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns {HexDecimalObject} - The blended color object. + * + * @example + * const color1 = { r: 52, g: 152, b: 219 }; + * const color2 = { r: 255, g: 0, b: 0 }; + * const blendedColor = blendColors(color1, color2, 50); + * // blendedColor will be a color blended 50% between color1 and color2 + */ export const blendColors = ( color1: HexDecimalObject, color2: { r: number; g: number; b: number }, - alphaScale: NumberRange1To100, + alphaScale: AlphaScale, ): HexDecimalObject => { - return { - r: Math.round(color1.r * alphaScale + color2.r * (1 - alphaScale)), - g: Math.round(color1.g * alphaScale + color2.g * (1 - alphaScale)), - b: Math.round(color1.b * alphaScale + color2.b * (1 - alphaScale)), + let alpha; + + // Check if alphaScale is in the 0-1, 0.00-1.00, or 1-100 range + if (Math.abs(alphaScale) > 1) { + // Assume alphaScale is in the 1-100 range + alpha = alphaScale / 100; + } else { + // Assume alphaScale is in the 0-1 or 0.00-1.00 range + alpha = alphaScale; } -} + + // Ensure the new alpha value is within the valid range (0 to 1) + const clampedAlpha = Math.min(Math.max(alpha, -1), 1); + + return { + r: Math.round( + color1.r * Math.abs(clampedAlpha) + + color2.r * (1 - Math.abs(clampedAlpha)), + ), + g: Math.round( + color1.g * Math.abs(clampedAlpha) + + color2.g * (1 - Math.abs(clampedAlpha)), + ), + b: Math.round( + color1.b * Math.abs(clampedAlpha) + + color2.b * (1 - Math.abs(clampedAlpha)), + ), + }; +}; diff --git a/src/canBeConvertedToColor.ts b/src/canBeConvertedToColor.ts index f8b8f82..2007fb3 100644 --- a/src/canBeConvertedToColor.ts +++ b/src/canBeConvertedToColor.ts @@ -1,13 +1,13 @@ -import { isValidHex } from './isValidHex' -import { isValidRgb } from './isValidRgb' -import { isValidRgba } from './isValidRgba' +import { isValidHex } from "./isValidHex"; +import { isValidRgb } from "./isValidRgb"; +import { isValidRgba } from "./isValidRgba"; export const canBeConvertedIntoColor = ( colorValue: string, - cssColorNames = ['transparent'], + cssColorNames = ["transparent"], ): boolean => { - if (cssColorNames.includes(colorValue)) return true + if (cssColorNames.includes(colorValue)) return true; return ( isValidHex(colorValue) || isValidRgb(colorValue) || isValidRgba(colorValue) - ) -} + ); +}; diff --git a/src/color.ts b/src/color.ts index eda9663..34ad2c5 100644 --- a/src/color.ts +++ b/src/color.ts @@ -1,67 +1,71 @@ -import { darkenColor } from './darkenColor' -import { lightenColor } from './lightenColor' -import { blendColors } from './blendColors' -import { applyAlphaToColor } from './applyAlphaToColor' -import { toHexColor } from './toHexColor' -import { toRgbString } from './toRgbString' -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { hexToDecimal } from './hexToDecimals' -import { NumberRange1To100 } from './types/number-range-hundred.type' +import { darkenColor } from "./darkenColor"; +import { lightenColor } from "./lightenColor"; +import { blendColors } from "./blendColors"; +import { applyAlphaToColor } from "./applyAlphaToColor"; +import { toHexColor } from "./toHexColor"; +import { toRgbString } from "./toRgbString"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { hexToDecimal } from "./hexToDecimals"; +import { AlphaScale } from "./types/alpha-scale.type"; +import { adjustColor } from "./adjustColor"; +import { ThemeType } from "./types/theme.type"; export class Color { - private color: HexDecimalObject + private color: HexDecimalObject; + private mode: ThemeType; - constructor(color: string | HexDecimalObject) { - if (typeof color === 'string') { + constructor(color: string | HexDecimalObject, mode: ThemeType = "light") { + this.mode = mode; + if (typeof color === "string") { // Parse the string into RGB (assume it's in the format '#RRGGBB' or '#RRGGBBAA') - const hex = color.replace('#', '') + const hex = color.replace("#", ""); this.color = { r: hexToDecimal(hex.substring(0, 2)), g: hexToDecimal(hex.substring(2, 4)), b: hexToDecimal(hex.substring(4, 6)), - } + }; if (hex.length === 8) { - this.color.a = +(hexToDecimal(hex.substring(6, 8)) / 255).toFixed(2) + this.color.a = +(hexToDecimal(hex.substring(6, 8)) / 255).toFixed(2); } } else { - this.color = color + this.color = color; } } - darken(factor: number): Color { - this.color = darkenColor(this.color, factor) - return this + darken(factor: AlphaScale): Color { + this.color = darkenColor(this.color, factor); + return this; } - lighten(factor: number): Color { - this.color = lightenColor(this.color, factor) - return this + lighten(factor: AlphaScale): Color { + this.color = lightenColor(this.color, factor); + return this; } rgb(): string { - return toRgbString(this.color) + return toRgbString(this.color); } hex(): string { - return toHexColor(this.color) + return toHexColor(this.color); } invert(): string { - const { r, g, b } = this.color - return toHexColor({ r: 255 - r, g: 255 - g, b: 255 - b }) + this.mode = this.mode === "light" ? "dark" : "light"; + return adjustColor(this.hex(), 1, this.mode); } - alpha(factor: number): HexDecimalObject { - this.color = applyAlphaToColor(this.color, factor) - return this.color + alpha(factor: AlphaScale): HexDecimalObject { + this.color = applyAlphaToColor(this.color, factor); + return this.color; } - blend(factor: NumberRange1To100, secondaryColor: HexDecimalObject): Color { - this.color = blendColors(this.color, secondaryColor, factor) - return this + blend(factor: AlphaScale, secondaryColor: HexDecimalObject): Color { + this.color = blendColors(this.color, secondaryColor, factor); + return this; } getColor(): HexDecimalObject { - return this.color + return this.color; } } diff --git a/src/cssColors.ts b/src/cssColors.ts index b57e2c0..fa0f7a0 100644 --- a/src/cssColors.ts +++ b/src/cssColors.ts @@ -1,221 +1,221 @@ -import { ColorItem } from './types/color-item.interface' -import { ColorNames } from './types/color-names' +import { ColorItem } from "./types/color-item.interface"; +import { ColorNames } from "./types/color-names"; export const cssColors: Record = { - [ColorNames.AliceBlue]: { rgb: { r: 240, g: 248, b: 255 }, hex: '#F0F8FF' }, + [ColorNames.AliceBlue]: { rgb: { r: 240, g: 248, b: 255 }, hex: "#F0F8FF" }, [ColorNames.AntiqueWhite]: { rgb: { r: 250, g: 235, b: 215 }, - hex: '#FAEBD7', - }, - [ColorNames.Aqua]: { rgb: { r: 0, g: 255, b: 255 }, hex: '#00FFFF' }, - [ColorNames.Aquamarine]: { rgb: { r: 127, g: 255, b: 212 }, hex: '#7FFFD4' }, - [ColorNames.Azure]: { rgb: { r: 240, g: 255, b: 255 }, hex: '#F0FFFF' }, - [ColorNames.Beige]: { rgb: { r: 245, g: 245, b: 220 }, hex: '#F5F5DC' }, - [ColorNames.Bisque]: { rgb: { r: 255, g: 228, b: 196 }, hex: '#FFE4C4' }, - [ColorNames.Black]: { rgb: { r: 0, g: 0, b: 0 }, hex: '#000000' }, + hex: "#FAEBD7", + }, + [ColorNames.Aqua]: { rgb: { r: 0, g: 255, b: 255 }, hex: "#00FFFF" }, + [ColorNames.Aquamarine]: { rgb: { r: 127, g: 255, b: 212 }, hex: "#7FFFD4" }, + [ColorNames.Azure]: { rgb: { r: 240, g: 255, b: 255 }, hex: "#F0FFFF" }, + [ColorNames.Beige]: { rgb: { r: 245, g: 245, b: 220 }, hex: "#F5F5DC" }, + [ColorNames.Bisque]: { rgb: { r: 255, g: 228, b: 196 }, hex: "#FFE4C4" }, + [ColorNames.Black]: { rgb: { r: 0, g: 0, b: 0 }, hex: "#000000" }, [ColorNames.BlanchedAlmond]: { rgb: { r: 255, g: 235, b: 205 }, - hex: '#FFEBCD', - }, - [ColorNames.Blue]: { rgb: { r: 0, g: 0, b: 255 }, hex: '#0000FF' }, - [ColorNames.BlueViolet]: { rgb: { r: 138, g: 43, b: 226 }, hex: '#8A2BE2' }, - [ColorNames.Brown]: { rgb: { r: 165, g: 42, b: 42 }, hex: '#A52A2A' }, - [ColorNames.BurlyWood]: { rgb: { r: 222, g: 184, b: 135 }, hex: '#DEB887' }, - [ColorNames.CadetBlue]: { rgb: { r: 95, g: 158, b: 160 }, hex: '#5F9EA0' }, - [ColorNames.Chartreuse]: { rgb: { r: 127, g: 255, b: 0 }, hex: '#7FFF00' }, - [ColorNames.Chocolate]: { rgb: { r: 210, g: 105, b: 30 }, hex: '#D2691E' }, - [ColorNames.Coral]: { rgb: { r: 255, g: 127, b: 80 }, hex: '#FF7F50' }, + hex: "#FFEBCD", + }, + [ColorNames.Blue]: { rgb: { r: 0, g: 0, b: 255 }, hex: "#0000FF" }, + [ColorNames.BlueViolet]: { rgb: { r: 138, g: 43, b: 226 }, hex: "#8A2BE2" }, + [ColorNames.Brown]: { rgb: { r: 165, g: 42, b: 42 }, hex: "#A52A2A" }, + [ColorNames.BurlyWood]: { rgb: { r: 222, g: 184, b: 135 }, hex: "#DEB887" }, + [ColorNames.CadetBlue]: { rgb: { r: 95, g: 158, b: 160 }, hex: "#5F9EA0" }, + [ColorNames.Chartreuse]: { rgb: { r: 127, g: 255, b: 0 }, hex: "#7FFF00" }, + [ColorNames.Chocolate]: { rgb: { r: 210, g: 105, b: 30 }, hex: "#D2691E" }, + [ColorNames.Coral]: { rgb: { r: 255, g: 127, b: 80 }, hex: "#FF7F50" }, [ColorNames.CornflowerBlue]: { rgb: { r: 100, g: 149, b: 237 }, - hex: '#6495ED', + hex: "#6495ED", }, - [ColorNames.Cornsilk]: { rgb: { r: 255, g: 248, b: 220 }, hex: '#FFF8DC' }, - [ColorNames.Crimson]: { rgb: { r: 220, g: 20, b: 60 }, hex: '#DC143C' }, - [ColorNames.Cyan]: { rgb: { r: 0, g: 255, b: 255 }, hex: '#00FFFF' }, - [ColorNames.DarkBlue]: { rgb: { r: 0, g: 0, b: 139 }, hex: '#00008B' }, - [ColorNames.DarkCyan]: { rgb: { r: 0, g: 139, b: 139 }, hex: '#008B8B' }, + [ColorNames.Cornsilk]: { rgb: { r: 255, g: 248, b: 220 }, hex: "#FFF8DC" }, + [ColorNames.Crimson]: { rgb: { r: 220, g: 20, b: 60 }, hex: "#DC143C" }, + [ColorNames.Cyan]: { rgb: { r: 0, g: 255, b: 255 }, hex: "#00FFFF" }, + [ColorNames.DarkBlue]: { rgb: { r: 0, g: 0, b: 139 }, hex: "#00008B" }, + [ColorNames.DarkCyan]: { rgb: { r: 0, g: 139, b: 139 }, hex: "#008B8B" }, [ColorNames.DarkGoldenRod]: { rgb: { r: 184, g: 134, b: 11 }, - hex: '#B8860B', + hex: "#B8860B", }, - [ColorNames.DarkGray]: { rgb: { r: 169, g: 169, b: 169 }, hex: '#A9A9A9' }, - [ColorNames.DarkGreen]: { rgb: { r: 0, g: 100, b: 0 }, hex: '#006400' }, - [ColorNames.DarkGrey]: { rgb: { r: 169, g: 169, b: 169 }, hex: '#A9A9A9' }, - [ColorNames.DarkKhaki]: { rgb: { r: 189, g: 183, b: 107 }, hex: '#BDB76B' }, - [ColorNames.DarkMagenta]: { rgb: { r: 139, g: 0, b: 139 }, hex: '#8B008B' }, + [ColorNames.DarkGray]: { rgb: { r: 169, g: 169, b: 169 }, hex: "#A9A9A9" }, + [ColorNames.DarkGreen]: { rgb: { r: 0, g: 100, b: 0 }, hex: "#006400" }, + [ColorNames.DarkGrey]: { rgb: { r: 169, g: 169, b: 169 }, hex: "#A9A9A9" }, + [ColorNames.DarkKhaki]: { rgb: { r: 189, g: 183, b: 107 }, hex: "#BDB76B" }, + [ColorNames.DarkMagenta]: { rgb: { r: 139, g: 0, b: 139 }, hex: "#8B008B" }, [ColorNames.DarkOliveGreen]: { rgb: { r: 85, g: 107, b: 47 }, - hex: '#556B2F', + hex: "#556B2F", }, - [ColorNames.DarkOrange]: { rgb: { r: 255, g: 140, b: 0 }, hex: '#FF8C00' }, - [ColorNames.DarkOrchid]: { rgb: { r: 153, g: 50, b: 204 }, hex: '#9932CC' }, - [ColorNames.DarkRed]: { rgb: { r: 139, g: 0, b: 0 }, hex: '#8B0000' }, - [ColorNames.DarkSalmon]: { rgb: { r: 233, g: 150, b: 122 }, hex: '#E9967A' }, + [ColorNames.DarkOrange]: { rgb: { r: 255, g: 140, b: 0 }, hex: "#FF8C00" }, + [ColorNames.DarkOrchid]: { rgb: { r: 153, g: 50, b: 204 }, hex: "#9932CC" }, + [ColorNames.DarkRed]: { rgb: { r: 139, g: 0, b: 0 }, hex: "#8B0000" }, + [ColorNames.DarkSalmon]: { rgb: { r: 233, g: 150, b: 122 }, hex: "#E9967A" }, [ColorNames.DarkSeaGreen]: { rgb: { r: 143, g: 188, b: 143 }, - hex: '#8FBC8F', - }, - [ColorNames.DarkSlateBlue]: { rgb: { r: 72, g: 61, b: 139 }, hex: '#483D8B' }, - [ColorNames.DarkSlateGray]: { rgb: { r: 47, g: 79, b: 79 }, hex: '#2F4F4F' }, - [ColorNames.DarkTurquoise]: { rgb: { r: 0, g: 206, b: 209 }, hex: '#00CED1' }, - [ColorNames.DarkViolet]: { rgb: { r: 148, g: 0, b: 211 }, hex: '#9400D3' }, - [ColorNames.DeepPink]: { rgb: { r: 255, g: 20, b: 147 }, hex: '#FF1493' }, - [ColorNames.DeepSkyBlue]: { rgb: { r: 0, g: 191, b: 255 }, hex: '#00BFFF' }, - [ColorNames.DimGray]: { rgb: { r: 105, g: 105, b: 105 }, hex: '#696969' }, - [ColorNames.DimGrey]: { rgb: { r: 105, g: 105, b: 105 }, hex: '#696969' }, - [ColorNames.DodgerBlue]: { rgb: { r: 30, g: 144, b: 255 }, hex: '#1E90FF' }, - [ColorNames.FireBrick]: { rgb: { r: 178, g: 34, b: 34 }, hex: '#B22222' }, - [ColorNames.FloralWhite]: { rgb: { r: 255, g: 250, b: 240 }, hex: '#FFFAF0' }, - [ColorNames.ForestGreen]: { rgb: { r: 34, g: 139, b: 34 }, hex: '#228B22' }, - [ColorNames.Fuchsia]: { rgb: { r: 255, g: 0, b: 255 }, hex: '#FF00FF' }, - [ColorNames.Gainsboro]: { rgb: { r: 220, g: 220, b: 220 }, hex: '#DCDCDC' }, - [ColorNames.GhostWhite]: { rgb: { r: 248, g: 248, b: 255 }, hex: '#F8F8FF' }, - [ColorNames.Gold]: { rgb: { r: 255, g: 215, b: 0 }, hex: '#FFD700' }, - [ColorNames.GoldenRod]: { rgb: { r: 218, g: 165, b: 32 }, hex: '#DAA520' }, - [ColorNames.Gray]: { rgb: { r: 128, g: 128, b: 128 }, hex: '#808080' }, - [ColorNames.Green]: { rgb: { r: 0, g: 128, b: 0 }, hex: '#008000' }, - [ColorNames.GreenYellow]: { rgb: { r: 173, g: 255, b: 47 }, hex: '#ADFF2F' }, - [ColorNames.HoneyDew]: { rgb: { r: 240, g: 255, b: 240 }, hex: '#F0FFF0' }, - [ColorNames.HotPink]: { rgb: { r: 255, g: 105, b: 180 }, hex: '#FF69B4' }, - [ColorNames.IndianRed]: { rgb: { r: 205, g: 92, b: 92 }, hex: '#CD5C5C' }, - [ColorNames.Indigo]: { rgb: { r: 75, g: 0, b: 130 }, hex: '#4B0082' }, - [ColorNames.Ivory]: { rgb: { r: 255, g: 255, b: 240 }, hex: '#FFFFF0' }, - [ColorNames.Khaki]: { rgb: { r: 240, g: 230, b: 140 }, hex: '#F0E68C' }, - [ColorNames.Lavender]: { rgb: { r: 230, g: 230, b: 250 }, hex: '#E6E6FA' }, + hex: "#8FBC8F", + }, + [ColorNames.DarkSlateBlue]: { rgb: { r: 72, g: 61, b: 139 }, hex: "#483D8B" }, + [ColorNames.DarkSlateGray]: { rgb: { r: 47, g: 79, b: 79 }, hex: "#2F4F4F" }, + [ColorNames.DarkTurquoise]: { rgb: { r: 0, g: 206, b: 209 }, hex: "#00CED1" }, + [ColorNames.DarkViolet]: { rgb: { r: 148, g: 0, b: 211 }, hex: "#9400D3" }, + [ColorNames.DeepPink]: { rgb: { r: 255, g: 20, b: 147 }, hex: "#FF1493" }, + [ColorNames.DeepSkyBlue]: { rgb: { r: 0, g: 191, b: 255 }, hex: "#00BFFF" }, + [ColorNames.DimGray]: { rgb: { r: 105, g: 105, b: 105 }, hex: "#696969" }, + [ColorNames.DimGrey]: { rgb: { r: 105, g: 105, b: 105 }, hex: "#696969" }, + [ColorNames.DodgerBlue]: { rgb: { r: 30, g: 144, b: 255 }, hex: "#1E90FF" }, + [ColorNames.FireBrick]: { rgb: { r: 178, g: 34, b: 34 }, hex: "#B22222" }, + [ColorNames.FloralWhite]: { rgb: { r: 255, g: 250, b: 240 }, hex: "#FFFAF0" }, + [ColorNames.ForestGreen]: { rgb: { r: 34, g: 139, b: 34 }, hex: "#228B22" }, + [ColorNames.Fuchsia]: { rgb: { r: 255, g: 0, b: 255 }, hex: "#FF00FF" }, + [ColorNames.Gainsboro]: { rgb: { r: 220, g: 220, b: 220 }, hex: "#DCDCDC" }, + [ColorNames.GhostWhite]: { rgb: { r: 248, g: 248, b: 255 }, hex: "#F8F8FF" }, + [ColorNames.Gold]: { rgb: { r: 255, g: 215, b: 0 }, hex: "#FFD700" }, + [ColorNames.GoldenRod]: { rgb: { r: 218, g: 165, b: 32 }, hex: "#DAA520" }, + [ColorNames.Gray]: { rgb: { r: 128, g: 128, b: 128 }, hex: "#808080" }, + [ColorNames.Green]: { rgb: { r: 0, g: 128, b: 0 }, hex: "#008000" }, + [ColorNames.GreenYellow]: { rgb: { r: 173, g: 255, b: 47 }, hex: "#ADFF2F" }, + [ColorNames.HoneyDew]: { rgb: { r: 240, g: 255, b: 240 }, hex: "#F0FFF0" }, + [ColorNames.HotPink]: { rgb: { r: 255, g: 105, b: 180 }, hex: "#FF69B4" }, + [ColorNames.IndianRed]: { rgb: { r: 205, g: 92, b: 92 }, hex: "#CD5C5C" }, + [ColorNames.Indigo]: { rgb: { r: 75, g: 0, b: 130 }, hex: "#4B0082" }, + [ColorNames.Ivory]: { rgb: { r: 255, g: 255, b: 240 }, hex: "#FFFFF0" }, + [ColorNames.Khaki]: { rgb: { r: 240, g: 230, b: 140 }, hex: "#F0E68C" }, + [ColorNames.Lavender]: { rgb: { r: 230, g: 230, b: 250 }, hex: "#E6E6FA" }, [ColorNames.LavenderBlush]: { rgb: { r: 255, g: 240, b: 245 }, - hex: '#FFF0F5', + hex: "#FFF0F5", }, - [ColorNames.LawnGreen]: { rgb: { r: 124, g: 252, b: 0 }, hex: '#7CFC00' }, + [ColorNames.LawnGreen]: { rgb: { r: 124, g: 252, b: 0 }, hex: "#7CFC00" }, [ColorNames.LemonChiffon]: { rgb: { r: 255, g: 250, b: 205 }, - hex: '#FFFACD', + hex: "#FFFACD", }, - [ColorNames.LightBlue]: { rgb: { r: 173, g: 216, b: 230 }, hex: '#ADD8E6' }, - [ColorNames.LightCoral]: { rgb: { r: 240, g: 128, b: 128 }, hex: '#F08080' }, - [ColorNames.LightCyan]: { rgb: { r: 224, g: 255, b: 255 }, hex: '#E0FFFF' }, + [ColorNames.LightBlue]: { rgb: { r: 173, g: 216, b: 230 }, hex: "#ADD8E6" }, + [ColorNames.LightCoral]: { rgb: { r: 240, g: 128, b: 128 }, hex: "#F08080" }, + [ColorNames.LightCyan]: { rgb: { r: 224, g: 255, b: 255 }, hex: "#E0FFFF" }, [ColorNames.LightGoldenRodYellow]: { rgb: { r: 250, g: 250, b: 210 }, - hex: '#FAFAD2', + hex: "#FAFAD2", }, - [ColorNames.LightGray]: { rgb: { r: 211, g: 211, b: 211 }, hex: '#D3D3D3' }, - [ColorNames.LightGreen]: { rgb: { r: 144, g: 238, b: 144 }, hex: '#90EE90' }, - [ColorNames.LightGrey]: { rgb: { r: 211, g: 211, b: 211 }, hex: '#D3D3D3' }, - [ColorNames.LightPink]: { rgb: { r: 255, g: 182, b: 193 }, hex: '#FFB6C1' }, - [ColorNames.LightSalmon]: { rgb: { r: 255, g: 160, b: 122 }, hex: '#FFA07A' }, + [ColorNames.LightGray]: { rgb: { r: 211, g: 211, b: 211 }, hex: "#D3D3D3" }, + [ColorNames.LightGreen]: { rgb: { r: 144, g: 238, b: 144 }, hex: "#90EE90" }, + [ColorNames.LightGrey]: { rgb: { r: 211, g: 211, b: 211 }, hex: "#D3D3D3" }, + [ColorNames.LightPink]: { rgb: { r: 255, g: 182, b: 193 }, hex: "#FFB6C1" }, + [ColorNames.LightSalmon]: { rgb: { r: 255, g: 160, b: 122 }, hex: "#FFA07A" }, [ColorNames.LightSeaGreen]: { rgb: { r: 32, g: 178, b: 170 }, - hex: '#20B2AA', + hex: "#20B2AA", }, [ColorNames.LightSkyBlue]: { rgb: { r: 135, g: 206, b: 250 }, - hex: '#87CEFA', + hex: "#87CEFA", }, [ColorNames.LightSlateGray]: { rgb: { r: 119, g: 136, b: 153 }, - hex: '#778899', + hex: "#778899", }, [ColorNames.LightSteelBlue]: { rgb: { r: 176, g: 196, b: 222 }, - hex: '#B0C4DE', - }, - [ColorNames.LightYellow]: { rgb: { r: 255, g: 255, b: 224 }, hex: '#FFFFE0' }, - [ColorNames.Lime]: { rgb: { r: 0, g: 255, b: 0 }, hex: '#00FF00' }, - [ColorNames.LimeGreen]: { rgb: { r: 50, g: 205, b: 50 }, hex: '#32CD32' }, - [ColorNames.Linen]: { rgb: { r: 250, g: 240, b: 230 }, hex: '#FAF0E6' }, - [ColorNames.Magenta]: { rgb: { r: 255, g: 0, b: 255 }, hex: '#FF00FF' }, - [ColorNames.Maroon]: { rgb: { r: 128, g: 0, b: 0 }, hex: '#800000' }, + hex: "#B0C4DE", + }, + [ColorNames.LightYellow]: { rgb: { r: 255, g: 255, b: 224 }, hex: "#FFFFE0" }, + [ColorNames.Lime]: { rgb: { r: 0, g: 255, b: 0 }, hex: "#00FF00" }, + [ColorNames.LimeGreen]: { rgb: { r: 50, g: 205, b: 50 }, hex: "#32CD32" }, + [ColorNames.Linen]: { rgb: { r: 250, g: 240, b: 230 }, hex: "#FAF0E6" }, + [ColorNames.Magenta]: { rgb: { r: 255, g: 0, b: 255 }, hex: "#FF00FF" }, + [ColorNames.Maroon]: { rgb: { r: 128, g: 0, b: 0 }, hex: "#800000" }, [ColorNames.MediumAquaMarine]: { rgb: { r: 102, g: 205, b: 170 }, - hex: '#66CDAA', + hex: "#66CDAA", }, - [ColorNames.MediumBlue]: { rgb: { r: 0, g: 0, b: 205 }, hex: '#0000CD' }, - [ColorNames.MediumOrchid]: { rgb: { r: 186, g: 85, b: 211 }, hex: '#BA55D3' }, + [ColorNames.MediumBlue]: { rgb: { r: 0, g: 0, b: 205 }, hex: "#0000CD" }, + [ColorNames.MediumOrchid]: { rgb: { r: 186, g: 85, b: 211 }, hex: "#BA55D3" }, [ColorNames.MediumPurple]: { rgb: { r: 147, g: 112, b: 219 }, - hex: '#9370DB', + hex: "#9370DB", }, [ColorNames.MediumSeaGreen]: { rgb: { r: 60, g: 179, b: 113 }, - hex: '#3CB371', + hex: "#3CB371", }, [ColorNames.MediumSlateBlue]: { rgb: { r: 123, g: 104, b: 238 }, - hex: '#7B68EE', + hex: "#7B68EE", }, [ColorNames.MediumSpringGreen]: { rgb: { r: 0, g: 250, b: 154 }, - hex: '#00FA9A', + hex: "#00FA9A", }, [ColorNames.MediumTurquoise]: { rgb: { r: 72, g: 209, b: 204 }, - hex: '#48D1CC', + hex: "#48D1CC", }, [ColorNames.MediumVioletRed]: { rgb: { r: 199, g: 21, b: 133 }, - hex: '#C71585', - }, - [ColorNames.MidnightBlue]: { rgb: { r: 25, g: 25, b: 112 }, hex: '#191970' }, - [ColorNames.MintCream]: { rgb: { r: 245, g: 255, b: 250 }, hex: '#F5FFFA' }, - [ColorNames.MistyRose]: { rgb: { r: 255, g: 228, b: 225 }, hex: '#FFE4E1' }, - [ColorNames.Moccasin]: { rgb: { r: 255, g: 228, b: 181 }, hex: '#FFE4B5' }, - [ColorNames.NavajoWhite]: { rgb: { r: 255, g: 222, b: 173 }, hex: '#FFDEAD' }, - [ColorNames.Navy]: { rgb: { r: 0, g: 0, b: 128 }, hex: '#000080' }, - [ColorNames.OldLace]: { rgb: { r: 253, g: 245, b: 230 }, hex: '#FDF5E6' }, - [ColorNames.Olive]: { rgb: { r: 128, g: 128, b: 0 }, hex: '#808000' }, - [ColorNames.OliveDrab]: { rgb: { r: 107, g: 142, b: 35 }, hex: '#6B8E23' }, - [ColorNames.Orange]: { rgb: { r: 255, g: 165, b: 0 }, hex: '#FFA500' }, - [ColorNames.OrangeRed]: { rgb: { r: 255, g: 69, b: 0 }, hex: '#FF4500' }, - [ColorNames.Orchid]: { rgb: { r: 218, g: 112, b: 214 }, hex: '#DA70D6' }, + hex: "#C71585", + }, + [ColorNames.MidnightBlue]: { rgb: { r: 25, g: 25, b: 112 }, hex: "#191970" }, + [ColorNames.MintCream]: { rgb: { r: 245, g: 255, b: 250 }, hex: "#F5FFFA" }, + [ColorNames.MistyRose]: { rgb: { r: 255, g: 228, b: 225 }, hex: "#FFE4E1" }, + [ColorNames.Moccasin]: { rgb: { r: 255, g: 228, b: 181 }, hex: "#FFE4B5" }, + [ColorNames.NavajoWhite]: { rgb: { r: 255, g: 222, b: 173 }, hex: "#FFDEAD" }, + [ColorNames.Navy]: { rgb: { r: 0, g: 0, b: 128 }, hex: "#000080" }, + [ColorNames.OldLace]: { rgb: { r: 253, g: 245, b: 230 }, hex: "#FDF5E6" }, + [ColorNames.Olive]: { rgb: { r: 128, g: 128, b: 0 }, hex: "#808000" }, + [ColorNames.OliveDrab]: { rgb: { r: 107, g: 142, b: 35 }, hex: "#6B8E23" }, + [ColorNames.Orange]: { rgb: { r: 255, g: 165, b: 0 }, hex: "#FFA500" }, + [ColorNames.OrangeRed]: { rgb: { r: 255, g: 69, b: 0 }, hex: "#FF4500" }, + [ColorNames.Orchid]: { rgb: { r: 218, g: 112, b: 214 }, hex: "#DA70D6" }, [ColorNames.PaleGoldenRod]: { rgb: { r: 238, g: 232, b: 170 }, - hex: '#EEE8AA', + hex: "#EEE8AA", }, - [ColorNames.PaleGreen]: { rgb: { r: 152, g: 251, b: 152 }, hex: '#98FB98' }, + [ColorNames.PaleGreen]: { rgb: { r: 152, g: 251, b: 152 }, hex: "#98FB98" }, [ColorNames.PaleTurquoise]: { rgb: { r: 175, g: 238, b: 238 }, - hex: '#AFEEEE', + hex: "#AFEEEE", }, [ColorNames.PaleVioletRed]: { rgb: { r: 219, g: 112, b: 147 }, - hex: '#DB7093', - }, - [ColorNames.PapayaWhip]: { rgb: { r: 255, g: 239, b: 213 }, hex: '#FFEFD5' }, - [ColorNames.PeachPuff]: { rgb: { r: 255, g: 218, b: 185 }, hex: '#FFDAB9' }, - [ColorNames.Peru]: { rgb: { r: 205, g: 133, b: 63 }, hex: '#CD853F' }, - [ColorNames.Pink]: { rgb: { r: 255, g: 192, b: 203 }, hex: '#FFC0CB' }, - [ColorNames.Plum]: { rgb: { r: 221, g: 160, b: 221 }, hex: '#DDA0DD' }, - [ColorNames.PowderBlue]: { rgb: { r: 176, g: 224, b: 230 }, hex: '#B0E0E6' }, - [ColorNames.Purple]: { rgb: { r: 128, g: 0, b: 128 }, hex: '#800080' }, + hex: "#DB7093", + }, + [ColorNames.PapayaWhip]: { rgb: { r: 255, g: 239, b: 213 }, hex: "#FFEFD5" }, + [ColorNames.PeachPuff]: { rgb: { r: 255, g: 218, b: 185 }, hex: "#FFDAB9" }, + [ColorNames.Peru]: { rgb: { r: 205, g: 133, b: 63 }, hex: "#CD853F" }, + [ColorNames.Pink]: { rgb: { r: 255, g: 192, b: 203 }, hex: "#FFC0CB" }, + [ColorNames.Plum]: { rgb: { r: 221, g: 160, b: 221 }, hex: "#DDA0DD" }, + [ColorNames.PowderBlue]: { rgb: { r: 176, g: 224, b: 230 }, hex: "#B0E0E6" }, + [ColorNames.Purple]: { rgb: { r: 128, g: 0, b: 128 }, hex: "#800080" }, [ColorNames.RebeccaPurple]: { rgb: { r: 102, g: 51, b: 153 }, - hex: '#663399', - }, - [ColorNames.Red]: { rgb: { r: 255, g: 0, b: 0 }, hex: '#FF0000' }, - [ColorNames.RosyBrown]: { rgb: { r: 188, g: 143, b: 143 }, hex: '#BC8F8F' }, - [ColorNames.RoyalBlue]: { rgb: { r: 65, g: 105, b: 225 }, hex: '#4169E1' }, - [ColorNames.SaddleBrown]: { rgb: { r: 139, g: 69, b: 19 }, hex: '#8B4513' }, - [ColorNames.Salmon]: { rgb: { r: 250, g: 128, b: 114 }, hex: '#FA8072' }, - [ColorNames.SandyBrown]: { rgb: { r: 244, g: 164, b: 96 }, hex: '#F4A460' }, - [ColorNames.SeaGreen]: { rgb: { r: 46, g: 139, b: 87 }, hex: '#2E8B57' }, - [ColorNames.SeaShell]: { rgb: { r: 255, g: 245, b: 238 }, hex: '#FFF5EE' }, - [ColorNames.Sienna]: { rgb: { r: 160, g: 82, b: 45 }, hex: '#A0522D' }, - [ColorNames.Silver]: { rgb: { r: 192, g: 192, b: 192 }, hex: '#C0C0C0' }, - [ColorNames.SkyBlue]: { rgb: { r: 135, g: 206, b: 235 }, hex: '#87CEEB' }, - [ColorNames.SlateBlue]: { rgb: { r: 106, g: 90, b: 205 }, hex: '#6A5ACD' }, - [ColorNames.SlateGray]: { rgb: { r: 112, g: 128, b: 144 }, hex: '#708090' }, - [ColorNames.Snow]: { rgb: { r: 255, g: 250, b: 250 }, hex: '#FFFAFA' }, - [ColorNames.SpringGreen]: { rgb: { r: 0, g: 255, b: 127 }, hex: '#00FF7F' }, - [ColorNames.SteelBlue]: { rgb: { r: 70, g: 130, b: 180 }, hex: '#4682B4' }, - [ColorNames.Tan]: { rgb: { r: 210, g: 180, b: 140 }, hex: '#D2B48C' }, - [ColorNames.Teal]: { rgb: { r: 0, g: 128, b: 128 }, hex: '#008080' }, - [ColorNames.Thistle]: { rgb: { r: 216, g: 191, b: 216 }, hex: '#D8BFD8' }, - [ColorNames.Tomato]: { rgb: { r: 255, g: 99, b: 71 }, hex: '#FF6347' }, - [ColorNames.Turquoise]: { rgb: { r: 64, g: 224, b: 208 }, hex: '#40E0D0' }, - [ColorNames.Violet]: { rgb: { r: 238, g: 130, b: 238 }, hex: '#EE82EE' }, - [ColorNames.Wheat]: { rgb: { r: 245, g: 222, b: 179 }, hex: '#F5DEB3' }, - [ColorNames.White]: { rgb: { r: 255, g: 255, b: 255 }, hex: '#FFFFFF' }, - [ColorNames.WhiteSmoke]: { rgb: { r: 245, g: 245, b: 245 }, hex: '#F5F5F5' }, - [ColorNames.Yellow]: { rgb: { r: 255, g: 255, b: 0 }, hex: '#FFFF00' }, - [ColorNames.YellowGreen]: { rgb: { r: 154, g: 205, b: 50 }, hex: '#9ACD32' }, -} + hex: "#663399", + }, + [ColorNames.Red]: { rgb: { r: 255, g: 0, b: 0 }, hex: "#FF0000" }, + [ColorNames.RosyBrown]: { rgb: { r: 188, g: 143, b: 143 }, hex: "#BC8F8F" }, + [ColorNames.RoyalBlue]: { rgb: { r: 65, g: 105, b: 225 }, hex: "#4169E1" }, + [ColorNames.SaddleBrown]: { rgb: { r: 139, g: 69, b: 19 }, hex: "#8B4513" }, + [ColorNames.Salmon]: { rgb: { r: 250, g: 128, b: 114 }, hex: "#FA8072" }, + [ColorNames.SandyBrown]: { rgb: { r: 244, g: 164, b: 96 }, hex: "#F4A460" }, + [ColorNames.SeaGreen]: { rgb: { r: 46, g: 139, b: 87 }, hex: "#2E8B57" }, + [ColorNames.SeaShell]: { rgb: { r: 255, g: 245, b: 238 }, hex: "#FFF5EE" }, + [ColorNames.Sienna]: { rgb: { r: 160, g: 82, b: 45 }, hex: "#A0522D" }, + [ColorNames.Silver]: { rgb: { r: 192, g: 192, b: 192 }, hex: "#C0C0C0" }, + [ColorNames.SkyBlue]: { rgb: { r: 135, g: 206, b: 235 }, hex: "#87CEEB" }, + [ColorNames.SlateBlue]: { rgb: { r: 106, g: 90, b: 205 }, hex: "#6A5ACD" }, + [ColorNames.SlateGray]: { rgb: { r: 112, g: 128, b: 144 }, hex: "#708090" }, + [ColorNames.Snow]: { rgb: { r: 255, g: 250, b: 250 }, hex: "#FFFAFA" }, + [ColorNames.SpringGreen]: { rgb: { r: 0, g: 255, b: 127 }, hex: "#00FF7F" }, + [ColorNames.SteelBlue]: { rgb: { r: 70, g: 130, b: 180 }, hex: "#4682B4" }, + [ColorNames.Tan]: { rgb: { r: 210, g: 180, b: 140 }, hex: "#D2B48C" }, + [ColorNames.Teal]: { rgb: { r: 0, g: 128, b: 128 }, hex: "#008080" }, + [ColorNames.Thistle]: { rgb: { r: 216, g: 191, b: 216 }, hex: "#D8BFD8" }, + [ColorNames.Tomato]: { rgb: { r: 255, g: 99, b: 71 }, hex: "#FF6347" }, + [ColorNames.Turquoise]: { rgb: { r: 64, g: 224, b: 208 }, hex: "#40E0D0" }, + [ColorNames.Violet]: { rgb: { r: 238, g: 130, b: 238 }, hex: "#EE82EE" }, + [ColorNames.Wheat]: { rgb: { r: 245, g: 222, b: 179 }, hex: "#F5DEB3" }, + [ColorNames.White]: { rgb: { r: 255, g: 255, b: 255 }, hex: "#FFFFFF" }, + [ColorNames.WhiteSmoke]: { rgb: { r: 245, g: 245, b: 245 }, hex: "#F5F5F5" }, + [ColorNames.Yellow]: { rgb: { r: 255, g: 255, b: 0 }, hex: "#FFFF00" }, + [ColorNames.YellowGreen]: { rgb: { r: 154, g: 205, b: 50 }, hex: "#9ACD32" }, +}; diff --git a/src/darkenColor.ts b/src/darkenColor.ts index 4d9ee4a..42d29ef 100644 --- a/src/darkenColor.ts +++ b/src/darkenColor.ts @@ -1,34 +1,86 @@ +import { AlphaScale } from "./types/alpha-scale.type"; + /** - * Darkens an RGB color by a given factor. + * Adjusts an RGB color by a given factor. If the factor is positive, it darkens the color. If the factor is negative, it lightens the color. + * The factor can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * * @param color - An object containing r, g, and b values. - * @param factor - The factor by which to darken the color. The value should be between 0 and 1. - * @returns An object containing the darkened r, g, and b values. + * @param factor - The factor by which to adjust the color. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns An object containing the adjusted r, g, and b values. * * @example * ```typescript * // Darken a light red color by 10% * console.log(darkenColor({ r: 255, g: 100, b: 100 }, 0.1)); // { r: 230, g: 90, b: 90 } * + * // Lighten a light red color by 10% + * console.log(darkenColor({ r: 255, g: 100, b: 100 }, -0.1)); // { r: 255, g: 110, b: 110 } + * * // Darken a green color by 20% * console.log(darkenColor({ r: 0, g: 200, b: 0 }, 0.2)); // { r: 0, g: 160, b: 0 } * + * // Lighten a green color by 20% + * console.log(darkenColor({ r: 0, g: 200, b: 0 }, -0.2)); // { r: 0, g: 240, b: 0 } + * * // Darken a blue color by 30% * console.log(darkenColor({ r: 0, g: 0, b: 255 }, 0.3)); // { r: 0, g: 0, b: 178 } * + * // Lighten a blue color by 30% + * console.log(darkenColor({ r: 0, g: 0, b: 255 }, -0.3)); // { r: 0, g: 0, b: 255 } + * * // Darken a nearly black color by 10% * console.log(darkenColor({ r: 10, g: 10, b: 10 }, 0.1)); // { r: 9, g: 9, b: 9 } * + * // Lighten a nearly black color by 10% + * console.log(darkenColor({ r: 10, g: 10, b: 10 }, -0.1)); // { r: 12, g: 12, b: 12 } + * * // Darken a medium gray color by 50% * console.log(darkenColor({ r: 128, g: 128, b: 128 }, 0.5)); // { r: 64, g: 64, b: 64 } + * + * // Lighten a medium gray color by 50% + * console.log(darkenColor({ r: 128, g: 128, b: 128 }, -0.5)); // { r: 192, g: 192, b: 192 } * ``` */ export const darkenColor = ( color: { r: number; g: number; b: number }, - factor: number, + factor: AlphaScale, ): { r: number; g: number; b: number } => { + // Convert factor to the 0-1 range if it's in the 1-100 range + const adjustedFactor = Math.abs(factor) > 1 ? factor / 100 : factor; + return { - r: Math.max(0, Math.round(color.r - factor * color.r)), - g: Math.max(0, Math.round(color.g - factor * color.g)), - b: Math.max(0, Math.round(color.b - factor * color.b)), - } -} + r: Math.max( + 0, + Math.min( + 255, + Math.round( + factor < 0 + ? color.r - adjustedFactor * (255 - color.r) + : color.r * (1 - adjustedFactor), + ), + ), + ), + g: Math.max( + 0, + Math.min( + 255, + Math.round( + factor < 0 + ? color.g - adjustedFactor * (255 - color.g) + : color.g * (1 - adjustedFactor), + ), + ), + ), + b: Math.max( + 0, + Math.min( + 255, + Math.round( + factor < 0 + ? color.b - adjustedFactor * (255 - color.b) + : color.b * (1 - adjustedFactor), + ), + ), + ), + }; +}; diff --git a/src/formatDecimalObjectToRgba.ts b/src/formatDecimalObjectToRgba.ts index 707a62a..7c01aca 100644 --- a/src/formatDecimalObjectToRgba.ts +++ b/src/formatDecimalObjectToRgba.ts @@ -1,6 +1,6 @@ -import { isNumeric } from '@devlander/utils' -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { toRgbString } from './toRgbString' +import { isNumeric } from "@devlander/utils"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { toRgbString } from "./toRgbString"; /** * Formats a HexDecimalObject to an RGBA string. @@ -26,14 +26,14 @@ export const formatDecimalObjectToRgba = ( parameterA?: string, ): string => { try { - const { r, g, b, a: parsedA } = decimalObject + const { r, g, b, a: parsedA } = decimalObject; const a = parameterA !== undefined && isNumeric(parameterA) ? Math.round(parseFloat(parameterA) * 10) / 10 - : parsedA - return toRgbString({ r, g, b, a }) + : parsedA; + return toRgbString({ r, g, b, a }); } catch (error) { - console.error('Error formatting decimal object to RGBA string:', error) - return toRgbString({ r: 0, g: 0, b: 0, a: 1 }) + console.error("Error formatting decimal object to RGBA string:", error); + return toRgbString({ r: 0, g: 0, b: 0, a: 1 }); } -} +}; diff --git a/src/hexToDecimals.ts b/src/hexToDecimals.ts index 7caf23f..868de0c 100644 --- a/src/hexToDecimals.ts +++ b/src/hexToDecimals.ts @@ -1,6 +1,6 @@ -import { isObject, isString } from '@devlander/utils' -import { HexObject, parseHex } from './parseHex' -import { HexDecimalObject } from './types/hex-decimal-object.interface' +import { isObject, isString } from "@devlander/utils"; +import { HexObject, parseHex } from "./parseHex"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; /** * Converts a hexadecimal string to a decimal number. @@ -14,17 +14,17 @@ import { HexDecimalObject } from './types/hex-decimal-object.interface' * ``` */ export const hexToDecimal = (hex: string): number => { - return parseInt(hex, 16) -} + return parseInt(hex, 16); +}; export interface RgbWithAHexObject extends Partial { - r: string - g: string - b: string - a?: string + r: string; + g: string; + b: string; + a?: string; } -type ParamsForHexesToDecimals = string | RgbWithAHexObject +type ParamsForHexesToDecimals = string | RgbWithAHexObject; /** * Converts a HexObject or hex string to a HexDecimalObject by converting each hex value to its decimal equivalent. @@ -48,34 +48,34 @@ type ParamsForHexesToDecimals = string | RgbWithAHexObject export const hexesToDecimals = ( params: ParamsForHexesToDecimals, ): HexDecimalObject => { - let hexObject: RgbWithAHexObject + let hexObject: RgbWithAHexObject; if (isObject(params) && !isString(params)) { hexObject = { r: params.r, g: params.g, b: params.b, - a: 'a' in params ? params.a : 'ff', - } + a: "a" in params ? params.a : "ff", + }; } else { - hexObject = parseHex(params as string) + hexObject = parseHex(params as string); } - const { r, g, b, a } = hexObject + const { r, g, b, a } = hexObject; const result: HexDecimalObject = { r: hexToDecimal(r), g: hexToDecimal(g), b: hexToDecimal(b), - } + }; - if (a !== undefined && a !== 'ff') { - result.a = +(hexToDecimal(a) / 255).toFixed(2) + if (a !== undefined && a !== "ff") { + result.a = +(hexToDecimal(a) / 255).toFixed(2); } else { - result.a = 1 + result.a = 1; } - return validateHexDecimalObject(result) -} + return validateHexDecimalObject(result); +}; /** * Validates a HexDecimalObject by checking for NaN values and changing them to 1. @@ -83,11 +83,11 @@ export const hexesToDecimals = ( * @returns The validated HexDecimalObject. */ const validateHexDecimalObject = (obj: HexDecimalObject): HexDecimalObject => { - const keys: (keyof HexDecimalObject)[] = ['r', 'g', 'b', 'a'] + const keys: (keyof HexDecimalObject)[] = ["r", "g", "b", "a"]; keys.forEach((key) => { if (obj[key] !== undefined && isNaN(obj[key] as number)) { - obj[key] = 1 + obj[key] = 1; } - }) - return obj -} + }); + return obj; +}; diff --git a/src/hexToRgb.ts b/src/hexToRgb.ts index dc66144..ee2a6be 100644 --- a/src/hexToRgb.ts +++ b/src/hexToRgb.ts @@ -1,7 +1,7 @@ // @devlander/utils src/hexToRgba -import { hexToRgba } from './hexToRgba' -import { isValidHex } from './isValidHex' -import { toRgbString } from './toRgbString' +import { hexToRgba } from "./hexToRgba"; +import { isValidHex } from "./isValidHex"; +import { toRgbString } from "./toRgbString"; /** * Converts a hexadecimal color code to an RGB or RGBA color string. * @param hex - The hexadecimal color code to convert. @@ -15,18 +15,18 @@ import { toRgbString } from './toRgbString' */ export const hexToRgb = (hex: string): string => { if (!isValidHex(hex)) { - throw new Error('Invalid hex color') + throw new Error("Invalid hex color"); } - hex = hex.charAt(0) === '#' ? hex.slice(1) : hex - const bigint = parseInt(hex, 16) - const r = (bigint >> 16) & 255 - const g = (bigint >> 8) & 255 - const b = bigint & 255 + hex = hex.charAt(0) === "#" ? hex.slice(1) : hex; + const bigint = parseInt(hex, 16); + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; if (hex.length === 8) { - const a = ((bigint >> 24) & 255) / 255 - return hexToRgba(hex, a) + const a = ((bigint >> 24) & 255) / 255; + return hexToRgba(hex, a); } - return toRgbString({ r, g, b }) -} + return toRgbString({ r, g, b }); +}; diff --git a/src/hexToRgba.ts b/src/hexToRgba.ts index 10310cb..5300346 100644 --- a/src/hexToRgba.ts +++ b/src/hexToRgba.ts @@ -1,8 +1,8 @@ -import { isNumeric } from '@devlander/utils' -import { hexToDecimal } from './hexToDecimals' -import { isValidHex } from './isValidHex' -import { parseHex } from './parseHex' -import { toRgbString } from './toRgbString' +import { isNumeric } from "@devlander/utils"; +import { hexToDecimal } from "./hexToDecimals"; +import { isValidHex } from "./isValidHex"; +import { parseHex } from "./parseHex"; +import { toRgbString } from "./toRgbString"; /** * Converts a CSS hex color value to an RGB or RGBA color value. @@ -12,36 +12,36 @@ import { toRgbString } from './toRgbString' */ export function hexToRgba(hex: string, alpha: string | number = 1): string { if (!isValidHex(hex)) { - throw new Error('Invalid hex color') + throw new Error("Invalid hex color"); } - const hashlessHex = hex.replace(/^#/, '') - const { r, g, b } = parseHex(hashlessHex) + const hashlessHex = hex.replace(/^#/, ""); + const { r, g, b } = parseHex(hashlessHex); // Validate the parsed hex values if (!r || !g || !b || r.length !== 2 || g.length !== 2 || b.length !== 2) { - throw new TypeError('Invalid color components') + throw new TypeError("Invalid color components"); } - const red = hexToDecimal(r) - const green = hexToDecimal(g) - const blue = hexToDecimal(b) + const red = hexToDecimal(r); + const green = hexToDecimal(g); + const blue = hexToDecimal(b); - let alphaValue: number + let alphaValue: number; // Check alpha value - if (typeof alpha === 'number') { + if (typeof alpha === "number") { if (alpha < 0 || alpha > 1) { - throw new Error('Invalid alpha value') + throw new Error("Invalid alpha value"); } - alphaValue = alpha + alphaValue = alpha; } else if (isNumeric(alpha)) { - alphaValue = parseFloat(alpha) + alphaValue = parseFloat(alpha); if (alphaValue < 0 || alphaValue > 1) { - throw new Error('Invalid alpha value') + throw new Error("Invalid alpha value"); } } else { - alphaValue = 1 + alphaValue = 1; } return toRgbString({ @@ -49,5 +49,5 @@ export function hexToRgba(hex: string, alpha: string | number = 1): string { g: green, b: blue, a: alphaValue, - }) + }); } diff --git a/src/hslToRgb.ts b/src/hslToRgb.ts index c1223cf..b4d3dd6 100644 --- a/src/hslToRgb.ts +++ b/src/hslToRgb.ts @@ -10,45 +10,45 @@ export const hslToRgb = ( s: number, l: number, ): [number, number, number] => { - s /= 100 - l /= 100 + s /= 100; + l /= 100; - const c = (1 - Math.abs(2 * l - 1)) * s - const x = c * (1 - Math.abs(((h / 60) % 2) - 1)) - const m = l - c / 2 - let r = 0 - let g = 0 - let b = 0 + const c = (1 - Math.abs(2 * l - 1)) * s; + const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); + const m = l - c / 2; + let r = 0; + let g = 0; + let b = 0; if (0 <= h && h < 60) { - r = c - g = x - b = 0 + r = c; + g = x; + b = 0; } else if (60 <= h && h < 120) { - r = x - g = c - b = 0 + r = x; + g = c; + b = 0; } else if (120 <= h && h < 180) { - r = 0 - g = c - b = x + r = 0; + g = c; + b = x; } else if (180 <= h && h < 240) { - r = 0 - g = x - b = c + r = 0; + g = x; + b = c; } else if (240 <= h && h < 300) { - r = x - g = 0 - b = c + r = x; + g = 0; + b = c; } else if (300 <= h && h < 360) { - r = c - g = 0 - b = x + r = c; + g = 0; + b = x; } - r = Math.round((r + m) * 255) - g = Math.round((g + m) * 255) - b = Math.round((b + m) * 255) + r = Math.round((r + m) * 255); + g = Math.round((g + m) * 255); + b = Math.round((b + m) * 255); - return [r, g, b] -} + return [r, g, b]; +}; diff --git a/src/index.ts b/src/index.ts index 34641de..fe59f16 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,104 +1,104 @@ /** * TSDoc for adjustColor */ -export * from './adjustColor' +export * from "./adjustColor"; /** * TSDoc for applyAlphaToColor */ -export * from './applyAlphaToColor' +export * from "./applyAlphaToColor"; /** * TSDoc for blendColors */ -export * from './blendColors' +export * from "./blendColors"; /** * TSDoc for canBeConvertedToColor */ -export * from './canBeConvertedToColor' +export * from "./canBeConvertedToColor"; /** * TSDoc for color */ -export * from './color' +export * from "./color"; /** * TSDoc for cssColors */ -export * from './cssColors' +export * from "./cssColors"; /** * TSDoc for darkenColor */ -export * from './darkenColor' +export * from "./darkenColor"; /** * TSDoc for formatDecimalObjectToRgba */ -export * from './formatDecimalObjectToRgba' +export * from "./formatDecimalObjectToRgba"; /** * TSDoc for hexToDecimals */ -export * from './hexToDecimals' +export * from "./hexToDecimals"; /** * TSDoc for hexToRgb */ -export * from './hexToRgb' +export * from "./hexToRgb"; /** * TSDoc for hexToRgba */ -export * from './hexToRgba' +export * from "./hexToRgba"; /** * TSDoc for hslToRgb */ -export * from './hslToRgb' +export * from "./hslToRgb"; /** * TSDoc for isHexColor */ -export * from './isHexColor' +export * from "./isHexColor"; /** * TSDoc for isRgbaOutOfRange */ -export * from './isRgbaOutOfRange' +export * from "./isRgbaOutOfRange"; /** * TSDoc for isValidAlphaHexCode */ -export * from './isValidAlphaHexCode' +export * from "./isValidAlphaHexCode"; /** * TSDoc for isValidHex */ -export * from './isValidHex' +export * from "./isValidHex"; /** * TSDoc for isValidRgb */ -export * from './isValidRgb' +export * from "./isValidRgb"; /** * TSDoc for isValidRgba */ -export * from './isValidRgba' +export * from "./isValidRgba"; /** * TSDoc for lightenColor */ -export * from './lightenColor' +export * from "./lightenColor"; /** * TSDoc for parseColor */ -export * from './parseColor' +export * from "./parseColor"; /** * TSDoc for parseHex */ -export * from './parseHex' +export * from "./parseHex"; /** * TSDoc for parseRgbString */ -export * from './parseRgbString' +export * from "./parseRgbString"; /** * TSDoc for rgbaToHexAlpha */ -export * from './rgbaToHexAlpha' +export * from "./rgbaToHexAlpha"; /** * TSDoc for toHexColor */ -export * from './toHexColor' +export * from "./toHexColor"; /** * TSDoc for toRgbString */ -export * from './toRgbString' +export * from "./toRgbString"; /** * TSDoc for color-names */ -export * from './types/color-names' +export * from "./types/color-names"; \ No newline at end of file diff --git a/src/isHexColor.ts b/src/isHexColor.ts index e7a95fa..f2f6be2 100644 --- a/src/isHexColor.ts +++ b/src/isHexColor.ts @@ -19,13 +19,13 @@ * ``` */ export const isHexColor = (hex: string): boolean => { - if (typeof hex !== 'string') { - console.log(`Invalid type for hex: ${typeof hex}`) - return false + if (typeof hex !== "string") { + console.log(`Invalid type for hex: ${typeof hex}`); + return false; } const hexPattern = - /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/ - const isValid = hexPattern.test(hex) - console.log(`Testing hex: ${hex}, Result: ${isValid}`) - return isValid -} + /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/; + const isValid = hexPattern.test(hex); + console.log(`Testing hex: ${hex}, Result: ${isValid}`); + return isValid; +}; diff --git a/src/isRgbaOutOfRange.ts b/src/isRgbaOutOfRange.ts index 6a6ca87..2a0f421 100644 --- a/src/isRgbaOutOfRange.ts +++ b/src/isRgbaOutOfRange.ts @@ -1,4 +1,4 @@ -import { HexDecimalObject } from './types/hex-decimal-object.interface' +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; /** * Checks if the RGBA value is out of range. @@ -6,16 +6,16 @@ import { HexDecimalObject } from './types/hex-decimal-object.interface' * @returns {boolean} - True if the value is out of range, false otherwise. */ export function isRgbaOutOfRange(rgba: HexDecimalObject): boolean { - const { r, g, b, a } = rgba + const { r, g, b, a } = rgba; // Check if r, g, b are within 0-255 - if (r < 0 || r > 255) return true - if (g < 0 || g > 255) return true - if (b < 0 || b > 255) return true + if (r < 0 || r > 255) return true; + if (g < 0 || g > 255) return true; + if (b < 0 || b > 255) return true; // Check if a (if provided) is within 0-1 - if (a !== undefined && (a < 0 || a > 1)) return true + if (a !== undefined && (a < 0 || a > 1)) return true; // If none of the conditions are met, the value is not out of range - return false + return false; } diff --git a/src/isValidAlphaHexCode.ts b/src/isValidAlphaHexCode.ts index 6578b41..6c2da73 100644 --- a/src/isValidAlphaHexCode.ts +++ b/src/isValidAlphaHexCode.ts @@ -5,6 +5,6 @@ */ export function isValidAlphaHexCode(hexCode: string): boolean { // Regular expression to match a valid alpha hex code - const alphaHexPattern = /^#([A-Fa-f0-9]{8})$/ - return alphaHexPattern.test(hexCode) + const alphaHexPattern = /^#([A-Fa-f0-9]{8})$/; + return alphaHexPattern.test(hexCode); } diff --git a/src/isValidHex.ts b/src/isValidHex.ts index f443a9c..c2bce53 100644 --- a/src/isValidHex.ts +++ b/src/isValidHex.ts @@ -26,10 +26,10 @@ * color codes are processed, preventing errors and unexpected behavior. */ export const isValidHex = (hex: string): boolean => { - console.log(`Testing hex: ${hex}`) // Debugging log - if (typeof hex !== 'string') return false - const hexPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/ - const result = hexPattern.test(hex) - console.log(`Result for ${hex}: ${result}`) // Debugging log - return result -} + console.log(`Testing hex: ${hex}`); // Debugging log + if (typeof hex !== "string") return false; + const hexPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/; + const result = hexPattern.test(hex); + console.log(`Result for ${hex}: ${result}`); // Debugging log + return result; +}; diff --git a/src/isValidRgb.ts b/src/isValidRgb.ts index c1f4b7e..59084b0 100644 --- a/src/isValidRgb.ts +++ b/src/isValidRgb.ts @@ -1,4 +1,4 @@ -import { isRgbaOutOfRange } from './isRgbaOutOfRange' +import { isRgbaOutOfRange } from "./isRgbaOutOfRange"; /** * Checks if the provided string is a valid RGB color format. @@ -8,25 +8,25 @@ import { isRgbaOutOfRange } from './isRgbaOutOfRange' export const isValidRgb = (rgb: string): boolean => { try { - const rgbRegex = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/ - const match = rgb.match(rgbRegex) + const rgbRegex = /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/; + const match = rgb.match(rgbRegex); if (!match) { - return false + return false; } - const [, r, g, b] = match.map(Number) + const [, r, g, b] = match.map(Number); const rgbObj = { r: r, g: g, b: b, - } + }; - const valid = !isRgbaOutOfRange(rgbObj) + const valid = !isRgbaOutOfRange(rgbObj); - return valid + return valid; } catch (error) { - console.error(`Error validating RGB string: ${rgb}`, error) - return false + console.error(`Error validating RGB string: ${rgb}`, error); + return false; } -} +}; diff --git a/src/isValidRgba.ts b/src/isValidRgba.ts index 85af9cc..f24dbaa 100644 --- a/src/isValidRgba.ts +++ b/src/isValidRgba.ts @@ -1,5 +1,5 @@ -import { isRgbaOutOfRange } from './isRgbaOutOfRange' -import { HexDecimalObject } from './types/hex-decimal-object.interface' +import { isRgbaOutOfRange } from "./isRgbaOutOfRange"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; /** * Checks if the provided string is a valid RGBA color format. @@ -10,27 +10,27 @@ export const isValidRgba = (rgba: string): boolean => { try { // Regex to match RGBA format, including percentages const rgbaRegex = - /^rgba?\(\s*((?:\d{1,3}%?\s*,\s*){2})(?:\d{1,3}%?\s*,\s*)\d{1,3}%?\s*(?:,\s*([+-]?\d*\.?\d+)\s*)?\)$/ - const match = rgba.match(rgbaRegex) + /^rgba?\(\s*((?:\d{1,3}%?\s*,\s*){2})(?:\d{1,3}%?\s*,\s*)\d{1,3}%?\s*(?:,\s*([+-]?\d*\.?\d+)\s*)?\)$/; + const match = rgba.match(rgbaRegex); - if (!match) return false + if (!match) return false; // Extract RGBA values const parseValue = (value: string) => { - const numValue = Number(value.replace('%', '')) - return value.includes('%') ? numValue * 2.55 : numValue // Convert percentage to 0-255 range - } + const numValue = Number(value.replace("%", "")); + return value.includes("%") ? numValue * 2.55 : numValue; // Convert percentage to 0-255 range + }; - const r = parseValue(match[1].trim()) - const g = parseValue(match[2].trim()) - const b = parseValue(match[3].trim()) - const a = match[4] !== undefined ? Number(match[4]) : undefined + const r = parseValue(match[1].trim()); + const g = parseValue(match[2].trim()); + const b = parseValue(match[3].trim()); + const a = match[4] !== undefined ? Number(match[4]) : undefined; - const rgbaObj: HexDecimalObject = { r, g, b, a } + const rgbaObj: HexDecimalObject = { r, g, b, a }; - return !isRgbaOutOfRange(rgbaObj) + return !isRgbaOutOfRange(rgbaObj); } catch (error) { - console.error(`Error validating RGBA string: ${rgba}`, error) - return false + console.error(`Error validating RGBA string: ${rgba}`, error); + return false; } -} +}; diff --git a/src/lightenColor.ts b/src/lightenColor.ts index 32ab4d9..fdfcc11 100644 --- a/src/lightenColor.ts +++ b/src/lightenColor.ts @@ -1,34 +1,86 @@ +import { AlphaScale } from "./types/alpha-scale.type"; + /** - * Lightens an RGB color by a given factor. + * Adjusts an RGB color by a given factor. If the factor is positive, it lightens the color. If the factor is negative, it darkens the color. + * The factor can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * * @param color - An object containing r, g, and b values. - * @param factor - The factor by which to lighten the color. The value should be between 0 and 1. - * @returns An object containing the lightened r, g, and b values. + * @param factor - The factor by which to adjust the color. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns An object containing the adjusted r, g, and b values. * * @example * ```typescript * // Lighten a dark red color by 10% * console.log(lightenColor({ r: 100, g: 0, b: 0 }, 0.1)); // { r: 115, g: 0, b: 0 } * + * // Darken a dark red color by 10% + * console.log(lightenColor({ r: 100, g: 0, b: 0 }, -0.1)); // { r: 90, g: 0, b: 0 } + * * // Lighten a green color by 20% * console.log(lightenColor({ r: 0, g: 100, b: 0 }, 0.2)); // { r: 0, g: 120, b: 0 } * + * // Darken a green color by 20% + * console.log(lightenColor({ r: 0, g: 100, b: 0 }, -0.2)); // { r: 0, g: 80, b: 0 } + * * // Lighten a blue color by 30% * console.log(lightenColor({ r: 0, g: 0, b: 100 }, 0.3)); // { r: 0, g: 0, b: 130 } * + * // Darken a blue color by 30% + * console.log(lightenColor({ r: 0, g: 0, b: 100 }, -0.3)); // { r: 0, g: 0, b: 70 } + * * // Lighten a nearly white color by 10% * console.log(lightenColor({ r: 245, g: 245, b: 245 }, 0.1)); // { r: 255, g: 255, b: 255 } * + * // Darken a nearly white color by 10% + * console.log(lightenColor({ r: 245, g: 245, b: 245 }, -0.1)); // { r: 220, g: 220, b: 220 } + * * // Lighten a medium gray color by 50% * console.log(lightenColor({ r: 128, g: 128, b: 128 }, 0.5)); // { r: 192, g: 192, b: 192 } + * + * // Darken a medium gray color by 50% + * console.log(lightenColor({ r: 128, g: 128, b: 128 }, -0.5)); // { r: 64, g: 64, b: 64 } * ``` */ export const lightenColor = ( color: { r: number; g: number; b: number }, - factor: number, + factor: AlphaScale, ): { r: number; g: number; b: number } => { + // Convert factor to the 0-1 range if it's in the 1-100 range + const adjustedFactor = Math.abs(factor) > 1 ? factor / 100 : factor; + return { - r: Math.min(255, Math.round(color.r + factor * (255 - color.r))), - g: Math.min(255, Math.round(color.g + factor * (255 - color.g))), - b: Math.min(255, Math.round(color.b + factor * (255 - color.b))), - } -} + r: Math.min( + 255, + Math.max( + 0, + Math.round( + factor < 0 + ? color.r * (1 + factor) + : color.r + adjustedFactor * (255 - color.r), + ), + ), + ), + g: Math.min( + 255, + Math.max( + 0, + Math.round( + factor < 0 + ? color.g * (1 + factor) + : color.g + adjustedFactor * (255 - color.g), + ), + ), + ), + b: Math.min( + 255, + Math.max( + 0, + Math.round( + factor < 0 + ? color.b * (1 + factor) + : color.b + adjustedFactor * (255 - color.b), + ), + ), + ), + }; +}; diff --git a/src/parseColor.ts b/src/parseColor.ts index 295be88..b703e4c 100644 --- a/src/parseColor.ts +++ b/src/parseColor.ts @@ -1,14 +1,14 @@ -import { canBeConvertedIntoColor } from './canBeConvertedToColor' -import { hexesToDecimals, RgbWithAHexObject } from './hexToDecimals' -import { isValidHex } from './isValidHex' -import { isValidRgb } from './isValidRgb' -import { isValidRgba } from './isValidRgba' -import { parseRgbString } from './parseRgbString' -import { parseHex } from './parseHex' -import { HexDecimalObject } from './types/hex-decimal-object.interface' -import { isRgbaOutOfRange } from './isRgbaOutOfRange' +import { canBeConvertedIntoColor } from "./canBeConvertedToColor"; +import { hexesToDecimals, RgbWithAHexObject } from "./hexToDecimals"; +import { isValidHex } from "./isValidHex"; +import { isValidRgb } from "./isValidRgb"; +import { isValidRgba } from "./isValidRgba"; +import { parseRgbString } from "./parseRgbString"; +import { parseHex } from "./parseHex"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { isRgbaOutOfRange } from "./isRgbaOutOfRange"; -export type ColorFormatType = 'hex' | 'rgba' | 'rgb' | 'alphaHex' | undefined +export type ColorFormatType = "hex" | "rgba" | "rgb" | "alphaHex" | undefined; /** * Parses a color value into a HexDecimalObject representing RGB(A) values. @@ -18,32 +18,32 @@ export type ColorFormatType = 'hex' | 'rgba' | 'rgb' | 'alphaHex' | undefined */ export const parseColor = (colorValue: string): HexDecimalObject => { if (!canBeConvertedIntoColor(colorValue)) { - throw new Error('Invalid color format') + throw new Error("Invalid color format"); } try { - let result: HexDecimalObject | null = null + let result: HexDecimalObject | null = null; if (isValidHex(colorValue)) { - const hexObject = parseHex(colorValue) - result = hexesToDecimals(hexObject as RgbWithAHexObject) + const hexObject = parseHex(colorValue); + result = hexesToDecimals(hexObject as RgbWithAHexObject); } else if (isValidRgb(colorValue)) { - const rgbObject = parseRgbString(colorValue) - result = rgbObject + const rgbObject = parseRgbString(colorValue); + result = rgbObject; } else if (isValidRgba(colorValue)) { - const rgbaObject = parseRgbString(colorValue) - result = rgbaObject + const rgbaObject = parseRgbString(colorValue); + result = rgbaObject; } if (result) { if (!isRgbaOutOfRange(result)) { - return result + return result; } return { r: 0, g: 0, b: 0, a: 1, - } + }; } else { // Default to black if parsing fails return { @@ -51,15 +51,15 @@ export const parseColor = (colorValue: string): HexDecimalObject => { g: 0, b: 0, a: 1, - } + }; } } catch (error) { - console.error(`Error parsing color value: ${colorValue}`, error) + console.error(`Error parsing color value: ${colorValue}`, error); return { r: 0, g: 0, b: 0, a: 1, - } + }; } -} +}; diff --git a/src/parseHex.ts b/src/parseHex.ts index fc722a6..21ec3ab 100644 --- a/src/parseHex.ts +++ b/src/parseHex.ts @@ -1,46 +1,47 @@ -import { isHexColor } from './isHexColor' +import { isHexColor } from "./isHexColor"; export interface HexObject { - r: string - g: string - b: string - a: string + r: string; + g: string; + b: string; + a: string; } export const parseHex = (hexString: string): HexObject => { - if (!hexString || typeof hexString !== 'string') { - throw new Error('Invalid hex color') + if (!hexString || typeof hexString !== "string") { + throw new Error("Invalid hex color"); } - const hashlessHex = hexString.replace(/^#/, '') + const hashlessHex = hexString.replace(/^#/, ""); if (!isHexColor(`#${hashlessHex}`)) { - throw new Error('Invalid hex color') + throw new Error("Invalid hex color"); } - const isShort = hashlessHex.length === 3 || hashlessHex.length === 4 - const expandHex = (shortHex: string): string => shortHex.repeat(2) + const isShort = hashlessHex.length === 3 || hashlessHex.length === 4; + const expandHex = (shortHex: string): string => shortHex.repeat(2); if (![3, 4, 6, 8].includes(hashlessHex.length)) { - throw new Error('Invalid hex color length') + throw new Error("Invalid hex color length"); } const twoDigitHexR = isShort ? expandHex(hashlessHex.slice(0, 1)) - : hexString.slice(0, 2) + : hexString.slice(0, 2); const twoDigitHexG = isShort ? expandHex(hexString.slice(1, 2)) - : hexString.slice(2, 4) + : hexString.slice(2, 4); const twoDigitHexB = isShort ? expandHex(hexString.slice(2, 3)) - : hexString.slice(4, 6) + : hexString.slice(4, 6); const twoDigitHexA = - (isShort ? expandHex(hexString.slice(3, 4)) : hexString.slice(6, 8)) || 'ff' + (isShort ? expandHex(hexString.slice(3, 4)) : hexString.slice(6, 8)) || + "ff"; return { r: twoDigitHexR, g: twoDigitHexG, b: twoDigitHexB, a: twoDigitHexA, - } -} + }; +}; diff --git a/src/parseRgbString.ts b/src/parseRgbString.ts index 5345239..b324218 100644 --- a/src/parseRgbString.ts +++ b/src/parseRgbString.ts @@ -1,6 +1,6 @@ -import { isValidRgb } from './isValidRgb' -import { isValidRgba } from './isValidRgba' -import { HexDecimalObject } from './types/hex-decimal-object.interface' +import { isValidRgb } from "./isValidRgb"; +import { isValidRgba } from "./isValidRgba"; +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; /** * Parses an RGB or RGBA string and returns an object with the red, green, blue, and optionally alpha components. @@ -10,38 +10,38 @@ import { HexDecimalObject } from './types/hex-decimal-object.interface' */ export const parseRgbString = (color: string): HexDecimalObject | null => { try { - let result: RegExpExecArray | null = null + let result: RegExpExecArray | null = null; const percentageToDecimal = (percent: string): number => { - return Math.round(parseFloat(percent) * 2.55) // Convert percentage to 0-255 range - } + return Math.round(parseFloat(percent) * 2.55); // Convert percentage to 0-255 range + }; if (isValidRgb(color)) { const rgbRegex = - /^rgb\(\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)$/ - result = rgbRegex.exec(color) + /^rgb\(\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*\)$/; + result = rgbRegex.exec(color); } else if (isValidRgba(color)) { const rgbaRegex = - /^rgba\(\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(0|1|0?\.\d+)\s*\)$/ - result = rgbaRegex.exec(color) + /^rgba\(\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(\d{1,3}%?)\s*,\s*(0|1|0?\.\d+)\s*\)$/; + result = rgbaRegex.exec(color); } if (result) { const [r, g, b, a] = result .slice(1) .map((value) => - value.endsWith('%') ? percentageToDecimal(value) : Number(value), - ) - const colorObject: HexDecimalObject = { r, g, b } + value.endsWith("%") ? percentageToDecimal(value) : Number(value), + ); + const colorObject: HexDecimalObject = { r, g, b }; if (a !== undefined) { - colorObject.a = Number(a) // Leave alpha as it is + colorObject.a = Number(a); // Leave alpha as it is } - return colorObject + return colorObject; } - return null + return null; } catch (error) { - console.error('Error parsing RGB string:', error) - return null + console.error("Error parsing RGB string:", error); + return null; } -} +}; diff --git a/src/rgbaToHexAlpha.ts b/src/rgbaToHexAlpha.ts index b714de7..f89f487 100644 --- a/src/rgbaToHexAlpha.ts +++ b/src/rgbaToHexAlpha.ts @@ -18,25 +18,25 @@ export const RGBAToHexAlpha = ( forceRemoveAlpha = false, ): string => { // Extracts numbers from the rgba/rgb string - const numbers = rgba.match(/\d+\.?\d*/g)?.map(Number) + const numbers = rgba.match(/\d+\.?\d*/g)?.map(Number); if (!numbers) { - throw new Error('Invalid RGBA/RGB input') + throw new Error("Invalid RGBA/RGB input"); } // Convert the RGBA values to hex const hexValues = numbers.map((num, idx) => { // Convert alpha from [0,1] to [0,255] if it's the fourth value - if (idx === 3) num = Math.round(num * 255) + if (idx === 3) num = Math.round(num * 255); - const hex = num.toString(16) - return hex.length === 1 ? '0' + hex : hex - }) + const hex = num.toString(16); + return hex.length === 1 ? "0" + hex : hex; + }); // If forceRemoveAlpha is true, remove the alpha value if (forceRemoveAlpha && hexValues.length === 4) { - hexValues.pop() + hexValues.pop(); } - return '#' + hexValues.join('') -} + return "#" + hexValues.join(""); +}; diff --git a/src/toHexColor.ts b/src/toHexColor.ts index 2d9b763..c80660d 100644 --- a/src/toHexColor.ts +++ b/src/toHexColor.ts @@ -1,8 +1,8 @@ export const toHexColor = (color: { - r: number - g: number - b: number + r: number; + g: number; + b: number; }): string => { - const toHexComponent = (comp: number) => comp.toString(16).padStart(2, '0') - return `#${toHexComponent(color.r)}${toHexComponent(color.g)}${toHexComponent(color.b)}`.toUpperCase() -} + const toHexComponent = (comp: number) => comp.toString(16).padStart(2, "0"); + return `#${toHexComponent(color.r)}${toHexComponent(color.g)}${toHexComponent(color.b)}`.toUpperCase(); +}; diff --git a/src/toRgbString.ts b/src/toRgbString.ts index c626211..3ac7328 100644 --- a/src/toRgbString.ts +++ b/src/toRgbString.ts @@ -1,4 +1,4 @@ -import { HexDecimalObject } from './types/hex-decimal-object.interface' +import { HexDecimalObject } from "./types/hex-decimal-object.interface"; /** * Converts a HexDecimalObject to an RGB or RGBA string. @@ -8,8 +8,8 @@ import { HexDecimalObject } from './types/hex-decimal-object.interface' */ export const toRgbString = (color: HexDecimalObject): string => { if (color.a !== undefined) { - const roundedAlpha = Math.round(color.a * 10) / 10 // Round alpha to one decimal place - return `rgba(${color.r}, ${color.g}, ${color.b}, ${roundedAlpha})` + const roundedAlpha = Math.round(color.a * 10) / 10; // Round alpha to one decimal place + return `rgba(${color.r}, ${color.g}, ${color.b}, ${roundedAlpha})`; } - return `rgb(${color.r}, ${color.g}, ${color.b})` -} + return `rgb(${color.r}, ${color.g}, ${color.b})`; +}; diff --git a/src/types/alpha-scale.type.ts b/src/types/alpha-scale.type.ts new file mode 100644 index 0000000..c4d1720 --- /dev/null +++ b/src/types/alpha-scale.type.ts @@ -0,0 +1,4 @@ +import { AlphaValue } from "./alpha-value.type"; +import { NumberRange1To100 } from "./number-range-hundred.type"; + +export type AlphaScale = NumberRange1To100 | AlphaValue; diff --git a/src/types/alpha-value.type.ts b/src/types/alpha-value.type.ts index 0eb6405..07148f1 100644 --- a/src/types/alpha-value.type.ts +++ b/src/types/alpha-value.type.ts @@ -1,14 +1,204 @@ export type AlphaValue = + | -1 + | -0.99 + | -0.98 + | -0.97 + | -0.96 + | -0.95 + | -0.94 + | -0.93 + | -0.92 + | -0.91 + | -0.9 + | -0.89 + | -0.88 + | -0.87 + | -0.86 + | -0.85 + | -0.84 + | -0.83 + | -0.82 + | -0.81 + | -0.8 + | -0.79 + | -0.78 + | -0.77 + | -0.76 + | -0.75 + | -0.74 + | -0.73 + | -0.72 + | -0.71 + | -0.7 + | -0.69 + | -0.68 + | -0.67 + | -0.66 + | -0.65 + | -0.64 + | -0.63 + | -0.62 + | -0.61 + | -0.6 + | -0.59 + | -0.58 + | -0.57 + | -0.56 + | -0.55 + | -0.54 + | -0.53 + | -0.52 + | -0.51 + | -0.5 + | -0.49 + | -0.48 + | -0.47 + | -0.46 + | -0.45 + | -0.44 + | -0.43 + | -0.42 + | -0.41 + | -0.4 + | -0.39 + | -0.38 + | -0.37 + | -0.36 + | -0.35 + | -0.34 + | -0.33 + | -0.32 + | -0.31 + | -0.3 + | -0.29 + | -0.28 + | -0.27 + | -0.26 + | -0.25 + | -0.24 + | -0.23 + | -0.22 + | -0.21 + | -0.2 + | -0.19 + | -0.18 + | -0.17 + | -0.16 + | -0.15 + | -0.14 + | -0.13 + | -0.12 + | -0.11 + | -0.1 + | -0.09 + | -0.08 + | -0.07 + | -0.06 + | -0.05 + | -0.04 + | -0.03 + | -0.02 + | -0.01 | 0 | 0.0 + | 0.01 + | 0.02 + | 0.03 + | 0.04 + | 0.05 + | 0.06 + | 0.07 + | 0.08 + | 0.09 | 0.1 + | 0.11 + | 0.12 + | 0.13 + | 0.14 + | 0.15 + | 0.16 + | 0.17 + | 0.18 + | 0.19 | 0.2 + | 0.21 + | 0.22 + | 0.23 + | 0.24 + | 0.25 + | 0.26 + | 0.27 + | 0.28 + | 0.29 | 0.3 + | 0.31 + | 0.32 + | 0.33 + | 0.34 + | 0.35 + | 0.36 + | 0.37 + | 0.38 + | 0.39 | 0.4 + | 0.41 + | 0.42 + | 0.43 + | 0.44 + | 0.45 + | 0.46 + | 0.47 + | 0.48 + | 0.49 | 0.5 + | 0.51 + | 0.52 + | 0.53 + | 0.54 + | 0.55 + | 0.56 + | 0.57 + | 0.58 + | 0.59 | 0.6 + | 0.61 + | 0.62 + | 0.63 + | 0.64 + | 0.65 + | 0.66 + | 0.67 + | 0.68 + | 0.69 | 0.7 + | 0.71 + | 0.72 + | 0.73 + | 0.74 + | 0.75 + | 0.76 + | 0.77 + | 0.78 + | 0.79 | 0.8 + | 0.81 + | 0.82 + | 0.83 + | 0.84 + | 0.85 + | 0.86 + | 0.87 + | 0.88 + | 0.89 | 0.9 + | 0.91 + | 0.92 + | 0.93 + | 0.94 + | 0.95 + | 0.96 + | 0.97 + | 0.98 + | 0.99 | 1.0 - | 1 + | 1; diff --git a/src/types/color-input.type.ts b/src/types/color-input.type.ts index 1090979..28df705 100644 --- a/src/types/color-input.type.ts +++ b/src/types/color-input.type.ts @@ -1 +1 @@ -export type ColorInputType = 'hex' | 'rgb' | 'rgba' | 'invalid' +export type ColorInputType = "hex" | "rgb" | "rgba" | "invalid"; diff --git a/src/types/color-item.interface.ts b/src/types/color-item.interface.ts index d5761d7..d0c88c1 100644 --- a/src/types/color-item.interface.ts +++ b/src/types/color-item.interface.ts @@ -1,16 +1,16 @@ -import { Rgb } from './rgb.type' +import { Rgb } from "./rgb.type"; export interface Rgba { - r: number - g: number - b: number - a: number + r: number; + g: number; + b: number; + a: number; } export interface ColorItem { - rgb: Rgb - cmyk?: string - rgba?: Rgba - hex?: string - hexAlpha?: string + rgb: Rgb; + cmyk?: string; + rgba?: Rgba; + hex?: string; + hexAlpha?: string; } diff --git a/src/types/color-names.ts b/src/types/color-names.ts index 22dfe20..266f164 100644 --- a/src/types/color-names.ts +++ b/src/types/color-names.ts @@ -1,146 +1,146 @@ export enum ColorNames { - AliceBlue = 'aliceblue', - AntiqueWhite = 'antiquewhite', - Aqua = 'aqua', - Aquamarine = 'aquamarine', - Azure = 'azure', - Beige = 'beige', - Bisque = 'bisque', - Black = 'black', - BlanchedAlmond = 'blanchedalmond', - Blue = 'blue', - BlueViolet = 'blueviolet', - Brown = 'brown', - BurlyWood = 'burlywood', - CadetBlue = 'cadetblue', - Chartreuse = 'chartreuse', - Chocolate = 'chocolate', - Coral = 'coral', - CornflowerBlue = 'cornflowerblue', - Cornsilk = 'cornsilk', - Crimson = 'crimson', - Cyan = 'cyan', - DarkBlue = 'darkblue', - DarkCyan = 'darkcyan', - DarkGoldenRod = 'darkgoldenrod', - DarkGray = 'darkgray', - DarkGreen = 'darkgreen', - DarkGrey = 'darkgrey', - DarkKhaki = 'darkkhaki', - DarkMagenta = 'darkmagenta', - DarkOliveGreen = 'darkolivegreen', - DarkOrange = 'darkorange', - DarkOrchid = 'darkorchid', - DarkRed = 'darkred', - DarkSalmon = 'darksalmon', - DarkSeaGreen = 'darkseagreen', - DarkSlateBlue = 'darkslateblue', - DarkSlateGray = 'darkslategray', - DarkTurquoise = 'darkturquoise', - DarkViolet = 'darkviolet', - DeepPink = 'deeppink', - DeepSkyBlue = 'deepskyblue', - DimGray = 'dimgray', - DimGrey = 'dimgrey', - DodgerBlue = 'dodgerblue', - FireBrick = 'firebrick', - FloralWhite = 'floralwhite', - ForestGreen = 'forestgreen', - Fuchsia = 'fuchsia', - Gainsboro = 'gainsboro', - GhostWhite = 'ghostwhite', - Gold = 'gold', - GoldenRod = 'goldenrod', - Gray = 'gray', - Green = 'green', - GreenYellow = 'greenyellow', - HoneyDew = 'honeydew', - HotPink = 'hotpink', - IndianRed = 'indianred', - Indigo = 'indigo', - Ivory = 'ivory', - Khaki = 'khaki', - Lavender = 'lavender', - LavenderBlush = 'lavenderblush', - LawnGreen = 'lawngreen', - LemonChiffon = 'lemonchiffon', - LightBlue = 'lightblue', - LightCoral = 'lightcoral', - LightCyan = 'lightcyan', - LightGoldenRodYellow = 'lightgoldenrodyellow', - LightGray = 'lightgray', - LightGreen = 'lightgreen', - LightGrey = 'lightgrey', - LightPink = 'lightpink', - LightSalmon = 'lightsalmon', - LightSeaGreen = 'lightseagreen', - LightSkyBlue = 'lightskyblue', - LightSlateGray = 'lightslategray', - LightSteelBlue = 'lightsteelblue', - LightYellow = 'lightyellow', - Lime = 'lime', - LimeGreen = 'limegreen', - Linen = 'linen', - Magenta = 'magenta', - Maroon = 'maroon', - MediumAquaMarine = 'mediumaquamarine', - MediumBlue = 'mediumblue', - MediumOrchid = 'mediumorchid', - MediumPurple = 'mediumpurple', - MediumSeaGreen = 'mediumseagreen', - MediumSlateBlue = 'mediumslateblue', - MediumSpringGreen = 'mediumspringgreen', - MediumTurquoise = 'mediumturquoise', - MediumVioletRed = 'mediumvioletred', - MidnightBlue = 'midnightblue', - MintCream = 'mintcream', - MistyRose = 'mistyrose', - Moccasin = 'moccasin', - NavajoWhite = 'navajowhite', - Navy = 'navy', - OldLace = 'oldlace', - Olive = 'olive', - OliveDrab = 'olivedrab', - Orange = 'orange', - OrangeRed = 'orangered', - Orchid = 'orchid', - PaleGoldenRod = 'palegoldenrod', - PaleGreen = 'palegreen', - PaleTurquoise = 'paleturquoise', - PaleVioletRed = 'palevioletred', - PapayaWhip = 'papayawhip', - PeachPuff = 'peachpuff', - Peru = 'peru', - Pink = 'pink', - Plum = 'plum', - PowderBlue = 'powderblue', - Purple = 'purple', - RebeccaPurple = 'rebeccapurple', - Red = 'red', - RosyBrown = 'rosybrown', - RoyalBlue = 'royalblue', - SaddleBrown = 'saddlebrown', - Salmon = 'salmon', - SandyBrown = 'sandybrown', - SeaGreen = 'seagreen', - SeaShell = 'seashell', - Sienna = 'sienna', - Silver = 'silver', - SkyBlue = 'skyblue', - SlateBlue = 'slateblue', - SlateGray = 'slategray', - Snow = 'snow', - SpringGreen = 'springgreen', - SteelBlue = 'steelblue', - Tan = 'tan', - Teal = 'teal', - Thistle = 'thistle', - Tomato = 'tomato', - Turquoise = 'turquoise', - Violet = 'violet', - Wheat = 'wheat', - White = 'white', - WhiteSmoke = 'whitesmoke', - Yellow = 'yellow', - YellowGreen = 'yellowgreen', + AliceBlue = "aliceblue", + AntiqueWhite = "antiquewhite", + Aqua = "aqua", + Aquamarine = "aquamarine", + Azure = "azure", + Beige = "beige", + Bisque = "bisque", + Black = "black", + BlanchedAlmond = "blanchedalmond", + Blue = "blue", + BlueViolet = "blueviolet", + Brown = "brown", + BurlyWood = "burlywood", + CadetBlue = "cadetblue", + Chartreuse = "chartreuse", + Chocolate = "chocolate", + Coral = "coral", + CornflowerBlue = "cornflowerblue", + Cornsilk = "cornsilk", + Crimson = "crimson", + Cyan = "cyan", + DarkBlue = "darkblue", + DarkCyan = "darkcyan", + DarkGoldenRod = "darkgoldenrod", + DarkGray = "darkgray", + DarkGreen = "darkgreen", + DarkGrey = "darkgrey", + DarkKhaki = "darkkhaki", + DarkMagenta = "darkmagenta", + DarkOliveGreen = "darkolivegreen", + DarkOrange = "darkorange", + DarkOrchid = "darkorchid", + DarkRed = "darkred", + DarkSalmon = "darksalmon", + DarkSeaGreen = "darkseagreen", + DarkSlateBlue = "darkslateblue", + DarkSlateGray = "darkslategray", + DarkTurquoise = "darkturquoise", + DarkViolet = "darkviolet", + DeepPink = "deeppink", + DeepSkyBlue = "deepskyblue", + DimGray = "dimgray", + DimGrey = "dimgrey", + DodgerBlue = "dodgerblue", + FireBrick = "firebrick", + FloralWhite = "floralwhite", + ForestGreen = "forestgreen", + Fuchsia = "fuchsia", + Gainsboro = "gainsboro", + GhostWhite = "ghostwhite", + Gold = "gold", + GoldenRod = "goldenrod", + Gray = "gray", + Green = "green", + GreenYellow = "greenyellow", + HoneyDew = "honeydew", + HotPink = "hotpink", + IndianRed = "indianred", + Indigo = "indigo", + Ivory = "ivory", + Khaki = "khaki", + Lavender = "lavender", + LavenderBlush = "lavenderblush", + LawnGreen = "lawngreen", + LemonChiffon = "lemonchiffon", + LightBlue = "lightblue", + LightCoral = "lightcoral", + LightCyan = "lightcyan", + LightGoldenRodYellow = "lightgoldenrodyellow", + LightGray = "lightgray", + LightGreen = "lightgreen", + LightGrey = "lightgrey", + LightPink = "lightpink", + LightSalmon = "lightsalmon", + LightSeaGreen = "lightseagreen", + LightSkyBlue = "lightskyblue", + LightSlateGray = "lightslategray", + LightSteelBlue = "lightsteelblue", + LightYellow = "lightyellow", + Lime = "lime", + LimeGreen = "limegreen", + Linen = "linen", + Magenta = "magenta", + Maroon = "maroon", + MediumAquaMarine = "mediumaquamarine", + MediumBlue = "mediumblue", + MediumOrchid = "mediumorchid", + MediumPurple = "mediumpurple", + MediumSeaGreen = "mediumseagreen", + MediumSlateBlue = "mediumslateblue", + MediumSpringGreen = "mediumspringgreen", + MediumTurquoise = "mediumturquoise", + MediumVioletRed = "mediumvioletred", + MidnightBlue = "midnightblue", + MintCream = "mintcream", + MistyRose = "mistyrose", + Moccasin = "moccasin", + NavajoWhite = "navajowhite", + Navy = "navy", + OldLace = "oldlace", + Olive = "olive", + OliveDrab = "olivedrab", + Orange = "orange", + OrangeRed = "orangered", + Orchid = "orchid", + PaleGoldenRod = "palegoldenrod", + PaleGreen = "palegreen", + PaleTurquoise = "paleturquoise", + PaleVioletRed = "palevioletred", + PapayaWhip = "papayawhip", + PeachPuff = "peachpuff", + Peru = "peru", + Pink = "pink", + Plum = "plum", + PowderBlue = "powderblue", + Purple = "purple", + RebeccaPurple = "rebeccapurple", + Red = "red", + RosyBrown = "rosybrown", + RoyalBlue = "royalblue", + SaddleBrown = "saddlebrown", + Salmon = "salmon", + SandyBrown = "sandybrown", + SeaGreen = "seagreen", + SeaShell = "seashell", + Sienna = "sienna", + Silver = "silver", + SkyBlue = "skyblue", + SlateBlue = "slateblue", + SlateGray = "slategray", + Snow = "snow", + SpringGreen = "springgreen", + SteelBlue = "steelblue", + Tan = "tan", + Teal = "teal", + Thistle = "thistle", + Tomato = "tomato", + Turquoise = "turquoise", + Violet = "violet", + Wheat = "wheat", + White = "white", + WhiteSmoke = "whitesmoke", + Yellow = "yellow", + YellowGreen = "yellowgreen", } diff --git a/src/types/hex-decimal-object.interface.ts b/src/types/hex-decimal-object.interface.ts index 90bf95b..c255df4 100644 --- a/src/types/hex-decimal-object.interface.ts +++ b/src/types/hex-decimal-object.interface.ts @@ -1,8 +1,8 @@ -import { Rgb } from './rgb.type' +import { Rgb } from "./rgb.type"; export interface HexDecimalObject extends Rgb { - r: number - g: number - b: number - a?: number + r: number; + g: number; + b: number; + a?: number; } diff --git a/src/types/number-range-hundred.type.ts b/src/types/number-range-hundred.type.ts index 577ae22..0269ea0 100644 --- a/src/types/number-range-hundred.type.ts +++ b/src/types/number-range-hundred.type.ts @@ -98,4 +98,4 @@ export type NumberRange1To100 = | 97 | 98 | 99 - | 100 + | 100; diff --git a/src/types/rgb.type.ts b/src/types/rgb.type.ts index 18c9db2..d88bb05 100644 --- a/src/types/rgb.type.ts +++ b/src/types/rgb.type.ts @@ -1,9 +1,9 @@ export interface Rgb { - r: number - g: number - b: number + r: number; + g: number; + b: number; } export interface HexDecimalObject extends Rgb { - a?: number + a?: number; } diff --git a/src/types/theme.type.ts b/src/types/theme.type.ts index 6870d42..be52c7a 100644 --- a/src/types/theme.type.ts +++ b/src/types/theme.type.ts @@ -1 +1 @@ -export type ThemeType = 'dark' | 'light' +export type ThemeType = "dark" | "light"; diff --git a/typings/adjustColor.d.ts b/typings/adjustColor.d.ts index 1fc2f04..4dacca6 100644 --- a/typings/adjustColor.d.ts +++ b/typings/adjustColor.d.ts @@ -1,7 +1,7 @@ -import { AlphaValue } from "./types/alpha-value.type"; import { ThemeType } from "./types/theme.type"; +import { AlphaScale } from "./types/alpha-scale.type"; export interface AdjustColorFunc { - (colorValue: string, alphaValue: AlphaValue, mode: ThemeType, cssColorNames?: string[]): string; + (colorValue: string, alphaValue: AlphaScale, mode: ThemeType, cssColorNames?: string[]): string; } export declare const log: (message: string) => void; export declare const adjustColor: AdjustColorFunc; diff --git a/typings/applyAlphaToColor.d.ts b/typings/applyAlphaToColor.d.ts index b60cf4b..81a4019 100644 --- a/typings/applyAlphaToColor.d.ts +++ b/typings/applyAlphaToColor.d.ts @@ -1,9 +1,23 @@ +import { AlphaScale } from "./types/alpha-scale.type"; +/** + * Applies a new alpha value to an RGBA color object. + * The alpha value can be provided in the range 0-1 or 0-100. + * + * @param {object} color - The original color object with properties r, g, b, and optionally a. + * @param {AlphaScale} alphaValue - The new alpha value. It can be in the range 0-1 or 0-100. + * @returns {object} - The new color object with the updated alpha value. + * + * @example + * const color = { r: 52, g: 152, b: 219 }; + * const newColor = applyAlphaToColor(color, 50); + * // newColor will be { r: 52, g: 152, b: 219, a: 0.5 } + */ export declare const applyAlphaToColor: (color: { r: number; g: number; b: number; a?: number; -}, alphaValue: number) => { +}, alphaValue: AlphaScale) => { r: number; g: number; b: number; diff --git a/typings/blendColors.d.ts b/typings/blendColors.d.ts index a599663..01fae1e 100644 --- a/typings/blendColors.d.ts +++ b/typings/blendColors.d.ts @@ -1,6 +1,22 @@ +import { AlphaScale } from "./types/alpha-scale.type"; import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +/** + * Blends two colors based on the given alpha scale. + * The alpha scale can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * + * @param {HexDecimalObject} color1 - The first color object with properties r, g, b. + * @param {HexDecimalObject} color2 - The second color object with properties r, g, b. + * @param {AlphaScale} alphaScale - The alpha scale value. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns {HexDecimalObject} - The blended color object. + * + * @example + * const color1 = { r: 52, g: 152, b: 219 }; + * const color2 = { r: 255, g: 0, b: 0 }; + * const blendedColor = blendColors(color1, color2, 50); + * // blendedColor will be a color blended 50% between color1 and color2 + */ export declare const blendColors: (color1: HexDecimalObject, color2: { r: number; g: number; b: number; -}, alphaScale: number) => HexDecimalObject; +}, alphaScale: AlphaScale) => HexDecimalObject; diff --git a/typings/color.d.ts b/typings/color.d.ts index dcb40e9..fd70284 100644 --- a/typings/color.d.ts +++ b/typings/color.d.ts @@ -1,13 +1,16 @@ import { HexDecimalObject } from "./types/hex-decimal-object.interface"; +import { AlphaScale } from "./types/alpha-scale.type"; +import { ThemeType } from "./types/theme.type"; export declare class Color { private color; - constructor(color: string | HexDecimalObject); - darken(factor: number): Color; - lighten(factor: number): Color; + private mode; + constructor(color: string | HexDecimalObject, mode?: ThemeType); + darken(factor: AlphaScale): Color; + lighten(factor: AlphaScale): Color; rgb(): string; hex(): string; invert(): string; - alpha(factor: number): HexDecimalObject; - blend(factor: number, secondaryColor: HexDecimalObject): Color; + alpha(factor: AlphaScale): HexDecimalObject; + blend(factor: AlphaScale, secondaryColor: HexDecimalObject): Color; getColor(): HexDecimalObject; } diff --git a/typings/darkenColor.d.ts b/typings/darkenColor.d.ts index a45db1a..345d51e 100644 --- a/typings/darkenColor.d.ts +++ b/typings/darkenColor.d.ts @@ -1,32 +1,50 @@ +import { AlphaScale } from "./types/alpha-scale.type"; /** - * Darkens an RGB color by a given factor. + * Adjusts an RGB color by a given factor. If the factor is positive, it darkens the color. If the factor is negative, it lightens the color. + * The factor can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * * @param color - An object containing r, g, and b values. - * @param factor - The factor by which to darken the color. The value should be between 0 and 1. - * @returns An object containing the darkened r, g, and b values. + * @param factor - The factor by which to adjust the color. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns An object containing the adjusted r, g, and b values. * * @example * ```typescript * // Darken a light red color by 10% * console.log(darkenColor({ r: 255, g: 100, b: 100 }, 0.1)); // { r: 230, g: 90, b: 90 } * + * // Lighten a light red color by 10% + * console.log(darkenColor({ r: 255, g: 100, b: 100 }, -0.1)); // { r: 255, g: 110, b: 110 } + * * // Darken a green color by 20% * console.log(darkenColor({ r: 0, g: 200, b: 0 }, 0.2)); // { r: 0, g: 160, b: 0 } * + * // Lighten a green color by 20% + * console.log(darkenColor({ r: 0, g: 200, b: 0 }, -0.2)); // { r: 0, g: 240, b: 0 } + * * // Darken a blue color by 30% * console.log(darkenColor({ r: 0, g: 0, b: 255 }, 0.3)); // { r: 0, g: 0, b: 178 } * + * // Lighten a blue color by 30% + * console.log(darkenColor({ r: 0, g: 0, b: 255 }, -0.3)); // { r: 0, g: 0, b: 255 } + * * // Darken a nearly black color by 10% * console.log(darkenColor({ r: 10, g: 10, b: 10 }, 0.1)); // { r: 9, g: 9, b: 9 } * + * // Lighten a nearly black color by 10% + * console.log(darkenColor({ r: 10, g: 10, b: 10 }, -0.1)); // { r: 12, g: 12, b: 12 } + * * // Darken a medium gray color by 50% * console.log(darkenColor({ r: 128, g: 128, b: 128 }, 0.5)); // { r: 64, g: 64, b: 64 } + * + * // Lighten a medium gray color by 50% + * console.log(darkenColor({ r: 128, g: 128, b: 128 }, -0.5)); // { r: 192, g: 192, b: 192 } * ``` */ export declare const darkenColor: (color: { r: number; g: number; b: number; -}, factor: number) => { +}, factor: AlphaScale) => { r: number; g: number; b: number; diff --git a/typings/lightenColor.d.ts b/typings/lightenColor.d.ts index 8fbb510..9eb6981 100644 --- a/typings/lightenColor.d.ts +++ b/typings/lightenColor.d.ts @@ -1,32 +1,50 @@ +import { AlphaScale } from "./types/alpha-scale.type"; /** - * Lightens an RGB color by a given factor. + * Adjusts an RGB color by a given factor. If the factor is positive, it lightens the color. If the factor is negative, it darkens the color. + * The factor can be provided in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * * @param color - An object containing r, g, and b values. - * @param factor - The factor by which to lighten the color. The value should be between 0 and 1. - * @returns An object containing the lightened r, g, and b values. + * @param factor - The factor by which to adjust the color. It can be in the range -1 to 1, -1.00 to 1.00, or -100 to 100. + * @returns An object containing the adjusted r, g, and b values. * * @example * ```typescript * // Lighten a dark red color by 10% * console.log(lightenColor({ r: 100, g: 0, b: 0 }, 0.1)); // { r: 115, g: 0, b: 0 } * + * // Darken a dark red color by 10% + * console.log(lightenColor({ r: 100, g: 0, b: 0 }, -0.1)); // { r: 90, g: 0, b: 0 } + * * // Lighten a green color by 20% * console.log(lightenColor({ r: 0, g: 100, b: 0 }, 0.2)); // { r: 0, g: 120, b: 0 } * + * // Darken a green color by 20% + * console.log(lightenColor({ r: 0, g: 100, b: 0 }, -0.2)); // { r: 0, g: 80, b: 0 } + * * // Lighten a blue color by 30% * console.log(lightenColor({ r: 0, g: 0, b: 100 }, 0.3)); // { r: 0, g: 0, b: 130 } * + * // Darken a blue color by 30% + * console.log(lightenColor({ r: 0, g: 0, b: 100 }, -0.3)); // { r: 0, g: 0, b: 70 } + * * // Lighten a nearly white color by 10% * console.log(lightenColor({ r: 245, g: 245, b: 245 }, 0.1)); // { r: 255, g: 255, b: 255 } * + * // Darken a nearly white color by 10% + * console.log(lightenColor({ r: 245, g: 245, b: 245 }, -0.1)); // { r: 220, g: 220, b: 220 } + * * // Lighten a medium gray color by 50% * console.log(lightenColor({ r: 128, g: 128, b: 128 }, 0.5)); // { r: 192, g: 192, b: 192 } + * + * // Darken a medium gray color by 50% + * console.log(lightenColor({ r: 128, g: 128, b: 128 }, -0.5)); // { r: 64, g: 64, b: 64 } * ``` */ export declare const lightenColor: (color: { r: number; g: number; b: number; -}, factor: number) => { +}, factor: AlphaScale) => { r: number; g: number; b: number; diff --git a/typings/types/alpha-scale.type.d.ts b/typings/types/alpha-scale.type.d.ts new file mode 100644 index 0000000..e58570f --- /dev/null +++ b/typings/types/alpha-scale.type.d.ts @@ -0,0 +1,3 @@ +import { AlphaValue } from "./alpha-value.type"; +import { NumberRange1To100 } from "./number-range-hundred.type"; +export type AlphaScale = NumberRange1To100 | AlphaValue; diff --git a/typings/types/alpha-value.type.d.ts b/typings/types/alpha-value.type.d.ts index 8382d7b..a3b27ee 100644 --- a/typings/types/alpha-value.type.d.ts +++ b/typings/types/alpha-value.type.d.ts @@ -1 +1 @@ -export type AlphaValue = 0 | 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1.0 | 1; +export type AlphaValue = -1 | -0.99 | -0.98 | -0.97 | -0.96 | -0.95 | -0.94 | -0.93 | -0.92 | -0.91 | -0.9 | -0.89 | -0.88 | -0.87 | -0.86 | -0.85 | -0.84 | -0.83 | -0.82 | -0.81 | -0.8 | -0.79 | -0.78 | -0.77 | -0.76 | -0.75 | -0.74 | -0.73 | -0.72 | -0.71 | -0.7 | -0.69 | -0.68 | -0.67 | -0.66 | -0.65 | -0.64 | -0.63 | -0.62 | -0.61 | -0.6 | -0.59 | -0.58 | -0.57 | -0.56 | -0.55 | -0.54 | -0.53 | -0.52 | -0.51 | -0.5 | -0.49 | -0.48 | -0.47 | -0.46 | -0.45 | -0.44 | -0.43 | -0.42 | -0.41 | -0.4 | -0.39 | -0.38 | -0.37 | -0.36 | -0.35 | -0.34 | -0.33 | -0.32 | -0.31 | -0.3 | -0.29 | -0.28 | -0.27 | -0.26 | -0.25 | -0.24 | -0.23 | -0.22 | -0.21 | -0.2 | -0.19 | -0.18 | -0.17 | -0.16 | -0.15 | -0.14 | -0.13 | -0.12 | -0.11 | -0.1 | -0.09 | -0.08 | -0.07 | -0.06 | -0.05 | -0.04 | -0.03 | -0.02 | -0.01 | 0 | 0.0 | 0.01 | 0.02 | 0.03 | 0.04 | 0.05 | 0.06 | 0.07 | 0.08 | 0.09 | 0.1 | 0.11 | 0.12 | 0.13 | 0.14 | 0.15 | 0.16 | 0.17 | 0.18 | 0.19 | 0.2 | 0.21 | 0.22 | 0.23 | 0.24 | 0.25 | 0.26 | 0.27 | 0.28 | 0.29 | 0.3 | 0.31 | 0.32 | 0.33 | 0.34 | 0.35 | 0.36 | 0.37 | 0.38 | 0.39 | 0.4 | 0.41 | 0.42 | 0.43 | 0.44 | 0.45 | 0.46 | 0.47 | 0.48 | 0.49 | 0.5 | 0.51 | 0.52 | 0.53 | 0.54 | 0.55 | 0.56 | 0.57 | 0.58 | 0.59 | 0.6 | 0.61 | 0.62 | 0.63 | 0.64 | 0.65 | 0.66 | 0.67 | 0.68 | 0.69 | 0.7 | 0.71 | 0.72 | 0.73 | 0.74 | 0.75 | 0.76 | 0.77 | 0.78 | 0.79 | 0.8 | 0.81 | 0.82 | 0.83 | 0.84 | 0.85 | 0.86 | 0.87 | 0.88 | 0.89 | 0.9 | 0.91 | 0.92 | 0.93 | 0.94 | 0.95 | 0.96 | 0.97 | 0.98 | 0.99 | 1.0 | 1; diff --git a/typings/types/number-range-hundred.type.d.ts b/typings/types/number-range-hundred.type.d.ts new file mode 100644 index 0000000..3c4fe7c --- /dev/null +++ b/typings/types/number-range-hundred.type.d.ts @@ -0,0 +1 @@ +export type NumberRange1To100 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100;