हरे से लाल रंग तक प्रतिशत पर निर्भर करते हैं

Question

मेरे पास एक पोल प्रणाली है और मैं चाहता हूं कि इस पोल के उत्तर रंगीन हों। उदाहरण के लिए: यदि यह 10% है, तो यह लाल होगा, यदि 40% यह पीला होगा और यदि 80% यह हरा होगा, तो मैं चाहता हूं कि मेरा जावास्क्रिप्ट कोड दिए गए प्रतिशत के अनुसार रंग बनाने के लिए आरजीबी रंगों का उपयोग करें।

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}  

अब मैं प्रतिशत से हेक्स चाहता हूं।

Comments

npmjs.com/package/percent-to-hex

— येवगेन

Answer 1

यह आपकी आवश्यकता से अधिक हो सकता है, लेकिन इससे आप किसी भी मनमाने रंग का नक्शा सेट कर सकते हैं:

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

Comments

वाह, धन्यवाद मिस्टर @ जेकॉब ^ - ^ https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/

— जीनकरलो फान्टाल्वो

यह वही है जो मुझे एक परियोजना के लिए चाहिए। बहुत बहुत शुक्रिया @ जेकॉब!

— सावाडो

यीशु यह आश्चर्यजनक है

— टैल्बॉय

बहुत धन्यवाद। यह सिर्फ एक परियोजना के लिए काम में आया है जिस पर मैं काम कर रहा हूँ!

— किरणालोइस 22

Answer 2

फिडल के साथ HSL का उपयोग करते हुए एक सरल योजना:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

आवश्यकतानुसार संतृप्ति और चमकदारता को ट्विस्ट करें। और एक बेला ।

function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}

Comments

तो, यह एक ब्लैक बॉक्स है। कोई स्पष्टीकरण?

— सईद नेमाटी

लाल से हरे तक। var hue = (मान * 120) .toString (10);

— कियान चेन

एक मिनट और अधिकतम मूल्य शामिल करने के लिए आप इसे कैसे अनुकूलित कर सकते हैं? उदाहरण के लिए, getColor(12,0,100)( getColor(value, min, max))?

— डेविल्स एडवोकेट

स्क्रैच कि, 100% काम नहीं करता है: stackoverflow.com/questions/40110721/…

— डेविल्स एडवोकेट

@SaeedNeamati यह 0 और 120 (हरे रंग के माध्यम से लाल का प्रतिनिधित्व करता है) के बीच का मान निर्धारित करता है जो आप पास (0 से 1) पास करते हैं। यह ह्यू को एक स्ट्रिंग में परिवर्तित करता है ("120" के माध्यम से "0"), फिर एचएसएल प्रारूप में रंग कोडिंग एक स्ट्रिंग लौटाता है (ह्यू, संतृप्ति, लपट), संतृप्ति के साथ 100% और हल्कापन 50% पर सेट होता है।

— Mattsoave

Answer 3

आप किसी भी रंग के नक्शे की आवश्यकता के बिना कोड की कुछ पंक्तियों (टिप्पणियों सहित) में ऐसा कर सकते हैं।

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
    0 – red
    60 – yellow
    120 – green
    180 – turquoise
    240 – blue
    300 – pink
    360 – red
*/      

उदाहरण: https://jsfiddle.net/x363g1yc/634/

रंग मानचित्रों की कोई आवश्यकता नहीं (जब तक कि यह एक गैर-रेखीय रंग परिवर्तन न हो, जो नहीं पूछा गया था)

चेतावनी: यह IE8 या नीचे के साथ संगत नहीं है। (धन्यवाद बर्नहार्ड फ़र्स्ट)

// Just used as a shortcut for below, completely optional
const red = 0,
  yellow = 60,
  green = 120,
  turquoise = 180,
  blue = 240,
  pink = 300;

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
    b = (end - start) * a,
    c = b + start;

  // Return a CSS HSL string
  return 'hsl(' + c + ', 100%, 50%)';
}

