Color Picker — uicraft

Palette Swatches

Pick a color from a grid of swatches. The selected color is highlighted with a ring.

html

#6366F1

<div class="uc-grid uc-grid-cols-6 uc-gap-2">
  <button class="uc-w-8 uc-h-8 uc-rounded-lg" style="background:#EF4444" data-color="#EF4444"></button>
  <!-- ...more swatches -->
</div>
<div class="uc-w-full uc-h-8 uc-rounded-lg" id="preview"></div>
<p class="uc-text-sm uc-font-mono">#6366F1</p>

With Input

Enter a hex color value directly or see the preview update in real time.

html

<div class="uc-flex uc-items-center uc-gap-3">
  <div class="uc-w-9 uc-h-9 uc-rounded-lg uc-border uc-border-border-default" style="background:#6366F1"></div>
  <input type="text" value="#6366F1" class="uc-h-9 uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-px-3 uc-text-sm uc-font-mono uc-w-28" />
  <button class="uc-h-9 uc-px-3 uc-rounded-lg uc-border uc-border-border-strong uc-bg-neutrals-surface uc-text-sm uc-font-medium">Apply</button>
</div>

Preset Colors

Organized color groups with labels for quick selection.

html

Brand Colors

Gray Scale

Semantic

<div class="uc-space-y-5">
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-2">Brand Colors</p>
    <div class="uc-flex uc-gap-2">
      <button class="uc-w-8 uc-h-8 uc-rounded-lg" style="background:#6366F1"></button>
      <!-- ...more swatches -->
    </div>
  </div>
  <div>
    <p class="uc-text-xs uc-font-medium uc-text-fg-disabled uc-mb-2">Gray Scale</p>
    <div class="uc-flex uc-gap-2">
      <button class="uc-w-8 uc-h-8 uc-rounded-lg" style="background:#F9FAFB"></button>
      <!-- ...more swatches -->
    </div>
  </div>
</div>

Compact

An inline trigger that opens a mini palette popover on click.

html

<div class="uc-relative">
  <button class="uc-flex uc-items-center uc-gap-2">
    <span class="uc-w-6 uc-h-6 uc-rounded-full uc-border uc-border-border-default" style="background:#6366F1"></span>
    <span class="uc-text-sm uc-font-medium">Indigo</span>
    <svg>...</svg>
  </button>
  <div class="uc-absolute uc-top-full uc-left-0 uc-mt-2 uc-p-3 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg">
    <div class="uc-grid uc-grid-cols-5 uc-gap-1.5">
      <button class="uc-w-6 uc-h-6 uc-rounded-full" style="background:#6366F1"></button>
      <!-- ...more swatches -->
    </div>
  </div>
</div>

With Opacity

Color picker with an alpha/opacity slider for transparency control.

html

Opacity 80%

#6366F1 rgba(99, 102, 241, 0.8)

<div class="uc-space-y-4">
  <div class="uc-flex uc-gap-2">
    <button class="uc-w-8 uc-h-8 uc-rounded-lg" style="background:#EF4444"></button>
    <!-- ...more swatches -->
  </div>
  <div class="uc-w-full uc-h-10 uc-rounded-lg uc-border" style="background:rgba(99,102,241,0.8)"></div>
  <div>
    <label class="uc-text-xs uc-font-medium uc-text-fg-disabled">Opacity</label>
    <input type="range" min="0" max="100" value="80" class="uc-w-full" />
  </div>
  <span class="uc-text-sm uc-font-mono">#6366F1</span>
</div>