Basit bir çözüm CSS RGBA () renk yapıcı kullanmak olabilir:

border: 1px solid rgba(255,255,255,0.7)

Bu% 70 opaklık beyaz bir çerçeve oluşturmak istiyorum. Ne yazık ki, bu Firefox 2, Opera 9, veya IE herhangi bir sürümünde desteklenmiyor. Bu tarayıcılar için alternatif versiyonlarını oluşturmak zor olmayacaktır. jQuery örnek:

$('body').append('<div id="rgbatest" style="color:rgba(0,0,0,0);position:absolute;visibility:hidden">&nbsp;</div>"');
if(!$('#rgbatest').css('color').match(/^rgba/)){
     $('body').addClass('no-rgba');
}
$('#rgbatest').remove();

Burada, rgba renkleri geçersiz kılmak için. No-rgba sınıfını kullanabilirsiniz.

#thisDiv{border: 1px solid rgba(255,255,255,0.7)}
.no-rgba #thisDiv{border: 1px solid #FFF}

An aside: RGB is not a perceptually linear color space. I recommend converting from RGB to HSL, interpolating, then converting back to RGB. I wrote the following PHP code to generate arbitrary perceptually-correct gradients; I suggest turning it into a service which can then be called from PHP or AJAX at need.

Eğer son altıgen çıktı olarak alabilirsiniz

$hexcol = col2string( RGBinterpolate("#ececec", "#ffffff", 0.5) ); // "#f4f4f4"

Kodu:

// Input:
//   $start as RGB color string,
//   $end as RGB color string,
//   $dist as float in [0.0 .. 1.0] being % distance between start and end colors
// Output:
//   array(int, int, int) being the resulting color in RGB)
function RGBinterpolate( $start, $end, $dist ) {
        $hsl_start = rgb2hsl( getCol($start) );
        $hsl_end = rgb2hsl( getCol($end) );

        // choose the shorter arc of the hue wheel!
        if ($hsl_start[0] > $hsl_end[0]) {
            if ($hsl_start[0] > $hsl_end[0] + 0.5)
                $hsl_start[0] -= 1.0;
        }
        else {
            if ($hsl_end[0] > $hsl_start[0] + 0.5)
                $hsl_end[0] -= 1.0;
        }

        // do linear interpolation in hsl color space
        $hs = interp( $hsl_start[0], $hsl_end[0], $dist );
        $ss = interp( $hsl_start[1], $hsl_end[1], $dist );
        $ls = interp( $hsl_start[2], $hsl_end[2], $dist );

        return hsl2rgb( array( $hs, $ss, $ls ) );
}


// Input: start-value, end-value, % distance as float in [0.0 .. 1.0]
// Output: result of interpolation as float
function interp($start, $end, $dist) {
        return $start + ($end - $start)*$dist;
}


// Input: string in one of the following formats:
//  #XXXXXX        (standard hex code as used in CSS)
//  0xXXXXXX       (same thing written as C longint)
//  #XXX           (equivalent to each-digit-doubled, ie #abc is #aabbcc)
//  000, 000, 000  (decimal triad, each value in 0..255)
//  colorname      (Netscape defined color names)
// Output: array(int, int, int) for legal values, else default value
function getCol($str, $default=array(0,0,0)) {
    global $namedcolors;

        // convert named color to #xxxxxx code
    if( isset($namedcolors[$str]) )
        $str = $namedcolors[$str];      // turn named color into a hex value

    $str = trim($str);  // remove leading and trailing whitespace
    $hex = "[0-9a-z]";

        // attempt to match #XXXXXX
    $pat = "/(#)($hex{2})($hex{2})($hex{2})/i";
    if ((preg_match($pat, $str, $arr)) == 1) {
            $r = hexdec($arr[2]);
            $g = hexdec($arr[3]);
            $b = hexdec($arr[4]);

            return array($r, $g, $b);
    }

        // attempt to match 0xXXXXXX
    $pat = "/(0x)($hex{2})($hex{2})($hex{2})/i";
    if ((preg_match($pat, $str, $arr)) == 1) {
            $r = hexdec($arr[2]);
            $g = hexdec($arr[3]);
            $b = hexdec($arr[4]);

            return array($r, $g, $b);
    }

        // attempt to match #XXX
    $pat = "/(#)($hex)($hex)($hex)/i";
    if ((preg_match($pat, $str, $arr)) == 1) {
            $r = hexdec($arr[2]) * 17;
            $g = hexdec($arr[3]) * 17;
            $b = hexdec($arr[4]) * 17;

            return array($r, $g, $b);
    }

    // attempt to match int, int, int
        $pat = "/(\d{1,3})\\s*,\\s*(\d{1,3})\\s*,\\s*(\d{1,3})/i";
    if ((preg_match($pat, $str, $arr)) == 1) {
            $r = 0 + $arr[2];    // implicit cast to int - make explicit?
            $g = 0 + $arr[3];
            $b = 0 + $arr[4];

            return array($r, $g, $b);
    }

        // if none of the above worked, return default value
    return $default;
}


