Color Converter
Convert colors between HEX, RGB, HSL, HSB/HSV, and CMYK with live preview, contrast checking, and palette generation
Alpha100%
Color Formats
HEX
#3b82f6RGB
rgb(59, 130, 246)HSL
hsl(217.22, 91.22%, 59.8%)HSB/HSV
hsv(217.22, 76.02%, 96.47%)CMYK
cmyk(76.02%, 47.15%, 0%, 3.53%)CSS Output
color: #3b82f6;background-color: rgb(59, 130, 246);border-color: hsl(217.22, 91.22%, 59.8%);Contrast Checker (WCAG)
Aa
vs White (#FFFFFF) β 3.68:1
Normal: FailLarge: AA
Aa
vs Black (#000000) β 5.71:1
Normal: AALarge: AAA
vs Custom Background β 3.68:1
Normal: FailLarge: AA
Color Palettes
Complementary
Analogous
Triadic
Split Complementary
HEX, RGB, or HSL β Which and When?
Three notations, one color
- HEX (`#1a73e8`): the most compact; the de facto standard for passing colors around in design tools and code.
- RGB (`rgb(26, 115, 232)`): light components; use `rgba(..., 0.5)` when you need opacity.
- HSL (`hsl(217, 82%, 51%)`): hue, saturation, lightness β the human-friendly one. 'Same color, slightly darker' is a single L adjustment, which makes HSL ideal for defining hover/disabled variants in design systems.
Practical notes
- Modern CSS drops the commas: `rgb(26 115 232 / 50%)`.
- Accessibility: body text needs a 4.5:1 contrast ratio against its background (WCAG). Make contrast checks part of picking any color.
- Newer spaces like OKLCH offer perceptually uniform lightness and are increasingly used for palette generation.
Frequently Asked Questions
Related Tools
Sources & References
Content last reviewed: 2026-08-22