Convert to four hues

by MadsWolff

HTML

<p>
  Drop image here!
</p>

JavaScript

// Convert to four hues
// by Mads Wolff 2019
// Public Domain

// Hue ranges (hsv values must be in the range 0-1)
const hueRanges = [
  { from: 0.00, to: 0.33, targetHue: 0.16 },
  { from: 0.33, to: 0.67, targetHue: 0.54 },
  { from: 0.67, to: 0.83, targetHue: 0.67 },
  { from: 0.83, to: 1.00, targetHue: 0.93 }
]

// Convert from rgb to hsv (rgb values must be in the range 0-255)
function rgbToHsv (r, g, b) {
  let max = Math.max(r, g, b)
  let min = Math.min(r, g, b)
  let d = max - min
  let h
  let s = (max === 0 ? 0 : d / max)
  let v = max / 255
  switch (max) {
    case min: h = 0; break
    case r: h = (g - b) + d * (g < b ? 6 : 0); h /= 6 * d; break
    case g: h = (b - r) + d * 2; h /= 6 * d; break
    case b: h = (r - g) + d * 4; h /= 6 * d; break
  }
  return [h, s, v]
}

// Convert from hsv to rgb (hsv values must be in the range 0-1)
function hsvToRgb (h, s, v) {
  let r
  let g
  let b
  let i = Math.floor(h * 6)
  let f = h * 6 - i
  let p = v * (1 - s)
  let q = v * (1 - f * s)
  let t = v * (1 - (1 - f) * s)
  switch (i % 6) {
    case 0: r = v, g = t, b = p; break
    case 1: r = q, g = v, b = p; break
    case 2: r = p, g = v, b = t; break
    case 3: r = p, g = q, b = v; break
    case 4: r = t, g = p, b = v; break
    case 5: r = v, g = p, b = q; break
  }
  return [r * 255, g * 255, b * 255]
}

// On image drop
function ondrop(image) {

  // Create canvas
  const canvas = document.createElement('canvas')

  // Set canvas dimensions
  canvas.width = image.width
  canvas.height = image.height

  // Get 2d context
  const context = canvas.getContext('2d')

  // Draw image to canvas
  context.drawImage(image, 0, 0, canvas.width, canvas.height)

  // Get image data from canvas
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
  const data = imageData.data

  // Iterate through each pixel of the canvas
  for (let i = 0; i < data.length; i += 4) {

    // Convert current rgb color to hsv color
    const hsv =...