Gradient color circle – Ideas and thoughts for css learning tool

Hey all

I am building a learning tool for color psychology and theory in art, that sort of will work as a filter to (links):

• Color Harmonies – as Woo Attributes
• Dominant color in a given artwork

I have built my gradient color circle like so:

.fancy-color-circle {
	  position: relative;
      text-align: center;
      padding: 2em;
      border: none;
	  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
      color: #00838f;
      width: 14rem;
      height: 14rem;
      font-size: 2em;
      border-radius: 100%;
      display: flex;
      margin: 2rem auto auto auto;
    }

I understand this is fairly new code for browsers, but looks cool on my screens. You can see it on page link, scroling down to curations section.

Now the idea is to create overlay pizza slices that:

• overlay the circle. fx red slice, that on mouse over reveal the meaning of red as described on red card, and so on for all colours (The half red heart should become a slice and fit over red. It already link to test page, but will link to artwork in dominant color red)
• Also I am considering to throw in similar function for color harmonies, such as Analogous, Triadic, Achromatic etc.

Now jumping into red pizza slice I have:

#pizza-slice-red {
      position: relative;
      width: 100px;
      height: 90px;
}

#pizza-slice-red:before {
      position: absolute;
      content: "";
      left: 7rem;
      top: 1rem;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
}
		
#pizza-slice-red:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
}

I am stuck with

1) shaping the red thing into a pizza slice, that match the size of my color circle and also position the slice exactly ontop of the red part of circle….

2) Getting the remaining colors active as red in #1

3) Mouse over display the meaning of red etc. This could happen in the center of the color wheel on fx. a fade in black gradient circle and white txt on top. However, I also consider the color harmonies to display here with graphic figures that point to the color combinations in their respective harmonies.

Thx

The page I need help with: [log in to see the link]