// Input: array(int,int,int) being RGB color in { [0..255], [0..255], [0..255] }
// Output array(float,float,float) being HSL color in { [0.0 .. 1.0), [0.0 .. 1.0), [0.0 .. 1.0) }
function rgb2hsl($rgbtrio) {
    $r = $rgbtrio[0] / 256.0;   // Normalize {r,g,b} to [0.0 .. 1.0)
    $g = $rgbtrio[1] / 256.0;
    $b = $rgbtrio[2] / 256.0;

    $h = 0.0;
    $s = 0.0;
    $L = 0.0;

    $min = min($r, $g, $b);
    $max = max($r, $g, $b);
    $delta = $max - $min;
    $L = 0.5 * ( $max + $min );

    if ( $delta < 0.001 )   // This is a gray, no chroma...
    {
        $h = 0.0;   // ergo, hue and saturation are meaningless
        $s = 0.0;
    }
    else    // Chromatic data...
    {
        if ( $L < 0.5 ) $s = ($max - $min) / ( $max + $min );  
        else            $s = ($max - $min) / ( 2 - $max - $min );

        $dr = ( (($max - $r) / 6.0) + ($max / 2.0) ) / $max;
        $dg = ( (($max - $g) / 6.0) + ($max / 2.0) ) / $max;
        $db = ( (($max - $b) / 6.0) + ($max / 2.0) ) / $max;

        if ($r == $max)         $h = $db - $dg;
        elseif ($g == $max)     $h = (0.3333) + $dr - $db;
        elseif ($b == $max)     $h = (0.6666) + $dg - $dr;

        if ( $h < 0.0 ) $h += 1.0;
        if ( $h > 1.0 ) $h -= 1.0;
    }

    return array($h, $s, $L);
}


    function Hue_2_RGB( $v1, $v2, $vH ) {
        $v1 = 0.0+$v1;
        $v2 = 0.0+$v2;
        $vH = 0.0+$vH;

        if ( $vH < 0.0 )            $vH += 1.0;
        elseif ( $vH >= 1.0 )       $vH -= 1.0;
        // 0.0 <= vH < 1.0

        if ( $vH < 0.1667 )         return ( $v1 + 6.0*$vH*($v2 - $v1) );
        elseif ( $vH < 0.5 )        return ( $v2 );
        elseif ( $vH < 0.6667 )     return ( $v1 + (4.0-(6.0*$vH ))*($v2 - $v1) );
        else                        return ( $v1 );
    }

// Input: array(float,float,float) being HSL color in { [0.0 .. 1.0), [0.0 .. 1.0), [0.0 .. 1.0) }
// Output: array(int,int,int) being RGB color in { [0..255], [0..255], [0..255] }
function hsl2rgb($hsltrio) {
    $h = $hsltrio[0];
    $s = $hsltrio[1];
    $L = $hsltrio[2];

    if ( $s < 0.001 )                       //HSL from 0 to 1
    {
        $r = $L;
        $g = $L;
        $b = $L;
    }
    else
    {
        if ( $L < 0.5 )             $j = $L * ( 1.0 + $s );
        else                        $j = ($L + $s) - ($s * $L);

        $i = (2.0 * $L) - $j;

        $r = Hue_2_RGB( $i, $j, $h + 0.3333 );
        $g = Hue_2_RGB( $i, $j, $h );
        $b = Hue_2_RGB( $i, $j, $h - 0.3333 );
    }

    return array( floor(256.0 * $r), floor(256.0 * $g), floor(256.0 * $b) );
}


function col2string($rgbtrio) {
    global $colornames;

    $r = floor( $rgbtrio[0] );
    $g = floor( $rgbtrio[1] );
    $b = floor( $rgbtrio[2] );

    $str = sprintf("#%02x%02x%02x", $r, $g, $b);

    if( isset($colornames[$str]) )
        return $colornames[$str];
    else
        return $str;
}


