Определить является ли значение цветом

// Создаем блок-тестер, которому будем задавать цвет, 
// введенный пользователем в поле. 
// Браузер пусть сам парсит и применять стили к блоку. 
// @NB: Предполагаемый цвет берем именно с этого блока. 
const TESTER = document.createElement('div'); 
 
// Только для отладки. 
document.body.appendChild(TESTER); 
const EXAMPLE = document.querySelector('.example'); 
 
// Кнопка-подсказка с цветом. 
const INPUT_SUGGESTED = document.querySelector('input[name=suggested]'); 
 
// Поле для ввода цвета. 
const INPUT_COLOR = document.querySelector('input[name=color]'); 
 
/** 
 *  Вешаем слушателей на события. 
 */ 
INPUT_SUGGESTED.addEventListener('click', onApplyColor); 
INPUT_COLOR.addEventListener('input', onInputColor); 
INPUT_COLOR.addEventListener('blur', onBlurColor); 
 
// Обрабатываем щелчок по подсказке. 
function onApplyColor(event) { 
  // @NB: Берем цвет именно с блока. 
  INPUT_COLOR.value = TESTER.style.color; 
} 
 
// Обрабатываем ввод цвета. 
function onInputColor(event) { 
  // Обязательно сбрасываем. 
  // Если цвет не соответствует стандарту, 
  // то браузер не хочет удалять прежний валидный стиль. 
  TESTER.style.color = ''; 
 
  // Задаем цвет блоку-тестеру. 
  TESTER.style.color = this.value; 
 
  // Меняем подсказку на кнопке. 
  INPUT_SUGGESTED.value = TESTER.style.color; 
 
  EXAMPLE.style.backgroundColor = TESTER.style.color; 
} 
 
// Обрабатываем потерю фокуса с поля для ввода цвета. 
function onBlurColor(event) { 
  // Если цвет не соответствует стандарту. 
  // Т.е. браузер не смог его обработать. 
  if (!TESTER.style.color) { 
    alert('Не удалось обработать введенный вами цвет.'); 
  } 
 
  this.value = this.value !== TESTER.style.color ? TESTER.style.color : ''; 
}

input[name="suggested"][value=""] { 
  display: none; 
} 
 
.example { 
  border: 1px dashed #ccc; 
  width: 88px; 
  height: 88px; 
}

<input type="text" name="color" placeholder="Введите цвет" /> 
<input type="button" name="suggested" value="" /> 
 
<hr> 
<div class="example"></div>

// Вычисленное свойство, т.е. то, 
// которое браузер обработал и применил. 
// Например, браузер будет пытаться 
// цвет привести в формат RGB. 
// Учитываются margin, padding и т.д. 
function computedProperty(property, val) { 
  // Выбираем элемент с документа, либо создаём новый. 
  const tester = document.querySelector('validated') || document.createElement('validated'); 
 
  // Задаем новое свойство. 
  tester.style[property] = val; 
 
  // Вычисленное свойство может быть 
  // взято только у элементов, находящихся в DOM. 
  document.body.appendChild(tester); 
 
  const style = tester.style[property] && window.getComputedStyle ? 
    // Для браузеров поддерживающих метод `getComputedStyle`. 
    getComputedStyle(tester, null).getPropertyValue(property) : 
    // Для браузеров не поддерживающих метод. 
    tester.style[property] ? tester.currentStyle[property] : false 
 
  // Обнуляем заданное свойство. 
  tester.style[property] = ''; 
 
  return style; 
} 
 
let colors = [ 
  'fff', // Не валидное. 
  '#ffff', // Не валидное для IE 11. 
  '#fff', 
  'hsl(0, 20%, 80%)', 
  'rgb(500, 600, 700)', // Значения будут сброшены до 255. 
  'rgb(0, 119, 255, .5)', // Не валидное для IE 11. 
  'rgba(0, 119, 255, .5)', 
  prompt('Введите свое значение', 'cyan') 
]; 
 
colors.forEach(function(color) { 
  console.log(color, ':', computedProperty('color', color)); 
});