javascript - प्रोग्रामिक रूप से एक हेक्स रंग(या आरजीबी, और मिश्रण रंग) को हल्का या डार्क करें




colors hex (8)

क्या आपने आरजीबी> एचएसएल रूपांतरण के बारे में सोचा है? तो बस चमक को ऊपर और नीचे ले जाएं? जिस तरह से मैं जाऊंगा।

कुछ एल्गोरिदम के लिए एक त्वरित रूप से मुझे निम्नलिखित साइटें मिलीं।

PHP: http://serennu.com/colour/rgbtohsl.php

जावास्क्रिप्ट: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript जावास्क्रिप्ट

उपरोक्त लिंक संपादित करें अब मान्य नहीं है। आप पेज स्रोत या gist लिए गिट हब देख सकते हैं

वैकल्पिक रूप से एक और स्टैक ओवरफ्लो question देखने के लिए एक अच्छी जगह हो सकती है।

भले ही यह ओपी के लिए सही विकल्प नहीं है, फिर भी मैं मूल रूप से सुझाव देने वाले कोड का अनुमान लगा रहा हूं। (मान लें कि आपके पास आरजीबी / एचएसएल रूपांतरण फ़ंक्शन हैं)

var SHADE_SHIFT_AMOUNT = 0.1; 

