Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Color controls
Colors

Color controls

Color controls patterns built with StyloftCSS and native HTML.

CSS only6 examplesKeyboard friendly HTML

ColorArea

A color-area surface and native range control. Two-dimensional pointer interaction and synchronized color output require application code.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-stack">
  <div class="sl-color-area" style="--sl-color: #6556dd" aria-hidden="true"></div>
  <div class="sl-field">
    <label class="sl-label" for="ref-saturation">Saturation</label
    ><input
      class="sl-color-range"
      id="ref-saturation"
      type="range"
      min="0"
      max="100"
      value="70"
    />
  </div>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

ColorField

An editable hexadecimal field with a native format constraint. Color preview synchronization is application logic.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-color-field">Hex color</label
  ><input
    class="sl-input"
    id="ref-color-field"
    pattern="#[0-9A-Fa-f]{6}"
    value="#6556dd"
    maxlength="7"
  />
</div>
HTML source · enable JavaScript for the playground10 lines · UTF-8

ColorPicker

The browser supplies the color picker; no component JavaScript.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-color-picker">Accent color</label
  ><input class="sl-color-input" type="color" id="ref-color-picker" value="#6556dd" />
</div>
HTML source · enable JavaScript for the playground4 lines · UTF-8

ColorSlider

A native range control. Connect hue-to-color conversion in your application.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-hue">Hue in degrees</label
  ><input
    class="sl-color-range"
    type="range"
    id="ref-hue"
    min="0"
    max="360"
    value="220"
  />
</div>
HTML source · enable JavaScript for the playground11 lines · UTF-8

ColorSwatch

Static color samples with accessible names.

Live preview
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <span
    class="sl-swatch"
    style="--sl-color: #6556dd"
    role="img"
    aria-label="Purple, hexadecimal 6556dd"
  ></span
  ><span
    class="sl-swatch"
    style="--sl-color: #16a6b6"
    role="img"
    aria-label="Teal, hexadecimal 16a6b6"
  ></span>
</div>
HTML source · enable JavaScript for the playground14 lines · UTF-8

ColorSwatchPicker

Native radio selection with a visible selected state. Theme updates are application logic.

Live preview
Choose a sample accent
View HTML / PlaygroundHTML source
example.htmlHTML
<fieldset class="sl-stack">
  <legend>Choose a sample accent</legend>
  <div class="sl-cluster sl-gap-4">
    <label class="sl-swatch-choice"
      ><input
        type="radio"
        name="ref-accent"
        value="#6556dd"
        aria-label="Purple"
        checked /><span
        class="sl-swatch"
        style="--sl-color: #6556dd"
        aria-hidden="true"
      ></span></label
    ><label class="sl-swatch-choice"
      ><input type="radio" name="ref-accent" value="#16a6b6" aria-label="Teal" /><span
        class="sl-swatch"
        style="--sl-color: #16a6b6"
        aria-hidden="true"
      ></span></label
    ><label class="sl-swatch-choice"
      ><input type="radio" name="ref-accent" value="#df7654" aria-label="Coral" /><span
        class="sl-swatch"
        style="--sl-color: #df7654"
        aria-hidden="true"
      ></span
    ></label>
  </div>
</fieldset>
HTML source · enable JavaScript for the playground29 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.