Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK with color picker
Color Picker
Click to pick a color or enter values in any format
#6366F1
#
R
G
B
H
S
L
H
S
V
C
M
Y
K
CSS Color Values
Ready-to-use CSS code
#6366F1
rgb(99, 102, 241)
rgba(99, 102, 241, 1)
hsl(239, 84%, 67%)
hsla(239, 84%, 67%, 1)
hwb(239 39% 5%)
Color Harmonies
Complementary and related colors based on color theory
Shades & Tints
Variations from dark to light
visibility Color Blindness Simulation
See how your color appears to people with different types of color vision deficiency
info About Color Blindness
Protanopia (~1% of males) — Red-blind. Red appears dark, and red-green distinctions are difficult.
Deuteranopia (~1% of males) — Green-blind. The most common form. Green and red appear similar.
Tritanopia (~0.003% of population) — Blue-blind. Blue and yellow are difficult to distinguish.
Protanomaly / Deuteranomaly — Partial red/green deficiency. Colors are muted but not fully absent.
Tritanomaly — Partial blue deficiency. Blue and yellow appear washed out.
Achromatopsia (~0.003% of population) — Complete color blindness. Only grayscale is visible.
Popular Colors
Click to select a color
About the Color Converter
Convert colors instantly between HEX, RGB, HSL, HSV, and CMYK formats with our free online color converter. Features a visual color picker, CSS-ready output, color harmonies, and shade/tint generation—all processed entirely in your browser.
Color Format Reference
- HEX — 6-digit hexadecimal representation (#RRGGBB). The most common format for web colors. Each pair represents red, green, and blue from 00-FF.
- RGB — Red, Green, Blue values from 0-255. The native color format for screens and digital displays.
- HSL — Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Intuitive for adjusting colors: hue is the color, saturation is intensity, lightness controls brightness.
- HSV/HSB — Hue (0-360°), Saturation (0-100%), Value/Brightness (0-100%). Similar to HSL but Value represents "amount of light" rather than lightness. Popular in design software like Photoshop.
- CMYK — Cyan, Magenta, Yellow, Key/Black (0-100% each). Used for print design. Note: CMYK conversions are approximate since they depend on printer profiles.
Understanding Color Harmonies
Color harmonies are combinations of colors that work well together based on their positions on the color wheel:
- Complementary — Colors opposite each other on the wheel (180° apart). Creates high contrast and visual tension.
- Analogous — Colors adjacent on the wheel (30° apart). Creates harmonious, cohesive designs.
- Triadic — Three colors equally spaced (120° apart). Offers vibrant, balanced contrast.
- Split-Complementary — A color plus two colors adjacent to its complement. Less tension than pure complementary.
- Tetradic (Square) — Four colors forming a square on the wheel. Rich color schemes that need careful balancing.
When to Use Each Format
| Format | Best For |
|---|---|
| HEX | Web development, CSS, sharing colors in a compact format |
| RGB | CSS, JavaScript color manipulation, screen displays |
| HSL | CSS variables, creating color variations, accessibility |
| HSV | Design software, color pickers, image editing |
| CMYK | Print design, physical media (note: conversions are approximate) |
Color Blindness Simulation
Color blindness affects approximately 8% of men and 0.5% of women worldwide. Our simulation tool helps designers ensure their color choices are accessible to everyone:
| Type | Prevalence | Description |
|---|---|---|
| Protanopia | ~1% of males | Red-blind. No red cones. Red appears dark/black. |
| Deuteranopia | ~1% of males | Green-blind. No green cones. Most common type. |
| Tritanopia | ~0.003% | Blue-blind. No blue cones. Blue-yellow confusion. |
| Protanomaly | ~1% of males | Red-weak. Reduced red sensitivity. |
| Deuteranomaly | ~5% of males | Green-weak. Reduced green sensitivity. Very common. |
| Tritanomaly | ~0.01% | Blue-weak. Reduced blue sensitivity. |
| Achromatopsia | ~0.003% | Complete color blindness. Only sees grayscale. |
Accessibility Best Practices
- Don't rely solely on color — Use icons, patterns, or labels alongside color coding.
- Test red-green combinations — ~8% of men have red-green deficiency. Avoid using red/green as the only differentiator.
- Use sufficient contrast — High contrast helps all users, especially those with partial color blindness.
- Consider blue and yellow — These are generally distinguishable for red-green colorblind users.
Tips for Web Designers
- Use HSL for variations — Adjust lightness for hover states (e.g., darken by 10%), keeping hue and saturation constant.
- CSS custom properties — Store HSL components separately for maximum flexibility:
--color-h: 239; --color-s: 84%; --color-l: 67%; - Accessibility — Ensure sufficient contrast ratios (WCAG recommends 4.5:1 for normal text, 3:1 for large text).
- CMYK warning — RGB and HEX colors may look different when printed. Always verify CMYK values with your print provider.