Color Converter (RGB, HEX, HSL, HWB, CMYK)

Convert colors across HEX, RGB, HSL, HWB, and CMYK with integrated WCAG 2.1 contrast ratio calculations and palette generation.

Technical Architecture: Reverse-Engineering Color Space Transformations​

Modern CSS specifications (CSS Color Module Level 4 and 5) support diverse color representations. Converting between additive light models (RGB, HEX) and cylindrical coordinates (HSL, HWB) or subtractive print spaces (CMYK) requires exact mathematical normalization.

1. RGB to HSL Polar Coordinate Transformation​

Hexadecimal strings are parsed into 8-bit channel values (R, G, B between 0 and 255) and normalized to the range [0, 1]. The hue angle $H \in [0^\circ, 360^\circ)$ and saturation $S$ are computed from the chromatic delta:

function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
  const rNorm = r / 255;
  const gNorm = g / 255;
  const bNorm = b / 255;

  const max = Math.max(rNorm, gNorm, bNorm);
  const min = Math.min(rNorm, gNorm, bNorm);
  const delta = max - min;

  // Calculate Lightness
  const l = (max + min) / 2;
  let h = 0;
  let s = 0;

  if (delta !== 0) {
    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);

    switch (max) {
      case rNorm: h = (gNorm - bNorm) / delta + (gNorm < bNorm ? 6 : 0); break;
      case gNorm: h = (bNorm - rNorm) / delta + 2; break;
      case bNorm: h = (rNorm - gNorm) / delta + 4; break;
    }
    h = Math.round(h * 60);
  }

  return { h, s: Math.round(s * 100), l: Math.round(l * 100) };
}

2. Subtractive CMYK Gamut Approximation​

Converting additive RGB light into subtractive CMYK ink percentages determines black key (K) extraction:

K = 1 - max(R, G, B)
C = (1 - R - K) / (1 - K)
M = (1 - G - K) / (1 - K)
Y = (1 - B - K) / (1 - K)

Because RGB displays emit light while CMYK inks absorb light reflected from paper, high-gamut screen colors exceeding physical ink pigments should be proofed against specific ICC print profiles before physical printing.

Supported Color Spaces & Models Reference​

Client-Side Security & Zero-Server Data Isolation​

• 100% In-Browser Execution: Color calculations, palette derivations, and contrast checks execute locally in client memory. No proprietary brand palettes or UI design tokens are uploaded or tracked.
• Instant Clipboard Export: Selected color codes are copied directly to your operating system clipboard via the standard Clipboard API.
• Zero External Dependencies: Conversion logic runs purely using standard ECMAScript math without heavy external bundle payloads.

Related Tools​

Website Font Finder - Inspect Web Typography

Detect and inspect typography, font families, font weights, Google Fonts, and @font-face declarations loaded on any website.

web-developmentdeveloper-tools

Try it →

IP Tracker - What is my IP?

Instantly find out your public IP address, location, ISP, Autonomous System Number (ASN), and map coordinates. Track any IPv4 or IPv6 address for free.

web-developmentdeveloper-tools

Try it →

Link Redirect Tracer - HTTP 301, 302, 307 & 308 Hop Inspector

Trace URL redirect paths step-by-step, inspect HTTP status codes (301, 302, 307, 308), uncover affiliate tracking parameters, and detect circular redirect loops.

web-developmentdeveloper-tools

Try it →

Related Posts​

Markdown Reference Cheatsheet 2025

Markdown is a lightweight markup language that allows you to format plain text. It is widely used for documentation, writing articles, and creating web content.

Understanding Off-by-One Errors in JavaScript

A guide for senior developers on identifying and avoiding off-by-one errors in JavaScript with practical code examples.

Check History of a Specific Line in VS Code

You can check the history of a specific line in VS Code using the built-in features or the specific view. You can also install the free extension.