Color Studio – Picker, Converter & Palettes

Computer Graphics & Colorimetry Guide

Digital Color Models (RGB, HSL, CMYK) & WCAG 2.1 Contrast Theory

Digital monitors and physical print media operate on fundamentally different physics of light and color spaces. Electronic displays (smartphones, monitors, OLED TVs) use additive RGB light mixing (sRGB, Display P3), whereas offset printing utilizes subtractive CMYK ink absorption.

The cylindrical HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) models were engineered to align with intuitive human color perception, isolating the 360° chromatic angle, saturation intensity, and perceived lightness into separate independent axes.

This tool applies floating-point trigonometry for color space coordinate transformation alongside W3C relative luminance equations, delivering real-time conversions, mathematical color harmonies, and accessibility compliance auditing entirely on your device.

Two-Way 5-Format Synchronization

Bidirectional real-time conversion across HEX, RGB, HSL, CMYK, and HSV guarantees seamless interoperability between Figma design tokens and production CSS code.

Geometric Color Harmony Engine

Applies Johannes Itten’s color wheel geometry to compute Complementary (180°), Analogous (±30°), Triadic (120°), and Monochromatic palette variations.

W3C WCAG 2.1 Contrast Auditing

Evaluates relative luminance ( $L$ ) against pure white and dark backgrounds to audit Level AA (4.5:1) and AAA (7:1) legibility standards.

Interactive 2D Saturation / Lightness Canvas

Explore nuanced tonal variations with smooth mouse dragging and granular Alpha transparency controls.

1. Comparison of Digital Color Models & Representations

Structural characteristics and data ranges of the 5 major digital color representation models.

Color Model	Channel Structure	Data Range	Primary Application	Mixing Physics
HEX (Hexadecimal)	#RRGGBB / #RRGGBBAA	00 ~ FF (0 ~ 255)	HTML/CSS web standard, UI design systems	Additive sRGB compression
RGB / RGBA	Red, Green, Blue, Alpha	0 ~ 255, Alpha 0.0 ~ 1.0	Display hardware, WebGL, Canvas 2D	Additive primary light mixing
HSL / HSLA	Hue, Saturation, Lightness	H: 0~360°, S/L: 0~100%	CSS dynamic theming, UI design tokens	Cylindrical perceptual model
HSV / HSB	Hue, Saturation, Value/Brightness	H: 0~360°, S/V: 0~100%	Photoshop, Figma 2D color picker engines	Conical visual model
CMYK	Cyan, Magenta, Yellow, Key (Black)	0 ~ 100%	Offset printing, physical packaging, print publications	Subtractive ink absorption

2. Mathematical Formulas for Color Conversions & Relative Luminance

① RGB Normalization ( $r, g, b \in [0, 1]$ ):

- $r = \frac{R}{255}, \quad g = \frac{G}{255}, \quad b = \frac{B}{255}$

② RGB $\rightarrow$ HSL Derivation ( $M = \max(r,g,b), m = \min(r,g,b), d = M - m$ ):

- Lightness: $L = \frac{M + m}{2}$

- Saturation: $S = \begin{cases} 0 & \text{if } d = 0 \\ \frac{d}{1 - |2L - 1|} & \text{if } d > 0 \end{cases}$

- Hue Angle: $H = \begin{cases} 0^\circ & \text{if } d = 0 \\ 60^\circ \times \left( \frac{g - b}{d} \bmod 6 \right) & \text{if } M = r \\ 60^\circ \times \left( \frac{b - r}{d} + 2 \right) & \text{if } M = g \\ 60^\circ \times \left( \frac{r - g}{d} + 4 \right) & \text{if } M = b \end{cases}$

③ RGB $\rightarrow$ CMYK Print Conversion:

- $K = 1 - \max(r, g, b)$

- $C = \frac{1 - r - K}{1 - K}, \quad M = \frac{1 - g - K}{1 - K}, \quad Y = \frac{1 - b - K}{1 - K} \quad (\text{when } K < 1)$

④ W3C WCAG 2.1 Relative Luminance ( $L$ ) & Contrast Ratio Formulas:

