किसी दिए गए रंग को थोड़ा गहरा या हल्का कैसे करें?

Question

मेरे पास यह तस्वीर है:

तीर दो अलग-अलग रंग दिखाते हैं लेकिन वास्तव में उन्हें एक ही रंग का होना चाहिए लेकिन थोड़ा हल्का या गहरा।

मैंने जो आवेदन किया है उसका स्क्रीन-शॉट और किनारों पर भूरा रंग सिर्फ 30 के साथ नीले रंग का है। जैसा कि आप देख सकते हैं कि यह ट्रिक नहीं करता है, यानी वास्तविक रंग में 30 जोड़ना सभी के लिए काम नहीं करेगा। रंग की।

मैं किसी दिए गए रंग को कैसे शेड कर सकता हूं अर्थात इसे उज्जवल या गहरा बना सकता हूं?

इसके अलावा मुझे क्या करना चाहिए अगर मैं चाहता हूं कि यह अल्फा के साथ सेमीट्रांसपेरेंट दिखे?

Comments

मैं इस प्रश्न को ऑफ-टॉपिक के रूप में बंद करने के लिए मतदान कर रहा हूं क्योंकि इसे स्टैकओवरफ्लो पर पूछा जाना चाहिए।

— जूजा

तकनीकी रूप से इसका अभी भी एक ग्राफिक्स डिजाइन सवाल है क्योंकि हम रंगों के पीछे गणित पर चर्चा करते हैं और रंगों को अलग करते हैं, रंगों के विभिन्न रूपों का निर्माण करते हैं।

— व्लाद

नहीं, हम हेक्साडेसिमल रूपांतरण पर चर्चा करते हैं। मैं एक रंग प्रश्न के साथ ठीक हो जाऊंगा, लेकिन आपने अपने गणना वातावरण के साथ इसे इतना भारी बना दिया है कि यह आपके दावे को संतुष्ट करता है। तो आपने इसे एक जावास्क्रिप्ट और मार्कअप नोडलिंग प्रश्न बनने के लिए निर्दिष्ट किया है और यह ग्राफिक डिज़ाइन नहीं है।

— जूजा

कोई सवाल सही नहीं कहता है, मुझे एक रंग गहरा या उज्जवल बनाने के लिए क्या करना चाहिए। हेक्साडेसिमल मूल्य में रूपांतरण उपयोगी जोड़ है, लेकिन आवश्यकता नहीं है।

— व्लाद

मैं बहस करने वाला नहीं हूं। मुझे रंगों की समझ नहीं है और वे कैसे काम करते हैं, मैं "कैसे" के लिए पूछ रहा था, कोड का एक टुकड़ा नहीं है कि कोई मेरे लिए कोड करेगा।

— व्लाद

Answer 1

अच्छा सवाल है।

हेक्साडेसिमल मूल्यों के साथ काम करने के लिए आपको आरजीबी मूल्यों के सापेक्ष अनुपात के बारे में सोचने की आवश्यकता है।

मैं अक्षरों के साथ नहीं, संख्याओं में एक पैमाने का उपयोग करूंगा, इसलिए हम इसके पीछे के गणित को देख सकते हैं।

कल्पना कीजिए कि आपके पास एक नारंगी है।

आपके पास R255 G128 B0 का मान हो सकता है

यदि आप एक गहरा रंग चाहते हैं तो आपको उदाहरण के लिए मानों को 50% कम करना होगा

यह आपको R128 G64 B0 सूचना देगा कि सभी रंगों को आनुपातिक पैमाने का उपयोग करके संशोधित किया गया था।

एक अधिक जटिल रंग R255 G200 B100 हो सकता है आइए हम इसे अंधेरा करते हैं लेकिन पिछले मामले जितना नहीं। आइए हम इसे 80% तक काला कर दें।

R255x0.8 G200x0.8 B100x0.8 = R204 G160 B80

एक रंग को हल्का बनाने के लिए विचार बहुत अधिक समान है, लेकिन यह अधिक मुश्किल है क्योंकि रंग 255 पर टोपी करेंगे, इसलिए आप 255 से भिन्न मूल्यों पर विचार कर सकते हैं।

उदाहरण के लिए एक ही नारंगी

R255 G128 B0

आप अब R नहीं बढ़ा सकते हैं, और आप ग्रीन और ब्लू को समान मूल्यों के साथ नहीं बढ़ा सकते हैं, उदाहरण के लिए 100 अधिक, क्योंकि आपके पास होगा

R255 G228 B100

जो बहुत पीला है।

गणित होगा

1) 255 से वर्तमान मूल्य (R255 G128 B0) का अंतर है: R0 G127 B255

2) आइए हम 50% तक हल्का नारंगी बनाते हैं

3) Rx50% Gx50% Bx50% = R0 G64 B128

