Рандомный оттенок

#jquery #цвета

Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует
случайный оттенок этого цвета.

Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы
генерировался именно оттенок цвета, а не случайный цвет



$(function() {
  $('#color').change(function() {
    var min = 0, max = 255;
    
    var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random()
* (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')';
    
    $('#shade').val(rgbColor).css('border-color', rgbColor);
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  





Как сделать, что бы генерировался оттенок?
    

Ответы

Ответ 1

Нужно записывать кода всех оттенков нужных



$(function() {
  $('#color').change(function() {
    var self = this,
        // Создаём список цветов
        colorsModels = {
          'red': {'r': '50-255', 'g': '0', 'b': '0'},
          'green': {'r': '0', 'g': '50-255', 'b': '0'},
          'yellow': {'r': '50-255', 'g': 'r', 'b': '0'},
          'blue': {'r': '0', 'g': '0', 'b': '50-255'},
          'grey': {'r': '50-200', 'g': 'r', 'b': 'r'}
        };
    // Проверяем, существует ли цвет указанный в списке
    if( colorsModels[self.value] !== undefined  ){
      // Передаём массив цвета в переменную и создаём rgb
      var model = colorsModels[self.value],
          rgb = {r: null, g: null, b: null};
      
      // Перебираем каждый цвет из массива
      for(var key in model){
        if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение
диапазоном
          // Вычисляем минимум и максимум с диапазона
          var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ),
              max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') );
          
          // Вычисляем рандомное число в этом диапазоне
          var value = Math.floor(Math.random() * (max - min)) + min;
          
          // Применяем значение
          rgb[key] = value;
        }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном,
то проверяем, цифра ли это
          // Преобразовываем значение в цифру
          var value = parseFloat( model[key] );
          
          // Применяем значение
          rgb[key] = value;
        }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b'
){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим
цветам)
          // Проверяем, на допустимость повторения
          if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !==
'r') ){
            // Если всё нормально, то копируем значение
            rgb[key] = rgb[model[key]];
          }else{
            console.error('Invalid!');
          };
        }else{
          console.error('Undefined a value color!');
        };
      };
      
      // Устанавливаем значение
      var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')';
      
      $('#shade').val(rgbColor).css('border-color', rgbColor);
    }else{
      console.error('Undefined a color!');
    };
  });
});
#shade {border: 2px solid #000;}


Выберите цвет: 
  
    Выбрать цвет...
    Красный
    Зелёный
    Жёлтый
    Синий
    Серый
  


  Оттенок:
  



Ответ 2

Обычно цвет переводят в цветовую модель HSV, меняют оттенок цвета (Hue) и переводят
обратно в RGB. Если нужно поменять насыщенность - Saturation. Если светлоту - Volume.

Посмотрите также другие цветовые модели - многие из них "заточены" под разные вещи.


Ответ 3

Для серого цвета надо выбросить один random, и выпавшее значение присваивать всем
каналам (r,g,b).
Для прочих цветов генерировать значения не в полном диапазоне [0, 255], а раздельно
по каналам, отдавая предпочтение тем или иным из них.

function limitedRandom (min, max)
{
    return (Math.floor(Math.random() * (max - min)) + min);
}

red = {
    r: limitedRandom(150, 255);
    g: limitedRandom(0, 100);
    b: limitedRandom(0, 100);
};


yellow = {
    r: limitedRandom(150, 255);
    g: limitedRandom(150, 255);
    b: limitedRandom(0, 100);
};
// and so on


Конкретные границы диапазонов цветов подберите по своему вкусу в графическом редакторе.