Pick colors and convert between HEX, RGB, HSL, and HSV formats. Includes color palette generator, contrast checker, and CSS code export. Free online tool.
Pick any color from the spectrum or enter a value and instantly see it in every common format — HEX, RGB, HSL, and HSV — ready to copy into CSS, a design tool, or code. It runs in your browser with no sign-up.
Because HSL separates hue from lightness, it is the easiest format for generating a consistent palette: keep the hue and saturation, step the lightness up and down, and you get a coherent set of tints and shades for buttons, hovers, and backgrounds. Pulling saturation toward zero gives you matching greys.
Text needs enough contrast against its background to be readable — the WCAG guideline asks for a ratio of at least 4.5 to 1 for normal body text. When you choose a foreground and background pair here, verify that ratio before shipping it so the result is legible for everyone.
A color picker is an essential design and development tool that allows users to select, convert, and explore colors across multiple color models. Whether you are designing a website, creating brand guidelines, or debugging CSS, a color picker provides instant access to color values in formats like HEX, RGB, HSL, and CMYK.
Colors on the web are represented as numeric values. The most common format is HEX (hexadecimal), a six-character code preceded by a hash symbol—such as #FF5733 for a vivid red-orange. RGB (Red, Green, Blue) represents colors as three integer values from 0 to 255. HSL (Hue, Saturation, Lightness) offers a more intuitive model based on a color wheel. Understanding these models is critical for web accessibility, branding consistency, and cross-platform rendering.
| Model | Format | Example | Best For |
|---|---|---|---|
| HEX | #RRGGBB | #3498DB | CSS, HTML, design specs |
| RGB | rgb(R, G, B) | rgb(52, 152, 219) | Screen display, JavaScript |
| HSL | hsl(H, S%, L%) | hsl(204, 70%, 53%) | Intuitive color adjustments |
| CMYK | C, M, Y, K% | 76%, 31%, 0%, 14% | Print media |
HEX codes are shorthand for RGB values expressed in base-16. Each pair of characters represents one channel: red, green, and blue. HSL separates hue (the color angle on a 360-degree wheel) from saturation and lightness, making it easier to create consistent color palettes by adjusting a single parameter.
What are the different color models (HEX, RGB, HSL, HSV) and when should I use each?
HEX (#RRGGBB) is most common for web CSS - compact format like #3498db.
RGB (0-255 values) is best for transparency with rgba() and programmatic manipulation.
HSL (hue 0-360°, saturation %, lightness %) is ideal for creating color variations and tints/shades - easy to adjust lightness while keeping hue.
HSV (hue, saturation, value) is similar to HSL but used in color pickers and design tools.
Use HEX for solid colors, RGBA for transparency, HSL for design systems and programmatic color adjustments.
This tool converts between all formats instantly.
How do I create accessible color combinations that meet WCAG standards?
WCAG requires minimum contrast ratios:
Level AA needs 4.5:1 for normal text (<18pt) and 3:1 for large text.
Level AAA requires 7:1 and 4.5:1 respectively.
Black on white (#000000 on #FFFFFF) provides 21:1 (perfect).
Test with WebAIM Contrast Checker or Chrome DevTools.
Common mistakes:
Always verify actual rendered colors, especially with transparency.
Consider color blindness - don't rely on color alone, use icons and labels too.
This tool shows contrast ratios and WCAG compliance.
How do I extract and generate color palettes from images?
Upload images to extract dominant colors using algorithms that analyze pixel frequency and identify the most common hues (typically 5-10 colors).
Use for brand color extraction from logos, website theming from hero images, or data visualization colors.
Create full palettes by identifying the primary color, generating tints (add white) and shades (add black), then adding complementary colors.
Tools:
Adobe Color, Coolors, or this color picker.
Ensure extracted colors meet accessibility standards and test in context before using in production designs.
Use HEX (#3498db) for solid colors - most common and compact.
Use RGBA (rgba(52,152,219,0.8)) for transparency.
Use HSL (hsl(204,70%,53%)) for design systems and creating color variations - easy to adjust lightness for hover states.
CSS custom properties (--primary: #3498db) enable centralized color management and dark mode theming.
Modern formats: HWB and LCH offer perceptual uniformity but have limited browser support.
Best practice: combine CSS variables with HSL for maximum flexibility and maintainability.
This tool outputs all formats for immediate use.
How do I implement dark mode with color management?
Use CSS custom properties to define theme colors.
Don't use pure black (#000000) - use #121212 or #1A1A1A for backgrounds (reduces eye strain, better for OLED).
Desaturate accent colors by 10-20% for dark mode.
Use @media (prefers-color-scheme: dark) for OS-based preference or data-theme attribute for user toggle.
Example: light mode hsl(204, 70%, 53%) becomes hsl(204, 50%, 63%) in dark mode.
Text should use #E0E0E0 not pure white.
Surface elevation shown through brightness gradients, not shadows.
Always test contrast ratios in both modes.
What is the difference between additive (RGB) and subtractive (CMYK) color mixing?
RGB (additive) is for screens - adds light (R+G+B=white).
CMYK (subtractive) is for printing - adds ink that absorbs light (C+M+Y+K=black).
RGB has wider color gamut (more vivid colors).
CMYK is smaller gamut - some RGB colors are unprintable.
For web: use RGB/HEX/HSL exclusively.
For print: convert to CMYK and request proof prints.
Bright blues and greens often show "out of gamut" warnings when converting RGB to CMYK.
This color picker works in RGB for screen use but helps understand conversion concepts.
How do I use color psychology and theory in web design?
Colors evoke psychological responses:
Blue conveys trust/professionalism (finance, healthcare, tech - Facebook, PayPal).
Red signals energy/urgency (CTAs, sales - Netflix, YouTube).
Green represents growth/health (wellness, environmental - Starbucks).
Orange shows enthusiasm/creativity (startups - Amazon).
Purple suggests luxury (cosmetics - Twitch).
Consider cultural context:
red = luck in China but danger in West.
Use complementary colors (opposites) for high contrast CTAs.
Analogous colors (adjacent) create harmonious designs.
Limit to 3-5 primary colors.
A/B test effectiveness.
Don't rely on color alone - ensure accessibility with icons and labels.
How do I optimize color performance and loading for web applications?
All color formats (HEX, RGB, HSL) have equal performance - browsers convert to internal RGB.
Use shorthand HEX (#FFF vs #FFFFFF) to save bytes.
Minify CSS for 20-30% size reduction.
Use CSS variables for theming - minimal overhead, updates all elements instantly.
Prefer CSS gradients over images (0 bytes vs 10-50KB).
Pre-calculate colors at build time rather than runtime.
For images:
Inline critical colors (<14KB) to prevent FOUC.
Debounce theme changes for better perceived performance.