CSS Color Wheel

June 5th, 2023

If you checked out my previous snippet about the Circular Progress Component that I used to indicate the scrolling progress, I wanted to show you another use case for it: Using it as a color wheel to visualize a product's colors!

Demo

Halfsize Tote

$210

tan

High Wall Tote

$210

Multi

Zip Tote Basket

$140

Multi

Zip High Wall Tote

$150

Multi

Code

ColorWheel.vue

<template>
  <div
    class="rounded-full flex-none aspect-square ring-1 ring-offset-1 ring-black/30"
    :style="`background-image: conic-gradient(${colorStyles});`"
  />
</template>

<script setup>
const props = defineProps({
  colors: {
    type: Array,
    required: true
  }
})

const colorStyles = computed(() => {
  return props.colors.map((color, i) => {
    const amount = 100 / props.colors.length
    const from = i * amount
    const to = from + amount

    return `${color} ${from}% ${to}%`
  }).join(', ')
})
</script>

We just apply the conic-gradient CSS property again and calculate the color stops and we're already done! I'm often fascinated about how a few lines of code can create such cool things.