chromium/src/third_party/blink/web_tests/fast/forms/color/input-appearance-color.html

<h3>Default Appearance</h3>
List color controls have different appearance.<br>
<input type="color"><input type="color" list>
<h3>Different Font Sizes</h3>
List color controls have different sizes depending on font sizes. Normal color controls don't.<br>
<input type="color" value="#00FF00" style="font-size:18px">
<input type="color" value="#00FF00" style="font-size:11px">
<input type="color" value="#00FF00" style="font-size:8px">
<input type="color" list value="#00FF00" style="font-size:18px">
<input type="color" list value="#00FF00" style="font-size:11px">
<input type="color" list value="#00FF00" style="font-size:8px">
<h3>Various Colors</h3>
<input type="color" value="#FF0000">
<input type="color" value="#00FF00">
<input type="color" value="#0000FF">
<input type="color" value="#EC008C">
<input type="color" value="#40e0d0">
<input type="color" value="#FF0000" list>
<input type="color" value="#00FF00" list>
<input type="color" value="#0000FF" list>
<input type="color" value="#EC008C" list>
<input type="color" value="#40e0d0" list>
<h3>Arbitrary Size</h3>
<input type="color" value="#FF0000" style="width:100px;height:30px;">
<input type="color" value="#FF0000" style="zoom:2">
<input type="color" value="#FF0000" style="zoom:2" list>
<h3>Other styles</h3>
<input type="color" value="#FF0000" style="background-color:yellow">
<input type="color" value="#FF0000" style="background-color:yellow" list>
<input type="color" value="#FF0000" style="border:1px solid lime; border-radius:0">
<input type="color" value="#FF0000" style="border:1px solid lime; border-radius:0" list>
<input type="color" value="#40e0d0" dir=rtl>
<input type="color" value="#FF0000" list dir=rtl>