feat: Project Color Picker

[NickLemke]

Project Color Picker Feature

Changes

This PR adds a color picker to project settings, allowing users to visually distinguish projects on listing pages (Dashboard and Projects Index) using a colored left border accent.

What was added:

• Database migration: Added color column (nullable string, 7 chars) to projects table
• Livewire component: Added $color property, validation rules, and sync logic to Project\Edit component
• Form UI: Custom color picker button with contrast-aware text color in project edit form
• Display: Colored 4px left border on project cards when color is set
• Validation: Hex color format validation (#RRGGBB) with custom error messages
• JavaScript utility: getContrastTextColor() function for determining readable text color based on background luminance
• Unit tests: 14 comprehensive tests covering validation, data syncing, and regex patterns

Technical details:

• Color stored as 6-character hex code (e.g., #FF5733)
• Nullable column ensures backward compatibility with existing projects
• Native HTML5 color picker for cross-browser support
• WCAG luminance formula used for text color contrast calculation
• Clear button to remove selected color

Issue

• No existing issue (feature request implementation)

Category

• New feature

Screenshots or Video (if applicable)

Required screenshots to include in PR:

AI Usage

• AI is used in the process of creating this PR

Steps to Test

Prerequisites:

• Running Coolify v4.x development environment
• Access to at least one existing project

Test Case 1: Add color to existing project

• Step 1 – Navigate to /project/{project_uuid}/edit for any existing project
• Step 2 – Locate the "Color" field with info icon tooltip (next to Name and Description fields)
• Step 3 – Click the "Select" button (should be a small button, 80px × 32px)
• Step 4 – Native browser color picker should open; select any color (e.g., blue #0000FF)
• Step 5 – Click "Save" button
• Step 6 – Success message "Project updated." should appear
• Step 7 – Navigate to Dashboard (/)
• Step 8 – Expected outcome: Project card should display a 4px colored left border in the selected color

Test Case 2: Clear/remove color

• Step 1 – Return to /project/{project_uuid}/edit for the colored project
• Step 2 – An "X" button should appear next to the color picker
• Step 3 – Click the "X" button to clear the color
• Step 4 – Click "Save"
• Step 5 – Return to Dashboard
• Step 6 – Expected outcome: Project card should no longer have a colored border

Test Case 3: Create new project without color

• Step 1 – Create a new project (do not set a color)
• Step 2 – Save the project
• Step 3 – Expected outcome: Project should be created successfully and appear on Dashboard without colored border

Test Case 4: Test various colors

• Step 1 – Edit a project and test these colors:
  • Very bright color: #FFFF00 (yellow)
  • Very dark color: #000000 (black)
  • Medium color: #FF5733 (orange)
• Step 2 – For each color, verify the "Select" button text is readable (black text on light colors, white text on dark colors)
• Step 3 – Expected outcome: Text automatically adjusts contrast based on background color

Test Case 5: Validation testing

• Step 1 – Open browser DevTools console
• Step 2 – Edit project and try to manually set invalid color values (if possible via DevTools)
• Step 3 – Expected outcome: Only valid 6-character hex codes (#RRGGBB) should be accepted

Test Case 6: Dark mode compatibility

• Step 1 – Toggle between light and dark mode
• Step 2 – View Dashboard and Projects Index with colored projects
• Step 3 – Expected outcome: Colored borders should be clearly visible in both themes

Test Case 7: Projects Index page

• Step 1 – Navigate to /projects
• Step 2 – Expected outcome: Projects with colors should display colored left borders here too

Test Case 8: Run unit tests

• Step 1 – Run ./vendor/bin/pest tests/Unit/Livewire/Project/ProjectColorValidationTest.php --no-coverage
• Step 2 – Run ./vendor/bin/pest tests/Unit/ProjectColorHexValidationTest.php --no-coverage
• Step 3 – Expected outcome: All 14 tests should pass with 68 assertions

Files Modified

• database/migrations/2026_02_03_001245_add_color_to_projects_table.php (NEW)
• app/Livewire/Project/Edit.php
• resources/views/livewire/project/edit.blade.php
• resources/views/livewire/dashboard.blade.php
• resources/views/livewire/project/index.blade.php
• resources/js/color-utils.js (NEW)
• resources/js/app.js
• tests/Unit/Livewire/Project/ProjectColorValidationTest.php (NEW)
• tests/Unit/ProjectColorHexValidationTest.php (NEW)

Contributor Agreement

Important

• I have read and understood the contributor guidelines. If I have failed to follow any guideline, I understand that this PR may be closed without review.
• I have tested the changes thoroughly and am confident that they will work as expected without issues when the maintainer tests them

[github-actions]

Hi @NickLemke! 👋

It appears to us that you are adding a new feature to Coolify.
We kindly ask you to also update the Coolify Documentation to include information about this new feature.
This will help ensure that our documentation remains accurate and up-to-date for all users.

Coolify Docs Repository: https://github.com/coollabsio/coolify-docs
How to Contribute to the Docs: https://coolify.io/docs/get-started/contribute/documentation

[NickLemke]

Docs PR for this feature: coollabsio/coolify-docs#560

Added docs for Project Color Picker in Concepts (how to set/clear, where it appears in UI, and accepted #RRGGBB format).