बिजली मीटर के लिए लाल और हरे रंग के बीच रंग उत्पन्न करें?

Question

मैं एक जावा गेम लिख रहा हूँ और मैं एक बिजली मीटर को लागू करना चाहता हूं कि आप कितनी मेहनत से कुछ शूट कर रहे हैं।

मुझे एक फ़ंक्शन लिखने की ज़रूरत है जो 0 - 100 के बीच एक इंट लेती है, और यह संख्या कितनी अधिक है, इसके आधार पर यह ग्रीन (पावर स्केल पर 0) और रेड (पावर स्केल पर 100) के बीच एक रंग लौटाएगा।

वॉल्यूम नियंत्रण कैसे काम करता है:

ग्रीन और रेड के बीच रंगों को उत्पन्न करने के लिए मुझे एक रंग के रेड, ग्रीन और ब्लू घटकों पर क्या ऑपरेशन करने की आवश्यकता है?

तो, मैं कह सकता हूं, getColor(80)और यह एक नारंगी रंग (आर, जी, बी में इसके मूल्य) या getColor(10)जो एक अधिक ग्रीन / येलो आरजीबी मान लौटाएगा।

मुझे पता है कि मुझे नए रंग के लिए R, G, B मान के घटकों को बढ़ाने की आवश्यकता है, लेकिन मुझे यह विशेष रूप से पता नहीं है कि ग्रीन-रेड से रंगों के शिफ्ट होने पर क्या होता है।

---

प्रगति:

मैंने एचएसवी / एचएसबी रंग अंतरिक्ष का उपयोग करके समाप्त किया क्योंकि मुझे धीरे-धीरे बेहतर पसंद आया (बीच में कोई अंधेरा भूरा नहीं)।

मेरे द्वारा उपयोग किया जाने वाला कार्य था:

public Color getColor(double power)
{
    double H = power * 0.4; // Hue (note 0.4 = Green, see huge chart below)
    double S = 0.9; // Saturation
    double B = 0.9; // Brightness

    return Color.getHSBColor((float)H, (float)S, (float)B);
}

जहां "पावर" 0.0 और 1.0 के बीच की संख्या है। 0.0 एक चमकदार लाल लौटाएगा, 1.0 एक चमकदार हरा लौटेगा।

जावा ह्यू चार्ट:

Comments

मैंने पहले भी यहां (अत्यंत समान) प्रश्न पूछा है: http://stackoverflow.com/questions/168838/color-scaling-function

— टॉमस पाजोंक

क्या आपको शक्ति का उल्टा नहीं करना चाहिए? लाल मान लें कि सबसे अधिक हिट है, और आप 0.1 और 0.4 के बीच काम कर रहे हैं, उच्च शक्ति कम एच

— एड्रियन डावेल

क्या आप OpenGL का उपयोग कर रहे हैं? जैसा कि त्रिकोण के बिंदुओं को अलग-अलग रंगों में सेट करने और फिर उनके बीच सम्मिश्रण / ढाल बनाने के तरीके हैं। आप शायद बेहतर प्रदर्शन प्राप्त करें जिससे ग्राफिक्स कार्ड आपके लिए काम कर सके। इसके अलावा कोड सरल / अधिक अनुकूलनीय हो सकता है (कहते हैं कि यदि आप एक एलियन पावर मीटर को हरे से नीले रंग में जाना चाहते हैं)

— डार्सीटॉमस

Answer 1

यह काम करना चाहिए - बस रैखिक रूप से लाल और हरे रंग के मूल्यों को मापता है। मान लें कि आपका अधिकतम लाल / हरा / नीला मूल्य है 255, और nसीमा में है0 .. 100

R = (255 * n) / 100
G = (255 * (100 - n)) / 100 
B = 0

(पूर्णांक गणित के लिए संशोधित, फ़ारुसिओ को टोपी की नोक)

एक और तरीका यह होगा कि आप HSV रंग मॉडल का उपयोग करें , और 0 degrees(लाल) से 120 degrees(हरे) रंग को जो भी संतृप्ति और मूल्य आपके अनुकूल हो, का उपयोग करें। यह अधिक सुखदायक ढाल देना चाहिए।

