Color Converter

Last updated March 22, 2026

How to Use

1. Enter a color in any format: HEX (#667eea), RGB (rgb(102, 126, 234)), or HSL
2. See instant color preview in the box above
3. View conversions to all formats: HEX, RGB, and HSL
4. Copy any format to use in your CSS, design tools, or code
5. Try color names like "red", "blue", or "coral" for quick conversions

Common Conversion Scenarios

• Figma/Sketch exports RGB → convert to HEX for CSS
• HEX from a style guide → convert to RGBA for transparency effects
• RGB base color → convert to HSL to generate a shade palette
• Named color in CSS → convert to HEX for use in design tools
• HSL from a color picker → convert to HEX for cross-platform compatibility

Color Format Guide

HEX (Hexadecimal)

Format: #RRGGBB or #RGB. Most common format in web development. Example: #667eea, #fff. Each pair represents red, green, and blue values in hexadecimal (00-FF).

RGB (Red Green Blue)

Format: rgb(R, G, B). Values range from 0-255. Example: rgb(102, 126, 234). Intuitive for understanding color composition. Supports rgba() for transparency.

HSL (Hue Saturation Lightness)

Format: hsl(H, S%, L%). Hue: 0-360 degrees, Saturation: 0-100%, Lightness: 0-100%. Example: hsl(230, 70%, 66%). Best for creating color variations and palettes.

Common Use Cases

• CSS Development: Convert design tool colors to CSS-compatible formats
• Design Systems: Maintain consistent color formats across projects
• Color Palettes: Create variations using HSL adjustments
• Accessibility: Check color values for contrast ratio calculations
• Documentation: Provide multiple formats for developer reference

Conversion Examples

Input HEX:  #3b82f6

Output:
RGB:        rgb(59, 130, 246)
RGBA:       rgba(59, 130, 246, 1)
HSL:        hsl(217, 91%, 60%)
HSLA:       hsla(217, 91%, 60%, 1)
Named:      (no exact match)
HEX short:  #3b82f6 (no shorthand available)

/* Solid button */
.btn { background-color: #3b82f6; }

/* Semi-transparent overlay using the converted RGB */
.overlay { background-color: rgba(59, 130, 246, 0.15); }

/* Hover state with slight transparency */
.btn:hover { background-color: rgba(59, 130, 246, 0.9); }

Base color RGB:  rgb(220, 38, 38)
Converted HSL:   hsl(0, 72%, 51%)

/* Create a full shade palette by adjusting lightness */
--color-red-100: hsl(0, 72%, 95%);   /* Very light */
--color-red-200: hsl(0, 72%, 85%);
--color-red-300: hsl(0, 72%, 75%);
--color-red-400: hsl(0, 72%, 65%);
--color-red-500: hsl(0, 72%, 51%);   /* Base color */
--color-red-600: hsl(0, 72%, 41%);
--color-red-700: hsl(0, 72%, 31%);
--color-red-800: hsl(0, 72%, 21%);
--color-red-900: hsl(0, 72%, 11%);   /* Very dark */

Input:  cornflowerblue

Output:
HEX:    #6495ed
RGB:    rgb(100, 149, 237)
RGBA:   rgba(100, 149, 237, 1)
HSL:    hsl(219, 79%, 66%)
HSLA:   hsla(219, 79%, 66%, 1)