HEX / RGB / HSL

Online Color Picker (HEX, RGB, HSL & Palette Generator)

Explore, select, and convert colors across all major web formats with mathematical precision. Whether you need exact HEX codes for web design, RGB/RGBA values for CSS styling, HSL/HSV coordinates for animations, or CMYK for print media, get instant multi-format conversion in real time.

Features an interactive 2D color canvas, visual spectrum slider, native Eyedropper API support, image-based color extraction, WCAG 2.1 accessibility contrast score calculation, and a persistent palette history. Completely client-side and free.

#2563EB

Color Formats & Values

HEX

#2563EB

RGB

rgb(37, 99, 235)

HSL

hsl(221, 83%, 53%)

HSV

hsv(221, 84%, 92%)

CMYK

cmyk(84%, 58%, 0%, 8%)

WCAG 2.1 Accessibility Contrast

On White Background5.17:1

Sample Text Preview

AA PassAAA Fail

On Black Background4.06:1

Sample Text Preview

AA FailAAA Fail

Recent Color History

100% client-side color calculations. Images and color values are never uploaded.

AdSense Slot (top-banner)Pre-allocated container to prevent CLS

How It Works (Step-by-Step)

1. Select or Enter a Color

Click on the visual color picker gradient, adjust the hue slider, use the Eyedropper tool, or paste any HEX, RGB, or HSL value.

2. Check Contrast & Formats

Inspect the live conversion values across HEX, RGB, HSL, HSV, and CMYK, and verify WCAG AA/AAA readability against light and dark backgrounds.

3. Copy Code or Save Palette

Click the copy icon next to any color format or save your favorites to your local browser color palette for later reference.

Key Features & Advantages

Full Multi-Format Conversion

Converts instantly between HEX (#3b82f6), RGB rgb(59, 130, 246), HSL hsl(217, 91%, 60%), HSV, and CMYK with 100% accuracy.

WCAG Accessibility Analysis

Calculates real-time contrast ratios against white and black text to ensure compliant readability (AA / AAA ratings).

Eyedropper & Image Color Picker

Sample any color directly from your screen or uploaded photos without sending images to any server.

Palette History & Randomizer

Store your recently picked shades and generate harmonious random color inspirations with one click.

AdSense Slot (in-content)Pre-allocated container to prevent CLS

Frequently Asked Questions

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

HEX is a 6-character hexadecimal representation of red, green, and blue (e.g. #FF5733). RGB defines the color using 0-255 intensity values for Red, Green, and Blue. HSL represents Hue (0-360 degrees on the color wheel), Saturation (0-100%), and Lightness (0-100%), which is often more intuitive for human design.

How is the WCAG contrast ratio calculated?

The tool computes relative luminance according to W3C Web Content Accessibility Guidelines (WCAG 2.1). A contrast ratio of 4.5:1 is required for normal text (AA level), and 7:1 for enhanced accessibility (AAA level).

Can I extract colors from an uploaded photo?

Yes. You can load any image into the tool to pick exact pixel colors using a local HTML5 canvas with complete privacy.

Related Online Tools

Free Online Favicon Generator

Generate all required favicon sizes from any image. Create 16×16, 32×32, 48×48, 180×180, 192×192, and 512×512 PNG favicons plus ICO format — free, instant, browser-based.

Resize Images Online for Free

Resize images to exact pixel dimensions online. Aspect ratio lock, multiple output formats (PNG, JPG, WebP), and instant download. 100% browser-based.

Free Online QR Code Generator

Create high-resolution QR codes for URLs, text, and contact info. Download in PNG or vector SVG format. 100% free and client-side.

Online Base64 Encoder & Decoder

Encode and decode Base64 strings with full UTF-8 Unicode support. Free developer tool with instant swap, copy, and client-side processing.