logo标签列表

简单的颜色变化

phpjavascriptjqueryhtmlcolors
5
我正在创建一个用户界面，用户可以更改页面的颜色值。我想要的是将背景颜色的值变亮一定程度。我只是想实现一个突出显示的线条，而不必每次都制作新的图像。
例如：用户将背景颜色设置为#ECECEC。现在我希望某些元素的边框变成#F4F4F4（接近白色的颜色）。
请告诉我是否有一种好的方法可以使用Javascript、PHP或甚至jQuery来实现这个效果。
你到底在问什么？你想知道如何设置颜色吗？还是想知道如何找到第二个数字（现有颜色的较浅版本）？ - coderjoe
我有一个表单，用户将向我提供HEX背景颜色值。我需要将该颜色分配给背景，并将较浅的颜色分配给标题边框颜色。在提交之前完成这一切。 - Brad Birdsall
9个回答
4

一个更简单的解决方案是在CSS中使用rgba()颜色构造器：

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

这将创建一个70%不透明度的白色边框。不幸的是，在Firefox 2，Opera 9或任何版本的IE中都不支持此功能。为这些浏览器创建备用版本并不困难。jQuery示例：

$('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();

从这里开始，您可以使用.no-rgba类来覆盖RGBA颜色。
#thisDiv{border: 1px solid rgba(255,255,255,0.7)}
.no-rgba #thisDiv{border: 1px solid #FFF}
我建议不要使用rgba，因为一半的浏览器（包括IE）都不支持它。这是兼容性列表：http://css-tricks.com/rgba-browser-support/。 - RaYell
是的，请查看我所做的更新；它包括基于JavaScript的rgba支持检查。 - chuckharmston
4

顺便说一下：RGB不是一个感知线性的颜色空间。我建议先将RGB转换为HSL，进行插值，然后再转换回RGB。我编写了以下PHP代码来生成任意感知正确的渐变色；我建议将其转化为服务，可以在需要时从PHP或AJAX中调用。

您可以将最终的十六进制输出获取为

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

代码如下：
// 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);
3
您可以使用以下函数来减淡颜色：
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'

这个功能通过百分比而不是固定数量均匀地减轻颜色。

那么，我该如何在表单中实现呢？我是一个 JS 初学者，希望实现一个具有十六进制背景颜色输入的表单。同时，我能够让它以实时预览的方式显示更改吗？该页面将具有一个背景颜色，并且标题元素将具有一种被明亮化的边框颜色。 - Brad Birdsall
1
var colorString=$(selector).css("background-color");
var colorInt=parseInt(colorString.replace('#',''),16);
colorInt+=parseInt("080808",16);
var newColor = "#" + colorInt.toString(16);

$(selector).css("border-color", newColor);
1
Hugh Bothwell的代码有时会给出奇怪的答案。例如，将RGB＃eb69ff转换为HSL时，它会给出0.751567320261 1.67763157895 0.703125。
在rgb2hsl（$ rgbtrio）函数中：
如果（$ L <0.5），则$s = $ max /（$ max + $ min）; 否则，$s = $ max /（2- $ max- $ min）;
这段代码应该是：
如果（$ L <0.5），则$s =（$ max- $ min）/（$ max + $ min）; 否则，$s =（$ max- $ min）/（2- $ max- $ min）;
至少在使用RGBinterpolate（$ start，$ end，$ dist）时，我可以得到合理的RGB值。
我在计算十六进制转换为HSL时遇到了饱和度过低的问题，但是这个建议解决了它！谢谢@Kuitsi！ - Michael Moriarty
1

你需要检查十六进制数是否为3位（444）或6位（444444），然后将每个RGB拆分为十六进制中的整数。

然后，选择一个阈值，以确定要接近所需颜色的程度（假设是分割差异）。

66hex = 102dec。

floor((255-102)/2) = 76。

颜色校正 102 + 76 = 178

178dec = B2hex。

B2将成为您的新值（而不是66）。

您需要对所有3个十六进制数对执行此操作。

刚刚发现这个：http://www.weberdev.com/get_example-3640.html你仍需要检查3位十六进制，然后转换为6位。 - easement
0

使用jQuery：

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

使用能够匹配到你想要修改的元素的选择器来替换selector。如果没有HTML代码，很难为您编写它。

0

我会像这个一样实现颜色选择器。这是最用户友好的操作，而且不难实现。使用onSubmit()方法。

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

在我的情况下，'el' 是一个 div，我想改变它的颜色。
0
最近在为Lablz webapp平台添加配色方案时，我们需要解决同样的问题。Hugh Bothwell提供的解决方案指向了正确的方向，但存在一个问题。Hugh说，在从RGB转换为HSL之后，您需要插值色调、饱和度和亮度。但是，要创建相同颜色的不同阴影，您只需要操作亮度（明度），否则您将得到不同的颜色。我们在服务器端（Java中）使用此方法来创建由http://colorschemedesigner.com生成的颜色变化。我们还使用亮度来确定和调整颜色之间的对比度，以便我们永远不会出现在有色背景上无法阅读的有色文本。
在采用这种方法之前，我们尝试了许多其他答案中提到的操作RGB颜色空间并从RGB转换为HSB并更改亮度。HSL给出了最佳结果，因为它可以一直到接近白色的最轻微阴影，而在HSB中操作亮度只会得到像芥末色这样的东西，例如当从棕色增加到最大亮度时。
如果您愿意，我可以发布我们开发的Java代码。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接