यहां प्रत्येक तकनीक का प्रदर्शन है - शीर्ष ग्रेडिएंट आरजीबी का उपयोग करता है, नीचे एचएसवी का उपयोग करता है:

Comments

यह एचएसवी अंतरिक्ष में ऐसा करने के लिए बहुत बेहतर है।

— डीजेकाॅलवर्थ

@DJClayworth, हाँ, मैं एचएसवी के साथ गया था।

— mmcdole

+1; मैं एक नया सवाल पूछने जा रहा था कि HTML / PHP में एक बार चार्ट को कलर करने के लिए मेरे पास कलर अल्गोरिद्म को कैसे बेहतर बनाया जाए ... SO ने इस सवाल को समान बताया और आपके जवाब ने मुझे सवाल पूछने के बिना समस्या को ठीक करने में मदद की! धन्यवाद!

— भिखारी

आप एक फ़ंक्शन कैसे लिखेंगे जो किसी भी रंग मूल्य के साथ काम करता है? कहो, RGB 20,30,190 और RBG 69,190,10 के बीच के रंग की गणना करें?

— कोकोडोको

एक ही तकनीक - एन स्टेप्स में वैल्यू एक्स से वैल्यू वाई में जाने के लिए, प्रत्येक स्टेप जिसे आप एक्स (वाईएक्स) / एन द्वारा बढ़ाते हैं - हालांकि यह एचआरवी स्पेस में आरजीबी के बजाय ले जाने पर आपको अच्छा लगेगा

— पॉल डिक्सन

Answer 2

मेरे सिर के ऊपर से, एचएसवी अंतरिक्ष में हरे-लाल रंग का संक्रमण है, जिसका अनुवाद RGB में किया गया है:

blue = 0.0
if 0<=power<0.5:        #first, green stays at 100%, red raises to 100%
    green = 1.0
    red = 2 * power
if 0.5<=power<=1:       #then red stays at 100%, green decays
    red = 1.0
    green = 1.0 - 2 * (power-0.5)

उपरोक्त उदाहरण में लाल, हरा, नीला मान प्रतिशत हैं, आप संभवतः सबसे अधिक इस्तेमाल की जाने वाली 0-25% सीमा प्राप्त करने के लिए उन्हें 255 से गुणा करना चाहेंगे।

Answer 3

लघु Copy'n'Paste उत्तर ...

Java Std पर:

int getTrafficlightColor(double value){
    return java.awt.Color.HSBtoRGB((float)value/3f, 1f, 1f);
}

Android पर:

int getTrafficlightColor(double value){
    return android.graphics.Color.HSVToColor(new float[]{(float)value*120f,1f,1f});
}

नोट: मान 0 से 1 के बीच की एक संख्या है जो लाल से हरे रंग की स्थिति को दर्शाता है।

Comments

सीधे हेक्स रंग कोड में परिवर्तित करने के लिए, आप लाभ उठाना चाहते हैंString.format("#%06X", 0xFFFFFF & getTrafficlightColor(value));

— ngeek

Answer 4

यदि आप एक हरे-पीले-लाल प्रतिनिधित्व को स्वीकार करते हैं जैसे कि स्वीकृत उत्तर बताता है तो इस पर एक नज़र डालें।

http://jsfiddle.net/0awncw5u/2/

function percentToRGB(percent) {
    if (percent === 100) {
        percent = 99
    }
    var r, g, b;

    if (percent < 50) {
        // green to yellow
        r = Math.floor(255 * (percent / 50));
        g = 255;

    } else {
        // yellow to red
        r = 255;
        g = Math.floor(255 * ((50 - percent % 50) / 50));
    }
    b = 0;

    return "rgb(" + r + "," + g + "," + b + ")";
}


function render(i) {
    var item = "<li style='background-color:" + percentToRGB(i) + "'>" + i + "</li>";
    $("ul").append(item);
}

function repeat(fn, times) {
    for (var i = 0; i < times; i++) fn(i);
}


repeat(render, 100);

