Javascript / jQuery Плагин для плагина, чтобы изменить цвет границы, относительно цвета фона элемента

Question

В моем приложении я хочу, чтобы пользователи выбирали основной цвет для элементов, которые будут отображаться в календаре. Из основного цвета, выбранного пользователем, мне нужно иметь возможность автоматически установить соответствующий цвет границы и соответствующий цвет текста.

Когда я имею в виду, я имею в виду более темный оттенок или изменение оттенка для границы

Существуют ли какие-либо плагины jquery, которые уже делают это, или действительно какие-либо другие плагины для другой библиотеки javascript?

Если нет, то могут ли люди дать совет о том, как проводить вычисления? У меня нет большого опыта в теории цвета.

Спасибо.

Answer 1

У меня нет конкретного примера кода под рукой для чего-то подобного, но вот идея, как это сделать с помощью математики.Установите 0 - 9 на их значение, а A - F на 10 - 15, как показано ниже (вам также понадобится умножить эти значения на 16, это будет иметь смысл в секунду):

0 : 0 : 0
1 : 1 : 16
2 : 2 : 32
...
A : 10 : 160
B : 11 : 176
C : 12 : 192
...
F : 15 : 240

Как только вы получитеВ этой настройке вы можете (при условии, что ваш цвет в HEX) разделить 3 группы и преобразовать каждую в их шестнадцатеричный эквивалент.Первый символ этих двух умножается на 16, а второй умножается на 1:

FF = (16 * 15) + (15 * 1) = 255
AE = (16 * 10) + (14 * 1) = 174
0F = (16 * 0 ) + (15 * 1) = 15

Получив шестнадцатеричные числа для цвета, который выбирает пользователь, вы можете умножить каждое шестнадцатеричное число на основе формулы.

Ниже приведен пример, я использую более светлый красный и хочу найти более темный красный.Мой начальный HEX - DB4658, и я собираюсь умножить свои значения на .5, чтобы получить мой более темный красный цвет:

1. Разделить на 3 группы: DB 46 58

2. Рассчитатьшестнадцатеричное значение каждого:

     D = 13   B = 11   4 = 4   6 = 6   5 = 5   8 = 8
     DB = 219 = 13 * 16 + 11 * 1
     46 = 70 = 4 * 16 + 6 * 1
     58 = 88 = 5 * 16 + 8 * 1
   

3. Теперь вычисляем их в более темный шестнадцатеричный код (я вычеркнул число):

     219 * .5 = 109
     70 * .5 = 35
     88 * .5 = 44
   

4. Преобразуйте это обратно в наши 3 группировки, для первого взгляда на таблицу, которую вы построили в столбце умножения на 16:

     109 = 96 + 13 = 6D
     35 = 32 + 3 = 23
     44 = 32 + 12 = 2C
   

5. Теперь у вас есть более темный красный цвет.

Вы можете отрегулировать от 0,5 до 0,75, если хотите, чтобы контраст был ближе друг к другу, а если выбранный цвет уже темный, то регулировка должна быть в 1,25x или 1,5x.

Надеюсь, вы найдете это полезным.Если вам нужны разъяснения, дайте мне знать.

Answer 2

Вы можете думать о цвете, как трехмерный вектор с черным в углу и белым в точной противоположности:

function color_to_vector(color) {
    return {
        r : parseInt(color.substr(1, 2), 16),
        g : parseInt(color.substr(3, 2), 16),
        b : parseInt(color.substr(5, 2), 16)
    }
}

function vector_to_color(vector){
    return "#"+
        (vector.r < 16 ? '0' : '') + vector.r.toString(16)+
        (vector.g < 16 ? '0' : '') + vector.g.toString(16)+
        (vector.b < 16 ? '0' : '') + vector.b.toString(16);
}

Итак, вы хотите более темный цвет?Тогда:

function darker(color){
    var vector = color_to_vector(color);
    vector.r /= 2;
    vector.g /= 2;
    vector.b /= 2;
    return vector_to_color(vector);
}

Более светлый?

function lighter(color){
    var vector = color_to_vector(color);
    vector.r += (255 - vector.r) / 2;
    vector.g += (255 - vector.g) / 2;
    vector.b += (255 - vector.b) / 2;
    return vector_to_color(vector);
}

"Голубоватый"?

function lighter(color){
    var vector = color_to_vector(color);
    vector.b += (255 - vector.b) / 2;
    return vector_to_color(vector);
}

И так.

Answer 3

вы можете попробовать это:

http://www.javascriptrules.com/2009/08/05/css-color-brightness-contrast-using-javascript/

или вы можете попробовать этот фрагмент:

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'

или использовать этот фрагмент:

function LightenColor(rgbtext, delta) {
      var r, g, b, txt;
      r= parseInt(rgbtext.substr(1, 2), 16),
      g= parseInt(rgbtext.substr(3, 2), 16),
      b= parseInt(rgbtext.substr(5, 2), 16),

      r+= delta;  if (r> 255) r= 255;  if (r< 0) r= 0;
      g+= delta;  if (g> 255) g= 255;  if (g< 0) g= 0;
      b+= delta;  if (b> 255) b= 255;  if (b< 0) b= 0;
      txt= b.toString(16);       if (txt.length< 2) txt= "0"+ txt;
      txt= g.toString(16)+ txt;  if (txt.length< 4) txt= "0"+ txt;
      txt= r.toString(16)+ txt;  if (txt.length< 6) txt= "0"+ txt;

      return "#"+ txt;
    }
    function DarkenColor(rgbtext, delta) {
      return LightenColor(rgbtext, delta* -1);
    }
LightenColor('#AF0000', 50);
DarkenColor('#AF0000', 50);