diff --git a/tests/e2e/label-colorpicker.test.e2e.ts b/tests/e2e/label-colorpicker.test.e2e.ts
new file mode 100644
index 0000000000..da2dee7c92
--- /dev/null
+++ b/tests/e2e/label-colorpicker.test.e2e.ts
@@ -0,0 +1,35 @@
+// Copyright 2026 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// web_src/js/features/colorpicker.js
+// templates/repo/issue/labels/label_new.tmpl
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test} from './utils_e2e.ts';
+
+test.use({user: 'user2'});
+
+test('Color picker is visible above the new label dialog', async ({page}) => {
+  const response = await page.goto('/user2/repo1/labels');
+  expect(response?.status()).toBe(200);
+
+  // Open the "New label" dialog
+  await page.getByRole('button', {name: 'New label'}).click();
+  const dialog = page.locator('dialog#new-label-modal');
+  await expect(dialog).toBeVisible();
+
+  // Click the color preview square to open the color picker popup
+  const colorInput = dialog.locator('.js-color-picker-input input[name="color"]');
+  await colorInput.click();
+
+  // The hex-color-picker should be visible and not hidden behind the dialog
+  const picker = dialog.locator('hex-color-picker');
+  await expect(picker).toBeVisible();
+
+  // Verify the picker tippy popup is a descendant of the dialog element,
+  // not appended to document.body (which would render below the dialog top layer)
+  const pickerInDialog = dialog.locator('.tippy-box hex-color-picker');
+  await expect(pickerInDialog).toBeVisible();
+});
diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js
index 6d00d908c9..33aa86375f 100644
--- a/web_src/js/features/colorpicker.js
+++ b/web_src/js/features/colorpicker.js
@@ -49,6 +49,7 @@ function initPicker(el) {
     content: picker,
     placement: 'bottom-start',
     interactive: true,
+    appendTo: input.closest('dialog') ?? document.body,
     onShow() {
       updatePicker(picker, input.value);
     },