Color picker — OutfitKit

Color picker

Paleta de swatches curados para tematizar productos, etiquetas o categorías.

Paleta por defecto

<div class="colorpicker">
  <button type="button" class="colorpicker-swatch"
    style="background:#D97757"
    aria-pressed="true"
    aria-label="#D97757"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#C44E37"
    
    aria-label="#C44E37"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#E8B548"
    
    aria-label="#E8B548"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#7BA374"
    
    aria-label="#7BA374"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#3D8B7C"
    
    aria-label="#3D8B7C"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#5C7CFA"
    
    aria-label="#5C7CFA"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#9C6ADE"
    
    aria-label="#9C6ADE"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#8A7765"
    
    aria-label="#8A7765"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#5A6168"
    
    aria-label="#5A6168"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#2F343A"
    
    aria-label="#2F343A"></button>
</div>

{% from "picker.jinja" import picker %}
{{ picker(selected="#D97757") }}

<Picker selected="#D97757" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Paleta custom — pasteles

<div class="colorpicker">
  <button type="button" class="colorpicker-swatch"
    style="background:#FFD9D6"
    
    aria-label="#FFD9D6"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#FFE9C7"
    aria-pressed="true"
    aria-label="#FFE9C7"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#FFF6BA"
    
    aria-label="#FFF6BA"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#D6F3D9"
    
    aria-label="#D6F3D9"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#D6E8F7"
    
    aria-label="#D6E8F7"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#E5D9F7"
    
    aria-label="#E5D9F7"></button>
  <button type="button" class="colorpicker-swatch"
    style="background:#F7D6F0"
    
    aria-label="#F7D6F0"></button>
</div>

{% from "picker.jinja" import picker %}
{{ picker(colors=["#FFD9D6", "#FFE9C7", "#FFF6BA", "#D6F3D9", "#D6E8F7", "#E5D9F7", "#F7D6F0"], selected="#FFE9C7") }}

<Picker colors="["#FFD9D6", "#FFE9C7", "#FFF6BA", "#D6F3D9", "#D6E8F7", "#E5D9F7", "#F7D6F0"]" selected="#FFE9C7" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Datastar — selección reactiva

<div data-signals="{ c: '#D97757' }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="colorpicker">
    
    <button type="button" class="colorpicker-swatch"
      style="background:#D97757"
      data-attr:aria-pressed="$c === '#D97757'"
      data-on:click="$c = '#D97757'"
      aria-label="#D97757"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#C44E37"
      data-attr:aria-pressed="$c === '#C44E37'"
      data-on:click="$c = '#C44E37'"
      aria-label="#C44E37"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#E8B548"
      data-attr:aria-pressed="$c === '#E8B548'"
      data-on:click="$c = '#E8B548'"
      aria-label="#E8B548"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#7BA374"
      data-attr:aria-pressed="$c === '#7BA374'"
      data-on:click="$c = '#7BA374'"
      aria-label="#7BA374"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#3D8B7C"
      data-attr:aria-pressed="$c === '#3D8B7C'"
      data-on:click="$c = '#3D8B7C'"
      aria-label="#3D8B7C"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#5C7CFA"
      data-attr:aria-pressed="$c === '#5C7CFA'"
      data-on:click="$c = '#5C7CFA'"
      aria-label="#5C7CFA"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#9C6ADE"
      data-attr:aria-pressed="$c === '#9C6ADE'"
      data-on:click="$c = '#9C6ADE'"
      aria-label="#9C6ADE"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#8A7765"
      data-attr:aria-pressed="$c === '#8A7765'"
      data-on:click="$c = '#8A7765'"
      aria-label="#8A7765"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#5A6168"
      data-attr:aria-pressed="$c === '#5A6168'"
      data-on:click="$c = '#5A6168'"
      aria-label="#5A6168"></button>
    
    <button type="button" class="colorpicker-swatch"
      style="background:#2F343A"
      data-attr:aria-pressed="$c === '#2F343A'"
      data-on:click="$c = '#2F343A'"
      aria-label="#2F343A"></button>
    
  </div>
  <div style="display:flex;gap:10px;align-items:center;">
    <div style="width:32px;height:32px;border-radius:8px;border:1px solid var(--line);" data-style-background="$c"></div>
    <code data-text="$c"></code>
  </div>
</div>

<div data-signals="{ c: '#D97757' }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="colorpicker">
    {% for c in ["#D97757","#C44E37","#E8B548","#7BA374","#3D8B7C","#5C7CFA","#9C6ADE","#8A7765","#5A6168","#2F343A"] %}
    <button type="button" class="colorpicker-swatch"
      style="background:{{ c }}"
      data-attr:aria-pressed="$c === '{{ c }}'"
      data-on:click="$c = '{{ c }}'"
      aria-label="{{ c }}"></button>
    {% endfor %}
  </div>
  <div style="display:flex;gap:10px;align-items:center;">
    <div style="width:32px;height:32px;border-radius:8px;border:1px solid var(--line);" data-style-background="$c"></div>
    <code data-text="$c"></code>
  </div>
</div>

<div data-signals="{ c: '#D97757' }" style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
  <div class="colorpicker">
    {% for c in ["#D97757","#C44E37","#E8B548","#7BA374","#3D8B7C","#5C7CFA","#9C6ADE","#8A7765","#5A6168","#2F343A"] %}
    <button type="button" class="colorpicker-swatch"
      style="background:{{ c }}"
      data-attr:aria-pressed="$c === '{{ c }}'"
      data-on:click="$c = '{{ c }}'"
      aria-label="{{ c }}"></button>
    {% endfor %}
  </div>
  <div style="display:flex;gap:10px;align-items:center;">
    <div style="width:32px;height:32px;border-radius:8px;border:1px solid var(--line);" data-style-background="$c"></div>
    <code data-text="$c"></code>
  </div>
</div>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`colors`	list[str]	None	Lista de colores hex. Si se omite, se usa la paleta ERPlora por defecto.
`selected`	str	""	Color seleccionado (marca `aria-pressed`).
`attrs`	dict	None	Atributos extra.