= (props) => {
{showGamutWarning && (
diff --git a/src/constants.ts b/src/constants.ts
index a6a904a..1c032a2 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,4 +1,4 @@
-const DEFAULT_COLOR = `rgba(255 0 0 / 1)`; // red
+const DEFAULT_COLOR = `rgba(255 0 0 / 60%)`; // red
const ASSUMED_BACKGROUND_COLOR = [255, 255, 255]; // white
-export { DEFAULT_COLOR, ASSUMED_BACKGROUND_COLOR }
+export { DEFAULT_COLOR, ASSUMED_BACKGROUND_COLOR };
diff --git a/src/utils/colorTypes.ts b/src/utils/colorTypes.ts
index 8c1959d..8e76859 100644
--- a/src/utils/colorTypes.ts
+++ b/src/utils/colorTypes.ts
@@ -1,10 +1,8 @@
export enum colorTypes {
rgb = `rgb`,
- rgba = `rgba`,
hex6 = `hex6`,
hex8 = `hex8`,
hsl = `hsl`,
- hsla = `hsla`,
lch = `lch`,
oklch = `oklch`,
p3 = `p3`,
diff --git a/src/utils/isValidColor.test.ts b/src/utils/isValidColor.test.ts
index beccd75..7f208ad 100644
--- a/src/utils/isValidColor.test.ts
+++ b/src/utils/isValidColor.test.ts
@@ -1,4 +1,4 @@
-import { isValidColor, isValidHex6, isValidHex8, isValidRgb, isValidRgba, isValidHsl, isValidHsla, isValidLch, isValidOklch, isValidP3 } from './isValidColor';
+import { isValidColor, isValidHex6, isValidHex8, isValidRgb, isValidHsl, isValidLch, isValidOklch, isValidP3 } from './isValidColor';
import { colorTypes } from './colorTypes';
@@ -47,6 +47,8 @@ describe('isValidRgb', () => {
expect(isValidRgb('rgb(255 255 255)')).toBe(true);
expect(isValidRgb('rgb(0 0 0)')).toBe(true);
expect(isValidRgb('rgb(100% 100% 100%)')).toBe(true);
+ expect(isValidRgb('rgb(255 0 0 / 0.5)')).toBe(true);
+ expect(isValidRgb('rgba(255 0 0 / 0.5)')).toBe(true);
});
it('return false on invalid rgb values', () => {
@@ -55,25 +57,6 @@ describe('isValidRgb', () => {
});
});
-describe('isValidRgba', () => {
- it('return true on valid rgba values', () => {
- expect(isValidRgba('rgba(100%, 100%, 100%, 1)')).toBe(true);
- expect(isValidRgba('rgba(255, 255, 255, 0.5)')).toBe(true);
- expect(isValidRgba('rgba(255,255,255,0.5)')).toBe(true);
- });
-
- it('return true on valid modern syntax rgba values', () => {
- expect(isValidRgba('rgba(255 255 255 / 0.5)')).toBe(true);
- expect(isValidRgba('rgba(0 0 0 / 1)')).toBe(true);
- expect(isValidRgba('rgba(100% 100% 100% / 0.5)')).toBe(true);
- });
-
- it('return false on invalid rgba values', () => {
- expect(isValidRgba('rgb(100%, 100%, 100%)')).toBe(false);
- expect(isValidRgba('hsl(100, 100%, 100%)')).toBe(false);
- });
-});
-
describe('isValidHsl', () => {
it('return true on valid hsl values', () => {
expect(isValidHsl('hsl(100, 100%, 100%)')).toBe(true);
@@ -83,6 +66,8 @@ describe('isValidHsl', () => {
it('return true on valid modern syntax hsl values', () => {
expect(isValidHsl('hsl(100 100% 100%)')).toBe(true);
expect(isValidHsl('hsl(0 0% 0%)')).toBe(true);
+ expect(isValidHsl('hsl(0 100% 50% / 0.5)')).toBe(true);
+ expect(isValidHsl('hsla(0 100% 50% / 0.5)')).toBe(true);
});
it('return false on invalid hsl values', () => {
@@ -91,23 +76,6 @@ describe('isValidHsl', () => {
});
});
-describe('isValidHsla', () => {
- it('return true on valid hsla values', () => {
- expect(isValidHsla('hsla(100, 100%, 100%, 0.5)')).toBe(true);
- expect(isValidHsla('hsla(100,100%,100%, 1)')).toBe(true);
- });
-
- it('return true on valid modern syntax hsla values', () => {
- expect(isValidHsla('hsla(100 100% 100% / 0.5)')).toBe(true);
- expect(isValidHsla('hsla(0 0% 0% / 1)')).toBe(true);
- });
-
- it('return false on invalid hsla values', () => {
- expect(isValidHsla('hsla(100%, 100%, 100%)')).toBe(false);
- expect(isValidHsla('hsla (100%, 255, 100%, 1)')).toBe(false);
- });
-});
-
describe('isValidLch', () => {
it('return true on valid lch values', () => {
expect(isValidLch('lch(100% 100 100 / 0.5)')).toBe(true);
@@ -159,18 +127,20 @@ describe('isValidColor', () => {
expect(isValidColor('purple', colorTypes.named)).toBe(true);
expect(isValidColor('#ffffff', colorTypes.hex6)).toBe(true);
expect(isValidColor('#ffffffff', colorTypes.hex8)).toBe(true);
- expect(isValidColor('hsla(100, 100%, 100%, 0.5)', colorTypes.hsla)).toBe(true);
expect(isValidColor('hsl(100, 100%, 100%)', colorTypes.hsl)).toBe(true);
- expect(isValidColor('rgba(100, 100, 100, 0.5)', colorTypes.rgba)).toBe(true);
+ expect(isValidColor('hsl(100 100% 50% / 0.5)', colorTypes.hsl)).toBe(true);
+ expect(isValidColor('hsla(100, 100%, 50%, 0.5)', colorTypes.hsl)).toBe(true);
+ expect(isValidColor('hsla(100 100% 50% / 0.5)', colorTypes.hsl)).toBe(true);
expect(isValidColor('rgb(100, 100, 100)', colorTypes.rgb)).toBe(true);
+ expect(isValidColor('rgb(100 100 100 / 0.5)', colorTypes.rgb)).toBe(true);
+ expect(isValidColor('rgba(100, 100, 100, 0.5)', colorTypes.rgb)).toBe(true);
+ expect(isValidColor('rgba(100 100 100 / 0.5)', colorTypes.rgb)).toBe(true);
});
it('return false for invalid colors', () => {
expect(isValidColor('purplee', colorTypes.named)).toBe(false);
expect(isValidColor('#ffffff', colorTypes.hex8)).toBe(false);
expect(isValidColor('#fffffff', colorTypes.hex6)).toBe(false);
- expect(isValidColor('hsla(100, 100%, 100%, 0.5)', colorTypes.rgba)).toBe(false);
expect(isValidColor('rgb(100, 100, 100)', colorTypes.hsl)).toBe(false);
- expect(isValidColor('rgb(100, 100, 100)', colorTypes.rgba)).toBe(false);
});
});
diff --git a/src/utils/isValidColor.ts b/src/utils/isValidColor.ts
index cdc587a..c22dd5a 100644
--- a/src/utils/isValidColor.ts
+++ b/src/utils/isValidColor.ts
@@ -1,6 +1,6 @@
-import Color from 'colorjs.io';
-import { colorTypes } from './colorTypes';
-import { lowerCaseNamedColors } from './namedColors';
+import Color from "colorjs.io";
+import { colorTypes } from "./colorTypes";
+import { lowerCaseNamedColors } from "./namedColors";
const canParseColor = (color: string): boolean => {
try {
@@ -21,32 +21,32 @@ const isValidHex8 = (color: string): boolean => {
return /^(#)?[0-9A-F]{4}$/i.test(color) || /^(#)?[0-9A-F]{8}$/i.test(color);
};
+// accepts either modern rgb/rgba syntax
const isValidRgb = (color: string): boolean => {
- return color.startsWith('rgb(') && canParseColor(color);
-};
-
-const isValidRgba = (color: string): boolean => {
- return color.startsWith('rgba(') && canParseColor(color);
+ return (
+ (color.startsWith("rgb(") || color.startsWith("rgba(")) &&
+ canParseColor(color)
+ );
};
+// accepts either modern hsl/hsla syntax
const isValidHsl = (color: string): boolean => {
- return color.startsWith('hsl(') && canParseColor(color);
-};
-
-const isValidHsla = (color: string): boolean => {
- return color.startsWith('hsla(') && canParseColor(color);
+ return (
+ (color.startsWith("hsl(") || color.startsWith("hsla(")) &&
+ canParseColor(color)
+ );
};
const isValidLch = (color: string): boolean => {
- return color.startsWith('lch(') && canParseColor(color);
+ return color.startsWith("lch(") && canParseColor(color);
};
const isValidOklch = (color: string): boolean => {
- return color.startsWith('oklch(') && canParseColor(color);
+ return color.startsWith("oklch(") && canParseColor(color);
};
const isValidP3 = (color: string): boolean => {
- return color.startsWith('color(display-p3') && canParseColor(color);
+ return color.startsWith("color(display-p3") && canParseColor(color);
};
const isValidColor = (color: string, colorType: colorTypes): boolean => {
@@ -58,12 +58,8 @@ const isValidColor = (color: string, colorType: colorTypes): boolean => {
return isValidHex8(color);
case colorTypes.rgb:
return isValidRgb(color);
- case colorTypes.rgba:
- return isValidRgba(color);
case colorTypes.hsl:
return isValidHsl(color);
- case colorTypes.hsla:
- return isValidHsla(color);
case colorTypes.lch:
return isValidLch(color);
case colorTypes.oklch:
@@ -82,9 +78,7 @@ export {
isValidHex6,
isValidHex8,
isValidRgb,
- isValidRgba,
isValidHsl,
- isValidHsla,
isValidLch,
isValidOklch,
isValidP3,
diff --git a/src/utils/translatedColor.test.ts b/src/utils/translatedColor.test.ts
index 86f0726..636479b 100644
--- a/src/utils/translatedColor.test.ts
+++ b/src/utils/translatedColor.test.ts
@@ -3,25 +3,22 @@ import { colorTypes } from './colorTypes';
describe('translatedColor', () => {
- it('Should translate modern rgba syntax to all targets', () => {
- expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgba, colorTypes.hex6)).toBe('#ff7f7f');
- expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgba, colorTypes.rgb)).toBe('rgb(255 127 127)');
- expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgba, colorTypes.hex8)).toBe('#ff000080');
- expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgba, colorTypes.hsla)).toBeTruthy();
- expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgba, colorTypes.lch)).toBeTruthy();
+ it('Should translate rgb with alpha to all targets', () => {
+ expect(translatedColor(`rgb(255 0 0 / 0.5)`, colorTypes.rgb, colorTypes.hex6)).toBe('#ff7f7f');
+ expect(translatedColor(`rgb(255 0 0 / 0.5)`, colorTypes.rgb, colorTypes.hex8)).toBe('#ff000080');
+ expect(translatedColor(`rgb(255 0 0 / 0.5)`, colorTypes.rgb, colorTypes.hsl)).toBe('hsl(0 100% 50% / 50%)');
+ expect(translatedColor(`rgb(255 0 0 / 0.5)`, colorTypes.rgb, colorTypes.lch)).toBeTruthy();
});
- it('Should translate modern hsla syntax to all targets', () => {
- expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsla, colorTypes.hex6)).toBe('#ff7f7f');
- expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsla, colorTypes.rgb)).toBe('rgb(255 127 127)');
- expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsla, colorTypes.hex8)).toBeTruthy();
- expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsla, colorTypes.rgba)).toBeTruthy();
- expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsla, colorTypes.lch)).toBeTruthy();
+ it('Should translate hsl with alpha to all targets', () => {
+ expect(translatedColor(`hsl(0 100% 50% / 0.5)`, colorTypes.hsl, colorTypes.hex6)).toBe('#ff7f7f');
+ expect(translatedColor(`hsl(0 100% 50% / 0.5)`, colorTypes.hsl, colorTypes.hex8)).toBeTruthy();
+ expect(translatedColor(`hsl(0 100% 50% / 0.5)`, colorTypes.hsl, colorTypes.rgb)).toBe('rgb(255 0 0 / 50%)');
+ expect(translatedColor(`hsl(0 100% 50% / 0.5)`, colorTypes.hsl, colorTypes.lch)).toBeTruthy();
});
it('Should return correct translated colors', () => {
expect(translatedColor(`#fff`, colorTypes.hex6, colorTypes.rgb)).toBe(`rgb(255 255 255)`);
- expect(translatedColor(`#fff`, colorTypes.hex6, colorTypes.rgba)).toBe(`rgba(255 255 255 / 1)`);
expect(translatedColor(`#fff`, colorTypes.hex6, colorTypes.named)).toBe(`White`);
expect(translatedColor(`#ff00ff`, colorTypes.hex6, colorTypes.named)).toBe(`Fuchsia`);
expect(translatedColor(`rgb(255, 0, 0)`, colorTypes.rgb, colorTypes.named)).toBe(`Red`);
@@ -35,14 +32,21 @@ describe('translatedColor', () => {
it('Should translate hex without # prefix', () => {
expect(translatedColor(`fff`, colorTypes.hex6, colorTypes.rgb)).toBe(`rgb(255 255 255)`);
expect(translatedColor(`ff0000`, colorTypes.hex6, colorTypes.named)).toBe(`Red`);
- expect(translatedColor(`ff000080`, colorTypes.hex8, colorTypes.rgba)).toBe(`rgba(255 0 0 / 0.5019607843137255)`);
+ expect(translatedColor(`ff000080`, colorTypes.hex8, colorTypes.rgb)).toBe(`rgb(255 0 0 / 50.2%)`);
});
it('Should translate oklch to other formats', () => {
expect(translatedColor(`oklch(62.8% 0.258 29.234)`, colorTypes.oklch, colorTypes.hex6)).toBe('#ff0000');
expect(translatedColor(`oklch(100% 0 0)`, colorTypes.oklch, colorTypes.hex6)).toBe('#ffffff');
expect(translatedColor(`oklch(0% 0 0)`, colorTypes.oklch, colorTypes.hex6)).toBe('#000000');
- expect(translatedColor(`oklch(62.8% 0.258 29.234 / 0.5)`, colorTypes.oklch, colorTypes.rgba)).toBeTruthy();
+ expect(translatedColor(`oklch(62.8% 0.258 29.234 / 0.5)`, colorTypes.oklch, colorTypes.rgb)).toBeTruthy();
+ });
+
+ it('Should normalize legacy rgba/hsla aliases when same-type', () => {
+ expect(translatedColor(`rgba(255 0 0 / 0.5)`, colorTypes.rgb, colorTypes.rgb)).toBe('rgb(255 0 0 / 50%)');
+ expect(translatedColor(`rgba(255, 0, 0, 1)`, colorTypes.rgb, colorTypes.rgb)).toBe('rgb(255 0 0)');
+ expect(translatedColor(`hsla(0 100% 50% / 0.5)`, colorTypes.hsl, colorTypes.hsl)).toBe('hsl(0 100% 50% / 50%)');
+ expect(translatedColor(`hsla(0, 100%, 50%, 1)`, colorTypes.hsl, colorTypes.hsl)).toBe('hsl(0 100% 50%)');
});
it('Should translate from oklch to oklch unchanged', () => {
@@ -53,7 +57,7 @@ describe('translatedColor', () => {
expect(translatedColor(`color(display-p3 1 0 0)`, colorTypes.p3, colorTypes.hex6)).toBe('#ff0b0c');
expect(translatedColor(`color(display-p3 1 1 1)`, colorTypes.p3, colorTypes.rgb)).toBe('rgb(255 255 255)');
expect(translatedColor(`color(display-p3 0 0 0)`, colorTypes.p3, colorTypes.hex6)).toBe('#000000');
- expect(translatedColor(`color(display-p3 1 0 0 / 0.5)`, colorTypes.p3, colorTypes.rgba)).toBeTruthy();
+ expect(translatedColor(`color(display-p3 1 0 0 / 0.5)`, colorTypes.p3, colorTypes.rgb)).toBeTruthy();
});
it('Should translate from display-p3 to display-p3 unchanged', () => {
diff --git a/src/utils/translatedColor.ts b/src/utils/translatedColor.ts
index f30a90f..f7bb3ad 100644
--- a/src/utils/translatedColor.ts
+++ b/src/utils/translatedColor.ts
@@ -1,20 +1,24 @@
-import Color from 'colorjs.io';
-import { colorTypes } from './colorTypes';
-import { calculateOverlay } from './calculateOverlay';
-import { rgbToNamed, rgbaToNamed } from './toNamed';
+import Color from "colorjs.io";
+import { colorTypes } from "./colorTypes";
+import { calculateOverlay } from "./calculateOverlay";
+import { rgbToNamed } from "./toNamed";
const translatedColor = (
color: string,
startingColorType: colorTypes,
- targetColorType: colorTypes
+ targetColorType: colorTypes,
): string => {
- if (startingColorType === targetColorType) {
+ const isLegacyAlias =
+ (startingColorType === colorTypes.rgb && color.startsWith("rgba(")) ||
+ (startingColorType === colorTypes.hsl && color.startsWith("hsla("));
+
+ if (startingColorType === targetColorType && !isLegacyAlias) {
return color;
}
const hexTypes = [colorTypes.hex6, colorTypes.hex8, colorTypes.picker];
const normalizedColor =
- hexTypes.includes(startingColorType) && !color.startsWith('#')
+ hexTypes.includes(startingColorType) && !color.startsWith("#")
? `#${color}`
: color;
@@ -22,18 +26,20 @@ const translatedColor = (
try {
parsed = new Color(normalizedColor);
} catch {
- return 'none';
+ return "none";
}
// For alpha-bearing types, flatten to RGB on white before converting
- // to formats that don't carry alpha (hex6, rgb, hsl, named)
+ // to formats that don't carry alpha (hex6, named, picker)
const hasAlpha = parsed.alpha < 1;
const needsOverlay =
hasAlpha &&
- [colorTypes.hex6, colorTypes.picker, colorTypes.rgb, colorTypes.hsl, colorTypes.named].includes(targetColorType);
+ [colorTypes.hex6, colorTypes.picker, colorTypes.named].includes(
+ targetColorType,
+ );
- const srgb = parsed.toGamut({space: 'srgb'}).to('srgb');
- const [r, g, b] = srgb.coords.map((v: number) => Math.round(v * 255));
+ const srgb = parsed.toGamut({ space: "srgb" }).to("srgb");
+ const [r, g, b] = srgb.coords.map((v: number | null) => Math.round((v ?? 0) * 255));
const a = parsed.alpha;
const overlaid = needsOverlay ? calculateOverlay([r, g, b, a]) : null;
@@ -42,68 +48,63 @@ const translatedColor = (
case colorTypes.hex6:
case colorTypes.picker: {
const [or, og, ob] = overlaid ?? [r, g, b];
- return `#${[or, og, ob].map(v => v.toString(16).padStart(2, '0')).join('')}`;
+ return `#${[or, og, ob].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
}
case colorTypes.hex8: {
const alpha255 = Math.round(a * 255);
- return `#${[r, g, b, alpha255].map(v => v.toString(16).padStart(2, '0')).join('')}`;
+ return `#${[r, g, b, alpha255].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
}
case colorTypes.rgb: {
- const [or, og, ob] = overlaid ?? [r, g, b];
- return `rgb(${or} ${og} ${ob})`;
+ const alphaStr = a < 1 ? ` / ${parseFloat((a * 100).toFixed(2))}%` : "";
+ return `rgb(${r} ${g} ${b}${alphaStr})`;
}
- case colorTypes.rgba:
- return `rgba(${r} ${g} ${b} / ${a})`;
-
case colorTypes.hsl: {
- const [or, og, ob] = overlaid ?? [r, g, b];
- const flat = new Color(`srgb`, [or / 255, og / 255, ob / 255]);
- const hsl = flat.to('hsl');
- const [h, s, l] = hsl.coords.map((v: number | null) => Math.round(v ?? 0));
- return `hsl(${h} ${s}% ${l}%)`;
- }
-
- case colorTypes.hsla: {
- const hsl = srgb.to('hsl');
- const [h, s, l] = hsl.coords.map((v: number | null) => Math.round(v ?? 0));
- return `hsla(${h} ${s}% ${l}% / ${a})`;
+ const hsl = srgb.to("hsl");
+ const [h, s, l] = hsl.coords.map((v: number | null) =>
+ Math.round(v ?? 0),
+ );
+ const alphaStr = a < 1 ? ` / ${parseFloat((a * 100).toFixed(2))}%` : "";
+ return `hsl(${h} ${s}% ${l}%${alphaStr})`;
}
case colorTypes.lch: {
- const lch = parsed.to('lch');
- const [l, c, h] = lch.coords.map((v: number | null) => +((v ?? 0).toFixed(2)));
- const alphaStr = a < 1 ? ` / ${a}` : '';
+ const lch = parsed.to("lch");
+ const [l, c, h] = lch.coords.map(
+ (v: number | null) => +(v ?? 0).toFixed(2),
+ );
+ const alphaStr = a < 1 ? ` / ${a}` : "";
return `lch(${l}% ${c} ${h}${alphaStr})`;
}
case colorTypes.oklch: {
- const oklch = parsed.to('oklch');
+ const oklch = parsed.to("oklch");
const coords = oklch.coords;
const l = +((coords[0] ?? 0) * 100).toFixed(2);
- const c = +((coords[1] ?? 0).toFixed(2));
- const h = +((coords[2] ?? 0).toFixed(2));
- const alphaStr = a < 1 ? ` / ${a}` : '';
+ const c = +(coords[1] ?? 0).toFixed(2);
+ const h = +(coords[2] ?? 0).toFixed(2);
+ const alphaStr = a < 1 ? ` / ${a}` : "";
return `oklch(${l}% ${c} ${h}${alphaStr})`;
}
case colorTypes.p3: {
- const p3 = parsed.to('p3');
- const [pr, pg, pb] = p3.coords.map((v: number | null) => +((v ?? 0).toFixed(2)));
- const alphaStr = a < 1 ? ` / ${a}` : '';
+ const p3 = parsed.to("p3");
+ const [pr, pg, pb] = p3.coords.map(
+ (v: number | null) => +(v ?? 0).toFixed(2),
+ );
+ const alphaStr = a < 1 ? ` / ${a}` : "";
return `color(display-p3 ${pr} ${pg} ${pb}${alphaStr})`;
}
case colorTypes.named: {
const [or, og, ob] = overlaid ?? [r, g, b];
- if (a === 1) return rgbToNamed([or, og, ob]);
- return rgbaToNamed([r, g, b, a]);
+ return rgbToNamed([or, og, ob]);
}
default:
- return 'none';
+ return "none";
}
};
diff --git a/src/utils/typeOfColor.test.ts b/src/utils/typeOfColor.test.ts
index bec63ec..17b6ea2 100644
--- a/src/utils/typeOfColor.test.ts
+++ b/src/utils/typeOfColor.test.ts
@@ -30,20 +30,16 @@ describe("Type Of Color", () => {
expect(typeOfColor("ffffff0A")).toBe("hex8");
});
- it("returns rgba", () => {
- expect(typeOfColor("rgba(255, 255, 255, 1)")).toBe("rgba");
- });
-
it("returns rgb", () => {
expect(typeOfColor("rgb(255, 255, 255)")).toBe("rgb");
- });
-
- it("returns hsla", () => {
- expect(typeOfColor("hsla(0, 0%, 100, 1)")).toBe("hsla");
+ expect(typeOfColor("rgb(255 0 0 / 0.5)")).toBe("rgb");
+ expect(typeOfColor("rgba(255, 255, 255, 1)")).toBe("rgb");
});
it("returns hsl", () => {
expect(typeOfColor("hsl(0, 0%, 100)")).toBe("hsl");
+ expect(typeOfColor("hsl(0 100% 50% / 0.5)")).toBe("hsl");
+ expect(typeOfColor("hsla(0, 0%, 100, 1)")).toBe("hsl");
});
it("returns lch", () => {
diff --git a/src/utils/typeOfColor.ts b/src/utils/typeOfColor.ts
index c32c7ff..1adeecc 100644
--- a/src/utils/typeOfColor.ts
+++ b/src/utils/typeOfColor.ts
@@ -12,15 +12,9 @@ const typeOfColor = (color: string): colorTypes => {
case /^(#)?[0-9A-F]{8}$/i.test(color):
return colorTypes.hex8;
- case color.indexOf("rgba") === 0 && color.indexOf(")") !== -1:
- return colorTypes.rgba;
-
case color.indexOf("rgb") === 0 && color.indexOf(")") !== -1:
return colorTypes.rgb;
- case color.indexOf("hsla") === 0 && color.indexOf(")") !== -1:
- return colorTypes.hsla;
-
case color.indexOf("hsl") === 0 && color.indexOf(")") !== -1:
return colorTypes.hsl;