Color Picker
A `<input type="color">` swatch chip paired with a hex text field — both accept the same `name` and submit value via the underlying form. Sibling-`+` selectors mirror the swatch state.
Color Picker the 19th of 28 designs in the 28 CSS Input Field Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="if-color">
<span class="if-color-label">Brand colour</span>
<span class="if-color-wrap">
<input type="color" id="if-color-c" value="#7c6cff" aria-label="Pick colour" />
<input
type="text"
id="if-color-t"
value="#7c6cff"
aria-label="Hex value"
pattern="^#[0-9A-Fa-f]{6}$"
/>
</span>
</label> .if-color {
display: grid;
gap: 6px;
width: 100%;
max-width: 280px;
}
.if-color-label {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: #b8b6d4;
text-transform: uppercase;
}
.if-color-wrap {
display: inline-flex;
align-items: stretch;
gap: 0;
background: #1a1a22;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
overflow: hidden;
transition: border-color 0.2s;
}
.if-color-wrap:focus-within {
border-color: #7c6cff;
}
.if-color input[type="color"] {
width: 44px;
height: 44px;
padding: 6px;
border: 0;
outline: none;
cursor: pointer;
background: transparent;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.if-color input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
.if-color input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: 6px;
}
.if-color input[type="text"] {
flex: 1;
min-width: 0;
padding: 0 14px;
border: 0;
outline: none;
background: transparent;
color: #f0eeff;
font:
600 13px/1 "JetBrains Mono",
monospace;
text-transform: uppercase;
letter-spacing: 0.04em;
}