li {
    font-size:8px;
    height:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul></ul>

Comments

मुझे इस कोड का उपयोग करके अलग-अलग प्रतिशत के बराबर मूल्य मिल रहे हैं ... कोई विचार? उदाहरण के लिए, निम्न प्रतिशत आरजीबी 1,255,0: 0.277, 0.222, 0.111 ... उच्च मान ... उदाहरण के लिए (1.0 उदाहरण) ब्राइट ग्रीन के साथ सही आरजीबी लौटाते हैं, लेकिन वे एक सीमा के बाद बंद करना बंद कर देते हैं और मुझे केवल मिलता है मेरे पैमाने पर हरे रंग की।

— पैट्रिक

Answer 5

हरे और लाल के बीच रैखिक रूप से प्रक्षेपित होना चाहिए, लगभग काम करना चाहिए, सिवाय इसके कि बीच में मैला भूरा रंग होगा।

सबसे लचीला और सबसे अच्छा लगने वाला समाधान कहीं न कहीं एक छवि फ़ाइल है जिसमें आपके इच्छित रंग का रैंप है। और फिर वहाँ पिक्सेल मूल्य को देखना। इसमें लचीलापन है कि आप ढाल को सही होने के लिए ट्विक कर सकते हैं ।

यदि आप अभी भी इसे कोड से करना चाहते हैं, तो संभवतः बाईं ओर हरे और पीले रंगों के बीच, और दाईं ओर पीले और लाल रंग के बीच का अंतर करना सबसे अच्छा है। RGB स्पेस में, ग्रीन (R = 0, G = 255, B = 0) है, पीला है (R = 255, G = 255, B = 0), रेड है (R = 255, G = 0, B = 0) ) - यह माना जाता है कि प्रत्येक रंग घटक 0 से 255 तक जाता है।

Comments

यहां स्पेक्ट्रम को लाल / पीले और पीले / हरे रंग में विभाजित करने का सुझाव सबसे सुखद पीला परिणाम देता है।

— अंजीर

Answer 6

मैंने एक छोटा सा कार्य किया है जो आपको प्रतिशत मूल्य के लिए आरजीबी पूर्णांक मूल्य देता है:

private int getGreenToRedGradientByValue(int currentValue, int maxValue)
{
    int r = ( (255 * currentValue) / maxValue );
    int g = ( 255 * (maxValue-currentValue) ) / maxValue;
    int b = 0;
    return ((r&0x0ff)<<16)|((g&0x0ff)<<8)|(b&0x0ff);
}

इसलिए यदि आपका करंटवैल्यू 50 है और आपका मैक्सवेल 100 है, तो यह फ़ंक्शन आपके द्वारा आवश्यक रंग वापस कर देगा, इसलिए यदि आप इस फ़ंक्शन को प्रतिशत मान के साथ लूप करते हैं, तो आपका रंग मान हरे से लाल हो जाएगा। बुरी व्याख्या के लिए क्षमा करें

Answer 7

स्वीकृत उत्तर वास्तव में प्रश्न का उत्तर नहीं दिया ...

सी ++

यहां मेरे इंजन से एक सरल C ++ कोड खंड है जो तीन मनमाने रंगों के बीच रैखिक रूप से और कुशलता से प्रक्षेपित होता है:

const MATH::FLOAT4 color1(0.0f, 1.0f, 0.0f, 1.0f);  // Green
const MATH::FLOAT4 color2(1.0f, 1.0f, 0.0f, 1.0f);  // Yellow
const MATH::FLOAT4 color3(1.0f, 0.0f, 0.0f, 1.0f);  // Red

MATH::FLOAT4 get_interpolated_color(float interpolation_factor)
{
    const float factor_color1 = std::max(interpolation_factor - 0.5f, 0.0f);
    const float factor_color2 = 0.5f - fabs(0.5f - interpolation_factor);
    const float factor_color3 = std::max(0.5f - interpolation_factor, 0.0f);

    MATH::FLOAT4 color;

    color.x = (color1.x * factor_color1 +
               color2.x * factor_color2 +
               color3.x * factor_color3) * 2.0f;

    color.y = (color1.y * factor_color1 +
               color2.y * factor_color2 +
               color3.y * factor_color3) * 2.0f;

    color.z = (color1.z * factor_color1 +
               color2.z * factor_color2 +
               color3.z * factor_color3) * 2.0f;

    color.w = 1.0f;

    return(color);
}

की interpolation_factorसीमा में माना जाता है 0.0 ... 1.0।
रंगों को 0.0 ... 1.0(OpenGL के लिए जैसे) की सीमा में माना जाता है ।

सी#

