Components

Color input

Try the inspector’s color swatch, CSS value, and opacity input. Click the swatch to open the picker. Press Enter or blur to apply a text edit, or Escape to cancel. Select a hex channel or a number and use ↑ / ↓. Hold Alt to highlight a channel under the pointer, then drag horizontally to adjust it without selecting first. Hold Shift for steps of 10.

Hex needs no #. Short values repeat to six digits: F → FFFFFF, F5 → F5F5F5, ABC → ABCABC. Use #ABC for CSS shorthand (AABBCC), or eight digits to include alpha. Color functions and token references stay as written; support follows your browser.

Saved for this browser. Used for the picker and new opacity conversions; changing it keeps existing colors unchanged.

Text fill · Contrast

Pick a text color and check it against the background. Switch between the color square and wheel in Manage.

Use the arrow keys to adjust each channel. Home and End select its minimum and maximum. Scroll over the color area to adjust hue.

Custom ColorPopover

Our canvas picker scaffold: saturation and brightness, hue, opacity, RGB / HSL / OKLCH fields and screen sampling where available. Changes preview live and save when the interaction completes. Escape or clicking outside closes the picker. Switch between sRGB and Display-P3 inside the picker; colors outside sRGB are clipped when converted back.

rgb(109 92 231 / 1) · Saved

CSS

.color-preview {
  background-color: rgba(109, 92, 231, 1);
}

@supports (color: rgb(109 92 231 / 1)) {
  .color-preview {
    background-color: rgb(109 92 231 / 1);
  }
}

Solid

Edit a CSS color or choose one with the picker.

#6d5ce7

Token

The background/primary token shown in the Fills inspector.

var(--showcase-background-primary)

Transparent

Change opacity and preview the color over a checkerboard.

#6d5ce780

Mixed

Choose a color to replace a selection with multiple values.

Mixed

OKLCH

Edit lightness, chroma, and hue in a CSS color function.

oklch(60% 0.2 280)

Wide gamut

Keep the authored color space and channels.

color(display-p3 0.8 0.3 0.1)

Color mix

Combine colors using CSS interpolation.

Mix
color-mix(in oklch, #6d5ce7 70%, white)

Relative color

Derive channels and alpha from an existing color.

rgb(from var(--showcase-background-primary) r g b / 50%)

Light and dark

Let CSS choose a color for the current color scheme.

light-dark(#6d5ce7, #c4b5fd)

Disabled

Inspect the appearance when color editing is unavailable.

#6d5ce7

Color input anatomy

Use these names when describing changes. Live controls share a sample color. Visual samples identify parts that belong to a larger component.

Display: square / wheel · Color space: sRGB / Display-P3 · Color format: Hex / RGB / HSL / OKLCH

Color trigger / color popover

ColorPopover — click the trigger to open the full floating picker.

Color swatch

The small color preview inside the trigger.

Visual sample

Color panel

ColorPanel — the actual picker contents, rendered inline.

Use the arrow keys to adjust each channel. Home and End select its minimum and maximum. Scroll over the color area to adjust hue.

Popover header / drag handle

The top toolbar. Its empty area moves the floating popover.

Visual sample

Color-type selector

Color, Variable, Color Mix, and CSS.

Visual sample

Manage menu

InspectorMenuButton — display and color-space settings.

Display selector

Chooses Color Square or Color Wheel for the sample below.

Use the arrow keys to adjust each channel. Home and End select its minimum and maximum. Scroll over the color area to adjust hue.

Color-space selector

Chooses the gamut used by the OKLCH sample.

Color spectrum / saturation–brightness plane

ColorSurface — drag across the square to change saturation and brightness.

Use the arrow keys to adjust each channel. Home and End select its minimum and maximum. Scroll over the color area to adjust hue.

Lightness–chroma plane

OKLCHSurface — drag beyond the white guide to see the mapped marker and connector.

Selection handle

The outlined circle follows the selected color coordinates.

Visual sample

Gamut boundary

The white curve marks the selected color space’s reproducible limit.

Visual sample

Gamut boundary sample

Gamut-mapped marker

The small solid dot indicates the approximated output color.

Visual sample

Approximation connector

The dotted line joins the selected position and its mapped color.

Visual sample

Color wheel

ColorWheel — drag the hue ring or the inner saturation–brightness triangle.

Hue ring

The wheel’s outer band selects hue.

Visual sample

Saturation–brightness triangle

The inner wheel area varies saturation and brightness.

Visual sample

Hue slider / slider thumb

The rainbow track changes hue; its outlined circle is the slider thumb.

Opacity slider

ColorOpacitySlider — transparency over a checkerboard.

Eyedropper / dropper button

Pipette icon. Screen sampling is available in the full popover.

Visual sample

Color-format selector

Selects the syntax shown in the CSS value output.

Channel fields

ColorNumberField — editable numeric channels; shown here as H, S, V.

Hex field

ColorTextInput — type or paste a hexadecimal color.

Alpha field

ColorNumberField — numeric opacity, labeled A %.

Tooltip

ColorToolbarTooltip — hover or focus the button to reveal its label.

Error message

Feedback appears here if screen sampling fails.

Visual sample

Could not sample the screen. Try again or enter a color.

Color preview

The selected color over a transparency checkerboard.

CSS value output

The selected-format value used for display.

rgb(114.75 91.8 229.5 / 0.75)

CSS export hook

useColorCSSOutput — secondary stylesheet output with an sRGB fallback and @supports override.

.swatch {
  background-color: rgba(115, 92, 230, 0.75);
}

@supports (color: rgb(114.75 91.8 229.5 / 0.75)) {
  .swatch {
    background-color: rgb(114.75 91.8 229.5 / 0.75);
  }
}