🎨 Color Code Converter

How to Use the Color Converter

This tool allows you to instantly convert between the most common web color code formats: HEX, RGB, and HSL.

1. Enter a valid color code into any one of the input fields (HEX, RGB, or HSL).
2. As you type, the other two fields will automatically update with the corresponding converted values.
3. The square preview box above the inputs will show the color you entered or converted.
4. If you enter an invalid code, an error message will appear below the input field.
5. The automatically converted output fields will have a light blue background to indicate they are results.

Understanding Color Codes

• HEX (Hexadecimal): A common web standard. Uses a '#' followed by six characters (0-9, A-F) representing Red, Green, and Blue intensity.
  Format: #RRGGBB (e.g., #FF6347 for Tomato red).
  A shorthand three-character version (#RGB) is also valid if pairs are identical (e.g., #F00 is the same as #FF0000 for red).
• RGB (Red, Green, Blue): Defines colors by the intensity of red, green, and blue light, each ranging from 0 (none) to 255 (full intensity).
  Format: R, G, B (e.g., 255, 99, 71 for Tomato red). You can also use the CSS format rgb(R, G, B).
• HSL (Hue, Saturation, Lightness): An intuitive way to represent colors.
  • Hue (H): The color's position on the color wheel (0-360 degrees; e.g., 0 is red, 120 is green, 240 is blue).
  • Saturation (S): The color's intensity or purity (0% is grayscale, 100% is fully saturated).
  • Lightness (L): The color's brightness (0% is black, 50% is the pure color, 100% is white).
  Format: H, S%, L% (e.g., 9, 100%, 64% for Tomato red). You can also use the CSS format hsl(H, S%, L%).

Example: Try entering #3498DB in the HEX field. You should see 52, 152, 219 appear in RGB and 208, 71%, 53% in HSL, and the preview box will turn blue.