// All Netscape named colors
$namedcolors = array(
  "aliceblue" => "#f0f8ff",
  "antiquewhite" => "#faebd7",
  "aqua" => "#00ffff",
  "aquamarine" => "#7fffd4",
  "azure" => "#f0ffff",
  "beige" => "#f5f5dc",
  "bisque" => "#ffe4c4",
  "black" => "#000000",
  "blanchedalmond" => "#ffebcd",
  "blue" => "#0000ff",
  "blueviolet" => "#8a2be2",
  "brown" => "#a52a2a",
  "burlywood" => "#deb887",
  "cadetblue" => "#5f9ea0",
  "chartreuse" => "#7fff00",
  "chocolate" => "#d2691e",
  "coral" => "#ff7f50",
  "cornflowerblue" => "#6495ed",
  "cornsilk" => "#fff8dc",
  "crimson" => "#dc143c",
  "cyan" => "#00ffff",
  "darkblue" => "#00008b",
  "darkcyan" => "#008b8b",
  "darkgoldenrod" => "#b8860b",
  "darkgray" => "#a9a9a9",
  "darkgreen" => "#006400",
  "darkgrey" => "#a9a9a9",
  "darkkhaki" => "#bdb76b",
  "darkmagenta" => "#8b008b",
  "darkolivegreen" => "#556b2f",
  "darkorange" => "#ff8c00",
  "darkorchid" => "#9932cc",
  "darkred" => "#8b0000",
  "darksalmon" => "#e9967a",
  "darkseagreen" => "#8fbc8f",
  "darkslateblue" => "#483d8b",
  "darkslategray" => "#2f4f4f",
  "darkslategrey" => "#2f4f4f",
  "darkturquoise" => "#00ced1",
  "darkviolet" => "#9400d3",
  "deeppink" => "#ff1493",
  "deepskyblue" => "#00bfff",
  "dimgray" => "#696969",
  "dimgrey" => "#696969",
  "dodgerblue" => "#1e90ff",
  "firebrick" => "#b22222",
  "floralwhite" => "#fffaf0",
  "forestgreen" => "#228b22",
  "fuchsia" => "#ff00ff",
  "gainsboro" => "#dcdcdc",
  "ghostwhite" => "#f8f8ff",
  "gold" => "#ffd700",
  "goldenrod" => "#daa520",
  "gray" => "#808080",
  "green" => "#008000",
  "greenyellow" => "#adff2f",
  "grey" => "#808080",
  "honeydew" => "#f0fff0",
  "hotpink" => "#ff69b4",
  "indianred" => "#cd5c5c",
  "indigo" => "#4b0082",
  "ivory" => "#fffff0",
  "khaki" => "#f0e68c",
  "lavender" => "#e6e6fa",
  "lavenderblush" => "#fff0f5",
  "lawngreen" => "#7cfc00",
  "lemonchiffon" => "#fffacd",
  "lightblue" => "#add8e6",
  "lightcoral" => "#f08080",
  "lightcyan" => "#e0ffff",
  "lightgoldenrodyellow" => "#fafad2",
  "lightgray" => "#d3d3d3",
  "lightgreen" => "#90ee90",
  "lightgrey" => "#d3d3d3",
  "lightpink" => "#ffb6c1",
  "lightsalmon" => "#ffa07a",
  "lightseagreen" => "#20b2aa",
  "lightskyblue" => "#87cefa",
  "lightslategray" => "#778899",
  "lightslategrey" => "#778899",
  "lightsteelblue" => "#b0c4de",
  "lightyellow" => "#ffffe0",
  "lime" => "#00ff00",
  "limegreen" => "#32cd32",
  "linen" => "#faf0e6",
  "magenta" => "#ff00ff",
  "maroon" => "#800000",
  "mediumaquamarine" => "#66cdaa",
  "mediumblue" => "#0000cd",
  "mediumorchid" => "#ba55d3",
  "mediumpurple" => "#9370db",
  "mediumseagreen" => "#3cb371",
  "mediumslateblue" => "#7b68ee",
  "mediumspringgreen" => "#00fa9a",
  "mediumturquoise" => "#48d1cc",
  "mediumvioletred" => "#c71585",
  "midnightblue" => "#191970",
  "mintcream" => "#f5fffa",
  "mistyrose" => "#ffe4e1",
  "moccasin" => "#ffe4b5",
  "navajowhite" => "#ffdead",
  "navy" => "#000080",
  "oldlace" => "#fdf5e6",
  "olive" => "#808000",
  "olivedrab" => "#6b8e23",
  "orange" => "#ffa500",
  "orangered" => "#ff4500",
  "orchid" => "#da70d6",
  "palegoldenrod" => "#eee8aa",
  "palegreen" => "#98fb98",
  "paleturquoise" => "#afeeee",
  "palevioletred" => "#db7093",
  "papayawhip" => "#ffefd5",
  "peachpuff" => "#ffdab9",
  "peru" => "#cd853f",
  "pink" => "#ffc0cb",
  "plum" => "#dda0dd",
  "powderblue" => "#b0e0e6",
  "purple" => "#800080",
  "red" => "#ff0000",
  "rosybrown" => "#bc8f8f",
  "royalblue" => "#4169e1",
  "saddlebrown" => "#8b4513",
  "salmon" => "#fa8072",
  "sandybrown" => "#f4a460",
  "seagreen" => "#2e8b57",
  "seashell" => "#fff5ee",
  "sienna" => "#a0522d",
  "silver" => "#c0c0c0",
  "skyblue" => "#87ceeb",
  "slateblue" => "#6a5acd",
  "slategray" => "#708090",
  "slategrey" => "#708090",
  "snow" => "#fffafa",
  "springgreen" => "#00ff7f",
  "steelblue" => "#4682b4",
  "tan" => "#d2b48c",
  "teal" => "#008080",
  "thistle" => "#d8bfd8",
  "tomato" => "#ff6347",
  "turquoise" => "#40e0d0",
  "violet" => "#ee82ee",
  "wheat" => "#f5deb3",
  "white" => "#ffffff",
  "whitesmoke" => "#f5f5f5",
  "yellow" => "#ffff00",
  "yellowgreen" => "#9acd32"
);
$colornames = array_flip($namedcolors);

