🎨

Color Converter

Convert colors between HEX, RGB, HSL formats with a live preview and color picker.

ℹ️ How to use
  1. Pick a color using the color wheel
  2. Or type a HEX, RGB or HSL value directly
  3. Copy any format you need
  4. Click any shade to select it

🔗 Related Tools

#Hash Generator { }JSON Formatter 🔢Base64 Encoder
-FAQ

❓ Frequently Asked Questions

What is a HEX color code?

A HEX color code is a 6-digit hexadecimal number that represents a color's red, green and blue components. For example, #FF0000 is pure red (R=255, G=0, B=0). The # prefix is required in CSS.

What is the difference between RGB and RGBA?

RGB defines a color using Red, Green, Blue values (each 0–255). RGBA adds an Alpha channel (0–1) for transparency. rgb(255,0,0) is solid red; rgba(255,0,0,0.5) is 50% transparent red.

What is HSL color format?

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360), saturation is a percentage (0% = grey, 100% = full color), and lightness is a percentage (0% = black, 100% = white). HSL is easier to reason about than HEX or RGB.

Which color format should I use in CSS?

All formats work in CSS. Use HEX (#rrggbb) for static colors, RGB/RGBA when you need transparency control, and HSL when you want to programmatically adjust brightness or saturation.

What is a CSS custom property for colors?

A CSS custom property (variable) stores a color value and lets you reuse it. Example: --primary: #7c5af3; Then use it anywhere with color: var(--primary);. Great for theming and maintaining consistent color systems.

-FAQ