ज़्यादा रंगों और नए स्पेस को ऐक्सेस करें

यह दस्तावेज़ हाई-डेफ़िनिशन सीएसएस कलर गाइड का हिस्सा है.

सीएसएस के रंग 4 में, कई नई चीज़ों के बारे में जानकारी दी गई है सीएसएस और रंग की सुविधाएं और टूल. नीचे दिया गया कोडपेन सभी नई और पुराने कलर सिंटैक्स को एक साथ मिलाकर रखें:

क्लासिक कलर स्पेस का रीकैप पढ़ें.

लेवल 4 के स्पेसिफ़िकेशन के मुताबिक, 12 को लॉन्च किया गया है रंग खोजने के लिए नए रंग स्पेस. ये ऊपर पहले शेयर किए गए सात नए गेम हैं:

• sRGB लीनियर
• LCH
• okLCH
• LAB
• okLAB
• डिसप्ले p3
• Rec2020
• a98 आरजीबी
• प्रोफ़ोटो आरजीबी
• XYZ
• XYZ d50
• XYZ d65

नए वेब कलर स्पेस से मिलें

यहां दिए गए कलर स्पेस, एसआरजीबी के मुकाबले बड़े गैमट को ऐक्सेस करने की सुविधा देते हैं. कॉन्टेंट बनाने Display-p3 कलर स्पेस, आरजीबी के मुकाबले करीब दोगुना कलर स्पेस देता है, जबकि Rec2020 पर यह Display-p3 के मुकाबले दोगुना होता है. ये तो कई रंग हैं!

color() फ़ंक्शन

नया color() फ़ंक्शन का इस्तेमाल ऐसे किसी भी कलर स्पेस के लिए किया जा सकता है जो R, G, और B वाले रंगों के बारे में बताता है चैनल. color() पहले कलर स्पेस पैरामीटर लेता है. इसके बाद, इसकी सीरीज़ आरजीबी के लिए चैनल वैल्यू और विकल्प के तौर पर कुछ ऐल्फ़ा वैल्यू.

आप देखेंगे कि कई नए कलर स्पेस इस फ़ंक्शन का इस्तेमाल करते हैं, क्योंकि rgb, srgb, hsl, hwb वगैरह जैसे खास फ़ंक्शन का इस्तेमाल करते समय, .

फ़ायदे

• आरजीबी चैनलों का इस्तेमाल करने वाले कलर स्पेस को ऐक्सेस करने के लिए नॉर्मलाइज़ किया गया स्पेस.
• किसी भी बड़े गैमट आरजीबी कलर स्पेस तक का स्केल किया जा सकता है.

नुकसान

• HSL, HWB, LCH, okLCH या okLAB के साथ काम नहीं करता है

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

color() के ज़रिए sRGB

इस कलरस्पेस में भी rgb() जैसी सुविधाएं मिलती हैं. इसकी मदद से, 0 और 1 के बीच के दशमलव, जिनका इस्तेमाल 0% से 100% की तरह किया जाता है.

फ़ायदे

• करीब-करीब सभी डिसप्ले, इस कलर स्पेस की रेंज पर काम करते हैं.
• डिज़ाइन टूल से जुड़ी सहायता.

नुकसान

• कल्पना के आधार पर लीनियर नहीं है (जैसे, lch())
• चौड़ा गैमट रंग नहीं है.
• ग्रेडिएंट अक्सर डेड ज़ोन से होकर गुज़रते हैं.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

