Colours

const names = ["tomato", "gold", "mediumseagreen", "deepskyblue", "orchid", "slategray", "papayawhip", "cornflowerblue"]

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.font = "16px sans-serif"
  for (let i = 0; i < names.length; i++) {
    ctx.fillStyle = names[i]
    ctx.fillRect(20, 20 + i * 40, 60, 30)
    ctx.fillStyle = "black"
    ctx.fillText(names[i], 95, 41 + i * 40)
  }
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.fillStyle = "#ff6347"        // tomato
  ctx.fillRect(20, 20, 120, 120)
  ctx.fillStyle = "#f63"           // short form of #ff6633
  ctx.fillRect(160, 20, 120, 120)
  ctx.fillStyle = "#3366ff80"      // blue at about half strength, over the others
  ctx.fillRect(80, 80, 160, 120)
}

function draw() {
  ctx.fillStyle = "black"
  ctx.fillRect(0, 0, width, height)
  // from black to full red, in 16 steps
  for (let i = 0; i < 16; i++) {
    const red = i * 17                  // 0, 17, 34 ... 255
    ctx.fillStyle = `rgb(${red}, 0, 0)`
    ctx.fillRect(10 + i * 30, 20, 28, 80)
  }
  // see-through white, getting more solid
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${i / 10})`
    ctx.fillRect(10 + i * 48, 130, 44, 80)
  }
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  ctx.font = "13px sans-serif"
  // hue: round the colour wheel
  for (let i = 0; i < 12; i++) {
    ctx.fillStyle = `hsl(${i * 30}, 90%, 50%)`
    ctx.fillRect(10 + i * 36, 30, 32, 50)
  }
  ctx.fillStyle = "black"
  ctx.fillText("hue 0 to 330", 10, 20)
  // saturation: grey to vivid
  for (let i = 0; i < 11; i++) {
    ctx.fillStyle = `hsl(200, ${i * 10}%, 50%)`
    ctx.fillRect(10 + i * 36, 115, 32, 50)
  }
  ctx.fillStyle = "black"
  ctx.fillText("saturation 0% to 100%", 10, 105)
  // lightness: black to white
  for (let i = 0; i < 11; i++) {
    ctx.fillStyle = `hsl(200, 90%, ${i * 10}%)`
    ctx.fillRect(10 + i * 36, 200, 32, 50)
  }
  ctx.fillStyle = "black"
  ctx.fillText("lightness 0% to 100%", 10, 190)
}

function draw() {
  ctx.fillStyle = "black"
  ctx.fillRect(0, 0, width, height)
  for (let i = 0; i < 36; i++) {
    ctx.fillStyle = `hsl(${i * 10}, 85%, 55%)`
    ctx.beginPath()
    ctx.arc(width / 2, height / 2, 150 - i * 4, 0, Math.PI * 2)
    ctx.fill()
  }
}

let t = 0

function update(dt) {
  t += dt
}

function draw() {
  const hue = t * 60                              // once round the wheel every 6 seconds
  ctx.fillStyle = `hsl(${hue}, 80%, 60%)`
  ctx.fillRect(0, 0, width / 2, height)
  const light = 50 + 40 * Math.abs((t % 2) - 1)   // glides between 50% and 90%
  ctx.fillStyle = `hsl(30, 90%, ${light}%)`
  ctx.fillRect(width / 2, 0, width / 2, height)
}

function draw() {
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, width, height)
  // alpha in the colour
  const hues = [0, 120, 240]
  for (let i = 0; i < hues.length; i++) {
    ctx.fillStyle = `hsla(${hues[i]}, 90%, 50%, 0.5)`
    ctx.beginPath()
    ctx.arc(110 + i * 50, 110, 70, 0, Math.PI * 2)
    ctx.fill()
  }
  // globalAlpha: solid colours, drawn see-through
  ctx.save()
  ctx.globalAlpha = 0.4
  ctx.fillStyle = "navy"
  ctx.fillRect(320, 40, 140, 140)
  ctx.font = "bold 40px sans-serif"
  ctx.fillText("faded", 320, 240)
  ctx.restore()
}

// a linear gradient: sunset
const sky = ctx.createLinearGradient(0, 0, 0, 300)
sky.addColorStop(0, "hsl(230, 60%, 25%)")
sky.addColorStop(0.6, "hsl(330, 70%, 60%)")
sky.addColorStop(1, "hsl(40, 100%, 70%)")

// a conic gradient: a colour wheel
const wheel = ctx.createConicGradient(0, 380, 150)
for (let i = 0; i < 7; i++) {
  wheel.addColorStop(i / 6, `hsl(${i * 60}, 100%, 50%)`)
}

// a pattern from a small canvas we draw a check on
const tile = document.createElement("canvas")
tile.width = 20
tile.height = 20
const t = tile.getContext("2d")
t.fillStyle = "white"
t.fillRect(0, 0, 20, 20)
t.fillStyle = "lightgray"
t.fillRect(0, 0, 10, 10)
t.fillRect(10, 10, 10, 10)
const checks = ctx.createPattern(tile, "repeat")

function draw() {
  ctx.fillStyle = checks
  ctx.fillRect(0, 0, width, height)
  ctx.fillStyle = sky
  ctx.fillRect(20, 20, 240, 260)
  ctx.fillStyle = wheel
  ctx.beginPath()
  ctx.arc(380, 150, 90, 0, Math.PI * 2)
  ctx.fill()
}

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
const scene = new THREE.Scene()
scene.background = new THREE.Color("hsl(220, 30%, 12%)")
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100)
camera.position.set(0, 0, 9)
scene.add(new THREE.AmbientLight("white", 0.4))
const sun = new THREE.DirectionalLight("white", 2)
sun.position.set(2, 4, 5)
scene.add(sun)

const balls = []
for (let i = 0; i < 5; i++) {
  const material = new THREE.MeshStandardMaterial({ color: 0xff6347, roughness: 0.4 })
  const ball = new THREE.Mesh(new THREE.SphereGeometry(0.6, 32, 16), material)
  ball.position.x = (i - 2) * 1.5
  ball.position.y = 1
  scene.add(ball)
  balls.push(ball)
}

const glow = new THREE.Mesh(
  new THREE.TorusGeometry(0.6, 0.2, 16, 48),
  new THREE.MeshStandardMaterial({ color: "black", emissive: "orange", emissiveIntensity: 1.5 }),
)
glow.position.set(-2, -1.4, 0)
scene.add(glow)

const glass = new THREE.Mesh(
  new THREE.BoxGeometry(1.4, 1.4, 1.4),
  new THREE.MeshStandardMaterial({ color: "deepskyblue", transparent: true, opacity: 0.4 }),
)
glass.position.set(2, -1.4, 0)
scene.add(glass)

let t = 0

function update(dt) {
  t += dt
  for (let i = 0; i < balls.length; i++) {
    // setHSL takes 0 to 1: each ball a different hue, all drifting round the wheel
    balls[i].material.color.setHSL((t * 0.1 + i / 5) % 1, 0.8, 0.5)
  }
  glass.rotation.y += dt
}

function draw() {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height, false)
  renderer.render(scene, camera)
}