Color Picker

Pick any color visually and instantly convert it between HEX, RGB, HSL, and CMYK formats. Preview the selected shade, copy values with a single click, and explore harmonious color schemes for your next design project.

Pick a Color

HEX

Color Preview

#7C3AED

Color Values (click any row to copy)

HEX #7C3AED

RGB rgb(124, 58, 237)

HSL hsl(258, 84%, 58%)

CMYK cmyk(48%, 76%, 0%, 7%)

Shades

Tints

Harmonious Colors

What is a Color Picker?

A color picker is an interactive design tool that lets you select a color visually and obtain its representation in multiple formats used across web, print, and graphic design workflows. Designers and developers work with colors every day, but different tools, frameworks, and production processes expect colors in different formats. A reliable picker bridges those differences by translating a single chosen shade into HEX for CSS, RGB for image editing, HSL for palette generation, and CMYK for commercial printing.

The HEX format encodes the red, green, and blue components of a color as a six digit hexadecimal string, prefixed with a hash symbol. It is the most common way to specify colors in HTML, CSS, and SVG because it is compact, unambiguous, and easy to copy and paste. RGB expresses the same red, green, and blue values as decimal numbers from 0 to 255, often wrapped in the CSS function rgb() or as an object in design software such as Photoshop.

HSL, which stands for hue, saturation, and lightness, is favored by designers because each component maps directly to a perceptual property of the color. Hue rotates around the color wheel from 0 to 360 degrees, saturation controls the intensity from gray to fully saturated, and lightness moves from black through the pure color to white. This makes it easy to create tints, shades, and harmonious palettes by tweaking a single value while keeping the others constant.

CMYK, short for cyan, magenta, yellow, and key (black), is the subtractive color model used by commercial printing presses and most desktop printers. Instead of mixing light as RGB does, CMYK works by layering translucent inks that absorb specific wavelengths. Converting your screen colors to CMYK before sending artwork to print helps avoid unpleasant surprises, since some vivid RGB colors fall outside the printable gamut and will shift noticeably when reproduced with ink on paper.

How Color Conversion Works

All conversions start from the RGB representation, since that is what the browser natively provides through the color input. The picker then derives the other formats using well-known formulas that translate between color spaces while preserving the perceived color as closely as possible.

RGB to HSL Formula L = (max + min) / 2; S = (max - min) / (1 - |2L - 1|); H = angle from R, G, B max

RGB to HSL conversion first computes the maximum and minimum channel values to determine lightness. Saturation is then derived from the spread between max and min, normalized by the lightness. Hue is calculated based on which channel is largest, with red mapped to 0 degrees, green to 120 degrees, and blue to 240 degrees around the color wheel.

Worked Example

Input color: #7C3AED (a vivid purple)

RGB breakdown: R = 124, G = 58, B = 237

Max channel: B = 237, Min channel: G = 58

Lightness: (237 + 58) / 2 / 255 ≈ 0.578 (57.8%)

Saturation: (237 - 58) / (1 - |2 × 0.578 - 1|) / 255 ≈ 0.838 (83.8%)

Hue: 60 × ((R - G) / (max - min) + 4) = 60 × ((124 - 58) / 179 + 4) ≈ 258 degrees

Final HSL: hsl(258, 84%, 58%) — ready to drop straight into your stylesheet.

How to Use This Color Picker

Open the native picker: Click the colored square to launch your browser's built-in color picker, which supports precise hue, saturation, and lightness adjustments.
Or enter a HEX value: Type a six digit hex code into the HEX input field to load a specific color directly, useful when matching an existing brand palette.
Review the preview: The large preview area shows your selected color with its hex code overlaid, so you can confirm the choice at a glance.
Copy any format: Click any row in the color values list to instantly copy that representation to your clipboard for use in CSS, code, or design software.
Explore shades and tints: Use the swatches under Shades and Tints to find darker or lighter variations of your color for hover states and gradients.
Generate harmonious colors: The harmonious colors section suggests complementary, analogous, and triadic partners to build a balanced palette.
Apply to your project: Paste the copied value into your CSS, design tool, or print software to use the exact color you picked.

Color Design Best Practices

Use a Limited Palette

Stick to three to five core colors per project. A limited palette creates visual consistency, strengthens brand recognition, and reduces cognitive load for users. Use tints and shades of your base colors to extend variety without adding new hues.

Check Accessibility Contrast

Aim for a contrast ratio of at least 4.5 to 1 between text and background. Test combinations with a contrast checker, and avoid relying on color alone to convey meaning, since some users have color vision deficiencies and may not distinguish red from green.

Convert to CMYK for Print

Before sending artwork to a commercial printer, convert all colors to CMYK and request a physical proof. Vivid RGB colors often fall outside the printable gamut and will shift when reproduced with ink, so verifying early avoids costly reprints.

Define Design Tokens

Store your chosen colors as design tokens using CSS custom properties or a design system library. This lets you update brand colors across an entire application from a single location and keeps visual style consistent as the project grows.

Color Picker FAQs

What is the difference between HEX, RGB, HSL, and CMYK?

HEX represents colors as a six digit hexadecimal string used widely in web design. RGB describes colors as red, green, and blue light intensities from 0 to 255. HSL expresses colors by hue, saturation, and lightness, which is intuitive for designers. CMYK represents ink percentages of cyan, magenta, yellow, and black, used primarily for print production.

Which color format should I use for web design?

HEX is the most common format in CSS and HTML because it is compact and universally supported. RGB and RGBA are useful when you need alpha transparency. HSL is preferred when you want to create color variations by adjusting hue, saturation, or lightness independently. Modern browsers support all three formats equally, so choose based on your workflow.

Why does my color look different on screen versus print?

Screens use additive RGB light, while printers use subtractive CMYK ink, which have different color ranges called gamuts. Bright neon greens, deep blues, and saturated reds often cannot be reproduced in print. Always convert to CMYK before sending artwork to a commercial printer, and request a physical proof to verify critical brand colors.

What is color contrast and why does it matter for accessibility?

Color contrast measures the difference in luminance between foreground and background colors. The Web Content Accessibility Guidelines require a contrast ratio of at least 4.5 to 1 for normal text to ensure readability for users with visual impairments. Use this tool to test combinations and ensure your designs are accessible to everyone.

Can I generate color palettes from a single base color?

Yes. Common palette types include complementary, analogous, triadic, and tetradic schemes, each derived using fixed hue rotations on the HSL color wheel. Designers often start with a base color and build harmonious palettes by rotating the hue by 30, 60, 120, or 180 degrees while keeping saturation and lightness constant.

What does the alpha channel in RGBA and HSLA mean?

The alpha channel controls opacity, ranging from 0 for fully transparent to 1 for fully opaque. RGBA and HSLA allow you to layer colors over backgrounds, create glass effects, and fade elements in and out. This tool focuses on solid color conversion, but you can append an alpha value manually when using the values in your CSS.