function lightenShade(colorValue)
{
    if(colorValue && colorValue.length >= 6)
    {
        var redValue = parseInt(colorValue.slice(-6,-4), 16);
        var greenValue = parseInt(colorValue.slice(-4,-2), 16);
        var blueValue = parseInt(colorValue.slice(-2), 16);

        var hsl = rgbToHsl(redValue, greenValue, blueValue);
        hsl[2]= Math.min(hsl[2] + SHADE_SHIFT_AMOUNT, 1);
        var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
        return "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    }
    return null;
}

function darkenShade(colorValue)
{
    if(colorValue && colorValue.length >= 6)
    {
        var redValue = parseInt(colorValue.slice(-6,-4), 16);
        var greenValue = parseInt(colorValue.slice(-4,-2), 16);
        var blueValue = parseInt(colorValue.slice(-2), 16);

        var hsl = rgbToHsl(redValue, greenValue, blueValue);
        hsl[2]= Math.max(hsl[2] - SHADE_SHIFT_AMOUNT, 0);
        var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
        return "#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
    }
    return null;
}

यह मानता है:

  1. आपके पास hslToRgb और rgbToHsl
  2. पैरामीटर colorValue फॉर्म #RRGGBB में एक स्ट्रिंग है

हालांकि अगर हम सीएसएस पर चर्चा कर रहे हैं तो hsl/hsla / क्रोम / फ़ायरफ़ॉक्स के लिए hsl/hsla निर्दिष्ट करने के लिए एक वाक्यविन्यास है।

यहां एक ऐसा फ़ंक्शन है जिसे मैं एक विशिष्ट राशि से हेक्स रंग को प्रोग्रामेटिक रूप से हल्का या अंधेरा करने के लिए काम कर रहा था। बस रंग ( col ) और आधार 10 पूर्णांक ( amt ) के लिए "3F6D2A" जैसे स्ट्रिंग में हल्का या अंधेरा करने के लिए पास करें। अंधेरे करने के लिए, ऋणात्मक संख्या (यानी -20) में गुजरें।

ऐसा करने का कारण मुझे मिले सभी समाधानों के कारण था, इस प्रकार, वे इस मुद्दे को अधिक जटिल बनाते थे। और मुझे लगा कि यह कोड की कुछ पंक्तियों के साथ किया जा सकता है। यदि आपको कोई समस्या आती है, तो कृपया मुझे बताएं, या इसे समायोजित करने के लिए कोई समायोजन करें।

function LightenDarkenColor(col,amt) {
    col = parseInt(col,16);
    return (((col & 0x0000FF) + amt) | ((((col>> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

यहां विकास के उपयोग के लिए संस्करण पढ़ने के लिए एक आसान है:

function LightenDarkenColor(col,amt) {
    var num = parseInt(col,16);
    var r = (num >> 16) + amt;
    var b = ((num >> 8) & 0x00FF) + amt;
    var g = (num & 0x0000FF) + amt;
    var newColor = g | (b << 8) | (r << 16);
    return newColor.toString(16);
}

और अंततः रंगों को संभालने के लिए एक संस्करण जो (या नहीं) हो सकता है शुरुआत में "#" हो सकता है। अनुचित रंग मूल्यों के लिए समायोजन:

function LightenDarkenColor(col,amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col,16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

ठीक है, तो अब यह केवल कुछ पंक्तियों में नहीं है, लेकिन यह बहुत आसान लगता है और यदि आप "#" का उपयोग नहीं कर रहे हैं और रंगों से बाहर रंगों की जांच करने की आवश्यकता नहीं है, तो यह केवल कुछ पंक्तियां हैं।

यदि "#" का उपयोग नहीं करते हैं, तो आप इसे कोड में जोड़ सकते हैं जैसे:

var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);

मुझे लगता है कि मेरा मुख्य सवाल है, क्या मैं यहां सही हूँ? क्या इसमें कुछ (सामान्य) परिस्थितियां शामिल नहीं हैं?


निम्न विधि आपको हेक्साडेसिमल (हेक्स) रंग स्ट्रिंग के एक्सपोजर मान को हल्का या अंधेरा करने की अनुमति देगी:

private static string GetHexFromRGB(byte r, byte g, byte b, double exposure)
{
    exposure = Math.Max(Math.Min(exposure, 1.0), -1.0);
    if (exposure >= 0)
    {
        return "#"
            + ((byte)(r + ((byte.MaxValue - r) * exposure))).ToString("X2")
            + ((byte)(g + ((byte.MaxValue - g) * exposure))).ToString("X2")
            + ((byte)(b + ((byte.MaxValue - b) * exposure))).ToString("X2");
    }
    else
    {
        return "#"
            + ((byte)(r + (r * exposure))).ToString("X2")
            + ((byte)(g + (g * exposure))).ToString("X2")
            + ((byte)(b + (b * exposure))).ToString("X2");
    }

}

GetHexFromRGB () में अंतिम पैरामीटर मान के लिए, -1 और 1 के बीच कहीं डबल मान में पास करें (-1 काला है, 0 अपरिवर्तित है, 1 सफेद है):

// split color (#e04006) into three strings
var r = Convert.ToByte("e0", 16);
var g = Convert.ToByte("40", 16);
var b = Convert.ToByte("06", 16);

GetHexFromRGB(r, g, b, 0.25);  // Lighten by 25%;

मैंने आपके फ़ंक्शन की कोशिश की और थोड़ी सी बग थी: यदि कुछ अंतिम 'आर' मान केवल 1 अंक है, तो परिणाम सामने आता है: 'a0a0a' जब सही मान '0a0a0a' है, उदाहरण के लिए। मैंने बस अपनी वापसी के बजाय इसे जोड़कर इसे तुरंत ठीक कर दिया:

var rStr = (r.toString(16).length < 2)?'0'+r.toString(16):r.toString(16);
var gStr = (g.toString(16).length < 2)?'0'+g.toString(16):g.toString(16);
var bStr = (b.toString(16).length < 2)?'0'+b.toString(16):b.toString(16);

return (usePound?"#":"") + rStr + gStr + bStr;

शायद यह इतना अच्छा नहीं है लेकिन यह काम करता है। ग्रेट फंक्शन, बीटीडब्ल्यू। मुझे जिस चीज की जरूरत थी। :)


मैंने एक समाधान बनाया जो मेरे लिए बहुत अच्छा काम करता है:

function shadeColor(color, percent) {

    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

उदाहरण लाइटन:

shadeColor("#63C6FF",40);

उदाहरण अंधेरा:

shadeColor("#63C6FF",-40);

C# Version... note that I am getting color strings in this format #FF12AE34, and need to cut out the #FF.

    private string GetSmartShadeColorByBase(string s, float percent)
    {
        if (string.IsNullOrEmpty(s))
            return "";
        var r = s.Substring(3, 2);
        int rInt = int.Parse(r, NumberStyles.HexNumber);
        var g = s.Substring(5, 2);
        int gInt = int.Parse(g, NumberStyles.HexNumber);
        var b = s.Substring(7, 2);
        int bInt = int.Parse(b, NumberStyles.HexNumber);

        var t = percent < 0 ? 0 : 255;
        var p = percent < 0 ? percent*-1 : percent;

        int newR = Convert.ToInt32(Math.Round((t - rInt) * p) + rInt);
        var newG = Convert.ToInt32(Math.Round((t - gInt) * p) + gInt);
        var newB = Convert.ToInt32(Math.Round((t - bInt) * p) + bInt);

        return String.Format("#{0:X2}{1:X2}{2:X2}", newR, newG, newB);
    }

How to simple shade color in PHP?

<?php
function shadeColor ($color='#cccccc', $percent=-25) {

  $color = Str_Replace("#",Null,$color);

  $r = Hexdec(Substr($color,0,2));
  $g = Hexdec(Substr($color,2,2));
  $b = Hexdec(Substr($color,4,2));

  $r = (Int)($r*(100+$percent)/100);
  $g = (Int)($g*(100+$percent)/100);
  $b = (Int)($b*(100+$percent)/100);

  $r = Trim(Dechex(($r<255)?$r:255));  
  $g = Trim(Dechex(($g<255)?$g:255));  
  $b = Trim(Dechex(($b<255)?$b:255));

  $r = ((Strlen($r)==1)?"0{$r}":$r);
  $g = ((Strlen($g)==1)?"0{$g}":$g);
  $b = ((Strlen($b)==1)?"0{$b}":$b);

  return (String)("#{$r}{$g}{$b}");
}

echo shadeColor(); // #999999

I've long wanted to be able to produce tints/shades of colours, here is my JavaScript solution:

const varyHue = function (hueIn, pcIn) {
    const truncate = function (valIn) {
        if (valIn > 255) {
            valIn = 255;
        } else if (valIn < 0)  {
            valIn = 0;
        }
        return valIn;
    };

    let red   = parseInt(hueIn.substring(0, 2), 16);
    let green = parseInt(hueIn.substring(2, 4), 16);
    let blue  = parseInt(hueIn.substring(4, 6), 16);
    let pc    = parseInt(pcIn, 10);    //shade positive, tint negative
    let max   = 0;
    let dif   = 0;

    max = red;

    if (pc < 0) {    //tint: make lighter
        if (green < max) {
            max = green;
        }

        if (blue < max) {
            max = blue;
        }

        dif = parseInt(((Math.abs(pc) / 100) * (255 - max)), 10);

        return leftPad(((truncate(red + dif)).toString(16)), '0', 2)  + leftPad(((truncate(green + dif)).toString(16)), '0', 2) + leftPad(((truncate(blue + dif)).toString(16)), '0', 2);
    } else {    //shade: make darker
        if (green > max) {
            max = green;
        }

        if (blue > max) {
            max = blue;
        }

        dif = parseInt(((pc / 100) * max), 10);

        return leftPad(((truncate(red - dif)).toString(16)), '0', 2)  + leftPad(((truncate(green - dif)).toString(16)), '0', 2) + leftPad(((truncate(blue - dif)).toString(16)), '0', 2);
    }
};

This is what I used based on your function. I prefer to use steps over percentage because it's more intuitive for me.

For example, 20% of a 200 blue value is much different than 20% of a 40 blue value.

Anyways, here's my modification, thanks for your original function.

function adjustBrightness(col, amt) {

    var usePound = false;

    if (col[0] == "#") {
        col = col.slice(1);
        usePound = true;
    }

    var R = parseInt(col.substring(0,2),16);
    var G = parseInt(col.substring(2,4),16);
    var B = parseInt(col.substring(4,6),16);

    R = R + amt;
    G = G + amt;
    B = B + amt;

    if (R > 255) R = 255;
    else if (R < 0) R = 0;

    if (G > 255) G = 255;
    else if (G < 0) G = 0;

    if (B > 255) B = 255;
    else if (B < 0) B = 0;

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return (usePound?"#":"") + RR + GG + BB;

}




hex