← Back to Tools
Design professional corporate and SaaS branding with this slate blue and cream palette featuring #6A8CAF slate blue, #FFFDD0 cream, #4A6B8A steel blue, and #E8E8D8 light cream.
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--slate-blue: #6A8CAF;
--slate-blue-50: #fafdff;
--slate-blue-100: #f5f9fe;
--slate-blue-200: #eaf2fa;
--slate-blue-300: #dce9f4;
--slate-blue-400: #c9dcec;
--slate-blue-500: #6A8CAF;
--slate-blue-600: #90a5b8;
--slate-blue-700: #627484;
--slate-blue-800: #394652;
--slate-blue-900: #182128;
--slate-blue-950: #030507;
--cream: #FFFDD0;
--cream-50: #fffffd;
--cream-100: #fffffb;
--cream-200: #fffff8;
--cream-300: #fffff3;
--cream-400: #ffffee;
--cream-500: #FFFDD0;
--cream-600: #d7d7c3;
--cream-700: #999888;
--cream-800: #5e5d51;
--cream-900: #2e2e26;
--cream-950: #090906;
--steel-blue: #4A6B8A;
--steel-blue-50: #f9fcff;
--steel-blue-100: #f2f7fc;
--steel-blue-200: #e4edf5;
--steel-blue-300: #d1e0ec;
--steel-blue-400: #b9cedf;
--steel-blue-500: #4A6B8A;
--steel-blue-600: #7992a5;
--steel-blue-700: #516676;
--steel-blue-800: #2e3d4a;
--steel-blue-900: #121c24;
--steel-blue-950: #020406;
--light-cream: #E8E8D8;
--light-cream-50: #fffffe;
--light-cream-100: #fefefd;
--light-cream-200: #fdfdfa;
--light-cream-300: #fbfbf7;
--light-cream-400: #f9f9f3;
--light-cream-500: #E8E8D8;
--light-cream-600: #cecec7;
--light-cream-700: #92928c;
--light-cream-800: #595955;
--light-cream-900: #2c2b29;
--light-cream-950: #080807;
}
$slate-blue: #6A8CAF; $slate-blue-50: #fafdff; $slate-blue-100: #f5f9fe; $slate-blue-200: #eaf2fa; $slate-blue-300: #dce9f4; $slate-blue-400: #c9dcec; $slate-blue-500: #6A8CAF; $slate-blue-600: #90a5b8; $slate-blue-700: #627484; $slate-blue-800: #394652; $slate-blue-900: #182128; $slate-blue-950: #030507; $cream: #FFFDD0; $cream-50: #fffffd; $cream-100: #fffffb; $cream-200: #fffff8; $cream-300: #fffff3; $cream-400: #ffffee; $cream-500: #FFFDD0; $cream-600: #d7d7c3; $cream-700: #999888; $cream-800: #5e5d51; $cream-900: #2e2e26; $cream-950: #090906; $steel-blue: #4A6B8A; $steel-blue-50: #f9fcff; $steel-blue-100: #f2f7fc; $steel-blue-200: #e4edf5; $steel-blue-300: #d1e0ec; $steel-blue-400: #b9cedf; $steel-blue-500: #4A6B8A; $steel-blue-600: #7992a5; $steel-blue-700: #516676; $steel-blue-800: #2e3d4a; $steel-blue-900: #121c24; $steel-blue-950: #020406; $light-cream: #E8E8D8; $light-cream-50: #fffffe; $light-cream-100: #fefefd; $light-cream-200: #fdfdfa; $light-cream-300: #fbfbf7; $light-cream-400: #f9f9f3; $light-cream-500: #E8E8D8; $light-cream-600: #cecec7; $light-cream-700: #92928c; $light-cream-800: #595955; $light-cream-900: #2c2b29; $light-cream-950: #080807;
colors: {
'slate-blue': {
50: '#fafdff',
100: '#f5f9fe',
200: '#eaf2fa',
300: '#dce9f4',
400: '#c9dcec',
500: '#6A8CAF',
600: '#90a5b8',
700: '#627484',
800: '#394652',
900: '#182128',
950: '#030507',
DEFAULT: '#6A8CAF',
},
'cream': {
50: '#fffffd',
100: '#fffffb',
200: '#fffff8',
300: '#fffff3',
400: '#ffffee',
500: '#FFFDD0',
600: '#d7d7c3',
700: '#999888',
800: '#5e5d51',
900: '#2e2e26',
950: '#090906',
DEFAULT: '#FFFDD0',
},
'steel-blue': {
50: '#f9fcff',
100: '#f2f7fc',
200: '#e4edf5',
300: '#d1e0ec',
400: '#b9cedf',
500: '#4A6B8A',
600: '#7992a5',
700: '#516676',
800: '#2e3d4a',
900: '#121c24',
950: '#020406',
DEFAULT: '#4A6B8A',
},
'light-cream': {
50: '#fffffe',
100: '#fefefd',
200: '#fdfdfa',
300: '#fbfbf7',
400: '#f9f9f3',
500: '#E8E8D8',
600: '#cecec7',
700: '#92928c',
800: '#595955',
900: '#2c2b29',
950: '#080807',
DEFAULT: '#E8E8D8',
},
},
[
{
"name": "slate-blue",
"harmony": "Palette",
"hex": "#6A8CAF",
"rgb": {
"r": 106,
"g": 140,
"b": 175
},
"hsl": {
"h": 210,
"s": 30,
"l": 55
},
"value": "#6A8CAF",
"tonalScale": {
"50": {
"hex": "#fafdff",
"rgb": {
"r": 250,
"g": 253,
"b": 255
}
},
"100": {
"hex": "#f5f9fe",
"rgb": {
"r": 245,
"g": 249,
"b": 254
}
},
"200": {
"hex": "#eaf2fa",
"rgb": {
"r": 234,
"g": 242,
"b": 250
}
},
"300": {
"hex": "#dce9f4",
"rgb": {
"r": 220,
"g": 233,
"b": 244
}
},
"400": {
"hex": "#c9dcec",
"rgb": {
"r": 201,
"g": 220,
"b": 236
}
},
"500": {
"hex": "#6A8CAF",
"rgb": {
"r": 106,
"g": 140,
"b": 175
}
},
"600": {
"hex": "#90a5b8",
"rgb": {
"r": 144,
"g": 165,
"b": 184
}
},
"700": {
"hex": "#627484",
"rgb": {
"r": 98,
"g": 116,
"b": 132
}
},
"800": {
"hex": "#394652",
"rgb": {
"r": 57,
"g": 70,
"b": 82
}
},
"900": {
"hex": "#182128",
"rgb": {
"r": 24,
"g": 33,
"b": 40
}
},
"950": {
"hex": "#030507",
"rgb": {
"r": 3,
"g": 5,
"b": 7
}
}
}
},
{
"name": "cream",
"harmony": "Palette",
"hex": "#FFFDD0",
"rgb": {
"r": 255,
"g": 253,
"b": 208
},
"hsl": {
"h": 57,
"s": 100,
"l": 91
},
"value": "#FFFDD0",
"tonalScale": {
"50": {
"hex": "#fffffd",
"rgb": {
"r": 255,
"g": 255,
"b": 253
}
},
"100": {
"hex": "#fffffb",
"rgb": {
"r": 255,
"g": 255,
"b": 251
}
},
"200": {
"hex": "#fffff8",
"rgb": {
"r": 255,
"g": 255,
"b": 248
}
},
"300": {
"hex": "#fffff3",
"rgb": {
"r": 255,
"g": 255,
"b": 243
}
},
"400": {
"hex": "#ffffee",
"rgb": {
"r": 255,
"g": 255,
"b": 238
}
},
"500": {
"hex": "#FFFDD0",
"rgb": {
"r": 255,
"g": 253,
"b": 208
}
},
"600": {
"hex": "#d7d7c3",
"rgb": {
"r": 215,
"g": 215,
"b": 195
}
},
"700": {
"hex": "#999888",
"rgb": {
"r": 153,
"g": 152,
"b": 136
}
},
"800": {
"hex": "#5e5d51",
"rgb": {
"r": 94,
"g": 93,
"b": 81
}
},
"900": {
"hex": "#2e2e26",
"rgb": {
"r": 46,
"g": 46,
"b": 38
}
},
"950": {
"hex": "#090906",
"rgb": {
"r": 9,
"g": 9,
"b": 6
}
}
}
},
{
"name": "steel-blue",
"harmony": "Palette",
"hex": "#4A6B8A",
"rgb": {
"r": 74,
"g": 107,
"b": 138
},
"hsl": {
"h": 209,
"s": 30,
"l": 42
},
"value": "#4A6B8A",
"tonalScale": {
"50": {
"hex": "#f9fcff",
"rgb": {
"r": 249,
"g": 252,
"b": 255
}
},
"100": {
"hex": "#f2f7fc",
"rgb": {
"r": 242,
"g": 247,
"b": 252
}
},
"200": {
"hex": "#e4edf5",
"rgb": {
"r": 228,
"g": 237,
"b": 245
}
},
"300": {
"hex": "#d1e0ec",
"rgb": {
"r": 209,
"g": 224,
"b": 236
}
},
"400": {
"hex": "#b9cedf",
"rgb": {
"r": 185,
"g": 206,
"b": 223
}
},
"500": {
"hex": "#4A6B8A",
"rgb": {
"r": 74,
"g": 107,
"b": 138
}
},
"600": {
"hex": "#7992a5",
"rgb": {
"r": 121,
"g": 146,
"b": 165
}
},
"700": {
"hex": "#516676",
"rgb": {
"r": 81,
"g": 102,
"b": 118
}
},
"800": {
"hex": "#2e3d4a",
"rgb": {
"r": 46,
"g": 61,
"b": 74
}
},
"900": {
"hex": "#121c24",
"rgb": {
"r": 18,
"g": 28,
"b": 36
}
},
"950": {
"hex": "#020406",
"rgb": {
"r": 2,
"g": 4,
"b": 6
}
}
}
},
{
"name": "light-cream",
"harmony": "Palette",
"hex": "#E8E8D8",
"rgb": {
"r": 232,
"g": 232,
"b": 216
},
"hsl": {
"h": 60,
"s": 26,
"l": 88
},
"value": "#E8E8D8",
"tonalScale": {
"50": {
"hex": "#fffffe",
"rgb": {
"r": 255,
"g": 255,
"b": 254
}
},
"100": {
"hex": "#fefefd",
"rgb": {
"r": 254,
"g": 254,
"b": 253
}
},
"200": {
"hex": "#fdfdfa",
"rgb": {
"r": 253,
"g": 253,
"b": 250
}
},
"300": {
"hex": "#fbfbf7",
"rgb": {
"r": 251,
"g": 251,
"b": 247
}
},
"400": {
"hex": "#f9f9f3",
"rgb": {
"r": 249,
"g": 249,
"b": 243
}
},
"500": {
"hex": "#E8E8D8",
"rgb": {
"r": 232,
"g": 232,
"b": 216
}
},
"600": {
"hex": "#cecec7",
"rgb": {
"r": 206,
"g": 206,
"b": 199
}
},
"700": {
"hex": "#92928c",
"rgb": {
"r": 146,
"g": 146,
"b": 140
}
},
"800": {
"hex": "#595955",
"rgb": {
"r": 89,
"g": 89,
"b": 85
}
},
"900": {
"hex": "#2c2b29",
"rgb": {
"r": 44,
"g": 43,
"b": 41
}
},
"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 slate-blue,Palette,#6A8CAF,"rgb(106, 140, 175)","hsl(210, 30%, 55%)",#6A8CAF,#fafdff,#f5f9fe,#eaf2fa,#dce9f4,#c9dcec,#6A8CAF,#90a5b8,#627484,#394652,#182128,#030507 cream,Palette,#FFFDD0,"rgb(255, 253, 208)","hsl(57, 100%, 91%)",#FFFDD0,#fffffd,#fffffb,#fffff8,#fffff3,#ffffee,#FFFDD0,#d7d7c3,#999888,#5e5d51,#2e2e26,#090906 steel-blue,Palette,#4A6B8A,"rgb(74, 107, 138)","hsl(209, 30%, 42%)",#4A6B8A,#f9fcff,#f2f7fc,#e4edf5,#d1e0ec,#b9cedf,#4A6B8A,#7992a5,#516676,#2e3d4a,#121c24,#020406 light-cream,Palette,#E8E8D8,"rgb(232, 232, 216)","hsl(60, 26%, 88%)",#E8E8D8,#fffffe,#fefefd,#fdfdfa,#fbfbf7,#f9f9f3,#E8E8D8,#cecec7,#92928c,#595955,#2c2b29,#080807
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 106 140 175 slate-blue 250 253 255 slate-blue-50 245 249 254 slate-blue-100 234 242 250 slate-blue-200 220 233 244 slate-blue-300 201 220 236 slate-blue-400 106 140 175 slate-blue-500 144 165 184 slate-blue-600 98 116 132 slate-blue-700 57 70 82 slate-blue-800 24 33 40 slate-blue-900 3 5 7 slate-blue-950 255 253 208 cream 255 255 253 cream-50 255 255 251 cream-100 255 255 248 cream-200 255 255 243 cream-300 255 255 238 cream-400 255 253 208 cream-500 215 215 195 cream-600 153 152 136 cream-700 94 93 81 cream-800 46 46 38 cream-900 9 9 6 cream-950 74 107 138 steel-blue 249 252 255 steel-blue-50 242 247 252 steel-blue-100 228 237 245 steel-blue-200 209 224 236 steel-blue-300 185 206 223 steel-blue-400 74 107 138 steel-blue-500 121 146 165 steel-blue-600 81 102 118 steel-blue-700 46 61 74 steel-blue-800 18 28 36 steel-blue-900 2 4 6 steel-blue-950 232 232 216 light-cream 255 255 254 light-cream-50 254 254 253 light-cream-100 253 253 250 light-cream-200 251 251 247 light-cream-300 249 249 243 light-cream-400 232 232 216 light-cream-500 206 206 199 light-cream-600 146 146 140 light-cream-700 89 89 85 light-cream-800 44 43 41 light-cream-900 8 8 7 light-cream-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.