JavaScript Color Converter Challenge
This challenge asks you to build a JavaScript function that can convert color values between different popular formats: RGB, Hexadecimal, and HSL. This is a fundamental task in web development and design, enabling dynamic styling and user-driven color manipulation.
Problem Description
You need to create a JavaScript function, convertColor(value, fromFormat, toFormat), that takes a color value, its current format, and the desired target format, and returns the color in the target format.
Key Requirements:
- The function should support the following color formats:
- RGB: Represented as a string like
"rgb(255, 0, 0)"or"rgba(255, 0, 0, 0.5)". - Hexadecimal (Hex): Represented as a string like
"#FF0000"or"#f00"(shorthand). - HSL: Represented as a string like
"hsl(0, 100%, 50%)"or"hsla(0, 100%, 50%, 0.5)".
- RGB: Represented as a string like
- The function should handle both opaque (RGB, Hex, HSL) and transparent (RGBA, HSLA) color values.
- The output color should be in the
toFormatspecified. - Input and output values should be strings.
- The function should gracefully handle invalid input formats or values.
Expected Behavior:
- If the
fromFormatandtoFormatare the same, the function should return the originalvalueunchanged. - The function should parse the input color string correctly, extract the relevant color components (R, G, B, A or H, S, L, A), and perform the necessary mathematical conversions.
- For Hexadecimal input, support both 3-digit (
#rgb) and 6-digit (#rrggbb) formats. - For RGB/RGBA and HSL/HSLA, the alpha channel should be preserved during conversion if present.
Edge Cases:
- Invalid color strings (e.g.,
"rgb(300, 0, 0)","#GGGGGG","hsl(360, 100%, 50%)"). - Missing alpha channel when converting to RGBA or HSLA (assume 1 for alpha).
- Input formats not supported.
Examples
Example 1:
Input: value = "rgb(255, 0, 0)", fromFormat = "rgb", toFormat = "hex"
Output: "#FF0000"
Explanation: Converts the RGB color red to its hexadecimal equivalent.
Example 2:
Input: value = "#00FF00", fromFormat = "hex", toFormat = "hsl"
Output: "hsl(120, 100%, 50%)"
Explanation: Converts the Hexadecimal color green to its HSL equivalent.
Example 3:
Input: value = "hsl(120, 50%, 75%)", fromFormat = "hsl", toFormat = "rgba"
Output: "rgba(128, 191, 128, 1)"
Explanation: Converts the HSL color to RGBA. Since no alpha was specified, it defaults to 1.
Example 4:
Input: value = "rgba(0, 0, 255, 0.5)", fromFormat = "rgba", toFormat = "hsla"
Output: "hsla(240, 100%, 50%, 0.5)"
Explanation: Converts an RGBA color with an alpha channel to HSLA, preserving the alpha.
Example 5:
Input: value = "#f00", fromFormat = "hex", toFormat = "rgb"
Output: "rgb(255, 0, 0)"
Explanation: Handles the shorthand 3-digit Hex format.
Constraints
- The input
valuewill be a string. fromFormatandtoFormatwill be strings, either"rgb","rgba","hex","hsl", or"hsla".- The alpha value for RGBA and HSLA should be a float between 0 and 1.
- RGB values should be integers between 0 and 255.
- HSL values should be Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%).
- The function should aim to be reasonably efficient for typical use cases.
Notes
- You'll likely need to implement parsing logic for each input format.
- Consider creating helper functions for each conversion type (e.g.,
rgbToHex,hexToRgb,rgbToHsl, etc.) to keep your main function clean. - When converting to RGBA or HSLA, if the source color doesn't have an alpha channel, assume an alpha of 1.
- For Hex to RGB conversion, remember to convert the hex pairs (e.g., "FF") to their decimal equivalents (e.g., 255).
- The conversion between RGB and HSL involves a few steps and some mathematical formulas. You may want to look up the standard algorithms for these conversions.
- For the Hex shorthand (
#rgb), each digit is duplicated (e.g.,#f0cbecomes#ff00cc).