- For each normalized channel $c \in \{r, g, b\}$ :

$c_{lin} = \begin{cases} \frac{c}{12.92} & \text{if } c \le 0.04045 \\ \left( \frac{c + 0.055}{1.055} \right)^{2.4} & \text{if } c > 0.04045 \end{cases}$

- Relative Luminance: $L = 0.2126 r_{lin} + 0.7152 g_{lin} + 0.0722 b_{lin}$

- Contrast Ratio: $CR = \frac{L_1 + 0.05}{L_2 + 0.05} \quad (L_1 > L_2)$

- General body text requires $CR \ge 4.5:1$ (AA) and $CR \ge 7:1$ (AAA).

3. Color Harmony Theory & Palette Construction Mechanics

① Complementary Harmony ( $H + 180^\circ$ ):

- Pairs colors on opposite sides of the color wheel to create bold visual tension and maximum impact for Call-To-Action (CTA) elements.

② Analogous Harmony ( $H - 30^\circ, H, H + 30^\circ$ ):

- Combines neighboring hues on the wheel for soothing visual cohesion and natural tonal rhythm.

③ Triadic Harmony ( $H, H + 120^\circ, H + 240^\circ$ ):

- Equilateral triangle distribution across the wheel providing vibrant yet balanced multi-color accents.

④ Monochromatic Harmony (Identical $H$ , Varying $S$ and $L$ ):

- Adjusts saturation and lightness across a single hue for sophisticated, minimal UI themes.

4. Code Snippets for Dynamic Color Manipulation in Web Development

CSS3 (Modern CSS Color Functions & Variables)

:root {
  --primary-hue: 235;
  --primary-sat: 85%;
  --primary-light: 48%;
  
  /* HSL-based dynamic theme tokens */
  --color-primary: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
  --color-primary-hover: hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) - 8%));
  --color-primary-subtle: hsl(var(--primary-hue), var(--primary-sat), 96%);
  
  /* Modern CSS color-mix() overlay */
  --color-overlay: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

JavaScript (Hex to RGB & WCAG Contrast Calculator)

// Relative luminance and contrast ratio calculator
function getLuminance(hex) {
  const rgb = hex.replace('#', '').match(/.{2}/g).map(x => parseInt(x, 16) / 255);
  const [r, g, b] = rgb.map(c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function getContrastRatio(hex1, hex2) {
  const l1 = getLuminance(hex1);
  const l2 = getLuminance(hex2);
  const [lighter, darker] = l1 > l2 ? [l1, l2] : [l2, l1];
  return ((lighter + 0.05) / (darker + 0.05)).toFixed(2);
}

Frequently Asked Questions (FAQ)

Q.What is the difference between 6-digit and 8-digit HEX codes?

A 6-digit HEX code (#RRGGBB) contains 24-bit RGB color information, while an 8-digit HEX code (#RRGGBBAA) adds an extra 2-digit alpha channel for opacity (00 = fully transparent, FF = fully opaque).

Q.What do WCAG Level AA and AAA compliance mean?

Level AA requires a minimum 4.5:1 contrast ratio for normal body copy (3.0:1 for large text). Level AAA is an enhanced standard requiring 7.0:1 for normal body text (4.5:1 for large text).

Q.Why do RGB screen colors look different when printed in CMYK?

RGB displays emit light across a wide color gamut. CMYK printing absorbs light using physical inks on paper, which cannot fully reproduce the vibrant, high-saturation neon greens and bright blues of electronic screens.

Q.Why is HSL preferred over RGB for UI design systems?

RGB requires balancing three light channels simultaneously, making brightness adjustments unintuitive. In HSL, you simply keep Hue constant and alter Lightness ( $L$ ) or Saturation ( $S$ ) to create hover states and dark mode palettes.

Q.Is my color selection data uploaded to any server?

No. All trigonometric conversions, harmony algorithms, and contrast checks run locally in your browser JavaScript engine.

Color Picker

Color Formats & Values

Generated Harmonies

WCAG Contrast Checker

Color History & Swatches

Client-Side Processing