Flat Design color interpretation

Material Surface

Google Material: elevation through shadow, colour through intent

This is one of several color interpretations commonly associated with Flat Design.

Omoro Spectrolab · Color Analysis Sampling Live
PaletteMaterial Surface
Batch032-MF
Pigments0 / 5 Sampled
MoodGoogle Material: eleva
Drawdown Recordtap a pull to copy hex
Omoro Color Laboratory - Drawdown Record032-MF / 5 PULLS

google material: elevation through shadow, colour through intent

Sampled Pigment- - - - - -
Awaiting SampleRGB - · - · -
● SENSOR OKHEX COPIED ✓
Export Tray - Digitized SwatchesEMPTY
SLOT 01
SLOT 02
SLOT 03
SLOT 04
SLOT 05
On a photo
Flat Design plate
Hex Reference
#212121Surface Dark
#6200EEPrimary Purple
#03DAC6Secondary Teal
#CF6679Error Pink
#FFFFFFSurface
Color Psychology

Surface Dark sets the weight of the palette in authority and restraint, and Primary Purple is the swatch that breaks rank: a single purple that stops the set reading as one note. Surface Dark to Surface spans 87 points of lightness, so the palette can carry its own hierarchy without reaching for a second one. Error Pink and Primary Purple sit on opposite sides of the temperature line, which is the tension the palette runs on and the pair to hold apart.

authorityrestraintsophisticationluxurycreativityrarity
Surface Dark#212121

Surface Dark is black's softer relative, still authoritative, but with enough warmth to feel considered rather than severe.

Primary Purple#6200EE

Primary Purple a saturated violet or amethyst: creativity and luxury with real confidence.

Secondary Teal#03DAC6

Secondary Teal a bright turquoise or peacock teal: tropical, confident, unmistakably alive.

Error Pink#CF6679

Error Pink carries urgency and appetite, the color the eye finds first.

Surface#FFFFFF

Surface reads as purity and openness, the color of empty space, clarity, and things left deliberately unresolved.

The Aesthetic

Zero dimension, bold fills, and geometric clarity - the design language that stripped the digital world of its shadows and gradients

Explore the full Flat Design style guideIts decade on the timeline · 2010s
More Flat Design Interpretations
Flat Design
Zero shadows, solid fills, geometric clarity
iOS 7
Jony Ive's reset: gradient-free icons and thin Helvetica
Metro Tile
Windows 8 start screen: bold tile, bold type, no ornament
Related Palettes
Vector Minimalism
Swiss / International
Corporate Memphis
Build a look with Material Surface
Not quite the palette you need? Generate your ownExtract from an image or build from a color wheel. Free
About This Palette
What colors are in the Material Surface color palette?

5 colors, calibrated to work as one system.

The swatches

  1. Surface Dark: #212121
  2. Primary Purple: #6200EE
  3. Secondary Teal: #03DAC6
  4. Error Pink: #CF6679
  5. Surface: #FFFFFF
What mood does the Material Surface color palette convey?

Google Material: elevation through shadow, colour through intent

Is Material Surface related to Flat Design?

Yes. Material Surface is one of several color interpretations commonly associated with the Flat Design aesthetic. Each interpretation captures a distinct emotional register within the same visual world.

What are the hex codes for the Material Surface palette?

Hex codes

  1. #212121
  2. #6200EE
  3. #03DAC6
  4. #CF6679
  5. #FFFFFF

Generate images in the material surface palette

Omoro reads your visual references and generates in your world. Drop in images with this palette and it extracts the DNA automatically.

Join the waitlist