Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats. Generate color harmonies, shades, and tints for your design system.
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
76, 47, 0, 4
Color Harmonies
Shades & Tints
Recommended Settings
Color Format Best Practices
- •HEX is most compact and widely supported in CSS and design tools
- •RGB is ideal for programmatic color manipulation and transparency (RGBA)
- •HSL is best for creating color variations (lightness/saturation adjustments)
- •HSV is commonly used in color pickers and image editing software
- •CMYK is essential for print design and professional printing workflows
Color Theory Applications
- •Complementary colors create high contrast and visual pop
- •Analogous colors create harmonious, cohesive color schemes
- •Triadic colors provide balanced, vibrant palettes
- •Use shades and tints to create depth and hierarchy in designs
- •Split-complementary offers contrast while maintaining harmony
Pro Tips
- •Click any harmony color to instantly switch to that color
- •Use HSL sliders for the most intuitive color adjustments
- •Generate shades/tints for Tailwind-style color palettes
- •CMYK values are crucial for professional print projects
Most Popular
HSL for theme systems, HEX for static colors, CMYK for print
How It Works
Choose an input method: Color Picker, RGB sliders, HSL sliders, or HSV sliders
Adjust the color using your preferred format - all formats sync automatically
View converted values in all formats (HEX, RGB, HSL, HSV, CMYK)
Explore color harmonies based on color theory (complementary, triadic, etc.)
Generate shades and tints for a complete color palette
Click any color format card to copy the value to your clipboard
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between HSL and HSV?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are similar but differ in how they represent brightness. HSL's lightness ranges from black (0%) to white (100%) with pure color at 50%. HSV's value ranges from black (0%) to pure color (100%). HSV is often used in color pickers, while HSL is more intuitive for CSS.
When should I use CMYK instead of RGB?
Use CMYK for any project that will be professionally printed (brochures, business cards, posters). CMYK is a subtractive color model optimized for ink on paper. Use RGB/HEX for anything displayed on screens (websites, apps, digital media). Note that some RGB colors cannot be accurately reproduced in CMYK.
What are color harmonies and why use them?
Color harmonies are combinations of colors that are aesthetically pleasing based on color theory. Complementary colors (opposite on the color wheel) create contrast, analogous colors (adjacent) create harmony, and triadic colors (evenly spaced) create balance. They help create professional-looking color schemes.
How do I create a Tailwind-style color palette?
Use the Shades & Tints section to generate 9 variations of your base color from light to dark. This creates a scale similar to Tailwind's color system (50-900). You can click any shade to make it your base color and generate a new set of variations.
Can I use these colors directly in my CSS?
Yes! Click the copy button under any format (HEX, RGB, HSL) to copy it to your clipboard. All formats work in modern CSS. HEX is most common, RGB is good for transparency (rgba), and HSL is excellent for creating CSS variables that can be easily adjusted.