Bir rengini açmak için böyle bir işlevi kullanabilirsiniz:

function lighten(color, factor) {
    factor = factor || 0.4;
    var lighter = '#';
    for(var i = 1; i < 6; i += 2) {
        var part = parseInt(color.substr(i, 2), 16);
        part += Math.round((255 - part) * 0.4);
        lighter += (part < 16 ? '0' : '') + part.toString(16);
    }
    return lighter;
}
lighten('#ececec'); // returns '#f4f4f4'

Bu bir yüzde ziyade sabit bir miktar eşit renkleri aydınlatır.

Bunu 3 (444) ya da 6 didgts (444444) ve o zaman onaltılık bir tamsayı, her RGB bölmek olmadığını görmek için onaltılık kontrol etmeniz gerekir.

Sonra, (o fark bölünmüş oluyor herhalde) ne kadar istediğinize yakın bir eşik değerini seçin.

66hex = 102dec.

kat ((255-102) / 2) = 76.

color correct 102 + 76 = 178

178dec = B2hex.

B2 (yerine 66 daha) yeni değer olacaktır

Hepiniz 3 onaltılık çiftleri için bunu yapmak gerekir.

Hugh BOTHWELL kod bazen garip cevaplar vermek gibi görünüyor. Ie dönüştürürken. Hsl RGB # eb69ff bu ,751567320261 1,67763157895 0,703125 verir

At function rgb2hsl($rgbtrio)
if ( $L < 0.5 ) $s = $max / ( $max + $min );
else $s = $max / ( 2 - $max - $min );

Bu kodu olmalıdır

if ( $L < 0.5 ) $s = ($max - $min) / ( $max + $min );
else $s = ($max - $min) / ( 2 - $max - $min );

RGBinterpolate kullanırken, en azından bundan sonra makul bir RGB değerleri alabilirsiniz ($ başlangıç ​​$ sonu $ dist)

JQuery kullanarak:

$(selector).css('border-color', '#f4f4f4')

selector, değiştirmek istediğiniz öğeleri maç olacak seçici ile değiştirin. Bu HTML kodu olmadan sizin için yazmak zor.

I this one gibi renk seçici uygulamak olacaktır. Bu en kullanıcı dostu eylem ve uygulamak zor değildir. OnSubmit () yöntemi ile.

$(".picker").ColorPicker({
    onSubmit: function(hsb, hex, rgb, el){
        $(el).css({
            'background-color': '#' + hex
        });
        $(el).ColorPickerHide();
    }
});

Benim durumumda 'el' Ben rengini değiştirmek istediğiniz bir div.

Lablz webapp platforma renk şemaları ekleyerek son zamanlarda çalışırken biz aynı sorunu çözmek için gerekli. Hugh Bothwell tarafından sağlanan çözüm doğru yönde işaret, ancak bir sorun vardır. Hugh hsl RGB dönüştürme sonra Ton, Doygunluk ve Parlaklığı'nı katmak gerektiğini söylüyor. Ancak, sadece Parlaklığı'nı (parlaklık) işlemek için gereken aynı renk tonları yaratmak için aksi takdirde farklı bir renk ile sona erecek. Biz http://colorschemedesigner.com tarafından oluşturulan renk varyasyonlarını oluşturmak için (Java) sunucu tarafında bu yaklaşımı kullanın. Biz renkli bir arka plan üzerinde okunamayan bir renkli metin ile sonuna kadar asla böylece biz de renkler arasındaki kontrastı belirlemek ve ayarlamak için Parlaklığı kullanın.

Bu yaklaşım ile biten önce biz burada birçok diğer yanıtlar belirtildiği gibi RGB renk alanı manipüle ve HSB RGB dönüştürme ve Parlaklık değiştirmeyi denedim. Örneğin parlaklık kahverengiden maksimum arttığında HSB'de Parlaklık manipülasyon size sadece bir hardal rengi gibi bir şey alacak iken, tüm yol beyaza yakın ufak tonları gider olarak HSL en iyi sonuçları verdi.

Eğer isterseniz, biz geliştirdik java kodu gönderebilirsiniz.