यहां C # में समान फ़ंक्शन लिखा गया है:

private readonly Color mColor1 = Color.FromArgb(255, 0, 255, 0);
private readonly Color mColor2 = Color.FromArgb(255, 255, 255, 0);
private readonly Color mColor3 = Color.FromArgb(255, 255, 0, 0);

private Color GetInterpolatedColor(double interpolationFactor)
{
    double interpolationFactor1 = Math.Max(interpolationFactor - 0.5, 0.0);
    double interpolationFactor2 = 0.5 - Math.Abs(0.5 - interpolationFactor);
    double interpolationFactor3 = Math.Max(0.5 - interpolationFactor, 0.0);

    return (Color.FromArgb(255,
                (byte)((mColor1.R * interpolationFactor1 +
                        mColor2.R * interpolationFactor2 +
                        mColor3.R * interpolationFactor3) * 2.0),

                (byte)((mColor1.G * interpolationFactor1 +
                        mColor2.G * interpolationFactor2 +
                        mColor3.G * interpolationFactor3) * 2.0),

                (byte)((mColor1.B * interpolationFactor1 +
                        mColor2.B * interpolationFactor2 +
                        mColor3.B * interpolationFactor3) * 2.0)));
}

की interpolationFactorसीमा में माना जाता है 0.0 ... 1.0।
रंग की सीमा में माना जाता है 0 ... 255।

Comments

C # कोड ने मेरे लिए शानदार काम किया (upvote जोड़ा गया) लेकिन इसमें एक स्पेलिंग

— मिस्टेक है

इसके अलावा पूर्णता के लिए यह है कि मैंने आरवीसी को MVC razr व्यू डबल n = वास्तविकValue / maxValue पर वापस करने के लिए फ़ंक्शन का उपयोग कैसे किया है; // यह अनुपात देता है 0-1 var रंग = GetInterpolatedColor (n); वापसी string.Concat ("#", colour.R.ToString ("X"), colour.G.ToString ("X"), colour.B.ToString ("X");

— डीजेविडे

@DJIDave: वाह, क्या एक स्पष्ट और बेवकूफ गलती है। मैंने इसे ठीक कर लिया है। धन्यवाद!

— तारा

Answer 8

आपको रंग घटकों को रैखिक रूप से प्रक्षेपित (LERP) करने की आवश्यकता है । यहां बताया गया है कि सामान्य रूप से यह कैसे किया जाता है, एक शुरुआती मूल्य v0 , एक अंतिम मान v1 और आवश्यक अनुपात (0.0 और 1.0 के बीच एक सामान्यीकृत फ्लोट):

v = v0 + ratio * (v1 - v0)

यह v0 देता है जब अनुपात 0.0, v1 है जब अनुपात 1.0 है, और अन्य मामलों में सब कुछ है।

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

Answer 9

मैं कहूंगा कि आप HSV स्पेस में एक लाइन सेगमेंट (जो केंद्र में थोड़ा-बहुत चमकीला पीला है) और RGB स्पेस में एक लाइन सेगमेंट (जो केंद्र में एक बदसूरत भूरा है) के बीच कुछ चाहते हैं। मैं इसका उपयोग करूंगा, जहां power = 0हरे रंग power = 50को दूंगा , थोड़ा सुस्त पीला power = 100दूंगा , और लाल दूंगा।

blue = 0;
green = 255 * sqrt( cos ( power * PI / 200 ));
red = 255 * sqrt( sin ( power * PI / 200 )); 

Answer 10

यहां स्विफ्ट और एचएसवी स्केल के लिए कॉपी-एंड-पेस्ट समाधान है:

यूइकलर इनिशियलाइज़र ह्यू, संतृप्ति और चमक को [0, 1] में स्वीकार करता है, इसलिए दिए गए मूल्य के लिए [0, 1] से हम प्राप्त कर सकते हैं:

let hue:        CGFloat = value / 3
let saturation: CGFloat = 1 // Or choose any
let brightness: CGFloat = 1 // Or choose any
let alpha:      CGFloat = 1 // Or choose any

let color = UIColor(hue: hue, saturation: saturation, brightness: brightness, alpha: alpha)

Answer 11

import java.awt.Color;

public class ColorUtils {

