diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
index 1a4a2ac75d..0312017d86 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -31,6 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ k }}</template>
 				</MkRange>
 			</div>
+			<MkInput v-else-if="v.type === 'color'" :modelValue="`#${(layer.params[k][0] * 255).toString(16).padStart(2, '0')}${(layer.params[k][1] * 255).toString(16).padStart(2, '0')}${(layer.params[k][2] * 255).toString(16).padStart(2, '0')}`" type="color" @update:modelValue="v => { const c = v.slice(1).match(/.{2}/g)?.map(x => parseInt(x, 16) / 255); if (c) layer.params[k] = c; }">
+				<template #label>{{ k }}</template>
+			</MkInput>
 		</div>
 	</div>
 </MkFolder>
diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts
index fbc2ccd8dc..fe253017e5 100644
--- a/packages/frontend/src/utility/image-effector/ImageEffector.ts
+++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts
@@ -12,6 +12,7 @@ type ParamTypeToPrimitive = {
 	'align': { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; };
 	'seed': number;
 	'texture': { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
+	'color': [r: number, g: number, b: number];
 };
 
 type ImageEffectorFxParamDefs = Record<string, {
diff --git a/packages/frontend/src/utility/image-effector/fxs/checker.ts b/packages/frontend/src/utility/image-effector/fxs/checker.ts
index d79c31c292..b799bd0d13 100644
--- a/packages/frontend/src/utility/image-effector/fxs/checker.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/checker.ts
@@ -18,7 +18,7 @@ uniform sampler2D in_texture;
 uniform vec2 in_resolution;
 uniform float u_angle;
 uniform float u_scale;
-uniform bool u_black;
+uniform vec3 u_color;
 uniform float u_opacity;
 out vec4 out_color;
 
@@ -38,9 +38,9 @@ void main() {
 	float fin = max(sign(fmodResult), 0.0);
 
 	out_color = vec4(
-		mix(in_color.r, u_black ? 0.0 : 1.0, fin * u_opacity),
-		mix(in_color.g, u_black ? 0.0 : 1.0, fin * u_opacity),
-		mix(in_color.b, u_black ? 0.0 : 1.0, fin * u_opacity),
+		mix(in_color.r, u_color.r, fin * u_opacity),
+		mix(in_color.g, u_color.g, fin * u_opacity),
+		mix(in_color.b, u_color.b, fin * u_opacity),
 		in_color.a
 	);
 }
@@ -50,7 +50,7 @@ export const FX_checker = defineImageEffectorFx({
 	id: 'checker' as const,
 	name: i18n.ts._imageEffector._fxs.checker,
 	shader,
-	uniforms: ['angle', 'scale', 'black', 'opacity'] as const,
+	uniforms: ['angle', 'scale', 'color', 'opacity'] as const,
 	params: {
 		angle: {
 			type: 'number' as const,
@@ -66,9 +66,9 @@ export const FX_checker = defineImageEffectorFx({
 			max: 10.0,
 			step: 0.1,
 		},
-		black: {
-			type: 'boolean' as const,
-			default: false,
+		color: {
+			type: 'color' as const,
+			default: [1, 1, 1],
 		},
 		opacity: {
 			type: 'number' as const,
@@ -81,7 +81,7 @@ export const FX_checker = defineImageEffectorFx({
 	main: ({ gl, u, params }) => {
 		gl.uniform1f(u.angle, params.angle / 2);
 		gl.uniform1f(u.scale, params.scale * params.scale);
-		gl.uniform1i(u.black, params.black ? 1 : 0);
+		gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
 		gl.uniform1f(u.opacity, params.opacity);
 	},
 });
diff --git a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
index 16f19875e8..198dd9bad0 100644
--- a/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/polkadot.ts
@@ -23,7 +23,7 @@ uniform float u_major_opacity;
 uniform float u_minor_divisions;
 uniform float u_minor_radius;
 uniform float u_minor_opacity;
-uniform bool u_black;
+uniform vec3 u_color;
 out vec4 out_color;
 
 void main() {
@@ -48,9 +48,9 @@ void main() {
 		length(vec2((1.0 / u_scale) - major_modX, (1.0 / u_scale) - major_modY)) < major_threshold
 	) {
 		out_color = vec4(
-			mix(in_color.r, u_black ? 0.0 : 1.0, u_major_opacity),
-			mix(in_color.g, u_black ? 0.0 : 1.0, u_major_opacity),
-			mix(in_color.b, u_black ? 0.0 : 1.0, u_major_opacity),
+			mix(in_color.r, u_color.r, u_major_opacity),
+			mix(in_color.g, u_color.g, u_major_opacity),
+			mix(in_color.b, u_color.b, u_major_opacity),
 			in_color.a
 		);
 		return;
@@ -66,9 +66,9 @@ void main() {
 		length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold
 	) {
 		out_color = vec4(
-			mix(in_color.r, u_black ? 0.0 : 1.0, u_minor_opacity),
-			mix(in_color.g, u_black ? 0.0 : 1.0, u_minor_opacity),
-			mix(in_color.b, u_black ? 0.0 : 1.0, u_minor_opacity),
+			mix(in_color.r, u_color.r, u_minor_opacity),
+			mix(in_color.g, u_color.g, u_minor_opacity),
+			mix(in_color.b, u_color.b, u_minor_opacity),
 			in_color.a
 		);
 		return;
@@ -82,7 +82,7 @@ export const FX_polkadot = defineImageEffectorFx({
 	id: 'polkadot' as const,
 	name: i18n.ts._imageEffector._fxs.polkadot,
 	shader,
-	uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'black'] as const,
+	uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const,
 	params: {
 		angle: {
 			type: 'number' as const,
@@ -133,9 +133,9 @@ export const FX_polkadot = defineImageEffectorFx({
 			max: 1.0,
 			step: 0.01,
 		},
-		black: {
-			type: 'boolean' as const,
-			default: false,
+		color: {
+			type: 'color' as const,
+			default: [1, 1, 1],
 		},
 	},
 	main: ({ gl, u, params }) => {
@@ -145,7 +145,7 @@ export const FX_polkadot = defineImageEffectorFx({
 		gl.uniform1f(u.major_opacity, params.majorOpacity);
 		gl.uniform1f(u.minor_divisions, params.minorDivisions);
 		gl.uniform1f(u.minor_radius, params.minorRadius);
+		gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
 		gl.uniform1f(u.minor_opacity, params.minorOpacity);
-		gl.uniform1i(u.black, params.black ? 1 : 0);
 	},
 });
diff --git a/packages/frontend/src/utility/image-effector/fxs/stripe.ts b/packages/frontend/src/utility/image-effector/fxs/stripe.ts
index 5c4c84dec1..37766e185d 100644
--- a/packages/frontend/src/utility/image-effector/fxs/stripe.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/stripe.ts
@@ -20,7 +20,7 @@ uniform float u_angle;
 uniform float u_frequency;
 uniform float u_phase;
 uniform float u_threshold;
-uniform bool u_black;
+uniform vec3 u_color;
 uniform float u_opacity;
 out vec4 out_color;
 
@@ -40,9 +40,9 @@ void main() {
 	float value = (1.0 + sin((rotatedUV.x * u_frequency - HALF_PI) + phase)) / 2.0;
 	value = value < u_threshold ? 1.0 : 0.0;
 	out_color = vec4(
-		mix(in_color.r, u_black ? 0.0 : 1.0, value * u_opacity),
-		mix(in_color.g, u_black ? 0.0 : 1.0, value * u_opacity),
-		mix(in_color.b, u_black ? 0.0 : 1.0, value * u_opacity),
+		mix(in_color.r, u_color.r, value * u_opacity),
+		mix(in_color.g, u_color.g, value * u_opacity),
+		mix(in_color.b, u_color.b, value * u_opacity),
 		in_color.a
 	);
 }
@@ -52,7 +52,7 @@ export const FX_stripe = defineImageEffectorFx({
 	id: 'stripe' as const,
 	name: i18n.ts._imageEffector._fxs.stripe,
 	shader,
-	uniforms: ['angle', 'frequency', 'phase', 'threshold', 'black', 'opacity'] as const,
+	uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const,
 	params: {
 		angle: {
 			type: 'number' as const,
@@ -75,9 +75,9 @@ export const FX_stripe = defineImageEffectorFx({
 			max: 1.0,
 			step: 0.01,
 		},
-		black: {
-			type: 'boolean' as const,
-			default: false,
+		color: {
+			type: 'color' as const,
+			default: [1, 1, 1],
 		},
 		opacity: {
 			type: 'number' as const,
@@ -92,7 +92,7 @@ export const FX_stripe = defineImageEffectorFx({
 		gl.uniform1f(u.frequency, params.frequency * params.frequency);
 		gl.uniform1f(u.phase, 0.0);
 		gl.uniform1f(u.threshold, params.threshold);
-		gl.uniform1i(u.black, params.black ? 1 : 0);
+		gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
 		gl.uniform1f(u.opacity, params.opacity);
 	},
 });
diff --git a/packages/frontend/src/utility/watermark.ts b/packages/frontend/src/utility/watermark.ts
index 3910d014d6..8ee93181a6 100644
--- a/packages/frontend/src/utility/watermark.ts
+++ b/packages/frontend/src/utility/watermark.ts
@@ -39,7 +39,7 @@ export type WatermarkPreset = {
 		angle: number;
 		frequency: number;
 		threshold: number;
-		black: boolean;
+		color: [r: number, g: number, b: number];
 		opacity: number;
 	} | {
 		id: string;
@@ -51,14 +51,14 @@ export type WatermarkPreset = {
 		minorDivisions: number;
 		minorRadius: number;
 		minorOpacity: number;
-		black: boolean;
+		color: [r: number, g: number, b: number];
 		opacity: number;
 	} | {
 		id: string;
 		type: 'checker';
 		angle: number;
 		scale: number;
-		black: boolean;
+		color: [r: number, g: number, b: number];
 		opacity: number;
 	})[];
 };
@@ -126,7 +126,7 @@ export class WatermarkRenderer {
 						angle: layer.angle,
 						frequency: layer.frequency,
 						threshold: layer.threshold,
-						black: layer.black,
+						color: layer.color,
 						opacity: layer.opacity,
 					},
 				};
@@ -142,7 +142,7 @@ export class WatermarkRenderer {
 						minorDivisions: layer.minorDivisions,
 						minorRadius: layer.minorRadius,
 						minorOpacity: layer.minorOpacity,
-						black: layer.black,
+						color: layer.color,
 						opacity: layer.opacity,
 					},
 				};
@@ -153,7 +153,7 @@ export class WatermarkRenderer {
 					params: {
 						angle: layer.angle,
 						scale: layer.scale,
-						black: layer.black,
+						color: layer.color,
 						opacity: layer.opacity,
 					},
 				};