// Simple little animation
var percent = 0,
  progressDiv = document.getElementById('progress'),
  textDiv = document.getElementById('progress-text'),
  progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
  percent = (percent < 100) ? percent + 0.5 : 0;

  // Play with me!
  let colour = hsl_col_perc(percent, red, green); //Red -> Green
  progressDiv.style.backgroundColor = colour;
  progressContainerDiv.style.borderColor = colour;
  progressDiv.style.width = percent + '%';
  textDiv.innerHTML = Math.floor(percent);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

#progress {
  width: 0%;
  white-space: nowrap;
  text-wrap: none;
  height: 50px;
}

#progress-container {
  border: solid 2px black;
  width: 200px;
}

<h1 id="progress-text"></h1>
<div id="progress-container">
  <div id="progress"></div>
</div>

Comments

एचएसएल रंग मॉडल का उपयोग करना अच्छा है, लेकिन दुर्भाग्य से यह इंटरनेट एक्सप्लोरर 8 में काम नहीं करता है।

— बर्नहार्ड फ़र्स्ट

यह सच है, मैं अपने उत्तर में संशोधन करूंगा

— मैटिसडा

आप व्याख्या कर सकते हैं startऔर endइस में?

— डेविल्स एडवोकेट

नहीं, endऊपर कोड में प्रारंभ और अंतिम रंग के बीच का अंतर है। hsl_col_perc(100, 60, 120)हरे रंग के बजाय फ़िरोज़ा में परिणाम होगा। आपको दूसरी पंक्ति को बदलने की आवश्यकता है b = (end-start)*a, या बस इसे एक-लाइनर बना दें, क्योंकि इसे पढ़ना आसान होगा।

— रीव

त्वरित एचएसएल रंग रेफरी में छोड़ने के लिए धन्यवाद!

— ओहसली

Answer 4

यह विधि इस मामले में अच्छा काम करती है (प्रतिशत 0 से 100 तक):

function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }

Answer 5

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

श्रेय एंड्रयू को जाता है। वह तेज था।

Answer 6

मुझे पता है कि यह मूल रूप से एक पुराना जावास्क्रिप्ट प्रश्न है, लेकिन मैं यहाँ CSS केवल समाधान के लिए खोज कर रहा हूँ , इसलिए शायद यह दूसरों को समान रूप से मदद करेगा: यह वास्तव में काफी सरल है:

HSL रंग मान के रूप में प्रतिशत का उपयोग करें! से ग्रीन फैला एच के लिए लाल 0करने के लिए 128। (ताकि आप द्वारा प्रतिशत पंप कर सकते हैं 1.2अगर आप चाहते हैं)। उदाहरण:

background-color:hsl(perc,100%,50%);

जहां बिना %संकेत के ही perc की संख्या है ।

Answer 7

मैंने ये ढूंढ निकाला:

function rgbify(maxval, minval, val, moreisgood) {
    var intnsty = (val - minval) / (maxval - minval);
    var r, g;
    if (moreisgood) {
        if (intnsty > 0.5) {
            g = 255;
            r = Math.round(2 * (1 - intnsty) * 255);
        } else {
            r = 255;
            g = Math.round(2 * intnsty * 255);
        }

    } else { //lessisgood
        if (intnsty > 0.5) {
            r = 255;
            g = Math.round(2 * (1 - intnsty) * 255);
        } else {
            g = 255;
            r = Math.round(2 * intnsty * 255);
        }
    }
    return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

moreisgoodझंडा टॉगल उच्च मूल्यों या लाल होना चाहिए यदि हरी। maxvalऔर minvalआपकी सीमा के लिए सीमा मूल्य हैं। valआरजीबी में परिवर्तित करने के लिए मूल्य है

Answer 8

से बदलने redके लिए greenएचएलएस का उपयोग कर रंग। मान 0 से 100 तक होना चाहिए, इस मामले में अनुकरण प्रतिशत (%)।

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}

