CMYK to HWB Converter

Convert CMYK to HWB

Instantly convert print-ready CMYK values into HWB (Hue, Whiteness, Blackness)—the intuitive, human-readable syntax introduced in CSS Color Module Level 4.

This tool is designed for developers and designers bridging the gap between print assets and web implementation. It runs 100% client-side, ensuring your proprietary color data never leaves your device.

• Batch Processing: Convert entire palettes in seconds.
• Standard Syntax: Outputs valid CSS hwb() strings.

Quick Start

1. Paste your CMYK strings into the input box (one per line).
2. Copy the resulting HWB values.
3. Use directly in your CSS or design tool.

Single Color Example

Input:

cmyk(100%, 0%, 0%, 0%)

Output:

hwb(180 0% 0%)

Batch Example

Input:

cmyk(0%, 100%, 100%, 0%)  
cmyk(50%, 0%, 50%, 0%)  
cmyk(10%, 10%, 10%, 100%)

Output:

hwb(0 0% 0%)  
hwb(120 50% 0%)  
hwb(0 0% 100%)

Why use HWB for the Web?

While CMYK is the gold standard for physical ink, HWB is often superior for digital interfaces.

HWB (Hue, Whiteness, Blackness) is designed to match how humans think about mixing paint, but adapted for light.

• Hue: The base pigment (0–360°).
• Whiteness: How much white paint you mix in (Tint).
• Blackness: How much black paint you mix in (Shade).

The “Mental Model” Advantage

If you are building a design system, HWB is often easier to manipulate programmatically than HSL or RGB.

• Need a darker button hover state? Just increase the Blackness.
• Need a pastel background? Keep the hue, drastically increase the Whiteness.

Understanding the Conversion (The Technical Details)

Converting CMYK (Subtractive/Ink) to HWB (Additive/Light) is complex because physical ink behaves differently than pixels.

1. The Mathematical Formula

This tool uses the standard “naive” conversion algorithm suitable for CSS logic. It assumes a generic mapping where ink subtracts light linearly.

1. CMYK to RGB:
   $$ R = 255 \times (1 - C) \times (1 - K) $$
   $$ G = 255 \times (1 - M) \times (1 - K) $$
   $$ B = 255 \times (1 - Y) \times (1 - K) $$
2. RGB to HWB:
   The RGB values are then converted to Hue, Whiteness, and Blackness based on the min/max channel dominance.

2. The Gamut Mismatch (Important!)

• CMYK Gamut: Can produce deep, rich cyans and teals that screens struggle to render perfectly.
• Screen Gamut (sRGB): Can produce neon greens and bright blues that are impossible to print with ink.

Note: Because this tool uses a mathematical conversion rather than an ICC Color Profile (like .icc or .icm files used in Photoshop), the colors are a closest logical approximation. For critical print-production work, always consult your specific printer’s color profiles.

Troubleshooting & Common Errors

If your output looks wrong or fails to generate, check these common issues:

1. Missing Percentage Signs

The CSS standard for cmyk() requires percentages.

• ✅ Valid: cmyk(50%, 0%, 20%, 10%)
• ❌ Invalid: cmyk(50, 0, 20, 10)

2. Out of Bounds

Ensure all values are between 0% and 100%.

• CMYK is capped at 100% ink coverage per channel.
• Negative values are not mathematically valid for this conversion.

3. Whitespace Issues

While the converter trims standard whitespace, ensure you are pasting one color string per line.

Pro Tip for Designers: Creating Palettes

If you have a brand color in CMYK and need to create a web palette:

1. Convert the main brand CMYK color to HWB here.
2. Lock the Hue (the first number).
3. Vary the Whiteness and Blackness to create your accessible text colors, border colors, and background tints.
4. This ensures all your web colors stay in the same “family” as your print brand.