Soft UI Color Palette

Light gray backgrounds with gentle shadow pairs in slightly darker and lighter tones create the soft UI look. This tactile palette produces skeuomorphic cards, toggle switches, and modern input fields.

#ECF0F3

Dusty Blue

RGB(236, 240, 243)

HSL(206, 23%, 94%)

#D1D9E6

Dusty Blue

RGB(209, 217, 230)

HSL(217, 30%, 86%)

#F0F0F3

Dusty Indigo

RGB(240, 240, 243)

HSL(240, 11%, 95%)

#FFFFFF

White

RGB(255, 255, 255)

HSL(0, 0%, 100%)

#C8D0DA

Dusty Blue

RGB(200, 208, 218)

HSL(213, 20%, 82%)

#DDE3EB

Dusty Blue

RGB(221, 227, 235)

HSL(214, 26%, 89%)

lightbulbBest Use Cases

  • checkSkeuomorphic cards
  • checkToggle switches
  • checkInput fields

businessIndustries

  • checkTechnology
  • checkDesign
Mood:soft

codeUse in Your Code

CSS Custom Properties

:root {
  --color-1: #ECF0F3;
  --color-2: #D1D9E6;
  --color-3: #F0F0F3;
  --color-4: #FFFFFF;
  --color-5: #C8D0DA;
  --color-6: #DDE3EB;
}

Tailwind CSS Config

colors: {
  'soft-ui-1': '#ECF0F3',
  'soft-ui-2': '#D1D9E6',
  'soft-ui-3': '#F0F0F3',
  'soft-ui-4': '#FFFFFF',
  'soft-ui-5': '#C8D0DA',
  'soft-ui-6': '#DDE3EB',
}
soft-uineumorphiclighttactilesubtle

Want to Extract Colors from Your Own Images?

Upload any photo and get a custom color palette instantly — free.

Try PaletteAI Free

Related Palettes