Free Color Picker — HEX/RGB/HSL, Palettes & WCAG Contrast

Pick colors, generate complementary/analogous/triadic/split/monochromatic palettes, and check WCAG 2.1 contrast ratios with live previews.

#1773CF
HEX#1773CF
RGBrgb(23, 115, 207)
HSLhsl(210, 80%, 45%)

What is this calculator for?

You're building a website and the design's hero section needs a color you can describe but can't precisely specify. Or you're trying to match an existing brand color from a logo or photo. Or you need to generate a palette of complementary colors for a design. The color picker is the interactive tool for selecting, sampling, and identifying specific colors in any of the major color systems (hex, RGB, HSL, HSV).

Color picking workflows. Pick from gradient: select hue, then drag through saturation/brightness gradient to find the exact color. Eyedropper from screen: sample any pixel on your screen (Photoshop, Figma, browser dev tools). Color from hex code: enter a specific hex value to display and adjust. Generate complementary colors: from a chosen color, derive complementary, analogous, triadic, or split-complementary palettes for design work.

This tool offers picker, hex input, and palette generation. For design work where exact color matching matters, use the hex value as your single source of truth and copy that value to CSS, design tools, and brand documentation.

How to use this calculator

Click anywhere in the color gradient to pick a color. The picker displays the selected color and its values in all major systems (hex, RGB, HSL).

