ΣMyCalc
ΣMyCalc

Color Converter

Convert between hex, RGB, RGBA, HSL, HSLA, and named colors. Input any format and see instant conversion with live color preview.

Try: #FF6B6B, rgb(255, 107, 107), hsl(0, 100%, 71%), rgba(255, 107, 107, 0.8), or 'red'

Input Format: HEX

#FF6B6B

# Hexadecimal

Click to copy

RGB Red-Green-Blue

Click to copy

RGBA With Alpha

Click to copy

HSL Hue-Saturation-Lightness

Click to copy

HSLA With Alpha

Click to copy

RGB Object Values

R

255

G

107

B

107

A

1

🎨 Quick Reference Colors

red

green

blue

white

black

yellow

cyan

magenta

silver

gray

maroon

olive

📊 Color Channels

Red255/255
Green107/255
Blue107/255
Opacity100%

💡 Quick Tips

Hex: Compact format for web design

RGB: Direct channel values, easy to understand

HSL: Intuitive for designers (hue, saturation, lightness)

Alpha/Opacity: 0 = transparent, 1 = opaque

Click output: Automatically copies to clipboard

How to Use the Color Calculator

Enter a color in any format: hex (#FF6B6B), RGB (rgb(255, 107, 107)), HSL (hsl(0, 100%, 71%)), or color names (red, blue). The converter automatically detects the format and displays the color with all equivalent formats.

Formula

Color Models:
• HEX: 6-digit hexadecimal (#RRGGBB)
• RGB: Red, Green, Blue (0-255)
• HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
All formats represent the same color in different color spaces.

History & Interesting Facts

💡 Did You Know?

The human eye can perceive approximately 10 million different colors, but standard 8-bit RGB only displays 16.7 million colors (256³).

Origin & History

Color codes evolved from early computer graphics. Hex colors became standard on the web in the 1990s. RGB and HSL are alternative representations of the same color space.

Fascinating Facts

  • 1

    Hex (#RRGGBB): Each pair represents 0-255 in hexadecimal, used in web design

  • 2

    RGB: Direct representation of red, green, blue intensities

  • 3

    HSL: Hue (color), Saturation (intensity), Lightness (brightness) — intuitive for designers

  • 4

    RGBA/HSLA: Same as RGB/HSL but with alpha channel for transparency

  • 5

    Grayscale: Equal R, G, B values (e.g., #808080)

  • 6

    16 named colors are CSS standards (red, blue, green, etc.)

Frequently Asked Questions

What is the difference between RGB and HSL?

RGB uses red, green, blue intensities directly. HSL uses hue (color), saturation (colorfulness), and lightness (brightness). HSL is more intuitive for designers.

Can I use transparency in colors?

Yes! Use RGBA for RGB with alpha, or HSLA for HSL with alpha. Alpha ranges from 0 (transparent) to 1 (opaque).

What are named colors?

CSS defines 16 standard named colors (red, blue, green, black, white, etc.). They are shortcuts for common colors.

Related Converters Calculators

Length Converter

Convert between meters, kilometers, feet, miles, inches, yards, and more.

Weight Converter

Convert between kilograms, pounds, ounces, stones, grams, and metric tons.

Temperature Converter

Convert between Celsius, Fahrenheit, Kelvin, and Rankine temperature scales.

Volume Converter

Convert between liters, gallons, milliliters, cups, pints, cubic meters, and more.

Speed Converter

Convert between km/h, mph, m/s, knots, and other speed units.

Area Converter

Convert between square meters, square kilometers, acres, hectares, square miles, and more.