Color Picker & Converter

Pick colors and convert between HEX, RGB, HSL formats. Generate beautiful palettes for your next design project.

#2563EB
HEX
rgb(37, 99, 235)
RGB
hsl(221, 83%, 53%)
221, 84%, 92%
HSV

Generated Palette

Color Schemes

HEX, RGB, HSL & HSV Explained

Colors in web design and graphic design are represented in several formats. Understanding each helps you work efficiently across design tools, CSS, and programming.

Color Format Reference

FormatExampleUsed In
HEX#2563EBCSS, HTML, design tools
RGBrgb(37, 99, 235)CSS, JavaScript, image editing
HSLhsl(221, 83%, 53%)CSS, UI design
HSV221°, 84%, 92%Photoshop, color pickers

Understanding Color Theory

FAQ

What's the difference between HSL and HSV?
Both use Hue/Saturation. The third channel differs: HSL uses Lightness (0=black, 100=white), HSV uses Value (0=black, 100=full color). HSV matches how Photoshop works; HSL is more CSS-friendly.
How many colors are in HEX?
HEX supports 16,777,216 colors (256 × 256 × 256). Each pair of characters represents Red, Green, and Blue values from 00 to FF.
Can I copy the color values?
Click any color swatch to load it into the picker, then copy the HEX, RGB, HSL, or HSV value from the display.
What colors work best for websites?
High contrast between text and background is key. A common rule: minimum 4.5:1 contrast ratio for body text (WCAG AA standard).

Related Tools

🎨 CSS Gradient
Generate gradients
🎨 Color Palette
Generate palettes
📦 Box Shadow
CSS box shadows