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

353

06 марта 2017, 11:33

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

Я генерирую цвет 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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>Выберите цвет:  
  <select id="color"> 
    <option style="display: none;">Выбрать цвет...</option> 
    <option value="red">Красный</option> 
    <option value="green">Зелёный</option> 
    <option value="yellow">Жёлтый</option> 
    <option value="blue">Синий</option> 
    <option value="grey">Серый</option> 
  </select> 
</p> 
<p> 
  Оттенок: 
  <input type="text" id="shade"> 
</p>

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

Answer 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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>Выберите цвет:  
  <select id="color"> 
    <option style="display: none;">Выбрать цвет...</option> 
    <option value="red">Красный</option> 
    <option value="green">Зелёный</option> 
    <option value="yellow">Жёлтый</option> 
    <option value="blue">Синий</option> 
    <option value="grey">Серый</option> 
  </select> 
</p> 
<p> 
  Оттенок: 
  <input type="text" id="shade"> 
</p>

Answer 2

Для серого цвета надо выбросить один 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

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