CSS color-mix(): Browser में Natively रंग Blend करें

वर्षों तक, CSS में color variants generate करने के लिए या तो हर shade को हाथ से hardcode करना पड़ता था या JavaScript और chroma.js जैसी color manipulation library का सहारा लेना पड़ता था। CSS color-mix() function इसे बदल देता है। यह एक native CSS function है, अब सभी प्रमुख browsers में supported, जो दो colors को एक specified proportion में blend करता है — सीधे आपकी stylesheet में, JavaScript के बिना, preprocessing के बिना।

color-mix() क्या है?

color-mix() एक CSS Color Level 5 function है जो दो color values और एक mixing proportion लेता है, और resulting blended color return करता है। यह CSS का equivalent है दो paints को एक साथ मिलाने के, लेकिन एक critical extra parameter के साथ: color space जिसमें blending होती है।

:root {
  --brand-blue: #2563EB;

  /* Tints — white के साथ mix */
  --brand-blue-light:   color-mix(in oklch, var(--brand-blue) 60%, white);
  --brand-blue-lighter: color-mix(in oklch, var(--brand-blue) 30%, white);

  /* Shades — black के साथ mix */
  --brand-blue-dark:    color-mix(in oklch, var(--brand-blue) 80%, black);
  --brand-blue-darker:  color-mix(in oklch, var(--brand-blue) 50%, black);
}

Base blue #2563EB एक बार परिभाषित होता है। Tints और shades इससे derive होते हैं।

Syntax और Parameters

color-mix() का full syntax:

color-mix(in <color-space>, <color1> [<percentage>]?, <color2> [<percentage>]?)

Color Space Parameter

in <color-space> argument required है। Valid options में शामिल हैं:

• srgb — standard RGB में blend (सबसे परिचित, लेकिन muddy midpoints की संभावना)
• hsl — HSL cylinder का follow करते हुए blend
• oklch — OKLCH में blend (अधिकांश उपयोग के लिए recommended)
• display-p3 — Display P3 wide gamut में blend

Different Color Spaces में Mixing

sRGB में Mixing

sRGB blending Red, Green और Blue channels को linearly interpolate करके काम करता है। Complementary colors के लिए अक्सर desaturated, grayish midpoint produce होता है।

/* sRGB में orange-red और blue mixing */
color-mix(in srgb, #FF5733 50%, #3498DB 50%)
/* Result: एक muted, brownish purple */

HSL में Mixing

HSL blending hue wheel के साथ interpolate करता है, जो unexpected intermediate colors का कारण बन सकता है।

OKLCH में Mixing

OKLCH blending अधिकांश practical use cases के लिए recommended approach है।

/* OKLCH में Orange-red और blue mix */
color-mix(in oklch, #FF5733 50%, #3498DB 50%)
/* Result: एक vivid magenta-purple — perceptually halfway */

#FF5733 और #3498DB को OKLCH में 50/50 mix करने से एक vibrant, saturated intermediate produce होता है।

व्यावहारिक Use Cases

Hover और Active States बनाना

:root {
  --btn-bg: oklch(0.55 0.22 250);
}

.btn { background-color: var(--btn-bg); }

.btn:hover {
  background-color: color-mix(in oklch, var(--btn-bg) 85%, black);
}

.btn:active {
  background-color: color-mix(in oklch, var(--btn-bg) 70%, black);
}

.btn:disabled {
  background-color: color-mix(in oklch, var(--btn-bg) 40%, white);
  opacity: 0.6;
}

Semantic Color Scales बनाना

:root {
  --brand: oklch(0.55 0.22 250);

  --success: color-mix(in oklch, oklch(0.65 0.22 145) 85%, var(--brand) 15%);
  --warning: oklch(0.75 0.18 70);
  --danger: oklch(0.62 0.24 25);

  --success-bg: color-mix(in oklch, var(--success) 12%, white);
  --warning-bg: color-mix(in oklch, var(--warning) 12%, white);
  --danger-bg:  color-mix(in oklch, var(--danger)  12%, white);
}

Dark Mode Color Derivation

@media (prefers-color-scheme: dark) {
  :root {
    --surface-base:     #09090b;
    --surface-elevated: color-mix(in oklch, var(--brand) 8%, #09090b);
    --surface-overlay:  color-mix(in oklch, var(--brand) 12%, #09090b);
  }
}

Browser Support और Fallbacks

2026 तक, color-mix() पूरी तरह से supported है: - Chrome/Edge: version 111 से (March 2023) - Firefox: version 113 से (May 2023) - Safari: version 16.2 से (December 2022)

Progressive Enhancement Fallback

:root {
  /* पुराने browsers के लिए Fallback */
  --btn-hover: #1D4ED8;

  /* Modern browsers के लिए computed value से override */
  --btn-hover: color-mix(in oklch, var(--btn-bg) 85%, black);
}

मुख्य निष्कर्ष

• color-mix() CSS में natively दो colors blend करता है, कई use cases के लिए JavaScript की आवश्यकता समाप्त करता है।
• in <color-space> argument controls करता है कि blending कहाँ होती है और result को dramatically affect करती है। oklch उपयोग करें।
• सबसे practical use cases: interactive states, semantic color derivation, dark mode surface tinting।
• Browser support early 2023 से सभी modern browsers को cover करता है।
• अपने brand colors को color-mix() में उपयोग करने से पहले OKLCH में convert करने के लिए Color Converter का उपयोग करें।