Color Wheel

<div class="spectrum-ColorWheel">
  <svg class="spectrum-ColorWheel-wheel" viewBox="0 0 160 160" aria-hidden="true">
    <defs>
      <mask id="mask">
        <circle cx="80" cy="80" r="80" fill="white" />
        <circle cx="80" cy="80" r="56" fill="black" />
      </mask>
    </defs>
    <g class="spectrum-ColorWheel-segment" mask="url(#mask)"><rect width="80" height="2" x="80" y="79" fill="hsl(0, 100%, 50%)" transform="rotate(0 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(1, 100%, 50%)" transform="rotate(1 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(2, 100%, 50%)" transform="rotate(2 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(3, 100%, 50%)" transform="rotate(3 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(4, 100%, 50%)" transform="rotate(4 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(5, 100%, 50%)" transform="rotate(5 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(6, 100%, 50%)" transform="rotate(6 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(7, 100%, 50%)" transform="rotate(7 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(8, 100%, 50%)" transform="rotate(8 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(9, 100%, 50%)" transform="rotate(9 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(10, 100%, 50%)" transform="rotate(10 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(11, 100%, 50%)" transform="rotate(11 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(12, 100%, 50%)" transform="rotate(12 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(13, 100%, 50%)" transform="rotate(13 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(14, 100%, 50%)" transform="rotate(14 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(15, 100%, 50%)" transform="rotate(15 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(16, 100%, 50%)" transform="rotate(16 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(17, 100%, 50%)" transform="rotate(17 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(18, 100%, 50%)" transform="rotate(18 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(19, 100%, 50%)" transform="rotate(19 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(20, 100%, 50%)" transform="rotate(20 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(21, 100%, 50%)" transform="rotate(21 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(22, 100%, 50%)" transform="rotate(22 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(23, 100%, 50%)" transform="rotate(23 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(24, 100%, 50%)" transform="rotate(24 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(25, 100%, 50%)" transform="rotate(25 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(26, 100%, 50%)" transform="rotate(26 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(27, 100%, 50%)" transform="rotate(27 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(28, 100%, 50%)" transform="rotate(28 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(29, 100%, 50%)" transform="rotate(29 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(30, 100%, 50%)" transform="rotate(30 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(31, 100%, 50%)" transform="rotate(31 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(32, 100%, 50%)" transform="rotate(32 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(33, 100%, 50%)" transform="rotate(33 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(34, 100%, 50%)" transform="rotate(34 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(35, 100%, 50%)" transform="rotate(35 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(36, 100%, 50%)" transform="rotate(36 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(37, 100%, 50%)" transform="rotate(37 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(38, 100%, 50%)" transform="rotate(38 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(39, 100%, 50%)" transform="rotate(39 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(40, 100%, 50%)" transform="rotate(40 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(41, 100%, 50%)" transform="rotate(41 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(42, 100%, 50%)" transform="rotate(42 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(43, 100%, 50%)" transform="rotate(43 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(44, 100%, 50%)" transform="rotate(44 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(45, 100%, 50%)" transform="rotate(45 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(46, 100%, 50%)" transform="rotate(46 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(47, 100%, 50%)" transform="rotate(47 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(48, 100%, 50%)" transform="rotate(48 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(49, 100%, 50%)" transform="rotate(49 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(50, 100%, 50%)" transform="rotate(50 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(51, 100%, 50%)" transform="rotate(51 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(52, 100%, 50%)" transform="rotate(52 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(53, 100%, 50%)" transform="rotate(53 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(54, 100%, 50%)" transform="rotate(54 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(55, 100%, 50%)" transform="rotate(55 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(56, 100%, 50%)" transform="rotate(56 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(57, 100%, 50%)" transform="rotate(57 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(58, 100%, 50%)" transform="rotate(58 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(59, 100%, 50%)" transform="rotate(59 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(60, 100%, 50%)" transform="rotate(60 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(61, 100%, 50%)" transform="rotate(61 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(62, 100%, 50%)" transform="rotate(62 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(63, 100%, 50%)" transform="rotate(63 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(64, 100%, 50%)" transform="rotate(64 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(65, 100%, 50%)" transform="rotate(65 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(66, 100%, 50%)" transform="rotate(66 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(67, 100%, 50%)" transform="rotate(67 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(68, 100%, 50%)" transform="rotate(68 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(69, 100%, 50%)" transform="rotate(69 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(70, 100%, 50%)" transform="rotate(70 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(71, 100%, 50%)" transform="rotate(71 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(72, 100%, 50%)" transform="rotate(72 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(73, 100%, 50%)" transform="rotate(73 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(74, 100%, 50%)" transform="rotate(74 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(75, 100%, 50%)" transform="rotate(75 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(76, 100%, 50%)" transform="rotate(76 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(77, 100%, 50%)" transform="rotate(77 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(78, 100%, 50%)" transform="rotate(78 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(79, 100%, 50%)" transform="rotate(79 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(80, 100%, 50%)" transform="rotate(80 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(81, 100%, 50%)" transform="rotate(81 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(82, 100%, 50%)" transform="rotate(82 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(83, 100%, 50%)" transform="rotate(83 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(84, 100%, 50%)" transform="rotate(84 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(85, 100%, 50%)" transform="rotate(85 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(86, 100%, 50%)" transform="rotate(86 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(87, 100%, 50%)" transform="rotate(87 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(88, 100%, 50%)" transform="rotate(88 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(89, 100%, 50%)" transform="rotate(89 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(90, 100%, 50%)" transform="rotate(90 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(91, 100%, 50%)" transform="rotate(91 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(92, 100%, 50%)" transform="rotate(92 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(93, 100%, 50%)" transform="rotate(93 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(94, 100%, 50%)" transform="rotate(94 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(95, 100%, 50%)" transform="rotate(95 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(96, 100%, 50%)" transform="rotate(96 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(97, 100%, 50%)" transform="rotate(97 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(98, 100%, 50%)" transform="rotate(98 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(99, 100%, 50%)" transform="rotate(99 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(100, 100%, 50%)" transform="rotate(100 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(101, 100%, 50%)" transform="rotate(101 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(102, 100%, 50%)" transform="rotate(102 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(103, 100%, 50%)" transform="rotate(103 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(104, 100%, 50%)" transform="rotate(104 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(105, 100%, 50%)" transform="rotate(105 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(106, 100%, 50%)" transform="rotate(106 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(107, 100%, 50%)" transform="rotate(107 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(108, 100%, 50%)" transform="rotate(108 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(109, 100%, 50%)" transform="rotate(109 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(110, 100%, 50%)" transform="rotate(110 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(111, 100%, 50%)" transform="rotate(111 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(112, 100%, 50%)" transform="rotate(112 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(113, 100%, 50%)" transform="rotate(113 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(114, 100%, 50%)" transform="rotate(114 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(115, 100%, 50%)" transform="rotate(115 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(116, 100%, 50%)" transform="rotate(116 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(117, 100%, 50%)" transform="rotate(117 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(118, 100%, 50%)" transform="rotate(118 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(119, 100%, 50%)" transform="rotate(119 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(120, 100%, 50%)" transform="rotate(120 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(121, 100%, 50%)" transform="rotate(121 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(122, 100%, 50%)" transform="rotate(122 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(123, 100%, 50%)" transform="rotate(123 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(124, 100%, 50%)" transform="rotate(124 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(125, 100%, 50%)" transform="rotate(125 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(126, 100%, 50%)" transform="rotate(126 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(127, 100%, 50%)" transform="rotate(127 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(128, 100%, 50%)" transform="rotate(128 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(129, 100%, 50%)" transform="rotate(129 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(130, 100%, 50%)" transform="rotate(130 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(131, 100%, 50%)" transform="rotate(131 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(132, 100%, 50%)" transform="rotate(132 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(133, 100%, 50%)" transform="rotate(133 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(134, 100%, 50%)" transform="rotate(134 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(135, 100%, 50%)" transform="rotate(135 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(136, 100%, 50%)" transform="rotate(136 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(137, 100%, 50%)" transform="rotate(137 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(138, 100%, 50%)" transform="rotate(138 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(139, 100%, 50%)" transform="rotate(139 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(140, 100%, 50%)" transform="rotate(140 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(141, 100%, 50%)" transform="rotate(141 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(142, 100%, 50%)" transform="rotate(142 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(143, 100%, 50%)" transform="rotate(143 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(144, 100%, 50%)" transform="rotate(144 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(145, 100%, 50%)" transform="rotate(145 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(146, 100%, 50%)" transform="rotate(146 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(147, 100%, 50%)" transform="rotate(147 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(148, 100%, 50%)" transform="rotate(148 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(149, 100%, 50%)" transform="rotate(149 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(150, 100%, 50%)" transform="rotate(150 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(151, 100%, 50%)" transform="rotate(151 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(152, 100%, 50%)" transform="rotate(152 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(153, 100%, 50%)" transform="rotate(153 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(154, 100%, 50%)" transform="rotate(154 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(155, 100%, 50%)" transform="rotate(155 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(156, 100%, 50%)" transform="rotate(156 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(157, 100%, 50%)" transform="rotate(157 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(158, 100%, 50%)" transform="rotate(158 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(159, 100%, 50%)" transform="rotate(159 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(160, 100%, 50%)" transform="rotate(160 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(161, 100%, 50%)" transform="rotate(161 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(162, 100%, 50%)" transform="rotate(162 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(163, 100%, 50%)" transform="rotate(163 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(164, 100%, 50%)" transform="rotate(164 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(165, 100%, 50%)" transform="rotate(165 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(166, 100%, 50%)" transform="rotate(166 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(167, 100%, 50%)" transform="rotate(167 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(168, 100%, 50%)" transform="rotate(168 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(169, 100%, 50%)" transform="rotate(169 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(170, 100%, 50%)" transform="rotate(170 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(171, 100%, 50%)" transform="rotate(171 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(172, 100%, 50%)" transform="rotate(172 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(173, 100%, 50%)" transform="rotate(173 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(174, 100%, 50%)" transform="rotate(174 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(175, 100%, 50%)" transform="rotate(175 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(176, 100%, 50%)" transform="rotate(176 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(177, 100%, 50%)" transform="rotate(177 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(178, 100%, 50%)" transform="rotate(178 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(179, 100%, 50%)" transform="rotate(179 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(180, 100%, 50%)" transform="rotate(180 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(181, 100%, 50%)" transform="rotate(181 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(182, 100%, 50%)" transform="rotate(182 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(183, 100%, 50%)" transform="rotate(183 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(184, 100%, 50%)" transform="rotate(184 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(185, 100%, 50%)" transform="rotate(185 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(186, 100%, 50%)" transform="rotate(186 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(187, 100%, 50%)" transform="rotate(187 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(188, 100%, 50%)" transform="rotate(188 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(189, 100%, 50%)" transform="rotate(189 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(190, 100%, 50%)" transform="rotate(190 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(191, 100%, 50%)" transform="rotate(191 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(192, 100%, 50%)" transform="rotate(192 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(193, 100%, 50%)" transform="rotate(193 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(194, 100%, 50%)" transform="rotate(194 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(195, 100%, 50%)" transform="rotate(195 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(196, 100%, 50%)" transform="rotate(196 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(197, 100%, 50%)" transform="rotate(197 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(198, 100%, 50%)" transform="rotate(198 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(199, 100%, 50%)" transform="rotate(199 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(200, 100%, 50%)" transform="rotate(200 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(201, 100%, 50%)" transform="rotate(201 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(202, 100%, 50%)" transform="rotate(202 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(203, 100%, 50%)" transform="rotate(203 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(204, 100%, 50%)" transform="rotate(204 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(205, 100%, 50%)" transform="rotate(205 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(206, 100%, 50%)" transform="rotate(206 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(207, 100%, 50%)" transform="rotate(207 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(208, 100%, 50%)" transform="rotate(208 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(209, 100%, 50%)" transform="rotate(209 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(210, 100%, 50%)" transform="rotate(210 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(211, 100%, 50%)" transform="rotate(211 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(212, 100%, 50%)" transform="rotate(212 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(213, 100%, 50%)" transform="rotate(213 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(214, 100%, 50%)" transform="rotate(214 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(215, 100%, 50%)" transform="rotate(215 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(216, 100%, 50%)" transform="rotate(216 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(217, 100%, 50%)" transform="rotate(217 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(218, 100%, 50%)" transform="rotate(218 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(219, 100%, 50%)" transform="rotate(219 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(220, 100%, 50%)" transform="rotate(220 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(221, 100%, 50%)" transform="rotate(221 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(222, 100%, 50%)" transform="rotate(222 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(223, 100%, 50%)" transform="rotate(223 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(224, 100%, 50%)" transform="rotate(224 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(225, 100%, 50%)" transform="rotate(225 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(226, 100%, 50%)" transform="rotate(226 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(227, 100%, 50%)" transform="rotate(227 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(228, 100%, 50%)" transform="rotate(228 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(229, 100%, 50%)" transform="rotate(229 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(230, 100%, 50%)" transform="rotate(230 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(231, 100%, 50%)" transform="rotate(231 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(232, 100%, 50%)" transform="rotate(232 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(233, 100%, 50%)" transform="rotate(233 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(234, 100%, 50%)" transform="rotate(234 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(235, 100%, 50%)" transform="rotate(235 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(236, 100%, 50%)" transform="rotate(236 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(237, 100%, 50%)" transform="rotate(237 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(238, 100%, 50%)" transform="rotate(238 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(239, 100%, 50%)" transform="rotate(239 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(240, 100%, 50%)" transform="rotate(240 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(241, 100%, 50%)" transform="rotate(241 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(242, 100%, 50%)" transform="rotate(242 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(243, 100%, 50%)" transform="rotate(243 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(244, 100%, 50%)" transform="rotate(244 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(245, 100%, 50%)" transform="rotate(245 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(246, 100%, 50%)" transform="rotate(246 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(247, 100%, 50%)" transform="rotate(247 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(248, 100%, 50%)" transform="rotate(248 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(249, 100%, 50%)" transform="rotate(249 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(250, 100%, 50%)" transform="rotate(250 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(251, 100%, 50%)" transform="rotate(251 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(252, 100%, 50%)" transform="rotate(252 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(253, 100%, 50%)" transform="rotate(253 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(254, 100%, 50%)" transform="rotate(254 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(255, 100%, 50%)" transform="rotate(255 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(256, 100%, 50%)" transform="rotate(256 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(257, 100%, 50%)" transform="rotate(257 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(258, 100%, 50%)" transform="rotate(258 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(259, 100%, 50%)" transform="rotate(259 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(260, 100%, 50%)" transform="rotate(260 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(261, 100%, 50%)" transform="rotate(261 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(262, 100%, 50%)" transform="rotate(262 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(263, 100%, 50%)" transform="rotate(263 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(264, 100%, 50%)" transform="rotate(264 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(265, 100%, 50%)" transform="rotate(265 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(266, 100%, 50%)" transform="rotate(266 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(267, 100%, 50%)" transform="rotate(267 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(268, 100%, 50%)" transform="rotate(268 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(269, 100%, 50%)" transform="rotate(269 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(270, 100%, 50%)" transform="rotate(270 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(271, 100%, 50%)" transform="rotate(271 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(272, 100%, 50%)" transform="rotate(272 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(273, 100%, 50%)" transform="rotate(273 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(274, 100%, 50%)" transform="rotate(274 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(275, 100%, 50%)" transform="rotate(275 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(276, 100%, 50%)" transform="rotate(276 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(277, 100%, 50%)" transform="rotate(277 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(278, 100%, 50%)" transform="rotate(278 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(279, 100%, 50%)" transform="rotate(279 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(280, 100%, 50%)" transform="rotate(280 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(281, 100%, 50%)" transform="rotate(281 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(282, 100%, 50%)" transform="rotate(282 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(283, 100%, 50%)" transform="rotate(283 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(284, 100%, 50%)" transform="rotate(284 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(285, 100%, 50%)" transform="rotate(285 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(286, 100%, 50%)" transform="rotate(286 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(287, 100%, 50%)" transform="rotate(287 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(288, 100%, 50%)" transform="rotate(288 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(289, 100%, 50%)" transform="rotate(289 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(290, 100%, 50%)" transform="rotate(290 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(291, 100%, 50%)" transform="rotate(291 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(292, 100%, 50%)" transform="rotate(292 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(293, 100%, 50%)" transform="rotate(293 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(294, 100%, 50%)" transform="rotate(294 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(295, 100%, 50%)" transform="rotate(295 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(296, 100%, 50%)" transform="rotate(296 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(297, 100%, 50%)" transform="rotate(297 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(298, 100%, 50%)" transform="rotate(298 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(299, 100%, 50%)" transform="rotate(299 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(300, 100%, 50%)" transform="rotate(300 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(301, 100%, 50%)" transform="rotate(301 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(302, 100%, 50%)" transform="rotate(302 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(303, 100%, 50%)" transform="rotate(303 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(304, 100%, 50%)" transform="rotate(304 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(305, 100%, 50%)" transform="rotate(305 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(306, 100%, 50%)" transform="rotate(306 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(307, 100%, 50%)" transform="rotate(307 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(308, 100%, 50%)" transform="rotate(308 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(309, 100%, 50%)" transform="rotate(309 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(310, 100%, 50%)" transform="rotate(310 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(311, 100%, 50%)" transform="rotate(311 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(312, 100%, 50%)" transform="rotate(312 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(313, 100%, 50%)" transform="rotate(313 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(314, 100%, 50%)" transform="rotate(314 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(315, 100%, 50%)" transform="rotate(315 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(316, 100%, 50%)" transform="rotate(316 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(317, 100%, 50%)" transform="rotate(317 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(318, 100%, 50%)" transform="rotate(318 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(319, 100%, 50%)" transform="rotate(319 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(320, 100%, 50%)" transform="rotate(320 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(321, 100%, 50%)" transform="rotate(321 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(322, 100%, 50%)" transform="rotate(322 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(323, 100%, 50%)" transform="rotate(323 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(324, 100%, 50%)" transform="rotate(324 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(325, 100%, 50%)" transform="rotate(325 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(326, 100%, 50%)" transform="rotate(326 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(327, 100%, 50%)" transform="rotate(327 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(328, 100%, 50%)" transform="rotate(328 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(329, 100%, 50%)" transform="rotate(329 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(330, 100%, 50%)" transform="rotate(330 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(331, 100%, 50%)" transform="rotate(331 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(332, 100%, 50%)" transform="rotate(332 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(333, 100%, 50%)" transform="rotate(333 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(334, 100%, 50%)" transform="rotate(334 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(335, 100%, 50%)" transform="rotate(335 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(336, 100%, 50%)" transform="rotate(336 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(337, 100%, 50%)" transform="rotate(337 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(338, 100%, 50%)" transform="rotate(338 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(339, 100%, 50%)" transform="rotate(339 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(340, 100%, 50%)" transform="rotate(340 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(341, 100%, 50%)" transform="rotate(341 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(342, 100%, 50%)" transform="rotate(342 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(343, 100%, 50%)" transform="rotate(343 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(344, 100%, 50%)" transform="rotate(344 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(345, 100%, 50%)" transform="rotate(345 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(346, 100%, 50%)" transform="rotate(346 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(347, 100%, 50%)" transform="rotate(347 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(348, 100%, 50%)" transform="rotate(348 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(349, 100%, 50%)" transform="rotate(349 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(350, 100%, 50%)" transform="rotate(350 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(351, 100%, 50%)" transform="rotate(351 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(352, 100%, 50%)" transform="rotate(352 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(353, 100%, 50%)" transform="rotate(353 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(354, 100%, 50%)" transform="rotate(354 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(355, 100%, 50%)" transform="rotate(355 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(356, 100%, 50%)" transform="rotate(356 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(357, 100%, 50%)" transform="rotate(357 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(358, 100%, 50%)" transform="rotate(358 80 80)"></rect><rect width="80" height="2" x="80" y="79" fill="hsl(359, 100%, 50%)" transform="rotate(359 80 80)"></rect></g>
    <circle cx="80" cy="80" r="79.5" class="spectrum-ColorWheel-outerCircle" mask="url(#mask)" />
    <circle cx="80" cy="80" r="56" class="spectrum-ColorWheel-innerCircle" />
  </svg>

  <div class="spectrum-ColorHandle spectrum-ColorWheel-handle" style="transform: translate(67.5px, 0);">
    <div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
    <svg class="spectrum-ColorLoupe">
      <g transform="translate(1 1)">
        <path class="spectrum-ColorLoupe-inner" d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z" fill="rgb(255, 0, 0)" />
        <path class="spectrum-ColorLoupe-outer" d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"/>
      </g>
    </svg>
  </div>

  <input type="range" class="spectrum-ColorWheel-slider" aria-label="hue" min="0" max="360" step="`">
</div>