Color Picker & Gradients

Translating a brand hex code into an hsl() variable, grabbing an exact pixel color off your screen, or verifying whether white button text passes WCAG AA contrast shouldn't require opening three different tabs. This online color picker combines an interactive 2D saturation-lightness canvas, native browser Eyedropper support, instant HEX/RGB/HSL/CMYK conversion, automatic tint and shade scales, color harmony wheels, and a live accessibility contrast tester in one fast workspace.

Everyday moments where designers and developers reach for a color utility

Writing modern stylesheets and design systems means constantly moving between color spaces and accessibility rules:

• Converting HEX to RGB or HSL for CSS variables: Turning a static hex code like #2563EB into rgb(37, 99, 235) or hsl(217, 91%, 53%) so you can apply alpha opacity (rgb(37 99 235 / 0.15)) or adjust lightness dynamically in CSS.
• Sampling a color from anywhere on your screen: Using the native browser EyeDropper API to click a button, logo, or reference site on your monitor and copy its exact hex value.
• Building a 10-step UI scale (50 to 900): Generating lighter hover tints and darker active border shades from a single primary brand color without hand-picking each step.
• Verifying WCAG AA and AAA text readability: Checking whether your chosen badge text color against a pastel background meets the minimum 4.5:1 contrast ratio for normal body text or 3.0:1 for large headings.

How to use the online color picker and contrast checker step by step

Method 1: Sample a Screen Pixel & Convert Between HEX, RGB, HSL, and CMYK

1. Pick or paste a color: Drag the crosshair across the 2D saturation-lightness canvas, slide the rainbow Hue bar, paste any HEX / RGB / HSL value into the input boxes, or click Pick from Screen (Eyedropper) on Chromium desktop browsers to sample any pixel visible on your monitor.
2. Copy synchronized CSS & print values: As you move the picker, HEX (#2563EB), RGB (rgb(37, 99, 235)), HSL (hsl(217, 91%, 53%)), and CMYK update simultaneously—click the copy icon next to any format to copy it to your clipboard.

Method 2: Generate UI Tint/Shade Scales & Audit WCAG 2.1 Accessibility Contrast

1. Inspect generated Tints, Shades, and Harmonies: Scroll to the palette rows below the picker to view evenly stepped Tints (mixed toward white), Shades (mixed toward black), and color wheel harmonies (Complementary, Analogous, Triadic, Split-Complementary). Click any swatch to copy its hex code.
2. Test foreground vs. background readability: In the WCAG Contrast Checker panel, test your active color against light and dark text (or enter a custom text/background pair) to inspect the live relative luminance ratio (e.g., 5.44:1) and verify WCAG AA (≥ 4.5:1 normal / ≥ 3.0:1 large) and AAA (≥ 7.0:1) compliance.

Key features built for frontend and UI workflows

Real-time bi-directional HEX, RGB, HSL, and CMYK sync

Type or paste a value into any format box and every other representation updates on the same keystroke. The mathematical conversions follow standard sRGB and subtractive CMYK formulas so print approximations and CSS declarations stay aligned.

Native Chromium EyeDropper integration

On browsers that support the window.EyeDropper API (Chrome, Edge, Brave, Opera), clicking Pick from Screen opens a pixel-level magnifying loupe that can sample colors not just inside the browser tab, but across any window visible on your desktop.

Automatic tints, shades, and color harmony generators

Instead of guessing what a 10% darker hover state looks like, the tool calculates evenly spaced lightness steps alongside classic color-theory harmonies (Complementary at +180°, Analogous at ±30°, Triadic at ±120°).

Built-in WCAG 2.1 relative luminance and contrast ratio calculator

Using the official W3C relative luminance formula (L = 0.2126 R + 0.7152 G + 0.0722 * B after gamma expansion), the tool calculates the exact contrast ratio between (L1 + 0.05) / (L2 + 0.05) and grades it for AA Normal (≥ 4.5:1), AA Large (≥ 3.0:1), and AAA Normal (≥ 7.0:1).

A real example: fixing an inaccessible button color for WCAG AA compliance

Suppose a brand guideline specifies a bright teal accent #14B8A6 (rgb(20, 184, 166), hsl(173, 80%, 40%)) and a developer places white text (#FFFFFF) on top of it for a primary checkout button.

1. Paste #14B8A6 into the HEX input of the Online Color Picker.
2. Look at the Contrast Checker panel against white (#FFFFFF): the calculated ratio is 2.48:1, which fails both WCAG AA Normal (4.5:1) and WCAG AA Large (3.0:1).
3. Scroll to the generated Shades row for #14B8A6 and click two steps darker: #0F766E (rgb(15, 118, 110), hsl(175, 77%, 26%)).
4. The contrast ratio against white jumps to 5.44:1, passing WCAG AA for both normal and large text while keeping the exact same teal hue angle (~174°).
5. Click to copy #0F766E and hsl(175, 77%, 26%) for your CSS file.

Practical tips and limitations

• EyeDropper browser support: The native desktop screen-sampling EyeDropper API is built into Chromium-based browsers on desktop (Chrome, Edge, Brave). Firefox and mobile Safari do not expose the system-wide EyeDropper API; if you want to sample colors from an existing photo or screenshot on those browsers, use Color Palette Extractor.
• CMYK values are unprofiled math conversions: The CMYK readout uses the standard device-independent RGB-to-CMYK formula rather than a specific press ICC profile (like Coated FOGRA39 or US Web Coated SWOP v2). Always check an ICC proof before sending commercial print jobs to press.

Privacy and local execution

All color space math, luminance calculations, and screen eyedropper picks run 100% locally in your browser with zero external API or network requests.

Understanding sRGB gamma expansion in the WCAG 2.1 contrast equation

Many developers wonder why two colors with a 50% difference in HSL Lightness do not always pass WCAG contrast checks. Human eyes are far more sensitive to green wavelengths (~71.5% of perceived luminance) than to red (~21.3%) or blue (~7.2%):

• Linearizing sRGB channels: Each 8-bit channel (R, G, B from 0 to 255) is divided by 255. Values ≤ 0.04045 are divided by 12.92, while larger values are expanded via ((C + 0.055) / 1.055) ^ 2.4.
• Weighted relative luminance (L): The linearized channels are summed as L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin. Because pure blue (#0000FF) contributes only 0.0722 to luminance while pure green (#00FF00) contributes 0.7152, white text is readable on pure blue (8.59:1 pass) yet unreadable on pure green (1.37:1 fail)—even though both sit at 50% lightness in HSL!

Related tools

Want to pull a complete color scheme and pixel-by-pixel eyedropper values from an uploaded photograph or logo? Open Color Palette Extractor. Once your brand colors are set, generate matching app icons with Favicon Generator or styled QR codes with QR Code Generator. Read our guide on how to use the online color picker.