Open experiment
Chroma color picker
A compact design-tool primitive combining unrestricted native color selection with four named presets. The preview chip, hexadecimal output, and selected swatch stay synchronized, while every swatch exposes a meaningful name and pressed state.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-chroma-picker">
<div class="cmp-chroma-picker__head">
<label for="cmp-chroma-picker-input">Accent color</label>
<output for="cmp-chroma-picker-input">#7C5CFF</output>
</div>
<div class="cmp-chroma-picker__studio">
<input id="cmp-chroma-picker-input" type="color" value="#7c5cff" />
<span class="cmp-chroma-picker__preview" aria-hidden="true"></span>
<div class="cmp-chroma-picker__swatches" aria-label="Color presets">
<button
type="button"
data-color="#7c5cff"
aria-label="Electric violet"
aria-pressed="true"
></button>
<button
type="button"
data-color="#20c997"
aria-label="Signal mint"
aria-pressed="false"
></button>
<button
type="button"
data-color="#ff6b6b"
aria-label="Solar coral"
aria-pressed="false"
></button>
<button
type="button"
data-color="#ffd43b"
aria-label="Photon yellow"
aria-pressed="false"
></button>
</div>
</div>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The native color input has a visible label.
- Every swatch has a color name and pressed state.
- The hexadecimal value remains visible text.
License: MIT License for open-source use, modification, and distribution.