Pick any color and instantly get HEX, RGB, and HSL values — free for designers and developers.
Copied!
Click the color input box to open your browser's native color picker, giving you access to the full color spectrum.
Choose any color from the picker. The preview box and all three color values update instantly as you pick.
Click Copy next to HEX, RGB, or HSL to copy that format to your clipboard, ready to paste into CSS, Figma, or any design tool.
A six-digit code starting with # (e.g., #6366f1) representing a color using hexadecimal values for red, green, and blue. HEX is the most common color format in CSS and web design.
RGB uses red, green, and blue values (0–255). HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is more intuitive for adjusting color palettes — you can darken/lighten by changing only the lightness value.
HEX for most cases. Use RGBA when you need transparency (e.g., rgba(99,102,241,0.5)). Use HSL for dynamic color systems and themes — it's much easier to programmatically adjust hue, saturation, or lightness.
Yes. Copy the HEX or RGB value and paste it directly into Figma, Adobe XD, Sketch, Canva, Photoshop, or any design tool that accepts color codes.
Pick your color using the color input — both HEX and RGB values are shown instantly side by side. Just copy the RGB value from the result row.
For WCAG AA compliance, text needs a contrast ratio of at least 4.5:1 against its background. Dark colors (#333–#000) on white, or light colors (#eee–#fff) on dark backgrounds, typically meet this standard.
HSL excels at creating color variations — like generating a full palette from one base color by only adjusting the lightness (e.g., hsl(239, 84%, 30%) to hsl(239, 84%, 90%)). It also makes hover states and disabled states predictable.
Same color, different notation. Each format has specific use cases where it shines:
Most common in web design. Compact (7 characters), universally supported in CSS, HTML, design tools, and brand guidelines. Use HEX whenever you need to share a color value with another developer or designer. Limitation: no alpha channel by default (though #RRGGBBAA exists in newer browsers).
Three integer values (0-255) for red, green, blue. Add alpha (0-1) for transparency: rgba(124, 92, 255, 0.5). Use when you need transparency — for overlays, glass effects, semi-transparent buttons. Also natural for JavaScript color manipulation.
Hue (0-360°), Saturation (0-100%), Lightness (0-100%). The human-friendly format — easy to create palette variations by adjusting only lightness or saturation. Best for design system tokens where you generate color scales programmatically.
Hue-Saturation-Value (also called HSB in Photoshop). Different from HSL because "Value" maxes out at pure color, not at the midpoint. Common in Photoshop, Procreate, and art software. Less common in web/CSS.
Cyan-Magenta-Yellow-Black, for print only. Computer screens display RGB; printers mix CMYK inks. Convert RGB to CMYK using your printer's specific profile — the conversion is not exact because RGB has a wider gamut.
CSS has ~140 named colors: red, dodgerblue, tomato, rebeccapurple. Useful for quick prototyping but limit production code to a defined palette of HEX values for consistency.
Use 60% dominant color (usually a neutral), 30% secondary (a brand color), 10% accent (for CTAs and highlights). Most well-designed interfaces follow this proportion without you noticing.
Warm colors (red, orange, yellow) feel energetic and approachable. Cool colors (blue, green, purple) feel calm and professional. Choose temperature based on the emotion you want to evoke — fast food uses warm, banks use cool.
WCAG AA: 4.5:1 for body text, 3:1 for large text. WCAG AAA: 7:1 for body text, 4.5:1 for large. Use a contrast checker (built into most browsers' DevTools) to verify before shipping.
#000 on #fff is harsh and causes eye strain. Use #222 or #333 for body text on white, and #fafafa or #f5f5f5 for the background of long text content.
~8% of men have some form of color blindness. Never communicate critical info (like errors vs success) using color alone — pair it with icons, labels, or shape changes. Test your UI with a color-blind simulator.
Famous brand colors as HEX reference (useful when matching designs or analyzing competitor palettes):