← Back to Tools
Generate warm terracotta and earth tone color palettes, layering canyon clay (#E2725B), dark ochre earth (#B87333), and soft warm sand beige (#E6D7C3).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--canyon-clay: #E2725B;
--canyon-clay-50: #fffbf8;
--canyon-clay-100: #fff6f2;
--canyon-clay-200: #ffece5;
--canyon-clay-300: #ffdfd5;
--canyon-clay-400: #ffcec0;
--canyon-clay-500: #E2725B;
--canyon-clay-600: #cf9585;
--canyon-clay-700: #966658;
--canyon-clay-800: #603b31;
--canyon-clay-900: #311a13;
--canyon-clay-950: #0b0302;
--dark-ochre-earth: #B87333;
--dark-ochre-earth-50: #fffbf5;
--dark-ochre-earth-100: #fff7ec;
--dark-ochre-earth-200: #fdedda;
--dark-ochre-earth-300: #f9e1c2;
--dark-ochre-earth-400: #f1d0a5;
--dark-ochre-earth-500: #B87333;
--dark-ochre-earth-600: #bc9662;
--dark-ochre-earth-700: #88683b;
--dark-ochre-earth-800: #563d1a;
--dark-ochre-earth-900: #2b1b04;
--dark-ochre-earth-950: #080400;
--soft-warm-sand-beige: #E6D7C3;
--soft-warm-sand-beige-50: #fffefd;
--soft-warm-sand-beige-100: #fffdfb;
--soft-warm-sand-beige-200: #fdfbf7;
--soft-warm-sand-beige-300: #fcf8f2;
--soft-warm-sand-beige-400: #f9f4ec;
--soft-warm-sand-beige-500: #E6D7C3;
--soft-warm-sand-beige-600: #cec7be;
--soft-warm-sand-beige-700: #928d85;
--soft-warm-sand-beige-800: #5a5650;
--soft-warm-sand-beige-900: #2c2926;
--soft-warm-sand-beige-950: #090806;
}
$canyon-clay: #E2725B; $canyon-clay-50: #fffbf8; $canyon-clay-100: #fff6f2; $canyon-clay-200: #ffece5; $canyon-clay-300: #ffdfd5; $canyon-clay-400: #ffcec0; $canyon-clay-500: #E2725B; $canyon-clay-600: #cf9585; $canyon-clay-700: #966658; $canyon-clay-800: #603b31; $canyon-clay-900: #311a13; $canyon-clay-950: #0b0302; $dark-ochre-earth: #B87333; $dark-ochre-earth-50: #fffbf5; $dark-ochre-earth-100: #fff7ec; $dark-ochre-earth-200: #fdedda; $dark-ochre-earth-300: #f9e1c2; $dark-ochre-earth-400: #f1d0a5; $dark-ochre-earth-500: #B87333; $dark-ochre-earth-600: #bc9662; $dark-ochre-earth-700: #88683b; $dark-ochre-earth-800: #563d1a; $dark-ochre-earth-900: #2b1b04; $dark-ochre-earth-950: #080400; $soft-warm-sand-beige: #E6D7C3; $soft-warm-sand-beige-50: #fffefd; $soft-warm-sand-beige-100: #fffdfb; $soft-warm-sand-beige-200: #fdfbf7; $soft-warm-sand-beige-300: #fcf8f2; $soft-warm-sand-beige-400: #f9f4ec; $soft-warm-sand-beige-500: #E6D7C3; $soft-warm-sand-beige-600: #cec7be; $soft-warm-sand-beige-700: #928d85; $soft-warm-sand-beige-800: #5a5650; $soft-warm-sand-beige-900: #2c2926; $soft-warm-sand-beige-950: #090806;
colors: {
'canyon-clay': {
50: '#fffbf8',
100: '#fff6f2',
200: '#ffece5',
300: '#ffdfd5',
400: '#ffcec0',
500: '#E2725B',
600: '#cf9585',
700: '#966658',
800: '#603b31',
900: '#311a13',
950: '#0b0302',
DEFAULT: '#E2725B',
},
'dark-ochre-earth': {
50: '#fffbf5',
100: '#fff7ec',
200: '#fdedda',
300: '#f9e1c2',
400: '#f1d0a5',
500: '#B87333',
600: '#bc9662',
700: '#88683b',
800: '#563d1a',
900: '#2b1b04',
950: '#080400',
DEFAULT: '#B87333',
},
'soft-warm-sand-beige': {
50: '#fffefd',
100: '#fffdfb',
200: '#fdfbf7',
300: '#fcf8f2',
400: '#f9f4ec',
500: '#E6D7C3',
600: '#cec7be',
700: '#928d85',
800: '#5a5650',
900: '#2c2926',
950: '#090806',
DEFAULT: '#E6D7C3',
},
},
[
{
"name": "canyon-clay",
"harmony": "Palette",
"hex": "#E2725B",
"rgb": {
"r": 226,
"g": 114,
"b": 91
},
"hsl": {
"h": 10,
"s": 70,
"l": 62
},
"value": "#E2725B",
"tonalScale": {
"50": {
"hex": "#fffbf8",
"rgb": {
"r": 255,
"g": 251,
"b": 248
}
},
"100": {
"hex": "#fff6f2",
"rgb": {
"r": 255,
"g": 246,
"b": 242
}
},
"200": {
"hex": "#ffece5",
"rgb": {
"r": 255,
"g": 236,
"b": 229
}
},
"300": {
"hex": "#ffdfd5",
"rgb": {
"r": 255,
"g": 223,
"b": 213
}
},
"400": {
"hex": "#ffcec0",
"rgb": {
"r": 255,
"g": 206,
"b": 192
}
},
"500": {
"hex": "#E2725B",
"rgb": {
"r": 226,
"g": 114,
"b": 91
}
},
"600": {
"hex": "#cf9585",
"rgb": {
"r": 207,
"g": 149,
"b": 133
}
},
"700": {
"hex": "#966658",
"rgb": {
"r": 150,
"g": 102,
"b": 88
}
},
"800": {
"hex": "#603b31",
"rgb": {
"r": 96,
"g": 59,
"b": 49
}
},
"900": {
"hex": "#311a13",
"rgb": {
"r": 49,
"g": 26,
"b": 19
}
},
"950": {
"hex": "#0b0302",
"rgb": {
"r": 11,
"g": 3,
"b": 2
}
}
}
},
{
"name": "dark-ochre-earth",
"harmony": "Palette",
"hex": "#B87333",
"rgb": {
"r": 184,
"g": 115,
"b": 51
},
"hsl": {
"h": 29,
"s": 57,
"l": 46
},
"value": "#B87333",
"tonalScale": {
"50": {
"hex": "#fffbf5",
"rgb": {
"r": 255,
"g": 251,
"b": 245
}
},
"100": {
"hex": "#fff7ec",
"rgb": {
"r": 255,
"g": 247,
"b": 236
}
},
"200": {
"hex": "#fdedda",
"rgb": {
"r": 253,
"g": 237,
"b": 218
}
},
"300": {
"hex": "#f9e1c2",
"rgb": {
"r": 249,
"g": 225,
"b": 194
}
},
"400": {
"hex": "#f1d0a5",
"rgb": {
"r": 241,
"g": 208,
"b": 165
}
},
"500": {
"hex": "#B87333",
"rgb": {
"r": 184,
"g": 115,
"b": 51
}
},
"600": {
"hex": "#bc9662",
"rgb": {
"r": 188,
"g": 150,
"b": 98
}
},
"700": {
"hex": "#88683b",
"rgb": {
"r": 136,
"g": 104,
"b": 59
}
},
"800": {
"hex": "#563d1a",
"rgb": {
"r": 86,
"g": 61,
"b": 26
}
},
"900": {
"hex": "#2b1b04",
"rgb": {
"r": 43,
"g": 27,
"b": 4
}
},
"950": {
"hex": "#080400",
"rgb": {
"r": 8,
"g": 4,
"b": 0
}
}
}
},
{
"name": "soft-warm-sand-beige",
"harmony": "Palette",
"hex": "#E6D7C3",
"rgb": {
"r": 230,
"g": 215,
"b": 195
},
"hsl": {
"h": 34,
"s": 41,
"l": 83
},
"value": "#E6D7C3",
"tonalScale": {
"50": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"100": {
"hex": "#fffdfb",
"rgb": {
"r": 255,
"g": 253,
"b": 251
}
},
"200": {
"hex": "#fdfbf7",
"rgb": {
"r": 253,
"g": 251,
"b": 247
}
},
"300": {
"hex": "#fcf8f2",
"rgb": {
"r": 252,
"g": 248,
"b": 242
}
},
"400": {
"hex": "#f9f4ec",
"rgb": {
"r": 249,
"g": 244,
"b": 236
}
},
"500": {
"hex": "#E6D7C3",
"rgb": {
"r": 230,
"g": 215,
"b": 195
}
},
"600": {
"hex": "#cec7be",
"rgb": {
"r": 206,
"g": 199,
"b": 190
}
},
"700": {
"hex": "#928d85",
"rgb": {
"r": 146,
"g": 141,
"b": 133
}
},
"800": {
"hex": "#5a5650",
"rgb": {
"r": 90,
"g": 86,
"b": 80
}
},
"900": {
"hex": "#2c2926",
"rgb": {
"r": 44,
"g": 41,
"b": 38
}
},
"950": {
"hex": "#090806",
"rgb": {
"r": 9,
"g": 8,
"b": 6
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 canyon-clay,Palette,#E2725B,"rgb(226, 114, 91)","hsl(10, 70%, 62%)",#E2725B,#fffbf8,#fff6f2,#ffece5,#ffdfd5,#ffcec0,#E2725B,#cf9585,#966658,#603b31,#311a13,#0b0302 dark-ochre-earth,Palette,#B87333,"rgb(184, 115, 51)","hsl(29, 57%, 46%)",#B87333,#fffbf5,#fff7ec,#fdedda,#f9e1c2,#f1d0a5,#B87333,#bc9662,#88683b,#563d1a,#2b1b04,#080400 soft-warm-sand-beige,Palette,#E6D7C3,"rgb(230, 215, 195)","hsl(34, 41%, 83%)",#E6D7C3,#fffefd,#fffdfb,#fdfbf7,#fcf8f2,#f9f4ec,#E6D7C3,#cec7be,#928d85,#5a5650,#2c2926,#090806
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 226 114 91 canyon-clay 255 251 248 canyon-clay-50 255 246 242 canyon-clay-100 255 236 229 canyon-clay-200 255 223 213 canyon-clay-300 255 206 192 canyon-clay-400 226 114 91 canyon-clay-500 207 149 133 canyon-clay-600 150 102 88 canyon-clay-700 96 59 49 canyon-clay-800 49 26 19 canyon-clay-900 11 3 2 canyon-clay-950 184 115 51 dark-ochre-earth 255 251 245 dark-ochre-earth-50 255 247 236 dark-ochre-earth-100 253 237 218 dark-ochre-earth-200 249 225 194 dark-ochre-earth-300 241 208 165 dark-ochre-earth-400 184 115 51 dark-ochre-earth-500 188 150 98 dark-ochre-earth-600 136 104 59 dark-ochre-earth-700 86 61 26 dark-ochre-earth-800 43 27 4 dark-ochre-earth-900 8 4 0 dark-ochre-earth-950 230 215 195 soft-warm-sand-beige 255 254 253 soft-warm-sand-beige-50 255 253 251 soft-warm-sand-beige-100 253 251 247 soft-warm-sand-beige-200 252 248 242 soft-warm-sand-beige-300 249 244 236 soft-warm-sand-beige-400 230 215 195 soft-warm-sand-beige-500 206 199 190 soft-warm-sand-beige-600 146 141 133 soft-warm-sand-beige-700 90 86 80 soft-warm-sand-beige-800 44 41 38 soft-warm-sand-beige-900 9 8 6 soft-warm-sand-beige-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.