Color Converter (HEX / RGB / HSL)
Why Use a Color Converter?
Working with colors across different platforms often requires different formats. Tooly helps by:
- Web Development (CSS): Easily switch between HEX, RGB(A), and HSL(A) for styling elements.
- Design Software: Match colors accurately between design tools (like Photoshop, Figma) and code.
- Understanding Colors: See how changing Hue, Saturation, or Lightness (HSL) affects the RGB and HEX values.
- Consistency: Ensure you are using the exact same color across different parts of your project.
Tooly provides instant conversion and a visual preview!
Understanding Color Formats
Tooly handles the most common web color formats:
- HEX (Hexadecimal): A six-digit code (e.g., `#FF5733`) representing Red, Green, and Blue values. Each pair of digits ranges from `00` (0) to `FF` (255). Common in CSS.
- RGB (Red, Green, Blue): Specifies color using amounts of red, green, and blue, typically ranging from 0 to 255 for each (e.g., `rgb(255, 87, 51)`). Often used with an alpha (transparency) value: `rgba(...)`.
- HSL (Hue, Saturation, Lightness): An intuitive way to represent color:
- Hue: Angle on the color wheel (0-360).
- Saturation: Intensity of the color (0%-100%).
- Lightness: Brightness (0% is black, 100% is white, 50% is normal).
How to Use Tooly's Color Converter
1
Use the Color Picker
Click the color swatch to open your browser's color picker and select a color visually.
2
Enter a Value
Alternatively, type a valid color value into any of the input fields (HEX, RGB, or HSL).
3
See Instant Conversions
As you pick or type, all other fields and the color preview will update instantly.
4
Copy Values
Click the copy icon next to any HEX, RGB, or HSL value to copy it to your clipboard.