← Back to Tools
Monochromatic Tint Escalator
Step saturation and lightness up to create soft background washes.
Export Palette
Copy or download the current harmony as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO. Tabs toggle the preview; switch color space to change the output format.
:root {
--analogous-1: #3c83f6;
--analogous-1-50: #f6fdff;
--analogous-1-100: #eef9ff;
--analogous-1-200: #def2ff;
--analogous-1-300: #c8e8ff;
--analogous-1-400: #add9ff;
--analogous-1-500: #3c83f6;
--analogous-1-600: #6ba0d8;
--analogous-1-700: #43709f;
--analogous-1-800: #214367;
--analogous-1-900: #081f36;
--analogous-1-950: #01050d;
--analogous-2: #61a6fa;
--analogous-2-50: #f8feff;
--analogous-2-100: #f2fbff;
--analogous-2-200: #e6f6ff;
--analogous-2-300: #d7efff;
--analogous-2-400: #c2e6ff;
--analogous-2-500: #61a6fa;
--analogous-2-600: #88b2d9;
--analogous-2-700: #5a7d9e;
--analogous-2-800: #314c65;
--analogous-2-900: #132434;
--analogous-2-950: #02060c;
--analogous-3: #91c3fd;
--analogous-3-50: #fbfeff;
--analogous-3-100: #f7fdff;
--analogous-3-200: #eff9ff;
--analogous-3-300: #e5f5ff;
--analogous-3-400: #d9efff;
--analogous-3-500: #91c3fd;
--analogous-3-600: #a5bfd9;
--analogous-3-700: #71879c;
--analogous-3-800: #425363;
--analogous-3-900: #1d2832;
--analogous-3-950: #04070b;
--analogous-4: #bedbfe;
--analogous-4-50: #fdffff;
--analogous-4-100: #fbfeff;
--analogous-4-200: #f7fcff;
--analogous-4-300: #f1f9ff;
--analogous-4-400: #eaf5ff;
--analogous-4-500: #bedbfe;
--analogous-4-600: #bcc9d8;
--analogous-4-700: #838e9b;
--analogous-4-800: #4f5761;
--analogous-4-900: #252a30;
--analogous-4-950: #06080a;
--analogous-5: #dcebfe;
--analogous-5-50: #feffff;
--analogous-5-100: #fdfeff;
--analogous-5-200: #fbfdff;
--analogous-5-300: #f8fcff;
--analogous-5-400: #f4faff;
--analogous-5-500: #dcebfe;
--analogous-5-600: #c9d0d8;
--analogous-5-700: #8d9399;
--analogous-5-800: #565a5f;
--analogous-5-900: #292c2f;
--analogous-5-950: #07080a;
}
$analogous-1: #3c83f6; $analogous-1-50: #f6fdff; $analogous-1-100: #eef9ff; $analogous-1-200: #def2ff; $analogous-1-300: #c8e8ff; $analogous-1-400: #add9ff; $analogous-1-500: #3c83f6; $analogous-1-600: #6ba0d8; $analogous-1-700: #43709f; $analogous-1-800: #214367; $analogous-1-900: #081f36; $analogous-1-950: #01050d; $analogous-2: #61a6fa; $analogous-2-50: #f8feff; $analogous-2-100: #f2fbff; $analogous-2-200: #e6f6ff; $analogous-2-300: #d7efff; $analogous-2-400: #c2e6ff; $analogous-2-500: #61a6fa; $analogous-2-600: #88b2d9; $analogous-2-700: #5a7d9e; $analogous-2-800: #314c65; $analogous-2-900: #132434; $analogous-2-950: #02060c; $analogous-3: #91c3fd; $analogous-3-50: #fbfeff; $analogous-3-100: #f7fdff; $analogous-3-200: #eff9ff; $analogous-3-300: #e5f5ff; $analogous-3-400: #d9efff; $analogous-3-500: #91c3fd; $analogous-3-600: #a5bfd9; $analogous-3-700: #71879c; $analogous-3-800: #425363; $analogous-3-900: #1d2832; $analogous-3-950: #04070b; $analogous-4: #bedbfe; $analogous-4-50: #fdffff; $analogous-4-100: #fbfeff; $analogous-4-200: #f7fcff; $analogous-4-300: #f1f9ff; $analogous-4-400: #eaf5ff; $analogous-4-500: #bedbfe; $analogous-4-600: #bcc9d8; $analogous-4-700: #838e9b; $analogous-4-800: #4f5761; $analogous-4-900: #252a30; $analogous-4-950: #06080a; $analogous-5: #dcebfe; $analogous-5-50: #feffff; $analogous-5-100: #fdfeff; $analogous-5-200: #fbfdff; $analogous-5-300: #f8fcff; $analogous-5-400: #f4faff; $analogous-5-500: #dcebfe; $analogous-5-600: #c9d0d8; $analogous-5-700: #8d9399; $analogous-5-800: #565a5f; $analogous-5-900: #292c2f; $analogous-5-950: #07080a;
colors: {
'analogous-1': {
50: '#f6fdff',
100: '#eef9ff',
200: '#def2ff',
300: '#c8e8ff',
400: '#add9ff',
500: '#3c83f6',
600: '#6ba0d8',
700: '#43709f',
800: '#214367',
900: '#081f36',
950: '#01050d',
DEFAULT: '#3c83f6',
},
'analogous-2': {
50: '#f8feff',
100: '#f2fbff',
200: '#e6f6ff',
300: '#d7efff',
400: '#c2e6ff',
500: '#61a6fa',
600: '#88b2d9',
700: '#5a7d9e',
800: '#314c65',
900: '#132434',
950: '#02060c',
DEFAULT: '#61a6fa',
},
'analogous-3': {
50: '#fbfeff',
100: '#f7fdff',
200: '#eff9ff',
300: '#e5f5ff',
400: '#d9efff',
500: '#91c3fd',
600: '#a5bfd9',
700: '#71879c',
800: '#425363',
900: '#1d2832',
950: '#04070b',
DEFAULT: '#91c3fd',
},
'analogous-4': {
50: '#fdffff',
100: '#fbfeff',
200: '#f7fcff',
300: '#f1f9ff',
400: '#eaf5ff',
500: '#bedbfe',
600: '#bcc9d8',
700: '#838e9b',
800: '#4f5761',
900: '#252a30',
950: '#06080a',
DEFAULT: '#bedbfe',
},
'analogous-5': {
50: '#feffff',
100: '#fdfeff',
200: '#fbfdff',
300: '#f8fcff',
400: '#f4faff',
500: '#dcebfe',
600: '#c9d0d8',
700: '#8d9399',
800: '#565a5f',
900: '#292c2f',
950: '#07080a',
DEFAULT: '#dcebfe',
},
},
[
{
"name": "analogous-1",
"harmony": "Analogous",
"hex": "#3c83f6",
"rgb": {
"r": 60,
"g": 131,
"b": 246
},
"hsl": {
"h": 217,
"s": 91,
"l": 60
},
"value": "#3c83f6",
"tonalScale": {
"50": {
"hex": "#f6fdff",
"rgb": {
"r": 246,
"g": 253,
"b": 255
}
},
"100": {
"hex": "#eef9ff",
"rgb": {
"r": 238,
"g": 249,
"b": 255
}
},
"200": {
"hex": "#def2ff",
"rgb": {
"r": 222,
"g": 242,
"b": 255
}
},
"300": {
"hex": "#c8e8ff",
"rgb": {
"r": 200,
"g": 232,
"b": 255
}
},
"400": {
"hex": "#add9ff",
"rgb": {
"r": 173,
"g": 217,
"b": 255
}
},
"500": {
"hex": "#3c83f6",
"rgb": {
"r": 60,
"g": 131,
"b": 246
}
},
"600": {
"hex": "#6ba0d8",
"rgb": {
"r": 107,
"g": 160,
"b": 216
}
},
"700": {
"hex": "#43709f",
"rgb": {
"r": 67,
"g": 112,
"b": 159
}
},
"800": {
"hex": "#214367",
"rgb": {
"r": 33,
"g": 67,
"b": 103
}
},
"900": {
"hex": "#081f36",
"rgb": {
"r": 8,
"g": 31,
"b": 54
}
},
"950": {
"hex": "#01050d",
"rgb": {
"r": 1,
"g": 5,
"b": 13
}
}
}
},
{
"name": "analogous-2",
"harmony": "Analogous",
"hex": "#61a6fa",
"rgb": {
"r": 97,
"g": 166,
"b": 250
},
"hsl": {
"h": 213,
"s": 94,
"l": 68
},
"value": "#61a6fa",
"tonalScale": {
"50": {
"hex": "#f8feff",
"rgb": {
"r": 248,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#f2fbff",
"rgb": {
"r": 242,
"g": 251,
"b": 255
}
},
"200": {
"hex": "#e6f6ff",
"rgb": {
"r": 230,
"g": 246,
"b": 255
}
},
"300": {
"hex": "#d7efff",
"rgb": {
"r": 215,
"g": 239,
"b": 255
}
},
"400": {
"hex": "#c2e6ff",
"rgb": {
"r": 194,
"g": 230,
"b": 255
}
},
"500": {
"hex": "#61a6fa",
"rgb": {
"r": 97,
"g": 166,
"b": 250
}
},
"600": {
"hex": "#88b2d9",
"rgb": {
"r": 136,
"g": 178,
"b": 217
}
},
"700": {
"hex": "#5a7d9e",
"rgb": {
"r": 90,
"g": 125,
"b": 158
}
},
"800": {
"hex": "#314c65",
"rgb": {
"r": 49,
"g": 76,
"b": 101
}
},
"900": {
"hex": "#132434",
"rgb": {
"r": 19,
"g": 36,
"b": 52
}
},
"950": {
"hex": "#02060c",
"rgb": {
"r": 2,
"g": 6,
"b": 12
}
}
}
},
{
"name": "analogous-3",
"harmony": "Analogous",
"hex": "#91c3fd",
"rgb": {
"r": 145,
"g": 195,
"b": 253
},
"hsl": {
"h": 212,
"s": 96,
"l": 78
},
"value": "#91c3fd",
"tonalScale": {
"50": {
"hex": "#fbfeff",
"rgb": {
"r": 251,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#f7fdff",
"rgb": {
"r": 247,
"g": 253,
"b": 255
}
},
"200": {
"hex": "#eff9ff",
"rgb": {
"r": 239,
"g": 249,
"b": 255
}
},
"300": {
"hex": "#e5f5ff",
"rgb": {
"r": 229,
"g": 245,
"b": 255
}
},
"400": {
"hex": "#d9efff",
"rgb": {
"r": 217,
"g": 239,
"b": 255
}
},
"500": {
"hex": "#91c3fd",
"rgb": {
"r": 145,
"g": 195,
"b": 253
}
},
"600": {
"hex": "#a5bfd9",
"rgb": {
"r": 165,
"g": 191,
"b": 217
}
},
"700": {
"hex": "#71879c",
"rgb": {
"r": 113,
"g": 135,
"b": 156
}
},
"800": {
"hex": "#425363",
"rgb": {
"r": 66,
"g": 83,
"b": 99
}
},
"900": {
"hex": "#1d2832",
"rgb": {
"r": 29,
"g": 40,
"b": 50
}
},
"950": {
"hex": "#04070b",
"rgb": {
"r": 4,
"g": 7,
"b": 11
}
}
}
},
{
"name": "analogous-4",
"harmony": "Analogous",
"hex": "#bedbfe",
"rgb": {
"r": 190,
"g": 219,
"b": 254
},
"hsl": {
"h": 213,
"s": 97,
"l": 87
},
"value": "#bedbfe",
"tonalScale": {
"50": {
"hex": "#fdffff",
"rgb": {
"r": 253,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fbfeff",
"rgb": {
"r": 251,
"g": 254,
"b": 255
}
},
"200": {
"hex": "#f7fcff",
"rgb": {
"r": 247,
"g": 252,
"b": 255
}
},
"300": {
"hex": "#f1f9ff",
"rgb": {
"r": 241,
"g": 249,
"b": 255
}
},
"400": {
"hex": "#eaf5ff",
"rgb": {
"r": 234,
"g": 245,
"b": 255
}
},
"500": {
"hex": "#bedbfe",
"rgb": {
"r": 190,
"g": 219,
"b": 254
}
},
"600": {
"hex": "#bcc9d8",
"rgb": {
"r": 188,
"g": 201,
"b": 216
}
},
"700": {
"hex": "#838e9b",
"rgb": {
"r": 131,
"g": 142,
"b": 155
}
},
"800": {
"hex": "#4f5761",
"rgb": {
"r": 79,
"g": 87,
"b": 97
}
},
"900": {
"hex": "#252a30",
"rgb": {
"r": 37,
"g": 42,
"b": 48
}
},
"950": {
"hex": "#06080a",
"rgb": {
"r": 6,
"g": 8,
"b": 10
}
}
}
},
{
"name": "analogous-5",
"harmony": "Analogous",
"hex": "#dcebfe",
"rgb": {
"r": 220,
"g": 235,
"b": 254
},
"hsl": {
"h": 214,
"s": 95,
"l": 93
},
"value": "#dcebfe",
"tonalScale": {
"50": {
"hex": "#feffff",
"rgb": {
"r": 254,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#fdfeff",
"rgb": {
"r": 253,
"g": 254,
"b": 255
}
},
"200": {
"hex": "#fbfdff",
"rgb": {
"r": 251,
"g": 253,
"b": 255
}
},
"300": {
"hex": "#f8fcff",
"rgb": {
"r": 248,
"g": 252,
"b": 255
}
},
"400": {
"hex": "#f4faff",
"rgb": {
"r": 244,
"g": 250,
"b": 255
}
},
"500": {
"hex": "#dcebfe",
"rgb": {
"r": 220,
"g": 235,
"b": 254
}
},
"600": {
"hex": "#c9d0d8",
"rgb": {
"r": 201,
"g": 208,
"b": 216
}
},
"700": {
"hex": "#8d9399",
"rgb": {
"r": 141,
"g": 147,
"b": 153
}
},
"800": {
"hex": "#565a5f",
"rgb": {
"r": 86,
"g": 90,
"b": 95
}
},
"900": {
"hex": "#292c2f",
"rgb": {
"r": 41,
"g": 44,
"b": 47
}
},
"950": {
"hex": "#07080a",
"rgb": {
"r": 7,
"g": 8,
"b": 10
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 analogous-1,Analogous,#3c83f6,"rgb(60, 131, 246)","hsl(217, 91%, 60%)",#3c83f6,#f6fdff,#eef9ff,#def2ff,#c8e8ff,#add9ff,#3c83f6,#6ba0d8,#43709f,#214367,#081f36,#01050d analogous-2,Analogous,#61a6fa,"rgb(97, 166, 250)","hsl(213, 94%, 68%)",#61a6fa,#f8feff,#f2fbff,#e6f6ff,#d7efff,#c2e6ff,#61a6fa,#88b2d9,#5a7d9e,#314c65,#132434,#02060c analogous-3,Analogous,#91c3fd,"rgb(145, 195, 253)","hsl(212, 96%, 78%)",#91c3fd,#fbfeff,#f7fdff,#eff9ff,#e5f5ff,#d9efff,#91c3fd,#a5bfd9,#71879c,#425363,#1d2832,#04070b analogous-4,Analogous,#bedbfe,"rgb(190, 219, 254)","hsl(213, 97%, 87%)",#bedbfe,#fdffff,#fbfeff,#f7fcff,#f1f9ff,#eaf5ff,#bedbfe,#bcc9d8,#838e9b,#4f5761,#252a30,#06080a analogous-5,Analogous,#dcebfe,"rgb(220, 235, 254)","hsl(214, 95%, 93%)",#dcebfe,#feffff,#fdfeff,#fbfdff,#f8fcff,#f4faff,#dcebfe,#c9d0d8,#8d9399,#565a5f,#292c2f,#07080a
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 60 131 246 analogous-1 246 253 255 analogous-1-50 238 249 255 analogous-1-100 222 242 255 analogous-1-200 200 232 255 analogous-1-300 173 217 255 analogous-1-400 60 131 246 analogous-1-500 107 160 216 analogous-1-600 67 112 159 analogous-1-700 33 67 103 analogous-1-800 8 31 54 analogous-1-900 1 5 13 analogous-1-950 97 166 250 analogous-2 248 254 255 analogous-2-50 242 251 255 analogous-2-100 230 246 255 analogous-2-200 215 239 255 analogous-2-300 194 230 255 analogous-2-400 97 166 250 analogous-2-500 136 178 217 analogous-2-600 90 125 158 analogous-2-700 49 76 101 analogous-2-800 19 36 52 analogous-2-900 2 6 12 analogous-2-950 145 195 253 analogous-3 251 254 255 analogous-3-50 247 253 255 analogous-3-100 239 249 255 analogous-3-200 229 245 255 analogous-3-300 217 239 255 analogous-3-400 145 195 253 analogous-3-500 165 191 217 analogous-3-600 113 135 156 analogous-3-700 66 83 99 analogous-3-800 29 40 50 analogous-3-900 4 7 11 analogous-3-950 190 219 254 analogous-4 253 255 255 analogous-4-50 251 254 255 analogous-4-100 247 252 255 analogous-4-200 241 249 255 analogous-4-300 234 245 255 analogous-4-400 190 219 254 analogous-4-500 188 201 216 analogous-4-600 131 142 155 analogous-4-700 79 87 97 analogous-4-800 37 42 48 analogous-4-900 6 8 10 analogous-4-950 220 235 254 analogous-5 254 255 255 analogous-5-50 253 254 255 analogous-5-100 251 253 255 analogous-5-200 248 252 255 analogous-5-300 244 250 255 analogous-5-400 220 235 254 analogous-5-500 201 208 216 analogous-5-600 141 147 153 analogous-5-700 86 90 95 analogous-5-800 41 44 47 analogous-5-900 7 8 10 analogous-5-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.