color() {#linear-sredeem} के ज़रिए लीनियर sRGB

आरजीबी के लीनियर विकल्प की मदद से, चैनल की इंटेंसिटी का अनुमान लगाया जा सकता है.

फ़ायदे

• आरजीबी चैनलों का सीधा ऐक्सेस, जो गेम इंजन या लाइट शो जैसी चीज़ों के लिए आसान है.

नुकसान

• महसूस करने के लिहाज़ से लीनियर नहीं.
• काले और सफ़ेद रंग के किनारों पर लिखे होते हैं.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

ग्रेडिएंट के बारे में विस्तार से बाद में बताया गया है, लेकिन तेज़ी से srgb और linear-srgb काला से सफ़ेद दिखाई देना फ़ायदेमंद होता है उनके बीच के अंतर को समझाने के लिए ग्रेडिएंट:

LCH

एलसीएच, आरजीबी गैमट के बाहर के कलर ऐक्सेस करने के लिए सिंटैक्स लॉन्च करता है. यह भी पहला पहल, जिसकी मदद से ऑफ़-ऑफ़-गेमट बनाना बहुत आसान हो गया डिसप्ले के लिए रंग. ऐसा इसलिए होता है, क्योंकि CIE स्पेस के कलर (lch, oklch, lab, oklab) लोगों को दिखने वाले कलर स्पेक्ट्रम की पूरी जानकारी.

यह कलरस्पेस, इंसानों के नज़रिए के हिसाब से तैयार किया गया है. साथ ही, सिंटैक्स का इस्तेमाल करें. एलसीएच चैनलों में हल्कापन होता है. रंग और रंग चुनें. रंगों का मतलब एक कोण है, जैसे कि एचएसएल और एचडब्ल्यूबी में. लाइटनेस एक वैल्यू है की वैल्यू 0 से 100 के बीच होनी चाहिए. यह एक खास "मानसिक तौर पर लीनियर" है, इंसानों पर फ़ोकस करने वाला हल्कापन. क्रोमा, सैचुरेशन की तरह होता है; यह 0 से 230 के बीच हो सकती है, लेकिन तकनीकी रूप से सीमा से बाहर.

फ़ायदे

• काल्पनिक रूप से लीनियर होने की वजह से, रंगों में बदलाव का अनुमान लगाया जा सकता है. ज़्यादातर (oklch देखें).
• जाने-पहचाने चैनलों का इस्तेमाल करता है.
• अक्सर इसमें वाइब्रेंट ग्रेडिएंट होते हैं.

नुकसान

• कई तरह के गेम का आनंद लें.
• बहुत कम मामलों में, ह्यू शिफ़्ट को रोकने के लिए ग्रेडिएंट को अडजस्ट करने के बीच के पॉइंट की ज़रूरत पड़ सकती है.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

LAB

सीआईई गैमट को ऐक्सेस करने के लिए एक और कलर स्पेस बनाया गया है. इसमें यह जानकारी भी दी गई है कि लीनियर लाइटनेस (L) डाइमेंशन. LAB में A और B इंसानी कलर विज़न: लाल-हरा, और नीला-पीला. जब A को पॉज़िटिव मान दिया जाता है इससे लाल रंग जुड़ जाता है. वहीं, 0 से कम होने पर हरा रंग जुड़ जाता है. जब B को धनात्मक संख्या दी जाती है जहां नेगेटिव वैल्यू का मतलब नीले रंग की ओर है, तो पीला रंग जुड़ जाता है.

फ़ायदे

• संभावित तौर पर एक जैसे ग्रेडिएंट.
• हाई डाइनैमिक रेंज.

नुकसान

• ह्यू में बदलाव होने की संभावना.
• वैल्यू पढ़ते समय, लेखक को हाथ में लिखना या रंग का अनुमान लगाना मुश्किल होता है.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

यह कलर स्पेस सुधारात्मक है एलसीएच. एलसीएच की तरह, (L) समझने के लिहाज़ से लीनियर लाइटनेस, C को दिखाता है और रंग के लिए H.

अगर आपने पहले भी काम किया है, तो आपको यह जगह पहले से मालूम होगी HSL या LCH. H के लिए कलर व्हील पर कोई ऐंगल चुनें, लाइटनेस चुनें या L को समायोजित करके अंधेरे की मात्रा का पता लगाएं, लेकिन फिर हमारे पास संतृप्ति के बजाय क्रोमा है. वे काफ़ी हद तक एक जैसे हैं. हालांकि, रंग और रोशनी में बदलाव होने पर, जोड़े में शामिल हों या ज़्यादा क्रोमा इफ़ेक्ट इस्तेमाल करने पर ज़्यादा टारगेट नहीं किया जा सकता.

फ़ायदे

• नीले और बैंगनी रंग के रंगों में काम करने पर कोई हैरानी की बात नहीं है.
• पर्सेप्चुअल लीनियर लाइटनेस.
• जाने-पहचाने चैनलों का इस्तेमाल करता है.
• हाई डाइनैमिक रेंज.
• इसमें एक आधुनिक कलर पिकर है - जिसे Evil Martian ने तैयार किया है.

नुकसान

• कई तरह के गेम का आनंद लें.
• नए और करीब-करीब सभी एक्सप्लोर नहीं किए गए हैं.
• कुछ कलर पिकर उपलब्ध हैं.

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

ओकेलैब

यह स्पेस LAB के लिए सही है. इसका दावा इमेज प्रोसेसिंग क्वालिटी के लिए ऑप्टिमाइज़ किए गए स्पेस के तौर पर भी किया जा सकता है. 'हमसे है' का मतलब, ग्रेडिएंट और कलर फ़ंक्शन में हेर-फेर की जाने वाली क्वालिटी से है.

फ़ायदे

• ऐनिमेशन और इंटरपोलेशन के लिए डिफ़ॉल्ट स्पेस.
• पर्सेप्चुअल लीनियर लाइटनेस.
• LAB की तरह कोई ह्यू शिफ़्ट नहीं है.
• संभावित तौर पर एक जैसे ग्रेडिएंट.

नुकसान

• नए और करीब-करीब सभी एक्सप्लोर नहीं किए गए हैं.
• कुछ कलर पिकर उपलब्ध हैं.

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

डिसप्ले P3

Apple के साथ काम करने के बाद से डिसप्ले P3 गेमट और कलर स्पेस लोकप्रिय हो गए हैं साल 2015 से हैं. Apple ने साल 2016 से सीएसएस के ज़रिए वेब पेजों में Display-p3 की सुविधा भी दी थी. इसके अलावा, पांच अन्य ब्राउज़र से कई साल पहले. अगर sRGB से आ रहा है, तो यह एक बहुत अच्छा रंग है स्पेस का इस्तेमाल करके, स्टाइल को ज़्यादा डाइनैमिक रेंज पर ले जाते हैं.

फ़ायदे

• बेहतरीन सपोर्ट, एचडीआर डिसप्ले के लिए बेसलाइन माना जाता है.
• sRGB की तुलना में 50% ज़्यादा रंग.
• DevTools शानदार कलर पिकर की सुविधा देता है.

नुकसान

• आखिर में, यह Rec2020 और CIE स्पेस से आगे निकल जाएगा.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

Rec2020, UHDTV (अल्ट्रा-हाई-डेफ़िनिशन टेलीविज़न), 4k और 8k मीडिया में इस्तेमाल करने के लिए रंगों की रेंज उपलब्ध कराता है. Rec2020 दूसरा है आरजीबी पर आधारित गैमट, जो Display-p3 से बड़ा है, लेकिन आम तौर पर इतना सामान्य नहीं है उपभोक्ताओं को Display P3 के तौर पर चुनें.

फ़ायदे

• अल्ट्रा एचडी कलर.

नुकसान

• उपभोक्ताओं के बीच आम तौर पर कम है (अब तक).
• आम तौर पर, यह हैंडहेल्ड या टैबलेट में नहीं मिलती.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB {#a98-आरजीबी}

Adobe 1998 RGB के लिए शॉर्ट, A98 RGB को Adobe ने बनाया CMYK प्रिंटर से प्राप्त किए जा सकने वाले रंग. इसमें, sRGB के मुकाबले ज़्यादा रंग मौजूद हैं. खास तौर पर, सायन और हरे रंगों में.

फ़ायदे

• यह साइज़, sRGB और Display P3 के कलर स्पेस से बड़ा है.

नुकसान

• यहां डिजिटल डिज़ाइनरों ने आम तौर पर काम नहीं किया है.
• सीएमवाईके से पैलेट पोर्ट नहीं किए जा रहे हैं.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

प्रोफ़ोटो आरजीबी

Kodak का बनाया हुआ विशाल गैमट स्पेस कलर और सुविधाओं में कम से कम ह्यू शिफ़्ट को कम या ज़्यादा करते हैं. यह साइट के 100% हिस्से को कवर करने का दावा करती है सतह के रंग जैसा कि साल 1980 में माइकल पॉइंटर ने लिखा.

फ़ायदे

• फ़ोटो में हल्के रंग में बदलाव होने पर, रंग में कम से कम बदलाव होते हैं.
• प्राइमरी कलर को वाइब्रेंट कहते हैं.

नुकसान

• इसके करीब 13% रंग इस तरह से ऑफ़र किए गए हैं काल्पनिक, जिसका मतलब है कि वे दिखाई देती है.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

CIE XYZ कलर स्पेस में वे सभी रंग शामिल हैं जो आंखों की औसत रोशनी. इसलिए, इसे अन्य रंगों के लिए स्टैंडर्ड रेफ़रंस के तौर पर इस्तेमाल किया गया है स्पेसेज़. Y चमकदार है, लेकिन दिए गए Y में X और Z संभावित क्रोमा हैं चमक.

d50 और d65 के बीच का अंतर व्हाइट पॉइंट है, जहां d50, d50 का इस्तेमाल करता है व्हाइट पॉइंट और d65, d65 के व्हाइट पॉइंट का इस्तेमाल करते हैं.

मुख्य-शब्द: व्हाइट पॉइंट कलर स्पेस का एट्रिब्यूट होता है. यह वह जगह है जहां असली व्हाइट स्पेस मौजूद है. इलेक्ट्रॉनिक स्क्रीन के लिए, D65 सबसे एक सामान्य सफ़ेद बिंदु है, और यह 6500 केल्विन से छोटा है. रंग भरना ज़रूरी है ऐसा कन्वर्ज़न जिसमें व्हाइट पॉइंट इस तरह से कलर टेंपरेचर (गर्म या ठंडा) से मेल खाते हों कोई असर नहीं होता.

फ़ायदे

• लीनियर-लाइट ऐक्सेस में इस्तेमाल के आसान उदाहरण दिए गए हैं.
• फ़िज़िकल कलर मिक्सिंग के लिए बेहतरीन विकल्प.

नुकसान

• कल्पना के आधार पर लीनियर कॉन्टेंट नहीं होता है. जैसे, lch, oklch, लैब, और oklab.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

पसंद के हिसाब से कलर स्पेस

सीएसएस के रंग 5 की खास बातों में यह पाथ को पसंद के मुताबिक कलर स्पेस सिखाने के लिए बनाया गया हो. यह एक ICC प्रोफ़ाइल है, जिससे ब्राउज़र को यह पता चलता है कि का इस्तेमाल करें.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

लोड हो जाने के बाद, color() फ़ंक्शन की मदद से इस कस्टम प्रोफ़ाइल से रंगों को ऐक्सेस करें और इसके लिए चैनल वैल्यू तय करें.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

कलर इंटरपोलेशन

एक रंग से दूसरे रंग में परिवर्तन आपको एनिमेशन, ग्रेडिएंट और रंग मिलाना. इस ट्रांज़िशन को आम तौर पर शुरुआती रंग और आखिरी रंग, जहां ब्राउज़र के बीच इंटरपोलेट करने की उम्मीद होती है. इस मामले में इंटरपोलेट करने का मतलब है, इन-बीच में मौजूद कलर की सीरीज़ जनरेट करना इंस्टैंट ट्रांज़िशन के बजाय, एक आसान ट्रांज़िशन बनाएं.

ग्रेडिएंट के साथ, इंटरपोलेशन किसी आकार के साथ रंगों की एक सीरीज़ होता है. के साथ समय के साथ अलग-अलग रंगों की सीरीज़ में बदलाव होता है.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

ग्रेडिएंट की मदद से, बीच के सभी रंग एक साथ दिखाए जाते हैं:

कलर इंटरपोलेशन में नया क्या है

इसमें नए गैमट और कलर स्पेस जोड़े गए हैं. इनकी मदद से, एक से ज़्यादा नए गेम भी खेले जा सकते हैं इंटरपोलेशन के लिए विकल्प. in hsl रंग को नीले से सफ़ेद में बदला जा रहा है का परिणाम sRGB से बहुत अलग होता है.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

फिर, अगर आप एक जगह से एक रंग से रंग में बदल जाएं, तो क्या होगा बिलकुल अलग जगह है:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

अच्छी बात यह है कि रंग 4 आपके लिए अच्छा है निर्देशों में ब्राउज़र के लिए इन क्रॉस को हैंडल करने के निर्देश दिए गए हैं कलर स्पेस इंटरपोलेशन. .gradient के लिए, ब्राउज़र कलर स्पेस और डिफ़ॉल्ट कलर स्पेस oklab का इस्तेमाल करें.

आपको लग सकता है कि ब्राउज़र कलर स्पेस के रूप में lch का इस्तेमाल करेगा, क्योंकि यह पहला रंग है, लेकिन यह नहीं है. इसलिए, मैं तुलना के लिए दूसरी ग्रेडिएंट दिखाता हूं .lch. .lch ग्रेडिएंट, lch कलर स्पेस से लिया गया ग्रेडिएंट है.

16-बिट रंग की वजह से कम बैंडिंग

इस रंग के काम करने से पहले, सभी रंगों को एक 32-बिट पूर्णांक में सेव किया जाता था, वे सभी चार चैनलों का प्रतिनिधित्व करते हों; लाल, हरा, नीला, और ऐल्फ़ा. यह 8-बिट प्रति है चैनल और 2^ 24 संभावित रंग (ऐल्फ़ा को अनदेखा करते हुए). 2 ^ 24 = 1,67,77,216, "लाखों रंग."

इस रंग के काम करने के बाद, 16-बिट के चार फ़्लोटिंग पॉइंट वैल्यू, हर चैनल में एक-दूसरे से जुड़े होने के बजाय खुद का फ़्लोट करता है. यह कुल डेटा का 64-बिट है, जिससे कई लाख से ज़्यादा रंग बन जाते हैं.

एचडी कलर में काम करने के लिए, यह प्रोसेस ज़रूरी है. इससे रंग की मात्रा बढ़ जाती है ऐसी जानकारी को संग्रहित किया जा सकता है, जिससे इसका अच्छा असर पड़ता है कि ग्रेडिएंट में इस्तेमाल करने के लिए ब्राउज़र के लिए ज़्यादा रंग.

ग्रेडिएंट बैंडिंग तब होती है, जब स्मूद ग्रेडिएंट बनाने के लिए काफ़ी रंग नहीं होते और "स्ट्रिप्स" रंग दिखाई देने लगते हैं. इस वजह से बैंडिंग काफ़ी कम हो जाती है उच्च रिज़ॉल्यूशन वाला रंग पर अपग्रेड करें.

कंट्रोल इंटरपोलेशन

दो बिंदुओं के बीच सबसे कम दूरी हमेशा एक सीधी रेखा होती है. इस रंग के साथ इंटरपोलेशन के बिना, ब्राउज़र डिफ़ॉल्ट रूप से छोटा रूट इस्तेमाल करते हैं. कोई स्थिति चुनें जहां एचएसएल कलर सिलिंडर में दो पॉइंट होते हैं. एक ग्रेडिएंट प्राप्त होता है, जो दो बिंदुओं के बीच की रेखा के साथ यात्रा करते हुए चरणों को रंग दें.

linear-gradient(to right, #94e99c, #e06242)

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

ऊपर दी गई ग्रेडिएंट रेखा हरे रंग से लाल रंग के बीच सीधी जाती है कलर स्पेस के बीच से होकर गुज़रता हुआ रंग. हालांकि ऊपर दी गई चीज़ें बहुत बढ़िया हैं यह ज़रूरी नहीं है कि शुरुआती समझ में क्या होता है. यहां है में ग्रेडिएंट है, जो कोडपेन के बीच में मौजूद है और बीच में यह साफ़ तौर पर सफ़ेद नहीं है मॉक डेमो दिखाया गया.

हालांकि, ग्रेडिएंट का बीच वाला हिस्सा अपनी चमक खो देता है. ऐसा इसलिए है, क्योंकि सबसे चमकीले रंग, कलर स्पेस के आकार के किनारे पर होते हैं, न कि केंद्र जहां इंटरपोलेशन गया था. आम तौर पर इसे यह कहा जाता है "डेड ज़ोन." यह लीजिए को ठीक करने या इस पर काम करने के कुछ तरीके हैं.

बंद ज़ोन से बचने के लिए, ज़्यादा ग्रेडिएंट स्टॉप तय कर रहे हैं

आज के समय में डेड ज़ोन से बचने की एक तकनीक यह है कि आप वह ग्रेडिएंट जो जान-बूझकर इंटरपोलेशन को गाइड करता है रंग स्पेस की वाइब्रेंट रेंज. दरअसल, यह काम करने की शुरुआत होती है, क्योंकि अतिरिक्त स्टॉप इसे डेड ज़ोन के आस-पास काम करने में मदद करते हैं.

एरिक केनेडी का बनाया हुआ एक ग्रेडिएंट टूल है, जो अतिरिक्त कलर को कैलकुलेट करता है यह आपके लिए रुक जाता है, ताकि आप अपने आस-पास मौजूद रंगीन जगहों पर भी जाने से बच सकें उसकी ओर आकर्षित होते हैं. इसका इस्तेमाल करके, पहले उदाहरण से उन्हीं रंगों को पास करना लेकिन कलर इंटरपोलेशन को HSL में बदलने से यह बनता है:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

गाइडेड स्टॉप पॉइंट के साथ, इंटरपोलेशन अब कोई सीधी लाइन नहीं है, लेकिन मृत क्षेत्र के चारों ओर मुड़ा हुआ दिखाई देता है, जिससे संतृप्ति बनाए रखने में मदद मिलती है. जो एक ज़्यादा वाइब्रेंट ग्रेडिएंट है.

यह टूल काफ़ी अच्छा काम करता है. हालांकि, अगर आपके पास इससे मिलता-जुलता या उससे ज़्यादा टूल हो, तो क्या होगा सीधे सीएसएस से कंट्रोल करना है?

कलर इंटरपोलेशन को डायरेक्ट करना

कलर 4 में, ह्यू इंटरपोलेशन रणनीति को कंट्रोल करने की सुविधा को जोड़ा गया था और यह डेड ज़ोन के आस-पास (:wink:) का एक नया तरीका है. किसी रंग के बारे में सोचें ऐंगल और उस 2 स्टॉप वाले ग्रेडिएंट का इस्तेमाल करें जो सिर्फ़ कोण में बदलाव करता हो और रंग बदलता हो उदाहरण के लिए, 140deg से 240deg पर स्विच करना.

छोटा बनाम लंबा ह्यू इंटरपोलेशन

ग्रेडिएंट डिफ़ॉल्ट रूप से shorter रूट तब तक नहीं किया जा सकता, जब तक कि आप तय करते हैं कि longer रास्ता. रंग इंटरपोलेशन विकल्प कोण के घुमाव को सीधा करते हैं, जैसे किसी को घूमने के लिए कहना दाएं के बजाय बाएं (अहा, ज़ूलैंडर):

ह्यू इंटरपोलेशन दूरी के उदाहरण में, छोटा पाथ और अंतर दिखाने के लिए लंबे पाथ को सिम्युलेट किया गया है. कम दूरी में इसमें कम रंग होते हैं, क्योंकि यह दूरी सबसे कम दूरी से तय की जाती है मुमकिन है, जहां लंबी दूरी तय की गई है.

ह्यू इंटरपोलेशन बढ़ाना बनाम घटाना

कलर 4 में दो और ह्यू इंटरपोलेशन रणनीतियां हैं, लेकिन वे सिर्फ़ सिलिंडर के लिए हैं कलर स्पेस. पिछले उदाहरणों में दो रंगों को ध्यान में रखते हुए, विज़ुअल अब दिखाते हैं कि विज्ञापन को बढ़ाने और घटाने का तरीका क्या है.

ऊपर दिए गए कोडपेन ने ColorJS का इस्तेमाल करके, अपेक्षित परिणाम. वह सीएसएस जिसे आप JavaScript लाइब्रेरी:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

ह्यू इंटरपोलेशन को बंद करने के लिए, यहां एक मज़ेदार खेल का मैदान दिया गया है, जहां आप 2 रंग स्टॉप के बीच रंग और ह्यू इंटरपोलेशन विकल्प के प्रभाव इस तरह देखें और यह भी देख सकते हैं कि कलर स्पेस, ग्रेडिएंट नतीजों को कैसे बदलते हैं. इसके अलग-अलग नतीजे हो सकते हैं different; इसे चार नई तरकीबों वाला समझें, जो आपके कलर टूलबेल्ट में आ गए हैं.

अलग-अलग कलर स्पेस के ग्रेडिएंट

खास आकार और रंग की व्यवस्था को देखते हुए, हर कलर स्पेस से नतीजे मिलते हैं अलग-अलग ग्रेडिएंट. नीचे दिए गए उदाहरणों में, देखें कि हर कलर स्पेस कैसे इसे अलग तरीके से संभालता है, खास तौर पर नीले से लेकर सफ़ेद रंग में. ध्यान दें कि कितने बीच से बैंगनी हो जाना; इसे इंटरपोलेशन के दौरान ह्यू शिफ़्ट कहा जाता है.

इन जगहों के कुछ ग्रेडिएंट, अन्य की तुलना में ज़्यादा आकर्षक हैं या कम यात्रा करते हैं डेड ज़ोन से बाहर आएँ. lab जैसे स्पेस एक साथ, रंग को गहरा या फीका करके इस तरह से पैक करते हैं, जैसे कि यह hwb() जैसे रंग में रंग लिखने के लिए ऑप्टिमाइज़ किए गए स्पेस के उलट है.

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

ऊपर दिया गया डेमो, भले ही नतीजों में सटीक जानकारी देता हो, लेकिन यह ज़्यादा सटीक नतीजे देता है लैब के साथ इंटरपोलेशन. हालांकि Lab का सिंटैक्स पढ़ने में आसान नहीं है, लेकिन ऐसे नेगेटिव नंबर जो आरजीबी या hsl से आते समय बहुत अनजान होते हैं. बढ़िया समाचार, हम किसी जाने-पहचाने सिंटैक्स के लिए hwb का इस्तेमाल कर सकते हैं, लेकिन ग्रेडिएंट को पूरी तरह से किसी अन्य कलर स्पेस, जैसे कि oklab में इंटरपोलेट किया गया हो.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

यह उदाहरण hwb में समान रंगों का इस्तेमाल करता है, लेकिन hwb या oklab पर इंटरपोलेशन. hwb, हाई लेवल वाले डिवाइसों के लिए एक बेहतरीन कलरस्पेस है यह जगह में चमकने वाली, लेकिन संभव मृत क्षेत्र या चमकीली जगहों पर दिखाई देती है. शीर्ष उदाहरण). oklab, मानसिक रूप से लीनियर ग्रेडिएंट के लिए शानदार है जो गहरे फीके. यह सुविधा काफ़ी मज़ेदार है, क्योंकि इसे अलग-अलग रंगों में आज़माया जा सकता है में देखा जा सकता है कि आपको कौन-सी ग्रेडिएंट सबसे ज़्यादा पसंद है.

यहां एक कोडपेन दिखाया गया है, जो ग्रेडिएंट और कलर स्पेस, रणनीतियों का इस्तेमाल किया जा सकता है. अफ़्रीकी मूल के लोगों के लिए से सफ़ेद रंग हर कलर स्पेस में अलग-अलग है!

गैमट क्लैंपिंग

ऐसे मामले भी हो सकते हैं जिनमें रंग, गैमट के अलावा किसी अन्य चीज़ के बारे में पूछ सकता है. नीचे दिए गए रंग इस्तेमाल करें:

rgb(300 255 255)

rgb कलर स्पेस में किसी कलर चैनल की ज़्यादा से ज़्यादा वैल्यू 255 है, लेकिन यहां 300 लाल रंग के लिए तय किया गया था. इस दिन क्या होगा? गैमट क्लैंपिंग.

क्लैंपिंग तब होती है, जब अतिरिक्त जानकारी को आसानी से हटा दिया जाता है. 300, 255 हो जाता है रंग इंजन में जोड़ दिया जाता है. रंग को अब उसकी जगह में जोड़ दिया गया है.

कलर स्पेस चुनना

इन रंगों और इनके असर के बारे में जानने के बाद, कई लोग महसूस करते हैं कि है और जानना चाहते हैं कि "कौनसी" चुनें. मेरी पढ़ाई और मुझे अपने सभी टास्क के लिए कोई एक कलर स्पेस नहीं दिख रहा है. हर ऐसे पल आते हैं जब वे मनचाहे नतीजे देते हैं.

अगर एक सबसे अच्छा स्पेस होता, तो बहुत सारे नए स्पेस उपलब्ध नहीं होते पेश किया गया है.

हालांकि, मैं कह सकता हूं कि सीआईई स्पेस—lab, oklab, lch, और oklch—मेरी शुरुआती जगहें. अगर मुझे उम्मीद के मुताबिक नतीजे नहीं मिले, तो अन्य स्पेस टेस्ट करें. मैं रंगों को मिलाने और ग्रेडिएंट बनाने के लिए सहमत हूं oklab की डिफ़ॉल्ट सेटिंग. कलर सिस्टम और पूरे यूज़र इंटरफ़ेस (यूआई) के रंगों के लिए, मुझे यह पसंद है oklch.

यहां कुछ लेख दिए गए हैं जिनमें लोगों ने अपने अपडेट किए गए रंग की जानकारी शेयर की है रणनीतियों को इन नए कलर स्पेस और सुविधाओं के साथ जोड़ा गया. उदाहरण के लिए, आंद्रे सितनिक oklch ने सब कुछ कर लिया है, हो सकता है कि वे आपको भी ऐसा करने के लिए प्रेरित कर लें:

1. CSS में OKLCH: हमने आरजीबी और एचएसएल से आगे बढ़ने के पीछे की वजह एंड्रे सिटनिक
2. कलर फ़ॉर्मैट जॉश डब्ल्यू. Comeau
3. OK, OKLCH ने क्रिस कॉयर

अगले चरण

अब जब आप नए कलर स्पेस और टूल के बारे में जानते हैं, तो आपको एचडी कलर में माइग्रेट करें.

ज़्यादा वाइब्रेंट, लगातार हेर-फेर और इंटरपोलेशन, और कुल मिलाकर बेहतरीन नतीजे देते हैं को और भी शानदार अनुभव मिलेगा.

रंग से जुड़े संसाधनों के बारे में और पढ़ें देखें.