Color Picker & Multi-Format Converter
Convert bidirectionally between HEX, RGB, HSL, and CMYK formats. Inspect WCAG 2.1 contrast ratios and generate harmonic UI palettes in real time.
Harmonic Color Schemes
Monochromatic Tints & Shades
1. Digital Color Spaces and Format Architecture
Digital displays construct visual color through additive light combinations of red, green, and blue pixels. In frontend web architecture, four primary color formats serve distinct operational purposes:
- Hexadecimal (HEX): A base-16 representation mapping 8-bit color channels into 6 or 8 digits (
#RRGGBBor#RRGGBBAA). Ideal for compact CSS variable declarations and design tokens. - RGB / RGBA: Defines integer light values from
0to255per channel, with an optional alpha channel for opacity (0.0to1.0). Commonly used in dynamic canvas animations and WebGL. - HSL / HSLA: Represents color along cylindrical coordinates: Hue (0°–360° on the color wheel), Saturation (0%–100%), and Lightness (0%–100%). HSL is the industry standard for creating programmatic design systems (such as Tailwind CSS tonal palettes) because adjusting lightness creates natural tints and shades without shifting hue.
- CMYK: A subtractive four-color printing standard representing percentages of Cyan, Magenta, Yellow, and Key (Black) inks.
2. Technical Comparison of Color Formats
| Format | Sample Syntax | Primary Medium | Key Advantage |
|---|---|---|---|
| HEX / HEXA | #3B82F6 / #3B82F6CC |
Web & Mobile UI | Compact string notation, universal token standard |
| RGB / RGBA | rgb(59, 130, 246) |
Digital Displays & GPU | Direct mapping to screen hardware sub-pixels |
| HSL / HSLA | hsl(217, 91%, 60%) |
Design Systems & CSS | Human-intuitive adjustments for hover states and dark themes |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
Commercial Offset Print | Physical ink mixing guidance for packaging and paper |
3. WCAG 2.1 Contrast Standards Explained
The Web Content Accessibility Guidelines (WCAG) 2.1 dictate minimum contrast ratios between text and background colors to protect readability for users with low vision or color deficiencies:
- Level AA (Minimum): Requires a contrast ratio of at least 4.5:1 for regular body text, and 3.0:1 for large text (18pt / 24px regular or 14pt / 18.5px bold).
- Level AAA (Enhanced): Requires a contrast ratio of at least 7.0:1 for regular body text, and 4.5:1 for large text.
This tool calculates the exact relative luminance of your chosen color against pure black (#000000) and pure white (#ffffff) to determine accessibility compliance instantly.
4. Practical Limitations & Printing Notes
- Subtractive CMYK Limitations: The CMYK figures displayed are mathematical conversions from digital sRGB coordinates. Because physical printing depends on paper absorbency, printer dot gain, and ink gamuts, these numbers are approximations. Always convert through calibrated ICC color profiles (e.g., SWOP or GRACoL) before sending artwork to a commercial press.
- EyeDropper Browser Support: The native Pick from Screen button requires the modern desktop EyeDropper API (available in Chromium browsers like Chrome, Edge, and Opera). On Firefox and Safari, users can use the visual color picker or paste text codes directly.
5. Frequently Asked Questions
How do I convert a 3-character HEX code to 6 characters?
A 3-character hex code like #38F is shorthand notation where each character is duplicated. #38F expands mathematically to #3388FF. Typing #38F into our HEX field automatically normalizes and parses the full 6-digit equivalent.
What is the difference between HSL and HSV/HSB?
Both models use cylindrical coordinates, but HSL uses Lightness (where 100% lightness is always pure white regardless of hue), whereas HSV/HSB uses Value/Brightness (where 100% brightness matches the brightest shade of that hue). CSS natively supports HSL.
Are my color choices or palettes saved on remote servers?
No. All conversions, palette calculations, and contrast algorithms run 100% locally inside your browser via JavaScript. No color selections or telemetry are uploaded.