منتقي الألوان

البنية

ألوان دلالية، درجات كثافة، وأدوات عرض عبر فئات المعدّل على الأكورديون.

Preview

Subtle (default)

    <.color_picker class="color-picker" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Subtle (default)</:label>
</.color_picker>

Semantic

Use class="ui-{role}" to set the semantic palette of a color picker.

Available options: accent, alert, brand, info, success

Default

Accent

Brand

Alert

Info

Success

    <.color_picker class="color-picker" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Default</:label>
</.color_picker>
<.color_picker class="color-picker ui-accent" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Accent</:label>
</.color_picker>
<.color_picker class="color-picker ui-brand" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Brand</:label>
</.color_picker>
<.color_picker class="color-picker ui-alert" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Alert</:label>
</.color_picker>
<.color_picker class="color-picker ui-info" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Info</:label>
</.color_picker>
<.color_picker class="color-picker ui-success" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Success</:label>
</.color_picker>

Variant

Variant modifiers control color-picker surface treatment. Default is subtle (neutral fill and border; semantic roles tint text ink); add ui-solid for a filled surface.

Subtle (default)

Solid

    <.color_picker class="color-picker" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Subtle (default)</:label>
</.color_picker>
<.color_picker class="color-picker ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Solid</:label>
</.color_picker>

Semantic × variant

Combine semantic palette and variant treatment on the same host, for example color-picker ui-accent ui-solid.

Base

Accent

Alert

Brand

Info

Success

    <.color_picker class="color-picker" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Base</:label></.color_picker>
<.color_picker class="color-picker ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Base</:label></.color_picker>
<.color_picker class="color-picker ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Base</:label></.color_picker>
<.color_picker class="color-picker ui-accent" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Accent</:label></.color_picker>
<.color_picker class="color-picker ui-accent ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Accent</:label></.color_picker>
<.color_picker class="color-picker ui-accent ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Accent</:label></.color_picker>
<.color_picker class="color-picker ui-alert" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Alert</:label></.color_picker>
<.color_picker class="color-picker ui-alert ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Alert</:label></.color_picker>
<.color_picker class="color-picker ui-alert ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Alert</:label></.color_picker>
<.color_picker class="color-picker ui-brand" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Brand</:label></.color_picker>
<.color_picker class="color-picker ui-brand ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Brand</:label></.color_picker>
<.color_picker class="color-picker ui-brand ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Brand</:label></.color_picker>
<.color_picker class="color-picker ui-info" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Info</:label></.color_picker>
<.color_picker class="color-picker ui-info ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Info</:label></.color_picker>
<.color_picker class="color-picker ui-info ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Info</:label></.color_picker>
<.color_picker class="color-picker ui-success" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Success</:label></.color_picker>
<.color_picker class="color-picker ui-success ui-solid" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Success</:label></.color_picker>
<.color_picker class="color-picker ui-success ui-ghost" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}><:label>Success</:label></.color_picker>

الحجم

Use class="ui-size-{size}" to set the size of a color picker.

Available options: xs, sm, md (default), lg, xl

    <.color_picker class="color-picker ui-size-sm" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>SM</:label>
</.color_picker>
<.color_picker class="color-picker ui-size-md" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>MD</:label>
</.color_picker>
<.color_picker class="color-picker ui-size-lg" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>LG</:label>
</.color_picker>
<.color_picker class="color-picker ui-size-xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>XL</:label>
</.color_picker>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a color picker.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

Full

    <.color_picker class="color-picker ui-rounded-none" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>None</:label>
</.color_picker>
<.color_picker class="color-picker ui-rounded-sm" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>SM</:label>
</.color_picker>
<.color_picker class="color-picker ui-rounded-md" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>MD</:label>
</.color_picker>
<.color_picker class="color-picker ui-rounded-lg" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>LG</:label>
</.color_picker>
<.color_picker class="color-picker ui-rounded-xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>XL</:label>
</.color_picker>
<.color_picker class="color-picker ui-rounded-full" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Full</:label>
</.color_picker>

Width

Without w-*, width comes from component CSS. Default for color-picker: fit-content (width: fit-content).

Use class="w-{step}" to set the host stretch mode of a color picker (`w-full`, `w-fit`); use Max width for named container steps.

Available options: default (fit-content), full, fit

default (fit-content)

Save changes to your account settings

full

Save changes to your account settings

fit

Save changes to your account settings

    <.color_picker class="color-picker" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-fit" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

أقصى عرض

Without max-w-*, width comes from component CSS. Default for color-picker: fit-content (width: fit-content).

Use class="max-w-{step}" to show a capped full-width control on fit-content hosts (pair w-full with max-w-* and wide content when labels are short).

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (fit-content)

Save changes to your account settings

none

Save changes to your account settings

full

Save changes to your account settings

9xs

Save changes to your account settings

8xs

Save changes to your account settings

7xs

Save changes to your account settings

6xs

Save changes to your account settings

5xs

Save changes to your account settings

4xs

Save changes to your account settings

3xs

Save changes to your account settings

2xs

Save changes to your account settings

2xl

Save changes to your account settings

3xl

Save changes to your account settings

4xl

Save changes to your account settings

5xl

Save changes to your account settings

6xl

Save changes to your account settings

7xl

Save changes to your account settings

8xl

Save changes to your account settings

9xl

Save changes to your account settings

    <.color_picker class="color-picker w-full" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-none" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-full" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-9xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-8xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-7xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-6xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-5xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-4xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-3xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-2xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-xs" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-sm" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-md" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-lg" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-2xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-3xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-4xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-5xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-6xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-7xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-8xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>

<.color_picker class="color-picker w-full max-w-9xl" value="#3b82f6" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]}>
  <:label>Save changes to your account settings</:label>
</.color_picker>