What's the difference between HEX, RGB, and HSL?

HEX (#RRGGBB) is hex-encoded RGB — compact, used in CSS and design tools. RGB(red, green, blue) describes color as red/green/blue intensities (0-255). HSL(hue, saturation, lightness) is more intuitive for designers — pick a hue, adjust intensity, set lightness. All three represent the same colors in different notations.

When should I use HEX vs RGB vs HSL?

HEX works best for CSS colors (most concise) and design tools like Figma and Sketch where it's the default. RGB or RGBA is the choice when you need transparency (rgba(0,0,0,0.5)) or programmatic color manipulation. HSL or HSLA is best for design intuition — changing lightness is easier than RGB, and it shines when generating color palettes or doing dynamic theming where you want to adjust one aspect at a time.

What is alpha (transparency)?

Alpha controls a color's opacity, from 0 for fully transparent to 1 for fully opaque. RGBA puts alpha as the fourth value, so rgba(255,0,0,0.5) is half-transparent red. Hex codes can also include alpha as two extra characters at the end, like #FF000080 where the trailing 80 represents 50%. Alpha is what makes overlays, hover effects, and any semi-transparent UI element work.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in printing. Unlike RGB (additive, for screens), CMYK describes how much ink to subtract from white paper. Use CMYK when designing for print (business cards, brochures, books); use RGB/HEX for digital (websites, apps, screens). The picker converts between for cross-medium design.

Are recently used colors saved?

Yes — recent colors are saved to your browser's localStorage so they persist across sessions. Up to 12 (or configurable) recent colors are remembered, making it easy to reuse colors across projects. Clear browser data resets the history.

Can I pick a color from an image?

Some color pickers include an eyedropper tool for sampling colors from your screen. The browser's native eyedropper API (Chrome/Edge) lets the picker grab any pixel's color from any visible window. For images specifically, pair with an Image Color Extractor tool to extract dominant colors automatically.

Are color values precise?

Yes — within the precision of the source format. RGB values are integers 0-255, so HEX→RGB is exact. HSL conversion involves floating-point math which can introduce tiny rounding (e.g., #FF5733 might convert to hsl(11, 100%, 60%) or hsl(11, 100%, 60.196...)). For practical purposes, the rounded values are accurate.

Color Picker

Pick colors visually and get HEX, RGB, HSL, and CMYK values online. Free color picker with palette history and CSS code generation.

Color Tools

Instant results

Pick a Color

Enter HEX color or use the picker

#3B82F6

Color Formats

About Color Picker

Pick any color and get its value in multiple formats: HEX, RGB, RGBA, HSL, HSLA, and CMYK. Click any format to copy it to your clipboard. Recent colors are saved for quick access.

How to Use Color Picker

Pick a color

Click anywhere on the color spectrum to select a color, drag the hue slider for precise hue selection, or type a known value (HEX, RGB, HSL) to start from a specific color.

View all formats

Your selected color is shown in HEX, RGB(A), HSL(A), HSV, and CMYK formats simultaneously — useful when working across web, design, and print contexts.

Copy the format you need

Click any format to copy it to your clipboard. HEX for CSS, RGBA for transparency-aware contexts, HSL for design systems, CMYK for print.

Reuse recent colors

Recently used colors appear in the history panel and are saved across sessions. Click any to instantly recall — useful when working with brand palettes or themed designs.

When to Use Color Picker

Web design color selection

Choose colors for websites, apps, and interfaces. The HEX format pastes directly into CSS (color: #3b82f6;). RGB(A) handles transparency for overlays. HSL is intuitive for design systems where you adjust lightness while keeping hue/saturation constant — perfect for generating consistent shades.

Creating brand color palettes

Build cohesive color palettes by picking a base color, then sampling related shades (lighter, darker, complementary, analogous). HSL is ideal for systematic palettes — keep saturation constant, vary lightness for shades; rotate hue for color variations. Save the resulting hex codes for design system documentation.

Print design with CMYK conversion

When designing for print (business cards, posters, packaging), CMYK is the relevant color space. Pick or paste an RGB color, copy the CMYK equivalent, and use in print design tools. Note: RGB-to-CMYK conversion is approximate (different gamuts), so always proof-print before mass production.

Accessibility contrast checking

Picking colors with adequate contrast (WCAG AA: 4.5:1 for normal text, 3:1 for large text) is critical for accessibility. Pair this color picker with a contrast checker tool: pick a foreground, pick a background, verify their contrast ratio meets accessibility guidelines before deploying.

Color Picker Examples

HEX to other formats

Input

HEX: #3b82f6

Output

RGB: rgb(59, 130, 246)\nHSL: hsl(217, 91%, 60%)\nCMYK: cmyk(76%, 47%, 0%, 4%)

A common Tailwind blue (#3b82f6 = blue-500) shown across all major formats. Each describes the same color but is suited to different contexts: HEX for CSS, RGB for transparency-aware contexts, HSL for design systems, CMYK for print.

Adding alpha for transparency

Input

Color: #FF5733 (orange) at 50% alpha

Output

RGBA: rgba(255, 87, 51, 0.5)\nHEX with alpha: #FF573380

RGBA explicitly takes alpha as a 4th value (0 = transparent, 1 = opaque). HEX with alpha appends two hex chars representing 0-255 (80 = 128 = 50%). Use for overlays, hover effects, semi-transparent borders, and any UI element that should partially show what's behind it.

HSL for systematic shades

Input

Base: hsl(217, 91%, 60%) — adjust lightness

Output

Lighter (75%): hsl(217, 91%, 75%)\nDarker (45%): hsl(217, 91%, 45%)\nDarkest (25%): hsl(217, 91%, 25%)

HSL makes generating shades trivial: keep hue and saturation constant, vary lightness. The 4-shade palette (75%/60%/45%/25%) gives a consistent blue across light/medium/dark/darker — useful for hover states, disabled states, hierarchy in UI.

Tips & Best Practices for Color Picker

1.Use HEX for CSS unless you need transparency. Most CSS frameworks (Tailwind, Bootstrap) use HEX. RGB(A) when you need transparency. HSL when designing systematic palettes.
2.For accessibility, always check contrast between text and background. Tools: WebAIM Contrast Checker, Stark, or Chrome DevTools' built-in contrast checker. Aim for 4.5:1 for normal text, 7:1 for AAA compliance.
3.When picking colors for print, work in CMYK directly if your design tool supports it (Illustrator, InDesign). RGB-to-CMYK conversion loses detail in the gamut differences (CMYK can't represent all RGB colors and vice versa).
4.For dark mode design, don't just invert colors. Use HSL: keep hue, increase lightness for backgrounds (in light mode you'd decrease lightness for text). Tools like Adobe Color and Coolors generate dark mode variants automatically.
5.Save brand colors in your password manager or a note — sounds odd, but you'll reach for them constantly. Format: 'Brand Primary: #3b82f6 (blue-500)' makes it easy to find later.
6.For colorblind-friendly design, test palettes with simulators (Sim Daltonism on Mac, Coblis online). Avoid red-green pairs alone (most common type of colorblindness). Use brightness + saturation differences alongside hue, not relying on hue alone for distinguishing elements.

Frequently Asked Questions

It lets you visually pick colors and instantly see their values in multiple color formats: HEX (#FF5733), RGB(A), HSL(A), and CMYK. You can sample colors from a 2D color spectrum, fine-tune with sliders, or paste a known value to convert between formats. Recently used colors are saved automatically.

Color Picker

About Color Picker

How to Use Color Picker

Pick a color

View all formats

Copy the format you need

Reuse recent colors

When to Use Color Picker

Web design color selection

Creating brand color palettes

Print design with CMYK conversion

Accessibility contrast checking

Color Picker Examples

HEX to other formats

Adding alpha for transparency

HSL for systematic shades

Tips & Best Practices for Color Picker

Frequently Asked Questions

Related Tools

Color Converter

HEX to RGB Converter

RGB to HEX Converter

Color Palette Generator

CSS Gradient Generator

Color Shades Generator