    public static Color interpolate(Color start, Color end, float p) {
        float[] startHSB = Color.RGBtoHSB(start.getRed(), start.getGreen(), start.getBlue(), null);
        float[] endHSB = Color.RGBtoHSB(end.getRed(), end.getGreen(), end.getBlue(), null);

        float brightness = (startHSB[2] + endHSB[2]) / 2;
        float saturation = (startHSB[1] + endHSB[1]) / 2;

        float hueMax = 0;
        float hueMin = 0;
        if (startHSB[0] > endHSB[0]) {
            hueMax = startHSB[0];
            hueMin = endHSB[0];
        } else {
            hueMin = startHSB[0];
            hueMax = endHSB[0];
        }

        float hue = ((hueMax - hueMin) * p) + hueMin;

        return Color.getHSBColor(hue, saturation, brightness);
    }
}

Answer 12

यदि आपको सीएसएस (न्यूनतम संस्करण 2.1) में इस तरह के ग्रेडिएंट (वास्तव में उलट) की आवश्यकता है तो आप एचएसएल का भी उपयोग कर सकते हैं।

मान लें कि आप एक AngularJs टेम्पलेट में हैं और मान 0 से 1 तक की संख्या है और आप एक तत्व (पृष्ठभूमि या रंगीन रंग) शैली करना चाहते हैं ...

hsl({{ value * 120}}, 50%, 35%)

पहला मूल्य: डिग्री (0 लाल, 120 हरा) दूसरा मूल्य: संतृप्ति (50% तटस्थ) तीसरा मूल्य: लपट (50%)

एक अच्छा लेख यहाँ

विकिपीडिया पर यहाँ सिद्धांत

Answer 13

यहाँ Objective-CSimucal के समाधान का संस्करण है:

- (UIColor*) colorForCurrentLevel:(float)level
{
    double hue = level * 0.4; // Hue (note 0.4 = Green)
    double saturation = 0.9; // Saturation
    double brightness = 0.9; // Brightness

    return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1.0];
}

जहां स्तर के बीच 0.0और एक मूल्य होगा 1.0।
आशा है कि यह किसी की मदद करता है!

Answer 14

पायथन 2.7 में:

import colorsys

def get_rgb_from_hue_spectrum(percent, start_hue, end_hue):
    # spectrum is red (0.0), orange, yellow, green, blue, indigo, violet (0.9)
    hue = percent * (end_hue - start_hue) + start_hue
    lightness = 0.5
    saturation = 1
    r, g, b = colorsys.hls_to_rgb(hue, lightness, saturation)
    return r * 255, g * 255, b * 255

# from green to red:
get_rgb_from_hue_spectrum(percent, 0.3, 0.0)

# or red to green:
get_rgb_from_hue_spectrum(percent, 0.0, 0.3)

प्रतिशत जरूर है value / max_value। या अगर आपका पैमाना 0 से शुरू नहीं होता है (value - min_value) / (max_value - min_value)।

Answer 15

जावास्क्रिप्ट

मैं बार चार्ट के साथ Google विज़ुअलाइज़ेशन का उपयोग कर रहा हूं और चाहता था कि बार प्रतिशत के आधार पर हरे से लाल हो जाएं। यह मेरे द्वारा पाया गया सबसे साफ समाधान है और पूरी तरह से काम करता है।

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)';
}

बस सुनिश्चित करें कि आपका प्रतिशत 50% के लिए 50 है और 0.50 नहीं है ।

Answer 16

मैंने (0,100) रेंज के पहले और दूसरे भाग में विभाजित करके स्वीकृत उत्तर को अपडेट कर दिया है और 100 को अधिकतम स्तर से प्रतिस्थापित कर दिया है, ताकि रेंज गतिशील बन सके। परिणाम एचएसवी मॉडल के समान है, लेकिन फिर भी आरजीबी का उपयोग कर रहा है। पीले रंग का प्रतिनिधित्व करने के लिए कुंजी को बीच में (255,255,0) होना चाहिए। मैंने इस विचार को स्वीकृत उत्तर और एक अन्य VBA कोड में संयोजित किया है, इसलिए इसे VBA में प्राप्त करें और Excel में उपयोग करें। मुझे आशा है कि तर्क मदद करता है और अन्य भाषाओं / अनुप्रयोगों में उपयोग किया जा सकता है।

