What the Air of Pearlescent Breathing: UI Design: States, Components & Interaction

What the Air of Pearlescent Breathing — a 29%-saturated Purple at 70% lightness (RGB (181-156-201)) — how this shade behaves across interactive states and UI components.

What the Air of Pearlescent Breathing
#B59CC9 · RGB (181-156-201) · HSL(273°,29%,70%)

Accessibility: Best text on RGB (181-156-201) is black (ratio 8.56:1 — WCAG AAA ✅). Check your own contrast →

Color in UI State Systems

Every UI color must work across multiple states: default, hover, active, focused, disabled, error, success. Planning a systematic set of variations from the base color is essential. A primary action color needs at minimum: hover (+10% lightness), pressed (-10%), disabled (heavily desaturated and lightened), and a focus ring variant.

Applying What the Air of Pearlescent Breathing in Ui

Building a UI state system from RGB (181-156-201):

  • Default: RGB (181-156-201) at full value
  • Hover: lightness +8–12%
  • Active/pressed: lightness -8–12%
  • Disabled: saturation ~20%, lightness ~70%
  • Focus ring: complementary hue at full saturation, minimum 3:1 contrast

Similar Colors

Design neighbors:

More Purple:

All Purple colors →

Full Data for What the Air of Pearlescent Breathing

13 formats + harmonies: What the Air of Pearlescent Breathing →