Interactive Color Picker & Contrast Inspector

Pick colors, inspect exact values across 5 formats, test WCAG 2.2 contrast ratios, and view immediate shades & tints.

ACTIVE COLOR

#2563EB

Brand Blue

HEX Code

Hue (221°)

Saturation (83%)

Lightness (53%)

HEX

#2563EB

RGB

37, 99, 235

HSL

221°, 83%, 53%

HSV / HSB

221°, 84%, 92%

CMYK

84%, 58%, 0%, 8%

CSS string

rgb(37 99 235)

WCAG 2.2 Contrast Ratio

Test against BG:

Live Preview Text

The quick brown fox jumps over the lazy dog.

5.17:1

Contrast Ratio

PASS

AA Normal Text

≥ 4.5:1

PASS

AA Large Text

≥ 3.0:1

FAIL

AAA Normal Text

≥ 7.0:1

PASS

UI Components

≥ 3.0:1

Shades & Tints Scale

Open in full scale generator

Lighter Tints (+ White)

#4479EE

#6390F1

#82A6F4

#A2BCF6

#C1D2F9

#E0E9FC

Darker Shades (+ Black)

#2055C9

#1A47A8

#153986

#102A65

#0B1C43

#050E22

Professional Colorimetry & Digital Inspection Guide

Mastering Color Inspection, Coordinate Models & UI Accessibility

Color is the single most immediate visual communicator in user interface design, branding, and digital media. A professional color picker is more than a simple eyedropper tool; it is a precision colorimetric workstation that bridges mathematical color models (HEX, RGB, HSL, HSV, CMYK), ensures WCAG 2.2 accessibility compliance, and translates creative inspiration into production-ready code tokens.

Digital Color Coordinate Systems Explained

Different software environments, hardware displays, and production pipelines require distinct mathematical representations of color. Here is how our inspector translates chromatic data across industry-standard formats:

HEX (Hexadecimal)Web Standard

Hexadecimal Color Notation

