From c1cd2d3114d1ab892416d44fe51b10851d577d69 Mon Sep 17 00:00:00 2001 From: Jan-Henrik Bruhn Date: Fri, 17 Oct 2025 10:51:26 +0200 Subject: [PATCH] fix: convert HSL color generation to hex format in label selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update generateRandomColor to return hex codes instead of HSL strings to ensure proper color storage in database. Changes: - Add hslToHex conversion function - Maintain same pastel color generation (random hue, 70% saturation, 65% lightness) - Return hex format (#rrggbb) instead of HSL string 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../Common/AutocompleteLabelSelector.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Common/AutocompleteLabelSelector.tsx b/src/components/Common/AutocompleteLabelSelector.tsx index f1e25c6..d5d5784 100644 --- a/src/components/Common/AutocompleteLabelSelector.tsx +++ b/src/components/Common/AutocompleteLabelSelector.tsx @@ -21,10 +21,24 @@ interface Props { scope: 'actors' | 'relations'; } +// Convert HSL to Hex +const hslToHex = (h: number, s: number, l: number): string => { + l /= 100; + const a = (s * Math.min(l, 1 - l)) / 100; + const f = (n: number) => { + const k = (n + h / 30) % 12; + const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + return Math.round(255 * color) + .toString(16) + .padStart(2, '0'); + }; + return `#${f(0)}${f(8)}${f(4)}`; +}; + // Generate random pastel color for new labels const generateRandomColor = () => { const hue = Math.floor(Math.random() * 360); - return `hsl(${hue}, 70%, 65%)`; + return hslToHex(hue, 70, 65); }; const AutocompleteLabelSelector = ({ value, onChange, scope }: Props) => {