Monochrome Amber Color Palette

One warm amber poured from pale honey to deep burnt umber across thirty steps. A single-hue ramp for firelight, candle glow, and warm wood, or a tidy sepia scale for vintage treatments. Cozy at every value.

Open in Paintrix

Get Paintrix free on the App Store.

Download

.swatches Procreate · Paintrix .ase Adobe · Affinity .gpl GIMP · Inkscape

Hex codes

Color theory

Base

Complement

Analogous −30°

Analogous +30°

Triadic

Use it for

warm lightingwood and leathersepia toninggradients

Code formats

CSS

:root {
  --mono-amber-1: #FCF1DE;
  --mono-amber-2: #FAE7C8;
  --mono-amber-3: #F8DDB2;
  --mono-amber-4: #F5D29B;
  --mono-amber-5: #F2C886;
  --mono-amber-6: #EFBD71;
  --mono-amber-7: #EBB25D;
  --mono-amber-8: #E6A74A;
  --mono-amber-9: #DF9B39;
  --mono-amber-10: #D68F2C;
  --mono-amber-11: #CA8323;
  --mono-amber-12: #BC771E;
  --mono-amber-13: #AD6B1B;
  --mono-amber-14: #9E5F18;
  --mono-amber-15: #8F5415;
  --mono-amber-16: #804912;
  --mono-amber-17: #723F10;
  --mono-amber-18: #64360D;
  --mono-amber-19: #562D0B;
  --mono-amber-20: #492509;
  --mono-amber-21: #3D1E07;
  --mono-amber-22: #311806;
  --mono-amber-23: #261205;
  --mono-amber-24: #1C0D04;
  --mono-amber-25: #150A03;
  --mono-amber-26: #0F0702;
  --mono-amber-27: #0A0502;
  --mono-amber-28: #070301;
  --mono-amber-29: #040201;
  --mono-amber-30: #020101;
}

SCSS

$mono-amber-1: #FCF1DE;
$mono-amber-2: #FAE7C8;
$mono-amber-3: #F8DDB2;
$mono-amber-4: #F5D29B;
$mono-amber-5: #F2C886;
$mono-amber-6: #EFBD71;
$mono-amber-7: #EBB25D;
$mono-amber-8: #E6A74A;
$mono-amber-9: #DF9B39;
$mono-amber-10: #D68F2C;
$mono-amber-11: #CA8323;
$mono-amber-12: #BC771E;
$mono-amber-13: #AD6B1B;
$mono-amber-14: #9E5F18;
$mono-amber-15: #8F5415;
$mono-amber-16: #804912;
$mono-amber-17: #723F10;
$mono-amber-18: #64360D;
$mono-amber-19: #562D0B;
$mono-amber-20: #492509;
$mono-amber-21: #3D1E07;
$mono-amber-22: #311806;
$mono-amber-23: #261205;
$mono-amber-24: #1C0D04;
$mono-amber-25: #150A03;
$mono-amber-26: #0F0702;
$mono-amber-27: #0A0502;
$mono-amber-28: #070301;
$mono-amber-29: #040201;
$mono-amber-30: #020101;

Tailwind

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'mono-amber': {
          '1': '#FCF1DE',
          '2': '#FAE7C8',
          '3': '#F8DDB2',
          '4': '#F5D29B',
          '5': '#F2C886',
          '6': '#EFBD71',
          '7': '#EBB25D',
          '8': '#E6A74A',
          '9': '#DF9B39',
          '10': '#D68F2C',
          '11': '#CA8323',
          '12': '#BC771E',
          '13': '#AD6B1B',
          '14': '#9E5F18',
          '15': '#8F5415',
          '16': '#804912',
          '17': '#723F10',
          '18': '#64360D',
          '19': '#562D0B',
          '20': '#492509',
          '21': '#3D1E07',
          '22': '#311806',
          '23': '#261205',
          '24': '#1C0D04',
          '25': '#150A03',
          '26': '#0F0702',
          '27': '#0A0502',
          '28': '#070301',
          '29': '#040201',
          '30': '#020101',
        },
      },
    },
  },
};

JSON

{
  "name": "Monochrome Amber",
  "colors": [
    "#FCF1DE",
    "#FAE7C8",
    "#F8DDB2",
    "#F5D29B",
    "#F2C886",
    "#EFBD71",
    "#EBB25D",
    "#E6A74A",
    "#DF9B39",
    "#D68F2C",
    "#CA8323",
    "#BC771E",
    "#AD6B1B",
    "#9E5F18",
    "#8F5415",
    "#804912",
    "#723F10",
    "#64360D",
    "#562D0B",
    "#492509",
    "#3D1E07",
    "#311806",
    "#261205",
    "#1C0D04",
    "#150A03",
    "#0F0702",
    "#0A0502",
    "#070301",
    "#040201",
    "#020101"
  ]
}

Hex list

#FCF1DE
#FAE7C8
#F8DDB2
#F5D29B
#F2C886
#EFBD71
#EBB25D
#E6A74A
#DF9B39
#D68F2C
#CA8323
#BC771E
#AD6B1B
#9E5F18
#8F5415
#804912
#723F10
#64360D
#562D0B
#492509
#3D1E07
#311806
#261205
#1C0D04
#150A03
#0F0702
#0A0502
#070301
#040201
#020101

Monochrome Amber Color Palette

Download

Hex codes

Color theory

Use it for

Code formats

Related palettes