← Back to Tools
Design weathered coastal colors with grayed teal (#4E7C7B), muted sea green (#7BA3A0), pale mint (#B5CBC6), and warm parchment (#E4DCC8) for retro postcard-inspired designs.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--grayed-teal: #4E7C7B;
--grayed-teal-50: #f9fdfd;
--grayed-teal-100: #f2f9f9;
--grayed-teal-200: #e4f1f0;
--grayed-teal-300: #d2e6e5;
--grayed-teal-400: #bbd6d6;
--grayed-teal-500: #4E7C7B;
--grayed-teal-600: #7c9c9c;
--grayed-teal-700: #536e6e;
--grayed-teal-800: #2e4343;
--grayed-teal-900: #121f1f;
--grayed-teal-950: #020505;
--muted-sea-green: #7BA3A0;
--muted-sea-green-50: #fbfefd;
--muted-sea-green-100: #f6fbfb;
--muted-sea-green-200: #edf6f5;
--muted-sea-green-300: #e1efee;
--muted-sea-green-400: #d1e4e3;
--muted-sea-green-500: #7BA3A0;
--muted-sea-green-600: #9ab1af;
--muted-sea-green-700: #6a7d7b;
--muted-sea-green-800: #3e4c4b;
--muted-sea-green-900: #1b2424;
--muted-sea-green-950: #040606;
--pale-mint: #B5CBC6;
--pale-mint-50: #fdfefe;
--pale-mint-100: #fbfdfc;
--pale-mint-200: #f6faf9;
--pale-mint-300: #f0f6f5;
--pale-mint-400: #e8f1ef;
--pale-mint-500: #B5CBC6;
--pale-mint-600: #b8c3c0;
--pale-mint-700: #818a88;
--pale-mint-800: #4e5453;
--pale-mint-900: #242928;
--pale-mint-950: #060707;
--warm-parchment: #E4DCC8;
--warm-parchment-50: #fffefd;
--warm-parchment-100: #fefdfb;
--warm-parchment-200: #fdfbf8;
--warm-parchment-300: #fbf9f3;
--warm-parchment-400: #f8f5ee;
--warm-parchment-500: #E4DCC8;
--warm-parchment-600: #cdcac1;
--warm-parchment-700: #918e87;
--warm-parchment-800: #595751;
--warm-parchment-900: #2c2a26;
--warm-parchment-950: #080807;
}
$grayed-teal: #4E7C7B; $grayed-teal-50: #f9fdfd; $grayed-teal-100: #f2f9f9; $grayed-teal-200: #e4f1f0; $grayed-teal-300: #d2e6e5; $grayed-teal-400: #bbd6d6; $grayed-teal-500: #4E7C7B; $grayed-teal-600: #7c9c9c; $grayed-teal-700: #536e6e; $grayed-teal-800: #2e4343; $grayed-teal-900: #121f1f; $grayed-teal-950: #020505; $muted-sea-green: #7BA3A0; $muted-sea-green-50: #fbfefd; $muted-sea-green-100: #f6fbfb; $muted-sea-green-200: #edf6f5; $muted-sea-green-300: #e1efee; $muted-sea-green-400: #d1e4e3; $muted-sea-green-500: #7BA3A0; $muted-sea-green-600: #9ab1af; $muted-sea-green-700: #6a7d7b; $muted-sea-green-800: #3e4c4b; $muted-sea-green-900: #1b2424; $muted-sea-green-950: #040606; $pale-mint: #B5CBC6; $pale-mint-50: #fdfefe; $pale-mint-100: #fbfdfc; $pale-mint-200: #f6faf9; $pale-mint-300: #f0f6f5; $pale-mint-400: #e8f1ef; $pale-mint-500: #B5CBC6; $pale-mint-600: #b8c3c0; $pale-mint-700: #818a88; $pale-mint-800: #4e5453; $pale-mint-900: #242928; $pale-mint-950: #060707; $warm-parchment: #E4DCC8; $warm-parchment-50: #fffefd; $warm-parchment-100: #fefdfb; $warm-parchment-200: #fdfbf8; $warm-parchment-300: #fbf9f3; $warm-parchment-400: #f8f5ee; $warm-parchment-500: #E4DCC8; $warm-parchment-600: #cdcac1; $warm-parchment-700: #918e87; $warm-parchment-800: #595751; $warm-parchment-900: #2c2a26; $warm-parchment-950: #080807;
colors: {
'grayed-teal': {
50: '#f9fdfd',
100: '#f2f9f9',
200: '#e4f1f0',
300: '#d2e6e5',
400: '#bbd6d6',
500: '#4E7C7B',
600: '#7c9c9c',
700: '#536e6e',
800: '#2e4343',
900: '#121f1f',
950: '#020505',
DEFAULT: '#4E7C7B',
},
'muted-sea-green': {
50: '#fbfefd',
100: '#f6fbfb',
200: '#edf6f5',
300: '#e1efee',
400: '#d1e4e3',
500: '#7BA3A0',
600: '#9ab1af',
700: '#6a7d7b',
800: '#3e4c4b',
900: '#1b2424',
950: '#040606',
DEFAULT: '#7BA3A0',
},
'pale-mint': {
50: '#fdfefe',
100: '#fbfdfc',
200: '#f6faf9',
300: '#f0f6f5',
400: '#e8f1ef',
500: '#B5CBC6',
600: '#b8c3c0',
700: '#818a88',
800: '#4e5453',
900: '#242928',
950: '#060707',
DEFAULT: '#B5CBC6',
},
'warm-parchment': {
50: '#fffefd',
100: '#fefdfb',
200: '#fdfbf8',
300: '#fbf9f3',
400: '#f8f5ee',
500: '#E4DCC8',
600: '#cdcac1',
700: '#918e87',
800: '#595751',
900: '#2c2a26',
950: '#080807',
DEFAULT: '#E4DCC8',
},
},
[
{
"name": "grayed-teal",
"harmony": "Palette",
"hex": "#4E7C7B",
"rgb": {
"r": 78,
"g": 124,
"b": 123
},
"hsl": {
"h": 179,
"s": 23,
"l": 40
},
"value": "#4E7C7B",
"tonalScale": {
"50": {
"hex": "#f9fdfd",
"rgb": {
"r": 249,
"g": 253,
"b": 253
}
},
"100": {
"hex": "#f2f9f9",
"rgb": {
"r": 242,
"g": 249,
"b": 249
}
},
"200": {
"hex": "#e4f1f0",
"rgb": {
"r": 228,
"g": 241,
"b": 240
}
},
"300": {
"hex": "#d2e6e5",
"rgb": {
"r": 210,
"g": 230,
"b": 229
}
},
"400": {
"hex": "#bbd6d6",
"rgb": {
"r": 187,
"g": 214,
"b": 214
}
},
"500": {
"hex": "#4E7C7B",
"rgb": {
"r": 78,
"g": 124,
"b": 123
}
},
"600": {
"hex": "#7c9c9c",
"rgb": {
"r": 124,
"g": 156,
"b": 156
}
},
"700": {
"hex": "#536e6e",
"rgb": {
"r": 83,
"g": 110,
"b": 110
}
},
"800": {
"hex": "#2e4343",
"rgb": {
"r": 46,
"g": 67,
"b": 67
}
},
"900": {
"hex": "#121f1f",
"rgb": {
"r": 18,
"g": 31,
"b": 31
}
},
"950": {
"hex": "#020505",
"rgb": {
"r": 2,
"g": 5,
"b": 5
}
}
}
},
{
"name": "muted-sea-green",
"harmony": "Palette",
"hex": "#7BA3A0",
"rgb": {
"r": 123,
"g": 163,
"b": 160
},
"hsl": {
"h": 176,
"s": 18,
"l": 56
},
"value": "#7BA3A0",
"tonalScale": {
"50": {
"hex": "#fbfefd",
"rgb": {
"r": 251,
"g": 254,
"b": 253
}
},
"100": {
"hex": "#f6fbfb",
"rgb": {
"r": 246,
"g": 251,
"b": 251
}
},
"200": {
"hex": "#edf6f5",
"rgb": {
"r": 237,
"g": 246,
"b": 245
}
},
"300": {
"hex": "#e1efee",
"rgb": {
"r": 225,
"g": 239,
"b": 238
}
},
"400": {
"hex": "#d1e4e3",
"rgb": {
"r": 209,
"g": 228,
"b": 227
}
},
"500": {
"hex": "#7BA3A0",
"rgb": {
"r": 123,
"g": 163,
"b": 160
}
},
"600": {
"hex": "#9ab1af",
"rgb": {
"r": 154,
"g": 177,
"b": 175
}
},
"700": {
"hex": "#6a7d7b",
"rgb": {
"r": 106,
"g": 125,
"b": 123
}
},
"800": {
"hex": "#3e4c4b",
"rgb": {
"r": 62,
"g": 76,
"b": 75
}
},
"900": {
"hex": "#1b2424",
"rgb": {
"r": 27,
"g": 36,
"b": 36
}
},
"950": {
"hex": "#040606",
"rgb": {
"r": 4,
"g": 6,
"b": 6
}
}
}
},
{
"name": "pale-mint",
"harmony": "Palette",
"hex": "#B5CBC6",
"rgb": {
"r": 181,
"g": 203,
"b": 198
},
"hsl": {
"h": 166,
"s": 17,
"l": 75
},
"value": "#B5CBC6",
"tonalScale": {
"50": {
"hex": "#fdfefe",
"rgb": {
"r": 253,
"g": 254,
"b": 254
}
},
"100": {
"hex": "#fbfdfc",
"rgb": {
"r": 251,
"g": 253,
"b": 252
}
},
"200": {
"hex": "#f6faf9",
"rgb": {
"r": 246,
"g": 250,
"b": 249
}
},
"300": {
"hex": "#f0f6f5",
"rgb": {
"r": 240,
"g": 246,
"b": 245
}
},
"400": {
"hex": "#e8f1ef",
"rgb": {
"r": 232,
"g": 241,
"b": 239
}
},
"500": {
"hex": "#B5CBC6",
"rgb": {
"r": 181,
"g": 203,
"b": 198
}
},
"600": {
"hex": "#b8c3c0",
"rgb": {
"r": 184,
"g": 195,
"b": 192
}
},
"700": {
"hex": "#818a88",
"rgb": {
"r": 129,
"g": 138,
"b": 136
}
},
"800": {
"hex": "#4e5453",
"rgb": {
"r": 78,
"g": 84,
"b": 83
}
},
"900": {
"hex": "#242928",
"rgb": {
"r": 36,
"g": 41,
"b": 40
}
},
"950": {
"hex": "#060707",
"rgb": {
"r": 6,
"g": 7,
"b": 7
}
}
}
},
{
"name": "warm-parchment",
"harmony": "Palette",
"hex": "#E4DCC8",
"rgb": {
"r": 228,
"g": 220,
"b": 200
},
"hsl": {
"h": 43,
"s": 34,
"l": 84
},
"value": "#E4DCC8",
"tonalScale": {
"50": {
"hex": "#fffefd",
"rgb": {
"r": 255,
"g": 254,
"b": 253
}
},
"100": {
"hex": "#fefdfb",
"rgb": {
"r": 254,
"g": 253,
"b": 251
}
},
"200": {
"hex": "#fdfbf8",
"rgb": {
"r": 253,
"g": 251,
"b": 248
}
},
"300": {
"hex": "#fbf9f3",
"rgb": {
"r": 251,
"g": 249,
"b": 243
}
},
"400": {
"hex": "#f8f5ee",
"rgb": {
"r": 248,
"g": 245,
"b": 238
}
},
"500": {
"hex": "#E4DCC8",
"rgb": {
"r": 228,
"g": 220,
"b": 200
}
},
"600": {
"hex": "#cdcac1",
"rgb": {
"r": 205,
"g": 202,
"b": 193
}
},
"700": {
"hex": "#918e87",
"rgb": {
"r": 145,
"g": 142,
"b": 135
}
},
"800": {
"hex": "#595751",
"rgb": {
"r": 89,
"g": 87,
"b": 81
}
},
"900": {
"hex": "#2c2a26",
"rgb": {
"r": 44,
"g": 42,
"b": 38
}
},
"950": {
"hex": "#080807",
"rgb": {
"r": 8,
"g": 8,
"b": 7
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 grayed-teal,Palette,#4E7C7B,"rgb(78, 124, 123)","hsl(179, 23%, 40%)",#4E7C7B,#f9fdfd,#f2f9f9,#e4f1f0,#d2e6e5,#bbd6d6,#4E7C7B,#7c9c9c,#536e6e,#2e4343,#121f1f,#020505 muted-sea-green,Palette,#7BA3A0,"rgb(123, 163, 160)","hsl(176, 18%, 56%)",#7BA3A0,#fbfefd,#f6fbfb,#edf6f5,#e1efee,#d1e4e3,#7BA3A0,#9ab1af,#6a7d7b,#3e4c4b,#1b2424,#040606 pale-mint,Palette,#B5CBC6,"rgb(181, 203, 198)","hsl(166, 17%, 75%)",#B5CBC6,#fdfefe,#fbfdfc,#f6faf9,#f0f6f5,#e8f1ef,#B5CBC6,#b8c3c0,#818a88,#4e5453,#242928,#060707 warm-parchment,Palette,#E4DCC8,"rgb(228, 220, 200)","hsl(43, 34%, 84%)",#E4DCC8,#fffefd,#fefdfb,#fdfbf8,#fbf9f3,#f8f5ee,#E4DCC8,#cdcac1,#918e87,#595751,#2c2a26,#080807
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 78 124 123 grayed-teal 249 253 253 grayed-teal-50 242 249 249 grayed-teal-100 228 241 240 grayed-teal-200 210 230 229 grayed-teal-300 187 214 214 grayed-teal-400 78 124 123 grayed-teal-500 124 156 156 grayed-teal-600 83 110 110 grayed-teal-700 46 67 67 grayed-teal-800 18 31 31 grayed-teal-900 2 5 5 grayed-teal-950 123 163 160 muted-sea-green 251 254 253 muted-sea-green-50 246 251 251 muted-sea-green-100 237 246 245 muted-sea-green-200 225 239 238 muted-sea-green-300 209 228 227 muted-sea-green-400 123 163 160 muted-sea-green-500 154 177 175 muted-sea-green-600 106 125 123 muted-sea-green-700 62 76 75 muted-sea-green-800 27 36 36 muted-sea-green-900 4 6 6 muted-sea-green-950 181 203 198 pale-mint 253 254 254 pale-mint-50 251 253 252 pale-mint-100 246 250 249 pale-mint-200 240 246 245 pale-mint-300 232 241 239 pale-mint-400 181 203 198 pale-mint-500 184 195 192 pale-mint-600 129 138 136 pale-mint-700 78 84 83 pale-mint-800 36 41 40 pale-mint-900 6 7 7 pale-mint-950 228 220 200 warm-parchment 255 254 253 warm-parchment-50 254 253 251 warm-parchment-100 253 251 248 warm-parchment-200 251 249 243 warm-parchment-300 248 245 238 warm-parchment-400 228 220 200 warm-parchment-500 205 202 193 warm-parchment-600 145 142 135 warm-parchment-700 89 87 81 warm-parchment-800 44 42 38 warm-parchment-900 8 8 7 warm-parchment-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.