diff --git a/plugins/colors/src/components/Space.vue b/plugins/colors/src/components/Space.vue
new file mode 100644
index 00000000..71ca4f4f
--- /dev/null
+++ b/plugins/colors/src/components/Space.vue
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/plugins/colors/src/components/ToggleButton.vue b/plugins/colors/src/components/ToggleButton.vue
new file mode 100644
index 00000000..a4014f15
--- /dev/null
+++ b/plugins/colors/src/components/ToggleButton.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
diff --git a/plugins/colors/src/components/ValueSlider.vue b/plugins/colors/src/components/ValueSlider.vue
index 0a4f0ace..8223c774 100644
--- a/plugins/colors/src/components/ValueSlider.vue
+++ b/plugins/colors/src/components/ValueSlider.vue
@@ -26,12 +26,17 @@ const value = computed({
// 计算渐变背景
const gradient = computed(() => {
const hsv = props.modelValue.toHsv();
- const start = colord({ ...hsv, v: 0 }).toHslString();
- const end = colord({ ...hsv, v: 100 }).toHslString();
- return `linear-gradient(to right, ${start}, ${end})`;
+ const colors = [0, 100].map((v) => colord({ ...hsv, v }).toHslString());
+ return `linear-gradient(to right, ${colors.join(", ")})`;
});
-
+
+
V
+
+
+
+
{{ Math.round(value) }}%
+
diff --git a/plugins/colors/src/pages/index.vue b/plugins/colors/src/pages/index.vue
index 43ab7dcf..69b7bda6 100644
--- a/plugins/colors/src/pages/index.vue
+++ b/plugins/colors/src/pages/index.vue
@@ -4,10 +4,15 @@ import { ref } from "vue";
import Card from "@/components/Card.vue";
import ColorFormats from "@/components/ColorFormats.vue";
import ColorWheel from "@/components/ColorWheel.vue";
+import Config from "@/components/Config.vue";
import HarmonyColors from "@/components/HarmonyColors.vue";
+import HSLSliders from "@/components/HSLSliders.vue";
+import HueSlider from "@/components/HueSlider.vue";
+import RGBSliders from "@/components/RGBSliders.vue";
import SaturationSlider from "@/components/SaturationSlider.vue";
+import Space from "@/components/Space.vue";
import ValueSlider from "@/components/ValueSlider.vue";
-import { useCounterStore } from "@/utils/config";
+import { useConfigStore } from "@/utils/config";
import { useCurrentColor } from "@/utils/current-color";
const currentColorStore = useCurrentColor();
@@ -15,46 +20,52 @@ const currentColor = computed({
get: () => currentColorStore.currentColor,
set: (value) => currentColorStore.setCurrentColor(value),
});
-const config = useCounterStore();
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
diff --git a/plugins/colors/src/utils/color.ts b/plugins/colors/src/utils/color.ts
index a440c3e4..1db0aba5 100644
--- a/plugins/colors/src/utils/color.ts
+++ b/plugins/colors/src/utils/color.ts
@@ -4,3 +4,47 @@ export function colordToHsvString(color: Colord) {
let hsv = color.toHsv();
return `hsv(${hsv.h.toFixed(0)},${hsv.s.toFixed(0)}%,${hsv.v.toFixed(0)}%)`;
}
+export type ColorFormat =
+ | "hex"
+ | "hsv"
+ | "hsv/hsb"
+ | "hsl"
+ | "rgb"
+ | "hwb"
+ | "cmyk"
+ | "lab"
+ | "lch"
+ | "xyz";
+export interface ColorToStringOptions {
+ format: ColorFormat;
+ removeHash?: boolean;
+}
+
+export function colordToString(color: Colord, options?: ColorToStringOptions): string {
+ const { format = "hex", removeHash = false } = options || {};
+ switch (format) {
+ case "hsl":
+ return color.toHslString();
+ case "hsv/hsb":
+ case "hsv":
+ return colordToHsvString(color);
+ case "hex":
+ let hex = removeHash ? color.toHex().substring(1) : color.toHex();
+ return hex;
+ case "rgb":
+ return color.toRgbString();
+ case "hwb":
+ return color.toHwbString();
+ case "cmyk":
+ return color.toCmykString();
+ case "lab":
+ const lab = color.toLab();
+ return `lab(${lab.l.toFixed(0)} ${lab.a.toFixed(0)} ${lab.b.toFixed(0)})`;
+ case "lch":
+ const lch = color.toLch();
+ return `lch(${lch.l.toFixed(0)} ${lch.c.toFixed(0)} ${lch.h.toFixed(0)})`;
+ case "xyz":
+ const xyz = color.toXyz();
+ return `xyz(${xyz.x.toFixed(2)} ${xyz.y.toFixed(2)} ${xyz.z.toFixed(2)})`;
+ }
+}
diff --git a/plugins/colors/src/utils/config.ts b/plugins/colors/src/utils/config.ts
index e6f94ef9..db5cedc0 100644
--- a/plugins/colors/src/utils/config.ts
+++ b/plugins/colors/src/utils/config.ts
@@ -1,11 +1,13 @@
import { defineStore } from "pinia";
+import { ColorFormat } from "./color";
-export const useCounterStore = defineStore("config", {
+export const useConfigStore = defineStore("config", {
state: () => {
- return { removeHash: false };
+ return { removeHash: false, format: "hex" } as Config;
},
});
export interface Config {
removeHash: boolean;
+ format: ColorFormat;
}
diff --git a/plugins/colors/src/utils/copy.ts b/plugins/colors/src/utils/copy.ts
index faf4011d..ec17db44 100644
--- a/plugins/colors/src/utils/copy.ts
+++ b/plugins/colors/src/utils/copy.ts
@@ -1,3 +1,5 @@
+import { Colord } from "colord";
+import { colordToString, ColorToStringOptions } from "./color";
import { useMessage } from "./message";
export const copyColor = async (text: string) => {
@@ -10,3 +12,8 @@ export const copyColor = async (text: string) => {
message.error("复制失败");
}
};
+export const copyColor2 = async (color: Colord, options?: ColorToStringOptions) => {
+ const colorText = colordToString(color, options);
+
+ copyColor(colorText);
+};
diff --git a/plugins/colors/src/utils/favorites.ts b/plugins/colors/src/utils/favorites.ts
index 9364bbfa..e3a7271a 100644
--- a/plugins/colors/src/utils/favorites.ts
+++ b/plugins/colors/src/utils/favorites.ts
@@ -86,7 +86,7 @@ export const useFavorites = defineStore(STORAGE_KEY, () => {
}
const newFavorite: ColorFavorite = {
- id: Date.now().toString(36) + Math.random().toString(36).substr(2),
+ id: Date.now().toString(36) + Math.random().toString(36).substring(2),
color,
tags,
createdAt: Date.now(),