Liquid Glass Colors

The complete color palette for Apple's Liquid Glass design language. Carefully crafted colors that work perfectly in both light and dark modes.

Color Palettes

Primary Colors

Core Liquid Glass colors for primary actions and branding

Liquid Blue

HEX
RGB
Primary actions, links, focus states

Liquid Purple

HEX
RGB
Secondary actions, highlights

Liquid Indigo

HEX
RGB
Navigation, selected states

Liquid Teal

HEX
RGB
Information, notifications

Neutral Colors

Balanced grays and neutrals for backgrounds and text

System Gray

HEX
RGB
Secondary text, icons

System Gray 2

HEX
RGB
Placeholders, disabled states

System Gray 3

HEX
RGB
Borders, separators

System Gray 4

HEX
RGB
Fill colors, backgrounds

Semantic Colors

Colors that convey meaning and status

System Red

HEX
RGB
Errors, destructive actions

System Orange

HEX
RGB
Warnings, pending states

System Yellow

HEX
RGB
Caution, important notices

System Green

HEX
RGB
Success, confirmations

Glass Materials

Transparent overlays and glass effect colors

Glass Light

HEX
RGB
Light glass overlays, opacity 20-40%

Glass Dark

HEX
RGB
Dark glass overlays, opacity 10-30%

Glass Blur

HEX
RGB
Backdrop blur materials

Glass Accent

HEX
RGB
Colored glass effects, opacity 15%

Available Formats

CSS Variables

Ready-to-use CSS custom properties for web development

--liquid-blue: #007AFF;
Download

Sass/SCSS

Sass variables and mixins for advanced styling

$liquid-blue: #007AFF;
Download

Figma Styles

Color styles library for Figma design files

Import as Figma library
Download

Sketch Palette

Color palette file for Sketch application

.sketchpalette format
Download

Adobe ASE

Adobe Swatch Exchange for Creative Suite

.ase color swatch file
Download

JSON

Structured color data for applications

{"liquidBlue": "#007AFF"}
Download

Usage Guidelines

Accessibility

Ensure sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text) when using colors for text and backgrounds.

Semantic Meaning

Use semantic colors consistently - red for errors, green for success, orange for warnings across your interface.

Glass Effects

Apply glass materials with subtle transparency (20-40% opacity) and backdrop blur for authentic Liquid Glass appearance.

Dark Mode

Colors automatically adapt to dark mode. Test your designs in both light and dark environments.

Ready to Use These Colors?

Download the complete Liquid Glass color palette in various formats and start creating beautiful interfaces today.