4) अपने प्रारंभिक मूल्य में जोड़ें: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128।

मैं आपको मूल विचार देने के लिए एक छवि जोड़ रहा हूं। RGB मान मेरे पाठ के समान नहीं हैं, सिर्फ इसलिए कि एक आलसी काम है, लेकिन आप देख सकते हैं कि नारंगी "सीढ़ियां" अपने आंतरिक अनुपात को बनाए रखती हैं।

संपादित

मैं बहुत गूंगा हूं। आप HSL कलर नोटेशन का भी उपयोग कर सकते हैं:

{पृष्ठभूमि-रंग: hsl (४५, ६०%, er०%);} और गहरा रंगों के लिए तीसरा रंग संशोधित करें, और हल्का के लिए दूसरा और तीसरा।

आप अल्फा को शामिल करने के लिए एक एचएसएल संस्करण का भी उपयोग कर सकते हैं।

Comments

ऑफ़कोर्स यदि यह एक ब्राउज़र है जो आपके लिए गणना करने में पूरी तरह से सक्षम है

— joojaa

हाँ एक जेएस / ब्राउज़र अनुप्रयोग। लेकिन Js # 345464 तैयार किए गए रंग को नहीं पहचानता है। मैं parseInt (hashString.replace ('#', ''), 16) का उपयोग करता हूं; जहाँ हैशस्ट्रिंग # 345464 की तरह सीएसएस तैयार रंग है।

— व्लाद

आप अपनी संख्या का अनुवाद करें जैसा आप चाहते हैं। मैंने कहा कि संख्याओं का उपयोग कर रहा था ताकि आप इसके पीछे के गणित को देख सकें। लेकिन सिद्धांत एक ही है। 8, F का आधा भाग है

— राफेल

और आप हमेशा rgba (255,128,0,1) अंकन का उपयोग कर सकते हैं।

— राफेल

एक्टुआल I कैनवस तत्व का उपयोग करता है और यह शुद्ध जेएस है, कोई सीएसएस inculded। लेकिन मुझे एक विचार मिला कि इसे कोड के साथ कैसे हल किया जाए।

— व्लाद

Answer 2

आपको चीजें थोड़ी गलत लगी हैं, javaScript रंग को हेक्साडेसिमल के रूप में मॉडल नहीं करता है, न ही सिस्टम। हेक्साडेसिमल संकेतन सिर्फ मानव पठनीय दस्तावेज़ के लिए है। आंतरिक रूप से आपका सिस्टम तीन पूर्णांक मानों को संग्रहीत करता है। आप सीधे उन लोगों से पूछताछ और हेरफेर कर सकते हैं।

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

Edity:

यदि आप ऐसा स्वयं करना चाहते हैं, जिसकी मैं अनुशंसा नहीं करता। 0-1 में पूर्णांक या फ्लोटिंग पॉइंट नंबरों के हेक्सरेक्टेशन को चालू करके प्रारंभ करें, इससे गणना आसान हो जाती है।

अब रंग में आसानी से हेरफेर के लिए RGB मानों को HSL या HSB में बदल दें, इससे ब्राइट कैलकुलेशन करने के लिए तुच्छ हो जाता है (विकिपीडिया में योग हैं)। तो फिर बस जोड़ या घटाएँ चमक या चमक। वास्तविक प्रकाश अनुकरण के लिए अभिकलन आसान है बस बेस कलर द्वारा हल्के रंग को गुणा करें। इस प्रकार तटस्थ प्रकाश के लिए बस:

परिणाम = तीव्रता * रंग

जैसा कि राफेल ने समझाया, रंग चैनल द्वारा दोहराया गया सूत्र। आप रंगीन लाइट का अनुकरण कर सकते हैं

परिणाम = तीव्रता * LigtColor * रंग

इसके लिए सबसे पहले फ्लोट में कनवर्ट करना, शायद रेखीय भी। यह आपके क्षेत्र में गर्म या शांत प्रकाश की अनुमति देता है जो अधिक प्राकृतिक अनुभव में ला सकता है।

अल्फा सम्मिश्रण (अन्य के शीर्ष पर रंग की परत) है

परिणाम = ColorTop * अल्फा + ColorBottom * (1-अल्फा)

अंतिम संपादन

अंत में यहाँ कुछ कोड है जो आपके द्वारा पूछे जाने पर कुछ करता है। यह देखने के लिए कठिन है कि इसका सार अभी के रूप में है। लाइव कोड यहां उपलब्ध है

चित्र 1 : नीचे दिए गए कोड का परिणाम भी लाइव संस्करण देखें ।