Sub UpdateConditionalFormatting(rng As Range)
    Dim cell As Range
    Dim max As Integer

    max = WorksheetFunction.max(rng)

    For Each cell In rng.Cells

    If cell.Value >= 0 And cell.Value < max / 2 Then
        cell.Interior.Color = RGB(255 * cell.Value / (max / 2), 255, 0)
    ElseIf cell.Value >= max / 2 And cell.Value <= max Then
        cell.Interior.Color = RGB(255, 255 * ((max) - cell.Value) / (max / 2), 0)
    End If

    Next cell
End Sub

चीयर्स, पावलिन

Answer 17

वीबी

Public Function GetPercentageColor( _
  ByVal iPercent As Long, Optional _
  ByVal bOpposit As Boolean) As Long
' 0->100% - Green->Yellow->Red
' bOpposit - Red->Yellow->Green

If bOpposit Then iPercent = (100 - iPercent)

Select Case iPercent
Case Is < 1: GetPercentageColor = 65280 ' RGB(0, 255, 0)
Case Is > 99: GetPercentageColor = 255  ' RGB(255, 0, 0)
Case Is < 50: GetPercentageColor = RGB(255 * iPercent / 50, 255, 0)
Case Else: GetPercentageColor = RGB(255, (255 * (100 - iPercent)) / 50, 0)
End Select

End Function

Comments

जब भी यह काम कर सकता है, तो यह उपयोगी होगा यदि आप कुछ स्पष्टीकरण प्रदान करेंगे

— डेविड ग्लिकमैन 11

Answer 18

आत्म निहित उदाहरण

<html>
<head>
<script>
//--------------------------------------------------------------------------
function gradient(left, mid, right)
{
    var obj = {}

    var lt50 = {"r":(mid.r-left.r)/50.0,
                "g":(mid.g-left.g)/50.0,
                "b":(mid.b-left.b)/50.0}
    var gt50 = {"r":(right.r-mid.r)/50.0,
                "g":(right.g-mid.g)/50.0,
                "b":(right.b-mid.b)/50.0}

    obj.getColor = function(percent) {
        if (percent == 50.0) {
            return mid;
        }
        if (percent < 50.0) {
            return "rgb("+Math.floor(left.r+lt50.r*percent+0.5)+","+
                          Math.floor(left.g+lt50.g*percent+0.5)+","+
                          Math.floor(left.b+lt50.b*percent+0.5)+")";
        }
        var p2 = percent-50.0;
        return "rgb("+Math.floor(mid.r+gt50.r*p2+0.5)+","+
                      Math.floor(mid.g+gt50.g*p2+0.5)+","+
                      Math.floor(mid.b+gt50.b*p2+0.5)+")";
    }

    return obj;
}

//--------------------------------------------------------------------------
var g_gradient = gradient( {"r":255, "g":20, "b":20},  // Left is red
                           {"r":255, "g":255, "b":20}, // Middle is yellow
                           {"r":20, "g":255, "b":20} ); // right is green

//--------------------------------------------------------------------------
function updateColor()
{
    var percent = document.getElementById('idtext').value.length;
    var oscore = document.getElementById('idscore');

    if (percent > 100.0) {
        percent = 100.0;
    }
    if (percent < 0.0) {
        percent = 0.0;
    }
    var col = g_gradient.getColor(percent)
    oscore.style['background-color'] = col;
    oscore.innerHTML = percent + '%';
}

</script>
</head>
<body onLoad="updateColor()">
<input size='100' placeholder='type text here' id='idtext' type="text" oninput="updateColor()" />
<br />
<br />
<div id='idscore' style='text-align:center; width:200px; border-style:solid;
     border-color:black; border-width:1px; height:20px;'> </div>
</body>
</html>

Answer 19

यह लाल से पीले और फिर हरे रंग के
मूल्य में 0 - 100 से भिन्न होगा

-(UIColor*) redToGreenColorWithPosition:(int) value {

    double R, G;
    if (value > 50) {
        R = (255 * (100 - value)/ 50) ;
        G = 255;
    }else {
        R = 255;
        G = (255 * (value*2)) / 100;
    }

    return [UIColor colorWithRed:R/255.0f green:G/255.0f blue:0.0f alpha:1.0f];
}