Flat Design Color Chart

Flat design or flat UI colors are quite popular in web design today where bold, bright colors are used to create clean, simple interfaces.

Pomegranate

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Alizarin

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Amethyst

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Wisteria

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Belize Hole

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Peter River

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Turquoise

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Green Sea

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Nephritis

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Emerald

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Sunflower

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Orange

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Carrot

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Pumpkin

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Clouds

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Silver

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Concrete

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Asbestos

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Wet Asphalt

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Midnight Blue

Swatch	Name	Hex
	50
	100
	200
	300
	400
	500
	600
	700
	800
	900

Copy as Tailwind config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        'primary': '#17202A',
        'secondary': '#F8F9F9',
        'accent': '#E6B0AA',
        'surface': '#FBFCFC',
        'highlight': '#FDFEFE',
      }
    }
  }
}

Flat design aesthetics

Flat design favors bold, uniform fills without skeuomorphic gradients or heavy shadows. The Flat UI Color Picker palette—popularized around 2013—remains a reference for saturated interface colors.

Each named hue (Pomegranate, Belize Hole, Sun Flower, and others) includes lighter and darker companions for hover states and typography.

Applying flat palettes

Pair one saturated fill with plenty of neutral whitespace. Flat palettes age quickly when every element competes at full saturation—reserve strong hues for primary actions and key data.

Export hex values into your stylesheet or compare against Tailwind and Material scales to find the closest systematic alternative.