Skip to content

docs: Document custom color picker for sticky notes #4054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LudwigGerdes wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: Document custom color picker for sticky notes #4054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0461e5
docs: Document custom color picker for sticky notes
LudwigGerdes Dec 29, 2025
82d5927
Merge branch 'main' into docs/sticky-notes-custom-colors
LudwigGerdes Jan 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/_images/workflows/components/stickies/color-picker-popover.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/_images/workflows/components/stickies/custom-color-modal.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 18 additions & 1 deletion docs/workflows/components/sticky-notes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,24 @@
To change the Sticky Note color:

1. Hover over the Sticky Note
1. Select **Change color** <span class="n8n-inline-image">![Change Sticky Note color icon](/_images/common-icons/change-color.png){.off-glb}</span>
2. Select **Change color** <span class="n8n-inline-image">![Change Sticky Note color icon](/_images/common-icons/change-color.png){.off-glb}</span>
3. Choose from 7 preset colors, or click the rainbow gradient button to select a custom color

![Color selector showing preset colors and custom color button](/_images/workflows/components/stickies/color-picker-popover.png)

### Custom colors

In addition to the 7 preset colors, you can select any custom color for your sticky notes:

Check warning on line 40 in docs/workflows/components/sticky-notes.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[from-write-good.TooWordy] 'In addition' is too wordy.

Raw Output:
{"message": "[from-write-good.TooWordy] 'In addition' is too wordy.", "location": {"path": "docs/workflows/components/sticky-notes.md", "range": {"start": {"line": 40, "column": 1}}}, "severity": "WARNING"}

1. Click the 8th button with the rainbow gradient and plus icon
2. Use the color picker to select your desired color, or enter a hex color code (for example, `#FF5733`)
3. Click **Apply** to set the color

![Custom color picker modal with hex input and recent colors](/_images/workflows/components/stickies/custom-color-modal.png)
Copy link
Contributor

@RoRoJ RoRoJ Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
![Custom color picker modal with hex input and recent colors](/_images/workflows/components/stickies/custom-color-modal.png)

I don't think a screenshot is necessary here, and adds to maintenance overhead. So I suggest removing it.


Your recently used custom colors (up to 8) are automatically saved and displayed in the color picker for quick access.

Check warning on line 48 in docs/workflows/components/sticky-notes.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[from-write-good.Weasel] 'recently' is a weasel word!

Raw Output:
{"message": "[from-write-good.Weasel] 'recently' is a weasel word!", "location": {"path": "docs/workflows/components/sticky-notes.md", "range": {"start": {"line": 48, "column": 6}}}, "severity": "WARNING"}

Custom colors feature theme-aware borders that automatically adjust for optimal visibility in both light and dark modes.

## Sticky Note positioning

Expand Down
Loading