Color Input

        <form class="coral-Form coral-Form--vertical">
          <label id="label1" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label1"></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label2" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label2" value="rgb(0,0,255)" autogeneratecolors="shades"></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label3" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label3" autogeneratecolors="tints" showswatches="on" showproperties="off" placeholder="Choose a Color"></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label4" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label4" showswatches="off" showproperties="on" value="rgb(255, 160, 130)"></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label5" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label5" value="rgba(255,0,0,0.5)">
            <coral-colorinput-item value="#DDDDDD"></coral-colorinput-item>
            <coral-colorinput-item value="rgb(16,16,16)"></coral-colorinput-item>
            <coral-colorinput-item value="hsb(300,100,100)"></coral-colorinput-item>
            <coral-colorinput-item value="#DDDDDD"></coral-colorinput-item>
          </coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label6" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label6" variant="swatch" value="#ffffff"></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label7" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label7" value="#39CCCC" disabled=""></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label8" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label8" value="hello" invalid=""></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical">
          <label id="label9" class="coral-Form-fieldlabel">Label</label>
          <coral-colorinput labelledby="label9" value="rgb(233, 233, 233)" readonly=""></coral-colorinput>
        </form>
      

        <form class="coral-Form coral-Form--vertical" style="max-width:300px;">
          <label id="label10" class="coral-FieldLabel">Label</label>
          <coral-colorinput labelledby="label10" class="coral-Form-field"></coral-colorinput>
        </form>