feat(editor): Add custom color picker for sticky notes

[LudwigGerdes]

Summary

Allow users to select any custom color for sticky notes in addition to the 7 preset colors. Adds an 8th color button with a rainbow gradient that opens a color picker modal with hex input and recent colors history. Custom colors feature theme-aware borders that automatically adjust for optimal visibility in both light and dark modes.

Key changes:

• Add custom color picker modal using N8nColorPicker component
• Extend sticky note color type from number to number | string
• Add theme-aware border adjustment (20% darker in light mode, 80% lighter in dark mode)
• Add hex color validation and lightness adjustment utilities with tests
• Store up to 8 recent custom colors in localStorage
• Add 20 unit tests for color utilities
• Add 13 unit tests for sticky note component
• Full backward compatibility with existing preset colors (1-7)

🤖 Generated with assistance from Claude Code

Example Color Palettes (Light & Dark Mode)

Example Color Picker (Light & Dark Mode)

Example Custom Color Modal (Light & Dark Mode)

Related Linear tickets, Github issues, and Community forum posts

• https://community.n8n.io/t/expand-color-palette-or-add-custom-color-picker-for-sticky-notes/166547
• https://community.n8n.io/t/more-colors-custom-colors-for-sticky-notes/52508
• https://community.n8n.io/t/sticky-note-colors-created/15343

Review / Merge checklist

• PR title and summary are descriptive. (conventions)
• Docs updated or follow-up ticket created. (related to: docs: Document custom color picker for sticky notes n8n-docs#4054)
• Tests included.
• PR Labeled with release/backport (if the PR is an urgent fix that needs to be backported)

[cubic-dev-ai]

2 issues found across 11 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.vue">

<violation number="1" location="packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.vue:7">
P2: Rule violated: **Tests**

The `adjustColorLightness` function lacks unit tests despite being core functionality for computing theme-aware border colors. This function contains non-trivial RGB manipulation and percentage adjustment logic that should be tested. Consider adding tests for edge cases like:
- Positive/negative percentage adjustments
- Boundary values (pure black #000000, pure white #FFFFFF)
- Invalid inputs
- Clamping behavior (values exceeding 0-255 range)</violation>

<violation number="2" location="packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.vue:110">
P2: The `customColor` class is applied for any string backgroundColor, but CSS variables are only set for valid hex colors. This mismatch causes undefined CSS variable references when an invalid hex color string is provided. Consider adding validation to the class condition to match the style generation logic.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Tag @cubic-dev-ai to re-run a review.}

[LudwigGerdes]

@Joffcom @RicardoE105 Thought you'd both get a kick out of this. Hope you're doing well!

[n8n-assistant]

Hey @LudwigGerdes,

Thank you for your contribution. We appreciate the time and effort you’ve taken to submit this pull request.

Before we can proceed, please ensure the following:
• Tests are included for any new functionality, logic changes or bug fixes.
• The PR aligns with our contribution guidelines.

Regarding new nodes:
We no longer accept new nodes directly into the core codebase. Instead, we encourage contributors to follow our Community Node Submission Guide to publish nodes independently.

If your node integrates with an AI service that you own or represent, please email nodes@n8n.io and we will be happy to discuss the best approach.

About review timelines:
This PR has been added to our internal tracker as "GHC-6083". While we plan to review it, we are currently unable to provide an exact timeframe. Our goal is to begin reviews within a month, but this may change depending on team priorities. We will reach out when the review begins.

Thank you again for contributing to n8n.

[phil-fetchski]

Is this going to make it in? This would be a really nice feature!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[RicardoE105]

@LudwigGerdes had to simplify it to get it merged. We can later iterate and add the recent colors section back again. Hope you do not mind. Very very cool contribution, you rock 🚀

[LudwigGerdes]

@LudwigGerdes had to simplify it to get it merged. We can later iterate and add the recent colors section back again. Hope you do not mind. Very very cool contribution, you rock 🚀

@RicardoE105 Bro, you're the best! This is going to be 🔥

[n8n-assistant]

Got released with n8n@2.9.0