{
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var Color = function(r, g, b) {
      this.r = r;
      this.g = g;
      this.b = b;
    }
    Color.prototype.asHex = function() {
      return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
    }
    Color.prototype.asRGB = function() {
      return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
    }
    Color.prototype.blendWith = function(col, a) {
      r = Math.round(col.r * (1 - a) + this.r * a);
      g = Math.round(col.g * (1 - a) + this.g * a);
      b = Math.round(col.b * (1 - a) + this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.Mul = function(col, a) {
      r = Math.round(col.r/255 * this.r * a);
      g = Math.round(col.g/255 * this.g * a);
      b = Math.round(col.b/255 * this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.fromHex = function(hex) {
      // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
      hex = hex.substring(1,7)
      var bigint = parseInt(hex, 16);
      this.r = (bigint >> 16) & 255;
      this.g = (bigint >> 8) & 255;
      this.b = bigint & 255;
    }

    ctx.font = "16px Arial";
    ctx.fillText("Manual Alpha Blend", 18, 20);

    var a = new Color(220, 0, 150);

    var b = new Color();
    b.fromHex('#00C864');

    //Alpha blend
    ctx.fillStyle = a.asHex();
    ctx.fillRect(25, 25, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 30, 45);
    ctx.fillStyle = b.asRGB()
    ctx.fillRect(50, 50, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 55, 145);
    var bl = a.blendWith(b, 0.3);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(50, 50, 75, 75);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(bl.asHex(), 55, 70);

    // lighten 1

    ctx.fillStyle = '#000000';
    ctx.fillText('Neutral Light', 200, 20);

    var c = new Color(100, 100, 100);
    var purelight= new Color(255, 255, 255);

    ctx.fillStyle = c.asRGB();
    ctx.fillRect(200, 25, 100, 100);

    var bl = c.Mul(purelight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(225, 50, 100, 100);

    var bl = c.Mul(purelight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(250, 75, 100, 100);

     // lighten 2

    ctx.fillStyle = '#000000';
    ctx.fillText('Yellowish Light', 400, 20);

    var c = new Color(100, 100, 100);
    var yellowlight= new Color(255, 255, 220);

    var bl = c.Mul(yellowlight,1.0);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(400, 25, 100, 100);

    var bl = c.Mul(yellowlight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(425, 50, 100, 100);

    var bl = c.Mul(yellowlight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(450, 75, 100, 100);
  }
}

PS आपको स्टैकओवरफ्लो पर पूछना चाहिए क्योंकि यह वास्तव में स्टैकओवरफॉ पर पाया जा सकता है।

Comments

क्या यह लाइब्रेरी स्टैंडअलोन हो सकती है?

— व्लाद

@ मुझे यकीन है कि मुझे कोई कारण नहीं दिखता है।

— जूजा

मैंने इसकी कोशिश की, यह कुछ NodeJS मॉड्यूल का उपयोग करता है, लेकिन मैं ऐप को तीसरे पक्ष के पुस्तकालयों पर भारी नहीं बनाना चाहता। अपना कोड बनाने की कोशिश करेंगे।

— व्लाद

@ व्लाद ने आपके लिए कुछ कोड जोड़ दिया

— १२:०६ पर joojaa

: वाह वाह, शानदार काम!

— व्लाद

Answer 3

मैन्युअल रूप से यदि आप हाथ से और उसके बिना भी किसी रंग के अंधेरे / चमक को बदलना चाहते हैं। हेक्स या आरजीबी में प्रत्येक चैनल के लिए प्रकाश के बराबर अमाउंट को जोड़ना या घटाना वास्तव में आसान है ।
आरजीबी में कहें कि आपके पास 132,145,167 यो हैं जो प्रत्येक संख्या में 30 जोड़ सकते हैं ताकि एक ही रंग का हल्का संस्करण मिल सके इसलिए 162,175,207, और यदि आपको लगता है कि आपने इसे थोड़ा सा किया है तो प्रत्येक 160,173,205 में से 2 घटाएं। हेक्स के साथ भी लेकिन हेक्स संख्या में। इसलिए e4c3d5 e4 c3 d5 है आप इसे हल्का f4d3e5 बनाने के लिए 16 जोड़ सकते हैं या 16 को समान रंग d4b3c5 का गहरा संस्करण बनाने के लिए घटा सकते हैं।
आप जितना चाहें उतना जोड़ या घटा सकते हैं, और आप ओवरटाइम को जोड़ने और बदलने के लिए सही एम्माउंट के बारे में अनुमान लगाने में बेहतर हो जाएंगे, जब तक आप सभी तीन चैनलों (सभी तीन नंबर) पर एक ही एम्माउंट जोड़ते हैं, आप केवल कैसे बदलेंगे बहुत सफेद आप मिश्रण से जोड़ें या निकालें।

Comments

ठंडा! यह एक गैर-कोडर के लिए इतना आसान और उपयोगी था!

— ब्रुकडांसर 21