For specific color entry: type a hex code (e.g., #2A8FBD) or RGB values to display that exact color. Useful for verifying brand color renders correctly across systems.

For palette generation: select a base color, then choose a palette scheme: complementary (opposite on color wheel), analogous (adjacent), triadic (120° apart), split-complementary (opposite + neighbors), tetradic (rectangle pattern). The tool generates harmonious color combinations for design work.

For accessibility checking: pair two colors (foreground text + background) and check contrast ratio against WCAG AA/AAA standards. Required: 4.5:1 minimum for normal text, 3:1 for large text or UI elements.

Understanding your results

The color picker displays the selected color and outputs values in all major systems plus optional palette suggestions and accessibility notes.

Color theory basics for design work. Complementary colors (opposite on color wheel): high contrast, vibrant pairings. Used for accent colors and emphasizing elements (red text on green background — strong but should be used sparingly). Analogous colors (adjacent on wheel): subtle harmony, calming combinations. Used for backgrounds and balanced compositions. Triadic colors (120° apart on wheel): vibrant but balanced. Used in modern design where multiple colors are featured. Monochromatic: variations of single hue with different saturations and brightnesses. Used for cohesive brand looks.

Contrast ratios for accessibility. WCAG AA requires 4.5:1 for normal text on background (text larger than 14pt needs only 3:1). Examples: black on white = 21:1 (max possible). Dark gray (#333333) on white = 12.6:1. Mid gray (#999999) on white = 2.85:1 (FAILS for normal text, passes only for large text). Light blue (#3399FF) on white = 3.04:1 (FAILS). Always check; designers often choose colors that look fine to them but fail accessibility for visually-impaired users.

Common picker workflows. Brand color extraction: take a screenshot of a logo, use eyedropper to sample the pixel color, copy hex value. Photo color matching: sample colors from a photograph for design work (interior design, fashion). Brand-system enforcement: keep your brand's primary colors in a saved color palette; use the picker as a verification rather than selection tool.

A worked example

A web designer is building a marketing page for a client who provided just a logo (a PDF). She needs to extract the exact brand colors for the website.

Step 1: convert logo PDF to PNG. Step 2: open color picker, use eyedropper to sample logo's primary blue. Hex: #1A4D7A. Step 3: sample the orange accent color. Hex: #F5A623.

Step 4: generate complementary palette from primary blue. The picker shows: analogous teal (#1A7A66), analogous purple (#4D1A7A), complementary orange-yellow (#7A471A), triadic green and red. She picks the analogous teal as a tertiary brand color since it complements the existing blue + orange without competing.

Step 5: accessibility check. White (#FFFFFF) text on the brand blue background (#1A4D7A): contrast ratio 8.5:1 — passes WCAG AAA. Good for primary text. Light text on the brand orange (#F5A623): contrast 2.8:1 — FAILS. She uses dark text (#1A4D7A) on orange backgrounds instead, which passes 4.2:1.

Step 6: brand color document created with hex/RGB/HSL values for all three colors plus pairing rules. Sent to client; this becomes the design system reference for all future work.

Total color-picking time: 15 minutes. Without this systematic approach, eyeballing colors leads to slight inconsistencies between pages and components — a designer typing "blue-ish" or sampling slightly different pixels each time produces 3-5% color drift across deliverables. With the systematic approach: pixel-perfect consistency.

Related resources

For converting between color systems (hex to RGB to CMYK for print), see Color Converter. For dimensional measurement in design work, the Aspect Ratio Calculator and Pixel Ruler. WebAIM Contrast Checker verifies WCAG accessibility compliance for color pairs; Adobe Color and Coolors generate harmonious color palettes from base colors.

Frequently Asked Questions

What is a HEX color code?

A six-character (or three-character) hexadecimal value that encodes red, green, and blue channels. #RRGGBB — each pair is 00 to FF (0 to 255 in decimal). #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. Shorthand #RGB doubles each digit — #F00 is the same as #FF0000.

RGB vs HSL — which should I use?

RGB matches how screens physically render color (additive red+green+blue). HSL (hue, saturation, lightness) matches how humans think about color — pick a hue, then adjust how vivid and how light. For design work, HSL is usually more intuitive: shift the lightness slider to make a tint or shade of the same color. For code and color matching, RGB or HEX is more common.

How do I choose accessible colors?

Three rules: (1) Body text needs at least 4.5:1 contrast against its background (WCAG AA). (2) Large text (18pt+ or 14pt+ bold) needs at least 3:1 contrast. (3) Don't rely on color alone to convey meaning — pair color with text, icons, or patterns so color-blind users get the same information. Use this tool's Contrast tab to verify any combination before shipping.

What are WCAG contrast requirements?

WCAG 2.1 defines two levels. AA: 4.5:1 for normal text, 3:1 for large text. This is the legal/regulatory baseline in most jurisdictions. AAA: 7:1 for normal text, 4.5:1 for large text. This is the higher bar for content that must be accessible to users with low vision. Most consumer sites target AA; government, financial, and healthcare sites often aim for AAA on critical text.

How do I create a brand color palette?

Start with a base color (often the brand's primary). Generate three to five secondary colors using one of the relationships in this tool: analogous (calm, harmonious), complementary (high contrast, accent-friendly), or triadic (bold, multi-purpose). Then test the palette in real layouts — does the secondary stand out as a CTA but not fight the headline? Check every text-on-color combination for WCAG AA contrast before finalizing.

What's the difference between RGB and HSL color models?

RGB: defines color by amounts of red, green, blue channels (0-255 each). Maps directly to how monitors emit light. HSL: defines color by hue (color on the wheel, 0-360°), saturation (vividness, 0-100%), lightness (brightness, 0-100%). More intuitive for design — to make a color slightly darker, just reduce L. To make it slightly more red, shift H. RGB is what computers store; HSL is what designers think in. Most modern design tools (Figma, Photoshop) let you use either. CSS supports both: rgb(26, 77, 122) and hsl(208, 65%, 29%) are equivalent.

How do I sample a color from an image?

Most design tools have an eyedropper. Photoshop: 'I' key activates eyedropper. Figma: eyedropper in color picker. macOS: built-in 'Digital Color Meter' in Utilities folder. Windows: PowerToys has Color Picker (free Microsoft tool). Browser dev tools: inspect element, color swatch in CSS panel doubles as eyedropper. The technique: open the image, switch to eyedropper, click the pixel you want. The tool returns hex/RGB values. For brand work: sample multiple pixels (eyedroppers don't always hit the perfect center color due to anti-aliasing) and average or pick the most representative.

What's a good color palette for my website?

Depends on brand, audience, and emotional goal. Generally: choose 2-3 main colors (primary brand color, secondary, accent), plus neutrals (white, gray, dark gray, black) for text and backgrounds. The 60-30-10 rule: 60% of your page in one color (often a neutral background), 30% in a secondary color (often the brand color), 10% in an accent color (often used for CTAs and emphasis). Tools like Coolors.co and Adobe Color generate harmonious palettes. Avoid: too many colors (more than 4-5 in active use feels chaotic), low-contrast combinations (fail accessibility), unsaturated dull palettes (look amateur unless that's the intentional aesthetic).

Why does the same color look different on different screens?

Display calibration differences. OLED vs LCD render colors differently. Display age affects color accuracy (5+ year old displays have noticeable color drift). Manufacturer variation between models. User-adjustable settings (brightness, contrast, color temperature, 'night mode' filters). Ambient lighting changes how the eye perceives the screen. The same hex value (#1A4D7A) might appear as slightly different blue on different devices. For mission-critical color work: calibrate your display (Spyder, X-Rite tools), work in standardized lighting, and accept that audience displays will vary. Use colors with enough contrast and identity that minor display differences don't change the design's effectiveness.

What is a hex color code?

Hex (hexadecimal) representation of RGB values. Each pair of two hex digits represents one channel: #RRGGBB. R=red, G=green, B=blue. Hex digits 0-9 and A-F represent 0-15; two hex digits represent 0-255 (matching RGB 0-255 range). #FFFFFF = white (max all channels). #000000 = black (zero all channels). #FF0000 = pure red. #00FF80 = teal-green. Three-digit shorthand (#RGB) doubles each digit: #F00 = #FF0000. Standard web color notation; every browser and design tool recognizes hex codes. Some designers can recognize common hex codes at a glance from years of exposure (#000 black, #FFF white, #888 mid-gray, etc.).

Sources