Can I add transparency?

Yes via the alpha channel. RGBA syntax adds a 4th value 0–1 (rgba(255,87,51,0.5) is 50% transparent). HEX supports it too with 8 digits — #FF573380 is the same color at 50% opacity.

What's a good contrast ratio for text?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA bumps these to 7:1 and 4.5:1. Light gray on white usually fails — light grey #999 on white is only 2.85:1. Test with a contrast checker before shipping.

Why does the same hex look different on phone vs laptop?

Color depends on the screen's gamut, calibration, and ambient light. Most phones use wide-gamut OLED (DCI-P3); many laptops are sRGB. The hex value is the same, but the displayed color shifts. For brand-critical work, calibrate your monitor and design in sRGB.

How many distinct colors can HEX represent?

Standard 6-digit HEX gives 16,777,216 colors (256³). The human eye can distinguish around 10 million, so HEX is more than enough for design. 24-bit color is the standard everywhere except HDR/professional video work, which uses 30-bit.

Color Picker

Find and convert HEX, RGB, HSL color codes for your designs.

Design

Share this tool

f 𝕏 L

Click the color area to open picker#6366f1

Color Values

HEX

#6366F1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

CMYK

cmyk(59%, 58%, 0%, 5%)

Pantone

18-3946 (baja-blue)

Pro Tip

Try adjusting the Lightness (L) in HSL to create softer tones, or fine-tune RGB values to find the perfect shade for your brand.

Color Psychology in Design

Colors directly impact user emotions. For instance, Blue conveys Trust, Red stimulates Excitement, and Green represents Safety or Nature.

Essential Color Formats

HEX

The standard for web design, using 6-digit hexadecimal codes.

RGB

Additive color model based on Red, Green, and Blue intensity (0-255).

HSL

Intuitive model based on Hue, Saturation, and Lightness.

CMYK

Cyan, Magenta, Yellow, and Key (Black) for professional printing.

Pantone

Standardized color matching system (PMS) used for physical branding.

Choosing Tones

• Warm Colors: Grab attention and trigger action. • Cool Colors: Provide a sense of calm and professionalism. • Neutrals: Ensure readability and focus on content.

Pro Tip

Try adjusting the Lightness (L) in HSL to create softer tones, or fine-tune RGB values to find the perfect shade for your brand.

Explore More Tools

🌈

Gradient Generator

Build linear or radial CSS gradients with 2-5 color stops and copy the code.

📦

Box Shadow Generator

Design CSS box shadows with live preview, multi-layer support, and copy.

🔵

Border Radius Generator

Visually craft any rounded-corner shape with per-corner control.

🎨

Color Palette Generator

Generate harmonious color palettes from a single base color.

Frequently Asked Questions

Pick any color and instantly convert between HEX, RGB, and HSL formats. Useful for designers matching brand palettes, developers writing CSS, and anyone who needs a precise color value.

HEX (#FF5733) is most compact for CSS and graphic tools. RGB(A) is needed when you want alpha transparency. HSL (hue, saturation, lightness) is best for adjustments — easy to make a color slightly darker or more muted by tweaking one number.

Explore More Tools

🌈