Color
Color converter online free. Convert between HEX, RGB, RGBA, HSL, HSLA, HSB. Live color preview—hex to RGB converter.
Color Input
🎨
Visual Color Picker
Click the swatch to pick a color visually, or enter a color code below
Preview
#FF5733
rgb(255, 87, 51)
🎨
HEX Format
Uppercase
#FF5733Lowercase
#ff5733🔴🟢🔵
RGB Format
RGB
rgb(255, 87, 51)RGBA
rgba(255, 87, 51, 1)🌈
HSL Format
HSL
hsl(11, 100%, 60%)HSLA
hsla(11, 100%, 60%, 1)🖨️
CMYK Format
CMYK
cmyk(0%, 66%, 80%, 0%)c
0
m
66
y
80
k
0
Component Breakdown
RGB
R
255
G
87
B
51
HSL
H
11°
S
100%
L
60%
CMYK
C
0
M
66
Y
80
K
0
Color Formats
HEX: #RRGGBB or #RGB (3-digit shorthand)
RGB: rgb(red, green, blue) — values 0-255
HSL: hsl(hue, saturation%, lightness%)
CMYK: cmyk(cyan, magenta, yellow, key) — values 0-100
Add 'a' for alpha: rgba(..., 0.5) or hsla(..., 0.5)
Features
- Convert HEX, RGB, RGBA, HSL, HSLA, CMYK, HSB
- Visual color picker with live preview
- Color palette swatches
- Accessibility contrast checker
- Alpha channel (transparency) support
- Quick preset colors
Common Use Cases
- Convert design tool colors to CSS
- Extract RGB values from hex codes
- Adjust color hue, saturation, lightness
- Convert print colors (CMYK) to web (RGB)
- Generate color variations for themes
Color Models and Formats
Colors can be represented in multiple formats, each with different use cases. Web design primarily uses HEX, RGB, and HSL, while print uses CMYK.
Color Formats:
- HEX (#RRGGBB): Hexadecimal, compact format. #FF5733 = red(255), green(87), blue(51)
- RGB (red, green, blue): Additive color (0-255 each). rgb(255, 87, 51)
- RGBA: RGB + alpha channel (transparency 0-1). rgba(255, 87, 51, 0.5)
- HSL (hue, saturation, lightness): Intuitive for color adjustments. hsl(9, 100%, 60%)
- HSLA: HSL + alpha. hsla(9, 100%, 60%, 0.5)
- CMYK: Print colors (cyan, magenta, yellow, black). Not web-native, convert to RGB first
When to Use Each Format:
- HEX: Concise, common in CSS. No transparency support (use RGBA instead)
- RGB/RGBA: When you need alpha channel, or working with JavaScript color manipulation
- HSL/HSLA: Best for creating color variations (adjust hue for different colors, lightness for shades)
- CMYK: Print design only—convert to RGB for web
Color Properties:
- Hue: Pure color on color wheel (0-360°). 0=red, 120=green, 240=blue
- Saturation: Color intensity (0-100%). 0%=gray, 100%=pure color
- Lightness: Brightness (0-100%). 0%=black, 50%=pure color, 100%=white
- Alpha: Transparency (0-1). 0=fully transparent, 1=fully opaque
Accessibility: Ensure sufficient contrast between text and background. WCAG 2.1 requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold+).
Examples
Valid - Hex to RGB
#FF5733 = rgb(255, 87, 51) Valid - RGB to HSL
rgb(255, 87, 51) = hsl(9, 100%, 60%) Valid - Transparency
rgba(255, 87, 51, 0.5) = 50% opacityFrequently Asked Questions
What's the difference between HSL and RGB?
RGB uses red/green/blue channels (0-255). HSL uses hue (color), saturation (intensity), lightness (brightness). HSL is more intuitive for creating color variations—adjust hue for different colors, saturation for vibrancy, lightness for shades.
Can I use HEX colors with transparency?
Yes, 8-digit HEX includes alpha: #FF5733FF (opaque), #FF573380 (50% transparent). But RGBA is more readable: rgba(255,87,51,0.5). Not all browsers support 8-digit HEX, so RGBA is safer for transparency.
How do I convert CMYK to RGB for web?
CMYK (print) doesn't convert perfectly to RGB (screen)—colors may shift. Use this tool for approximate conversion. For accurate brand colors, use the RGB values your designer provides. CMYK is subtractive (ink), RGB is additive (light).
What's the best color format for CSS?
HEX for solid colors (#FF5733), RGBA for transparency (rgba(255,87,51,0.5)), HSL for color variations (hsl(9,100%,60%)). Modern CSS also supports oklch() for better color space, but browser support is limited.
How do I create color shades and tints?
Use HSL. For shades (darker), decrease lightness: hsl(9, 100%, 60%) → hsl(9, 100%, 40%). For tints (lighter), increase lightness: hsl(9, 100%, 80%). Keep hue and saturation constant, adjust lightness 10-20% per step.
💡 Tips
- For creating color scales: keep hue/saturation constant, vary lightness in 10% increments (20%, 30%, 40%...90%)
- Use HSL for theme customization—easier to adjust than RGB: --primary-hue: 220; hsl(var(--primary-hue), 70%, 50%)
- WCAG contrast: #000 on #FFF = 21:1 (perfect), #777 on #FFF = 4.5:1 (minimum for body text)
- Common mistake: #FF0000 is not the same as rgb(255,0,0) if alpha is involved. Use rgba(255,0,0,1) for explicit opacity