Comments

बहुत अच्छा है क्योंकि यह सभ्य म्यूट रंगों का समर्थन करता है अगर आपको उनकी आवश्यकता है :)

— dijipiji

Answer 9

जैकब्स के जवाब के आधार पर मैंने लोडबार बनाया। यह एक हरे से लाल रंग का है, लेकिन आप रंग बदल सकते हैं। उन लोगों के लिए जो मेरे कोड और jsfiddle ( http://jsfiddle.net/rxR3x/ ) पर रुचि रखते हैं

var percentColors = [
    { pct: 0, color: '#00FF00' },   { pct: 3, color: '#12FF00' },   { pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },  { pct: 13, color: '#58FF00' },  { pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },  { pct: 23, color: '#8DFF00' },  { pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },  { pct: 33, color: '#C2FF00' },  { pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },  { pct: 43, color: '#F7FF00' },  { pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },  { pct: 53, color: '#FFD300' },  { pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },  { pct: 63, color: '#FF9E00' },  { pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },  { pct: 73, color: '#FF6900' },  { pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },  { pct: 83, color: '#FF3400' },  { pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },  { pct: 93, color: '#FF0000' },  { pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time){
    var i = 0;
    var percentInterval = setInterval(function() {
         i++;
         if(percent >= percentColors[i].pct) {
            console.log(percentColors[i].color);
            $(selector).css('background-color', percentColors[i].color);
        }
        if(percentColors[i].pct>=percent) {
            clearInterval(percentInterval);
        }
    }, time/25);
    $(selector).animate({width:(200/100)*percent}, time);
}
getColorPercent('#loadbar_storage', 100, 1500);

var percentColors = [
    { pct: 0, color: '#00FF00' },	{ pct: 3, color: '#12FF00' },	{ pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },	{ pct: 13, color: '#58FF00' },	{ pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },	{ pct: 23, color: '#8DFF00' },	{ pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },	{ pct: 33, color: '#C2FF00' },	{ pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },	{ pct: 43, color: '#F7FF00' },	{ pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },	{ pct: 53, color: '#FFD300' },	{ pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },	{ pct: 63, color: '#FF9E00' },	{ pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },	{ pct: 73, color: '#FF6900' },	{ pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },	{ pct: 83, color: '#FF3400' },	{ pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },	{ pct: 93, color: '#FF0000' },	{ pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time) {
  var i = 0;
  var percentInterval = setInterval(function() {
    i++;
    if (percent >= percentColors[i].pct) {
      $(selector).css('background-color', percentColors[i].color);
    }
    if (percentColors[i].pct >= percent) {
      clearInterval(percentInterval);
    }
  }, time / 25);
  $(selector).animate({
    width: (200 / 100) * percent
  }, time);
}
getColorPercent('#loadbar', 100, 1500);

#loadbar_wrapper {
  width: 200px;
  height: 25px;
  border: 1px solid #CECECE;
}

#loadbar {
  width: 0px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loadbar_wrapper">
  <div id="loadbar"></div>
</div>

Answer 10

याकूब के कोड में इन दो पंक्तियों को संशोधित करें:

var lower = percentColors[i - 1];
var upper = percentColors[i];

सेवा:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

यदि आप इसे दो चरम सीमाओं (यानी 0.0 और 1.0) के लिए काम करना चाहते हैं।

Answer 11

मुझे पता है कि यह विषय से टकरा रहा है लेकिन मुझे इसे करने का एक और तरीका मिला।

ऐसा करने के लिए आप 100x1 आयाम का एक गतिशील कैनवास भी बना सकते हैं और इसके लिए ढाल लागू कर सकते हैं और फिर फ़ंक्शन से आपको प्रतिशत स्थान का पिक्सेल रंग प्राप्त करने की आवश्यकता होती है।

यहाँ कोड है: यह वैश्विक है:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = $('<canvas />')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
grd.addColorStop(0, "rgb(255,0,0)"); //red
grd.addColorStop(0.5, "rgb(255,255,0)"); //yellow
grd.addColorStop(1, "rgb(0,255,0)"); //green    
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

फिर समारोह:

function getColor(value) {
  return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')';
}

डेमो: https://jsfiddle.net/asu09csj/

Answer 12

HSL jquery-ui-1.10.4 का उपयोग करके IE8 में काम करेगा।

मैंने फ़ंक्शन में हल्कापन स्वीकार करने के लिए jongo45 के उत्तर को संशोधित किया।

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}

Answer 13

जब मैं कुछ प्रश्नोत्तरी परिणामों के आंकड़ों को प्रदर्शित करने के लिए एक चार्ट बना रहा था तब मैटिसडा का कोड मेरे लिए वास्तव में उपयोगी था। मैंने इसे प्रतिशत के "कतरन" की अनुमति देने के लिए थोड़ा संशोधित किया (यह सुनिश्चित नहीं है कि सही शब्द क्या है) और साथ ही रंग पहिया के साथ दोनों तरीकों से काम करने के लिए, जैसे दोनों हरे (120) से लाल (0) और इसके विपरीत।

function pickColourByScale(percent, clip, saturation, start, end)
{
    var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
        b = Math.abs(end - start) * a,
        c = (end > start) ? (start + b) : (start - b);
    return 'hsl(' + c + ','+ saturation +'%,50%)';
}

मूल रूप से, स्केलिंग को क्लिप करने के लिए प्रतिशत मान सेट करके, उस मूल्य के नीचे सब कुछ आपके प्रारंभ रंग के रूप में रंगीन होगा। यह 100% - क्लिप के अनुसार स्केलिंग को भी पुनर्गणना करता है।

आइए एक उदाहरण के परिदृश्य से गुजरें जहां मैं निम्नलिखित मान दर्ज करता हूं:

• प्रतिशत: 75
• क्लिप: 50
• संतृप्ति: 100 (महत्वहीन, मैं इसका उपयोग चार्ट.जैस चार्ट को हाइलाइट करने के लिए करता हूं)
• प्रारंभ: 0 (लाल)

• अंत: 120 (हरा)

  1. मैं जाँचता हूं कि क्या प्रतिशत क्लिप से कम है, और अगर यह है तो मैं 0% वापस करता हूं। अन्यथा, मैं प्रतिशत को पुनर्गणना करता हूं - 75% 50% और 100% के बीच आधा है, इसलिए मुझे 50% मिलता है। यह मुझे 0.5 देता है।
  2. मुझे शुरू और अंत के बीच अंतर मिलता है। यदि आपका प्रारंभ ह्यू मान आपके अंतिम ह्यू मान से अधिक है, तो आपको Math.abs () का उपयोग करने की आवश्यकता है। फिर मुझे चरण 1 में प्राप्त परिणाम से अंतर को गुणा करना है कि मुझे प्रारंभ ह्यू मूल्य को ऑफसेट करने की कितनी आवश्यकता है।
  3. यदि प्रारंभ मूल्य अंतिम मूल्य से अधिक है, तो आपको विपरीत दिशा में रंग पहिया के साथ स्थानांतरित करने की आवश्यकता है। तदनुसार प्रारंभ मूल्य से जोड़ें या घटाएं।

मैं पीले रंग के साथ समाप्त होता हूं, जो लाल और हरे रंग के बीच आधा है। अगर मैंने चरण 1 में पुनर्गणना नहीं की थी, तो मैं एक अधिक हरे रंग के साथ समाप्त हो गया, जो भ्रामक हो सकता है।

Answer 14

मैंने zmc के उत्तर को हरे (0%) से लाल (100%) में ढाल देने के लिए संशोधित किया है।

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}