An <input type="color"> takes .form-control plus .form-control-color, which fixes its width at 3rem, matches a text field's height and removes the border around the swatch (::-webkit-color-swatch, ::-moz-color-swatch), so the color fills a rounded box; clicking it opens the browser's color picker.
<label for="brand" class="form-label">Brand color</label>
<input type="color" class="form-control form-control-color" id="brand" value="#6f42c1">Without the newer alpha and colorspace attributes, the value is a seven-character lowercase hex string such as #6f42c1. A list attribute can offer swatches from a <datalist>, but browsers display them inconsistently.