Base-16 shorthand representing 8-bit channels for Red, Green, and Blue (#RRGGBB). Values range from 00 (0 intensity) to FF (255 maximum intensity), yielding 16.77 million distinct sRGB colors. It is the universal standard across HTML, CSS, SVG, and design software like Figma.

RGB (Red, Green, Blue)Screen Rendering

Additive Screen Coordinates

Describes light emission directly from hardware subpixels using discrete integers (0–255) or percentage floats. Ideal for canvas rendering, WebGL shaders, image processing algorithms, and CSS rgb() / rgba() rules.

HSL (Hue, Sat, Light)Design Systems

Human-Intuitive Cylindrical Model

Organizes color by Hue angle (0°–360° on the chromatic wheel), Saturation percentage (chroma purity), and Lightness percentage (black to white). Perfect for generating programmatic hover states, active variations, and dark mode theme transitions.

HSV / HSB (Brightness)Creative Illustration

Painter's Perceptual Value

Maps Hue, Saturation, and Value/Brightness. Unlike HSL where 100% Lightness is pure white, in HSV 100% Value represents maximum chromatic brilliance. Favored by digital artists, game UI developers, and 3D texture artists in tools like Photoshop and Blender.

CMYK (Process Ink)Print Production

Subtractive Printing Model

Calculates subtractive percentages for Cyan, Magenta, Yellow, and Key (Black) offset lithography and digital presses. Crucial for ensuring brand colors translate faithfully from digital UI designs to physical packaging and stationery.

WCAG 2.2 Relative LuminanceAccessibility

Perceptual Optical Photometry

Weights green (71.5%), red (21.2%), and blue (7.2%) wavelengths to match human retinal sensitivity. Forms the mathematical foundation for WCAG contrast ratios, ensuring legibility for users with visual impairments.

WCAG 2.2 Contrast Compliance in Modern UI Engineering

The Web Content Accessibility Guidelines (WCAG 2.2) mandate strict luminance contrast ratios between foreground text and background surfaces to guarantee readability for all users, including those with cataracts, low visual acuity, or color vision deficiencies. When inspecting any color in our tool, pay close attention to these compliance thresholds:

WCAG Level AA — Body Text

4.5 : 1

Minimum required contrast for standard body text (below 18pt regular or 14pt bold). Essential for paragraphs, table cells, and form inputs.

WCAG Level AA — Large Text & UI

3.0 : 1

Required contrast for large typography (18pt+ regular or 14pt+ bold), clickable icons, button borders, and focus rings.

WCAG Level AAA — Enhanced

7.0 : 1

Enhanced contrast standard for government portals, medical platforms, and high-legibility enterprise dashboards.

For dedicated side-by-side color testing across custom foreground and background combinations, explore our comprehensive Contrast Checker.

Building Cohesive Design Systems with the 60-30-10 Rule

A single color choice is the foundation for an entire design system. Professional product designers use the classic 60-30-10 distribution rule to ensure balanced visual hierarchy without overwhelming users:

60% Canvas & Surfaces

Dominant Background Space

Provides breathing room and structural clarity. In light mode, this is typically an ultra-light tint (such as #F8FAFC or #FFFFFF); in dark mode, a deep slate (#0F172A). It establishes negative space and minimizes cognitive fatigue.

30% Secondary Elements

Structural Cards & Typography

Forms navigation sidebars, card containers, divider borders, modal backdrops, and secondary headers. Balances the dominant canvas and provides grouping structure for content blocks.

10% Accent Call-to-Actions

High-Impact Focal Points

Reserved strictly for primary conversion buttons, notification badges, active navigation indicators, and progress bars. High-chroma saturation ensures instant visual recognition without diluting user attention.

Developer Code Integration & Multi-Platform Tokens

Modern frontend engineering requires fast, copyable code variables across styling languages. Seamlessly copy color tokens into your framework of choice:

CSS Custom Properties

--primary-color: #2563eb;

--primary-rgb: 37, 99, 235;

--primary-hsl: 221deg 83% 53%;

Tailwind CSS Config

'brand-primary': '#2563eb',

'brand-hover': '#1d4ed8',

'brand-surface': '#eff6ff',

Explore Complementary Color Suite Tools

Expand your creative workflow with our connected suite of interactive color design utilities:

Palette Generator

Generate 5-color optical harmonies with spacebar randomization.

Gradient Generator

Craft multi-stop linear and radial CSS gradients with live preview.

Shades & Tints

Generate 9-step monochromatic scales for UI design systems.

Contrast Checker

Verify WCAG 2.2 AA & AAA contrast ratios between any two colors.

Image Color Picker

Extract dominant palettes and sample pixel colors from images.

Color Converter

Batch convert between HEX, RGB, HSL, HSV, CMYK, and LAB codes.

Curated Palettes

Browse 800+ categorized color schemes for web, UI, and branding.

CSS Gradients

Explore multi-stop gradient blends with instant CSS code copying.

Color Inspection & Digital Colorimetry FAQs

Answers to common questions regarding digital color models, color spaces, accessibility auditing, and frontend implementation.

How does this online color picker convert HEX, RGB, HSL, HSV, and CMYK?

Our color picker operates on mathematical color space conversion algorithms. When you choose a color via the visual spectrum canvas or numerical inputs, the engine computes normalized RGB values (0 to 1), maps them to 8-bit hexadecimals (00 to FF), calculates cylindrical hue angles with saturation and lightness percentages (HSL/HSV), and models subtractive ink densities (CMYK) in real time without rounding errors.

What is the difference between HSL and HSV (HSB) color models?

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are cylindrical representations of the RGB color space. In HSL, pure white occurs when Lightness reaches 100%, regardless of Saturation. In HSV, Value represents the brightness of the color relative to its maximum possible illumination; white is achieved when Saturation is 0% and Value is 100%, while pure saturated chromatic colors have a Value of 100% and Saturation of 100%. Designers often prefer HSL for tonal balance and HSV for illustrative digital painting.

How does the built-in WCAG 2.2 contrast inspector evaluate color accessibility?

The tool calculates relative luminance (L) using the standard CIE 1931 sRGB formula (0.2126R + 0.7152G + 0.0722B after gamma expansion). It then determines the contrast ratio (L1 + 0.05) / (L2 + 0.05) against pure white (#FFFFFF) and dark slate (#0F172A). It instantly indicates compliance with WCAG 2.2 Level AA (4.5:1 for body text, 3:1 for large text and UI components) and Level AAA (7:1 for body text, 4.5:1 for headings).

Can I extract colors directly from an image or screenshot?

Yes. In addition to using the visual canvas and sliders in this color picker, you can use our dedicated Image Color Picker to upload any PNG, JPEG, SVG, or WebP graphic, click anywhere on the visual preview, and sample precise pixel colors with magnification loupe precision.

What is the difference between sRGB and Display P3 wide-gamut color spaces?

sRGB is the traditional standard color gamut supported by virtually all digital screens, web browsers, and operating systems. Display P3 offers an approximately 25% wider color spectrum, particularly in vivid greens, intense magentas, and deep saturated reds. Modern CSS supports wide-gamut definitions using color(display-p3 r g b) and oklch(l c h). Our picker provides standard sRGB hex/RGB codes compatible with all production environments.

How can I generate tints, shades, and monochromatic scales from my chosen color?

Once you inspect your color code, you can use our built-in Shades and Tints generator or navigate to the dedicated Shades and Tints Tool to produce balanced 9-step tonal ramps (from 50-tint highlights to 900-shade deep anchors) tailored for design systems like Tailwind CSS and Material Design.

How do I create harmonious color schemes starting from a single picked color?

You can copy your inspected HEX code and paste it directly into our Color Palette Generator. The generator calculates exact optical harmonies—complementary, analogous, triadic, split-complementary, and tetradic palettes—and allows you to lock colors while generating balanced supporting tones.

Why do print CMYK colors look different from digital screen RGB colors?

RGB is an additive color model emitted by digital displays using light (red, green, blue). CMYK is a subtractive color model used in commercial printing presses (cyan, magenta, yellow, black) that absorbs and reflects ambient light. Because the CMYK color gamut is smaller than the RGB gamut, highly saturated digital neon colors will naturally shift to slightly more muted tones when printed on paper.