Color Converter

Formulas used and their origin: **RGB to HSL:** The RGB channels are first normalised to the range 0-1 (dividing each by 255). The min and max of the three channels give the overall intensity range. Lightness L = (max + min) / 2. Saturation is 0 if max and min are equal; otherwise, S = (max - min) / (1 - |2L - 1|). Hue is computed as a fraction of a full circle (then multiplied by 360 for degrees): if max is red, hue = (G - B) / (max - min) mod 6; if max is green, hue = (B - R) / (max - min) + 2; if max is blue, hue = (R - G) / (max - min) + 4. Negative hue values are wrapped by adding 360. **RGB to HSV:** V = max (the largest channel). S = (max - min) / max when max is non-zero, else 0. Hue is computed exactly as for HSL — the geometric definition of "hue" is the same in both cylindrical models; they only differ in how they map saturation and the lightness/value axis. **RGB to CMYK:** Each channel is scaled to R' = R/255, G' = G/255, B' = B/255. The black key K = 1 - max(R', G', B'). If K = 1 (pure black), C = M = Y = 0. Otherwise, C = (1 - R' - K) / (1 - K), M = (1 - G' - K) / (1 - K), Y = (1 - B' - K) / (1 - K). The three results are multiplied by 100 and rounded to integers for display. **HSL to RGB:** The lightness L is normalised to 0-1. If saturation S is 0, all three channels equal L. Otherwise, temporary values t1 and t2 are computed: if L < 0.5, t2 = L * (1 + S); else t2 = L + S - (L * S). t1 = 2 * L - t2. The hue H is normalised to a 0-1 fraction by dividing by 360, and the three channels are computed by a helper that returns t1 if the cubic helper is < 1/6, t2 if < 1/2, t1 if < 2/3, or t1 otherwise, with wraparound by adding/subtracting 1. **Clamping behaviour:** RGB inputs are clamped to the integer range 0-255 (typing 300 automatically becomes 255). HSL hue wraps: any value modulo 360, so 370 becomes 10. HSL/HSV saturation, lightness, and value are clamped to 0-100. CMYK channels are clamped to 0-100. Entering an incomplete or malformed hex code (fewer than 3 or 6 hex digits, or characters other than 0-9 a-f) sets an error message and leaves the other formats unchanged from their last valid state — the tool never silently corrupts all formats because of one bad keystroke. **Colour picker integration:** The native `<input type="color">` emits a 7-character hex string (`#rrggbb`) on change. Picking a colour from the OS palette updates the hex field and recomputes all other formats. Conversely, typing into any numeric field programmatically updates the picker's `.value` property via Alpine's `x-model` binding, so the two-way sync is always visible. **Copy behaviour:** Each format section has its own Copy button. The copied string is format-specific: for hex it copies `#1e90ff`; for RGB it copies `rgb(30, 144, 255)`; for HSL it copies `hsl(210, 100%, 56%)`; for HSV it copies `hsv(210, 88%, 100%)`; for CMYK it copies `cmyk(88%, 44%, 0%, 0%)`. This means you can paste the value directly into CSS, a design-file text field, or a print-spec document without needing to reformat by hand.