Loading
Find and convert HEX, RGB, HSL color codes for your designs.
Design#6366F1
rgb(99, 102, 241)
hsl(239, 84%, 67%)
cmyk(59%, 58%, 0%, 5%)
18-3946 (baja-blue)
Try adjusting the Lightness (L) in HSL to create softer tones, or fine-tune RGB values to find the perfect shade for your brand.
Colors directly impact user emotions. For instance, Blue conveys Trust, Red stimulates Excitement, and Green represents Safety or Nature.
The standard for web design, using 6-digit hexadecimal codes.
Additive color model based on Red, Green, and Blue intensity (0-255).
Intuitive model based on Hue, Saturation, and Lightness.
Cyan, Magenta, Yellow, and Key (Black) for professional printing.
Standardized color matching system (PMS) used for physical branding.
• Warm Colors: Grab attention and trigger action. • Cool Colors: Provide a sense of calm and professionalism. • Neutrals: Ensure readability and focus on content.
Try adjusting the Lightness (L) in HSL to create softer tones, or fine-tune RGB values to find the perfect shade for your brand.
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Design CSS box shadows with live preview, multi-layer support, and copy.
Visually craft any rounded-corner shape with per-corner control.
Generate harmonious color palettes from a single base color.
Browse the full Tailwind color palette and click any swatch to copy.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.
Click the color wheel or type a value in the HEX, RGB, or HSL field.
The picker syncs all three formats instantly as you adjust.
Click the copy icon next to any format to copy that value to your clipboard.
Use the alpha slider if you need a transparent version of the color.
Convert a brand's HEX color to RGB or HSL for use in different design tools.
Get the exact CSS color value to paste into your stylesheet.
Pick a foreground and background color, then verify contrast before coding.
Quickly explore color variations for buttons, cards, or backgrounds during design exploration.
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.
Build linear or radial CSS gradients with 2-5 color stops and copy the code.
Design CSS box shadows with live preview, multi-layer support, and copy.
Visually craft any rounded-corner shape with per-corner control.
Generate harmonious color palettes from a single base color.
Browse the full Tailwind color palette and click any swatch to copy.
Check image safe zones for TikTok, Reels, and Shorts to ensure content visibility.