Color Swatch
Preview a single color value.
1use herogpui::components::color_picker::ColorSwatch;Usage
1use herogpui::prelude::{ColorSwatch, PickerColor};
2
3ColorSwatch::new(
4 PickerColor::from_hex("#0085F5").unwrap_or_default(),
5)Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
ColorSwatch
Color Swatch is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Color Swatch uses.
Styling
| Style | Description |
|---|---|
SizeXl::Md + overflow_hidden + border(layout.border_width) | The default swatch is a clipped 32px circle with theme border. |
SwatchShape => edge / 2 or radius_md | Circle radii follow each size; square uses theme medium radius. |
colors.surface_secondary beneath PickerColor | Translucent colors blend over the secondary surface; does not draw the upstream checker pattern. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
new( | PickerColor | — | Color value displayed by the swatch. |
shape( | SwatchShape | SwatchShape:: | Selects a circular or rounded-square swatch. |
size( | SizeXl | SizeXl:: | Selects the 16, 24, 32, 36 or 40px swatch size. |
Parts
| Part | Description |
|---|---|
ColorSwatch | Color preview with a transparency backdrop, border, size, and shape. |