Back to documentation
Color picker
A color picker that can be used in a form or other places.
Information
Plan: Pro
Added at: 2026-10-24
Example
Properties
| Property | Type | Default |
|---|---|---|
| Value | string | "black" |
| Input - Background color | string | "var(--ophixor-semantic-surface-base)" |
| Input - Border color | string | "var(--ophixor-semantic-border-default)" |
| Input - Color | string | "var(--ophixor-semantic-text-primary)" |
| Input - Box shadow | string | "var(--ophixor-semantic-shadow-input)" |
| Input - Box shadow - Focus | string | "var(--ophixor-semantic-focus-ring)" |
| Color box - Background color | string | "var(--ophixor-semantic-surface-base)" |
| Color box - Background color - Image | string | "var(--ophixor-semantic-border-default)" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Backdrop | string | "var(--ophixor-semantic-backdrop)" |
| Background color - Header | string | "var(--ophixor-semantic-surface-base-tertiary)" |
| Background - Header | string | "none" |
| Background color - Body | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Footer | string | "var(--ophixor-semantic-surface-base)" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Box shadow | string | "var(--ophixor-semantic-shadow-floating)" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Color - Header | string | "var(--ophixor-semantic-text-primary)" |
| Color - Header - Hover | string | "var(--ophixor-semantic-status-danger)" |
| Scrollbar - Color - 1 | string | "var(--ophixor-semantic-scrollbar-color-1)" |
| Scrollbar - Color - 2 | string | "var(--ophixor-semantic-scrollbar-color-2)" |
| Scrollbar - Thumb - Background color | string | "var(--ophixor-semantic-scrollbar-thumb-background-color)" |
| Scrollbar - Thumb - Background color - Active | string | "var(--ophixor-semantic-scrollbar-thumb-background-color-active)" |
| Scrollbar - Thumb - Background color - Hover | string | "var(--ophixor-semantic-scrollbar-thumb-background-color-hover)" |
| Scrollbar - Track - Background color | string | "var(--ophixor-semantic-scrollbar-track-background-color)" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Primary | string | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Primary - Hover | string | "var(--ophixor-semantic-interactive-primary)" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Border color - Hover | string | "var(--ophixor-semantic-border-default)" |
| Border color - Primary | string | "transparent" |
| Border color - Primary - Hover | string | "transparent" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Color - Hover | string | "var(--ophixor-semantic-text-primary)" |
| Color - Primary | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Primary - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Background color | string | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Active | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Background color - Hover | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Background color - None | string | "var(--ophixor-semantic-border-default)" |
| Color - Label | string | "var(--ophixor-semantic-text-primary)" |
| Color - Value | string | "var(--ophixor-semantic-text-primary)" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Box shadow | string | "var(--ophixor-semantic-shadow-input)" |
| Box shadow - Focus | string | "var(--ophixor-semantic-focus-ring)" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Option - Background color | string | "transparent" |
| Option - Background color - Hover | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Option - Background color - Selected | string | "var(--ophixor-semantic-interactive-primary)" |
| Option - Background color - Selected - Hover | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Option - Color | string | "var(--ophixor-semantic-text-primary)" |
| Option - Color - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Option - Color - Selected | string | "var(--ophixor-semantic-text-inverse)" |
| Option - Color - Selected - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Scrollbar - Color - 1 | string | "var(--ophixor-semantic-scrollbar-color-1)" |
| Scrollbar - Color - 2 | string | "var(--ophixor-semantic-scrollbar-color-2)" |
| Scrollbar - Thumb - Background color | string | "var(--ophixor-semantic-scrollbar-thumb-background-color)" |
| Scrollbar - Thumb - Background color - Active | string | "var(--ophixor-semantic-scrollbar-thumb-background-color-active)" |
| Scrollbar - Thumb - Background color - Hover | string | "var(--ophixor-semantic-scrollbar-thumb-background-color-hover)" |
| Scrollbar - Track - Background color | string | "var(--ophixor-semantic-scrollbar-track-background-color)" |
| Background color | string | "var(--ophixor-semantic-surface-base-tertiary)" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Color box - Background color - Image | string | "var(--ophixor-semantic-border-default)" |
| Color box - Border color | string | "var(--ophixor-semantic-border-default)" |
| Value row - Background color | string | "transparent" |
| Value row - Background color - Hover | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Value row - Background color - Active | string | "var(--ophixor-semantic-interactive-primary)" |
| Value row - Background color - Active - Hover | string | "var(--ophixor-semantic-interactive-primary-hover)" |
| Value row - Code - Background color | string | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Active | string | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Background color - Active - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Value row - Code - Border color | string | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Hover | string | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Active | string | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Border color - Active - Hover | string | "var(--ophixor-semantic-border-default)" |
| Value row - Code - Color | string | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Hover | string | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Active | string | "var(--ophixor-semantic-text-primary)" |
| Value row - Code - Color - Active - Hover | string | "var(--ophixor-semantic-text-primary)" |
| Value row - Text - Color | string | "var(--ophixor-semantic-text-secondary)" |
| Value row - Text - Color - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Value row - Text - Color - Active | string | "var(--ophixor-semantic-text-inverse)" |
| Value row - Text - Color - Active - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Color - Title | string | "var(--ophixor-semantic-text-primary)" |
| Color - Code | string | "var(--ophixor-semantic-text-primary)" |
| Preview wrapper - Background color - Image | string | "var(--ophixor-semantic-border-default)" |
| Preview wrapper - Border color | string | "var(--ophixor-semantic-border-default)" |
| Is visible | boolean | true |
| Selectors | array | [] |