Both use Hue, but HSL pairs it with Saturation and Lightness (common in CSS), while HSV pairs it with Saturation and Value/brightness (common in image editors).
Free Design Tool
Color Picker & Converter
Pick any color visually and instantly get HEX, RGB, HSL, HSV, and CMYK values. Generate harmonious color palettes and check WCAG contrast ratios for accessibility — all in your browser.
- ✔ HEX, RGB, HSL, HSV, CMYK
- ✔ Palette generator
- ✔ WCAG contrast checker
- ✔ Named color swatches
- ✔ Free Forever
Pick, Convert, and Build Palettes — All in Your Browser
Every web and app designer eventually needs to move a color between formats — a HEX code from a design mockup, RGB for a CSS variable, HSL for programmatic lightness adjustments, or CMYK for print materials. This tool converts between all five formats live as you pick or type, generates harmonious palettes from any base color, and checks WCAG contrast ratios so your text stays readable and accessible.
How It Works
1. Pick a Color
Use the visual picker, sliders, or type a HEX/RGB value directly.
2. Copy Any Format
HEX, RGB, HSL, HSV, and CMYK all update live — copy whichever you need.
3. Build a Palette
Generate complementary, analogous, or triadic color schemes from your base color.
4. Check Contrast
Verify your color pairing meets WCAG AA/AAA accessibility standards.
Click swatch to open native color picker
HEX
#5B46E8
RGB
rgb(91, 70, 232)
RGBA
rgba(91, 70, 232, 1)
HSL
hsl(248, 78%, 59%)
HSV
hsv(248, 70%, 91%)
CMYK
cmyk(61%, 70%, 0%, 9%)
WCAG requires a contrast ratio of at least 4.5:1 for normal text
(AA) and 7:1 for enhanced contrast (AAA). Large text (18pt+/14pt bold+)
requires only 3:1 (AA) or 4.5:1 (AAA).
Sample Heading Text
This is how normal body text will look with this color combination.
8.6:1
Contrast Ratio
Normal Text
AA Pass
AAA Pass
Large Text
AA Pass
AAA Pass
Color Theory Basics
Quick Reference
Complementary
Colors opposite each other on the color wheel (180° apart). High contrast, vibrant — great for calls-to-action against a neutral background.
Analogous
Colors adjacent on the wheel (within 30°). Naturally harmonious, low contrast — common in nature-inspired designs.
Triadic
Three colors evenly spaced (120° apart). Vibrant while maintaining balance — pick one dominant color and use the other two as accents.
Monochromatic
Different shades, tints, and tones of a single hue. Cohesive and easy to get right — the safest choice for most UI design.
FAQsColor Picker & Converter
What is the difference between HSL and HSV?
When should I use CMYK instead of RGB?
CMYK is for print — it models physical ink mixing. RGB is for screens. Always check a print proof, as colors can shift during RGB-to-CMYK conversion.
What WCAG contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text, 3:1 for large text. AAA (enhanced) requires 7:1 and 4.5:1 respectively. AA is the standard most accessibility regulations require.