Color Converter
A comprehensive color converter supporting multiple formats. Convert between HEX, RGB, HSL, CMYK, and other color formats with real-time preview.
How to Use
- Enter Color: Input a color in any supported format
- Auto-detect: The tool automatically detects the input format
- View Results: See all equivalent color formats and preview
Red
Features
- Multiple Formats: HEX, RGB, HSL, CMYK, HSV, CSS names
- Real-time Conversion: Instant conversion as you type
- Color Picker: Visual color selection
- Accessibility Info: Contrast ratio and luminance
- Copy to Clipboard: One-click copying of any format
Supported Formats
HEX
- Format:
#RRGGBBor#RGB - Example:
#ff0000,#f00
RGB
- Format:
rgb(r, g, b) - Example:
rgb(255, 0, 0)
RGBA
- Format:
rgba(r, g, b, a) - Example:
rgba(255, 0, 0, 0.5)
HSL
- Format:
hsl(h, s%, l%) - Example:
hsl(0, 100%, 50%)
HSLA
- Format:
hsla(h, s%, l%, a) - Example:
hsla(0, 100%, 50%, 0.5)
CSS Color Names
- Examples:
red,blue,green,purple
Common Use Cases
Web Development
Convert colors between different CSS formats.
Design Work
Match colors across different applications.
Accessibility
Check color contrast ratios for web accessibility.
Print Design
Convert to CMYK for print materials.
Color Theory
RGB (Red, Green, Blue)
- Use: Digital displays, web
- Range: 0-255 for each component
- Additive: Colors are added together
HSL (Hue, Saturation, Lightness)
- Use: Design, color manipulation
- Hue: 0-360 degrees (color wheel)
- Saturation: 0-100% (intensity)
- Lightness: 0-100% (brightness)
CMYK (Cyan, Magenta, Yellow, Key)
- Use: Print materials
- Subtractive: Colors are subtracted from white
HSV (Hue, Saturation, Value)
- Use: Color pickers, graphics software
- Similar to HSL but with Value instead of Lightness
Accessibility Guidelines
WCAG 2.1 Contrast Requirements
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- UI components: 3:1 minimum
Luminance
- High luminance: Light colors
- Low luminance: Dark colors
- Optimal range: 0.05-0.95 for good contrast