Простое Изменение Цвета
Я создаю пользовательский интерфейс, в котором пользователи могут изменять значения цвета своих страниц. Что я хотел бы, так это взять значение, присвоенное их цвету фона, и осветлить его на определенную величину. Я просто хочу добиться выделения линии без необходимости каждый раз создавать новые изображения.
Пример: Пользователь установил цвет фона на #ECECEC. Теперь я хочу, чтобы граница определенных элементов стала #F4F4F4 (цвет ближе к белому).
Пожалуйста, дайте мне знать, если их хороший способ сделать это с помощью Javascript, PHP или даже jQuery.
9 answers
Более простым решением может быть использование конструктора цветов rgba() в CSS:
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"> </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}
В стороне: 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);
Вы можете использовать подобную функцию для осветления цвета:
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'
Это позволяет равномерно осветлять цвета в процентах, а не на фиксированную величину.
Вам нужно проверить шестнадцатеричное значение, чтобы узнать, равно ли оно 3(444) или 6 didgts(444444), а затем разделить каждый RGB на целое число из шестнадцатеричного значения.
Затем выберите пороговое значение, насколько оно ближе к тому, что вы хотите (предположим, что разница разделена).
66hex =102 дек.
Этаж((255-102)/2) = 76.
Правильный цвет 102 + 76 = 178
178dec = B2hex.
B2 будет вашим новым значением (вместо 66)
Вам нужно будет сделать это для всех 3 шестнадцатеричных пар.
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);
Код Хью Ботвелла, похоже, иногда дает странные ответы. При преобразовании ie. RGB #eb69ff в HSL дает 0,751567320261 1,67763157895 0,703125
В функции rgb2hsl($rgbtrio)if ( $L < 0.5 ) $s = $max / ( $max + $min );
else $s = $max / ( 2 - $max - $min );
Должен ли этот код быть
if ( $L < 0.5 ) $s = ($max - $min) / ( $max + $min );
else $s = ($max - $min) / ( 2 - $max - $min );
По крайней мере, после этого я могу получить разумные значения RGB при использовании RGBinterpolate($start, $end, $dist)
Использование jQuery:
$(selector).css('border-color', '#f4f4f4')
Замените selector селектором, который будет соответствовать элементам, которые вы хотите изменить. Трудно написать это для вас без HTML-кода.
Я бы реализовал средство выбора цвета, подобное этому. Это наиболее удобное для пользователя действие, и его несложно реализовать. С помощью метода onSubmit().
$(".picker").ColorPicker({
onSubmit: function(hsb, hex, rgb, el){
$(el).css({
'background-color': '#' + hex
});
$(el).ColorPickerHide();
}
});
В моем случае "el" - это div, который я хочу изменить цвет.
Во время недавней работы над добавлением цветовых схем на платформу веб-приложений Lablz нам нужно было решить ту же проблему. Решение, предложенное Хью Ботвеллом, указывает в правильном направлении, но имеет проблему. Хью говорит, что после преобразования из RGB в HSL вам нужно интерполировать оттенок, насыщенность и яркость. Но для создания оттенков одного и того же цвета вам нужно всего лишь манипулировать яркостью (яркостью), иначе вы получите другой цвет. Мы используем этот подход на стороне сервера (на Java), чтобы создавайте вариации цветов, генерируемые http://colorschemedesigner.com . Мы также используем яркость для определения и регулировки контраста между цветами, чтобы никогда не получить цветной текст, нечитаемый на цветном фоне.
Прежде чем перейти к этому подходу, мы попытались манипулировать цветовым пространством RGB, как упоминалось во многих других ответах здесь, и преобразовать его из RGB в HSB и изменить яркость. HSL дал наилучшие результаты, поскольку он проходит весь путь до малейших оттенков ближе к белому, в то время как манипуляция яркостью в HSB даст вам только что-то вроде горчичного цвета, когда яркость, например, будет увеличена до максимума с коричневого.
Если хотите, я могу опубликовать разработанный нами java-код.