Color Picker · Style
Semantic colors on the control-row inputs and density via modifier classes on the color picker root.
Hex doc
Phoenix
Color
R
G
B
A
R
G
B
A
R
G
B
A
R
G
B
A
R
G
B
A
R
G
B
A
<.color_picker class="color-picker" value="#3b82f6" label="Default" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--accent" value="#3b82f6" label="Accent" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--brand" value="#3b82f6" label="Brand" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--alert" value="#3b82f6" label="Alert" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--info" value="#3b82f6" label="Info" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--success" value="#3b82f6" label="Success" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
Size
R
G
B
A
R
G
B
A
R
G
B
A
R
G
B
A
<.color_picker class="color-picker color-picker--sm" value="#3b82f6" label="SM" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--md" value="#3b82f6" label="MD" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--lg" value="#3b82f6" label="LG" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />
<.color_picker class="color-picker color-picker--xl" value="#3b82f6" label="XL" presets={["#ff0000", "#00ff00", "#0000ff", "#3b82f6"]} />