← Back to Tools
Monochromatic Shade Escalator
Step lightness down to create uniform dark UI surface levels.
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: #2463eb;
--analogous-2-50: #f4fcff;
--analogous-2-100: #eaf7ff;
--analogous-2-200: #d6edff;
--analogous-2-300: #bcdfff;
--analogous-2-400: #9acbff;
--analogous-2-500: #2463eb;
--analogous-2-600: #528cd5;
--analogous-2-700: #30619f;
--analogous-2-800: #123968;
--analogous-2-900: #021937;
--analogous-2-950: #00030d;
--analogous-3: #1d4fd7;
--analogous-3-50: #f4fbff;
--analogous-3-100: #e9f5ff;
--analogous-3-200: #d4e9ff;
--analogous-3-300: #b8d9ff;
--analogous-3-400: #94c1ff;
--analogous-3-500: #1d4fd7;
--analogous-3-600: #4a7ecd;
--analogous-3-700: #2a5799;
--analogous-3-800: #0f3265;
--analogous-3-900: #021536;
--analogous-3-950: #00020d;
--analogous-4: #1e3fae;
--analogous-4-50: #f5faff;
--analogous-4-100: #eaf3ff;
--analogous-4-200: #d5e5ff;
--analogous-4-300: #b9d2ff;
--analogous-4-400: #96b7f8;
--analogous-4-500: #1e3fae;
--analogous-4-600: #4d71bb;
--analogous-4-700: #2f4d8b;
--analogous-4-800: #152c5b;
--analogous-4-900: #051130;
--analogous-4-950: #00020b;
--analogous-5: #1e3b8a;
--analogous-5-50: #f5faff;
--analogous-5-100: #ebf3ff;
--analogous-5-200: #d6e4fc;
--analogous-5-300: #bad0f5;
--analogous-5-400: #97b5e8;
--analogous-5-500: #1e3b8a;
--analogous-5-600: #4d6ea8;
--analogous-5-700: #304c7c;
--analogous-5-800: #172b50;
--analogous-5-900: #051129;
--analogous-5-950: #000208;
}
$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: #2463eb; $analogous-2-50: #f4fcff; $analogous-2-100: #eaf7ff; $analogous-2-200: #d6edff; $analogous-2-300: #bcdfff; $analogous-2-400: #9acbff; $analogous-2-500: #2463eb; $analogous-2-600: #528cd5; $analogous-2-700: #30619f; $analogous-2-800: #123968; $analogous-2-900: #021937; $analogous-2-950: #00030d; $analogous-3: #1d4fd7; $analogous-3-50: #f4fbff; $analogous-3-100: #e9f5ff; $analogous-3-200: #d4e9ff; $analogous-3-300: #b8d9ff; $analogous-3-400: #94c1ff; $analogous-3-500: #1d4fd7; $analogous-3-600: #4a7ecd; $analogous-3-700: #2a5799; $analogous-3-800: #0f3265; $analogous-3-900: #021536; $analogous-3-950: #00020d; $analogous-4: #1e3fae; $analogous-4-50: #f5faff; $analogous-4-100: #eaf3ff; $analogous-4-200: #d5e5ff; $analogous-4-300: #b9d2ff; $analogous-4-400: #96b7f8; $analogous-4-500: #1e3fae; $analogous-4-600: #4d71bb; $analogous-4-700: #2f4d8b; $analogous-4-800: #152c5b; $analogous-4-900: #051130; $analogous-4-950: #00020b; $analogous-5: #1e3b8a; $analogous-5-50: #f5faff; $analogous-5-100: #ebf3ff; $analogous-5-200: #d6e4fc; $analogous-5-300: #bad0f5; $analogous-5-400: #97b5e8; $analogous-5-500: #1e3b8a; $analogous-5-600: #4d6ea8; $analogous-5-700: #304c7c; $analogous-5-800: #172b50; $analogous-5-900: #051129; $analogous-5-950: #000208;
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: '#f4fcff',
100: '#eaf7ff',
200: '#d6edff',
300: '#bcdfff',
400: '#9acbff',
500: '#2463eb',
600: '#528cd5',
700: '#30619f',
800: '#123968',
900: '#021937',
950: '#00030d',
DEFAULT: '#2463eb',
},
'analogous-3': {
50: '#f4fbff',
100: '#e9f5ff',
200: '#d4e9ff',
300: '#b8d9ff',
400: '#94c1ff',
500: '#1d4fd7',
600: '#4a7ecd',
700: '#2a5799',
800: '#0f3265',
900: '#021536',
950: '#00020d',
DEFAULT: '#1d4fd7',
},
'analogous-4': {
50: '#f5faff',
100: '#eaf3ff',
200: '#d5e5ff',
300: '#b9d2ff',
400: '#96b7f8',
500: '#1e3fae',
600: '#4d71bb',
700: '#2f4d8b',
800: '#152c5b',
900: '#051130',
950: '#00020b',
DEFAULT: '#1e3fae',
},
'analogous-5': {
50: '#f5faff',
100: '#ebf3ff',
200: '#d6e4fc',
300: '#bad0f5',
400: '#97b5e8',
500: '#1e3b8a',
600: '#4d6ea8',
700: '#304c7c',
800: '#172b50',
900: '#051129',
950: '#000208',
DEFAULT: '#1e3b8a',
},
},
[
{
"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": "#2463eb",
"rgb": {
"r": 36,
"g": 99,
"b": 235
},
"hsl": {
"h": 221,
"s": 83,
"l": 53
},
"value": "#2463eb",
"tonalScale": {
"50": {
"hex": "#f4fcff",
"rgb": {
"r": 244,
"g": 252,
"b": 255
}
},
"100": {
"hex": "#eaf7ff",
"rgb": {
"r": 234,
"g": 247,
"b": 255
}
},
"200": {
"hex": "#d6edff",
"rgb": {
"r": 214,
"g": 237,
"b": 255
}
},
"300": {
"hex": "#bcdfff",
"rgb": {
"r": 188,
"g": 223,
"b": 255
}
},
"400": {
"hex": "#9acbff",
"rgb": {
"r": 154,
"g": 203,
"b": 255
}
},
"500": {
"hex": "#2463eb",
"rgb": {
"r": 36,
"g": 99,
"b": 235
}
},
"600": {
"hex": "#528cd5",
"rgb": {
"r": 82,
"g": 140,
"b": 213
}
},
"700": {
"hex": "#30619f",
"rgb": {
"r": 48,
"g": 97,
"b": 159
}
},
"800": {
"hex": "#123968",
"rgb": {
"r": 18,
"g": 57,
"b": 104
}
},
"900": {
"hex": "#021937",
"rgb": {
"r": 2,
"g": 25,
"b": 55
}
},
"950": {
"hex": "#00030d",
"rgb": {
"r": 0,
"g": 3,
"b": 13
}
}
}
},
{
"name": "analogous-3",
"harmony": "Analogous",
"hex": "#1d4fd7",
"rgb": {
"r": 29,
"g": 79,
"b": 215
},
"hsl": {
"h": 224,
"s": 76,
"l": 48
},
"value": "#1d4fd7",
"tonalScale": {
"50": {
"hex": "#f4fbff",
"rgb": {
"r": 244,
"g": 251,
"b": 255
}
},
"100": {
"hex": "#e9f5ff",
"rgb": {
"r": 233,
"g": 245,
"b": 255
}
},
"200": {
"hex": "#d4e9ff",
"rgb": {
"r": 212,
"g": 233,
"b": 255
}
},
"300": {
"hex": "#b8d9ff",
"rgb": {
"r": 184,
"g": 217,
"b": 255
}
},
"400": {
"hex": "#94c1ff",
"rgb": {
"r": 148,
"g": 193,
"b": 255
}
},
"500": {
"hex": "#1d4fd7",
"rgb": {
"r": 29,
"g": 79,
"b": 215
}
},
"600": {
"hex": "#4a7ecd",
"rgb": {
"r": 74,
"g": 126,
"b": 205
}
},
"700": {
"hex": "#2a5799",
"rgb": {
"r": 42,
"g": 87,
"b": 153
}
},
"800": {
"hex": "#0f3265",
"rgb": {
"r": 15,
"g": 50,
"b": 101
}
},
"900": {
"hex": "#021536",
"rgb": {
"r": 2,
"g": 21,
"b": 54
}
},
"950": {
"hex": "#00020d",
"rgb": {
"r": 0,
"g": 2,
"b": 13
}
}
}
},
{
"name": "analogous-4",
"harmony": "Analogous",
"hex": "#1e3fae",
"rgb": {
"r": 30,
"g": 63,
"b": 174
},
"hsl": {
"h": 226,
"s": 71,
"l": 40
},
"value": "#1e3fae",
"tonalScale": {
"50": {
"hex": "#f5faff",
"rgb": {
"r": 245,
"g": 250,
"b": 255
}
},
"100": {
"hex": "#eaf3ff",
"rgb": {
"r": 234,
"g": 243,
"b": 255
}
},
"200": {
"hex": "#d5e5ff",
"rgb": {
"r": 213,
"g": 229,
"b": 255
}
},
"300": {
"hex": "#b9d2ff",
"rgb": {
"r": 185,
"g": 210,
"b": 255
}
},
"400": {
"hex": "#96b7f8",
"rgb": {
"r": 150,
"g": 183,
"b": 248
}
},
"500": {
"hex": "#1e3fae",
"rgb": {
"r": 30,
"g": 63,
"b": 174
}
},
"600": {
"hex": "#4d71bb",
"rgb": {
"r": 77,
"g": 113,
"b": 187
}
},
"700": {
"hex": "#2f4d8b",
"rgb": {
"r": 47,
"g": 77,
"b": 139
}
},
"800": {
"hex": "#152c5b",
"rgb": {
"r": 21,
"g": 44,
"b": 91
}
},
"900": {
"hex": "#051130",
"rgb": {
"r": 5,
"g": 17,
"b": 48
}
},
"950": {
"hex": "#00020b",
"rgb": {
"r": 0,
"g": 2,
"b": 11
}
}
}
},
{
"name": "analogous-5",
"harmony": "Analogous",
"hex": "#1e3b8a",
"rgb": {
"r": 30,
"g": 59,
"b": 138
},
"hsl": {
"h": 224,
"s": 64,
"l": 33
},
"value": "#1e3b8a",
"tonalScale": {
"50": {
"hex": "#f5faff",
"rgb": {
"r": 245,
"g": 250,
"b": 255
}
},
"100": {
"hex": "#ebf3ff",
"rgb": {
"r": 235,
"g": 243,
"b": 255
}
},
"200": {
"hex": "#d6e4fc",
"rgb": {
"r": 214,
"g": 228,
"b": 252
}
},
"300": {
"hex": "#bad0f5",
"rgb": {
"r": 186,
"g": 208,
"b": 245
}
},
"400": {
"hex": "#97b5e8",
"rgb": {
"r": 151,
"g": 181,
"b": 232
}
},
"500": {
"hex": "#1e3b8a",
"rgb": {
"r": 30,
"g": 59,
"b": 138
}
},
"600": {
"hex": "#4d6ea8",
"rgb": {
"r": 77,
"g": 110,
"b": 168
}
},
"700": {
"hex": "#304c7c",
"rgb": {
"r": 48,
"g": 76,
"b": 124
}
},
"800": {
"hex": "#172b50",
"rgb": {
"r": 23,
"g": 43,
"b": 80
}
},
"900": {
"hex": "#051129",
"rgb": {
"r": 5,
"g": 17,
"b": 41
}
},
"950": {
"hex": "#000208",
"rgb": {
"r": 0,
"g": 2,
"b": 8
}
}
}
}
]
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,#2463eb,"rgb(36, 99, 235)","hsl(221, 83%, 53%)",#2463eb,#f4fcff,#eaf7ff,#d6edff,#bcdfff,#9acbff,#2463eb,#528cd5,#30619f,#123968,#021937,#00030d analogous-3,Analogous,#1d4fd7,"rgb(29, 79, 215)","hsl(224, 76%, 48%)",#1d4fd7,#f4fbff,#e9f5ff,#d4e9ff,#b8d9ff,#94c1ff,#1d4fd7,#4a7ecd,#2a5799,#0f3265,#021536,#00020d analogous-4,Analogous,#1e3fae,"rgb(30, 63, 174)","hsl(226, 71%, 40%)",#1e3fae,#f5faff,#eaf3ff,#d5e5ff,#b9d2ff,#96b7f8,#1e3fae,#4d71bb,#2f4d8b,#152c5b,#051130,#00020b analogous-5,Analogous,#1e3b8a,"rgb(30, 59, 138)","hsl(224, 64%, 33%)",#1e3b8a,#f5faff,#ebf3ff,#d6e4fc,#bad0f5,#97b5e8,#1e3b8a,#4d6ea8,#304c7c,#172b50,#051129,#000208
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 36 99 235 analogous-2 244 252 255 analogous-2-50 234 247 255 analogous-2-100 214 237 255 analogous-2-200 188 223 255 analogous-2-300 154 203 255 analogous-2-400 36 99 235 analogous-2-500 82 140 213 analogous-2-600 48 97 159 analogous-2-700 18 57 104 analogous-2-800 2 25 55 analogous-2-900 0 3 13 analogous-2-950 29 79 215 analogous-3 244 251 255 analogous-3-50 233 245 255 analogous-3-100 212 233 255 analogous-3-200 184 217 255 analogous-3-300 148 193 255 analogous-3-400 29 79 215 analogous-3-500 74 126 205 analogous-3-600 42 87 153 analogous-3-700 15 50 101 analogous-3-800 2 21 54 analogous-3-900 0 2 13 analogous-3-950 30 63 174 analogous-4 245 250 255 analogous-4-50 234 243 255 analogous-4-100 213 229 255 analogous-4-200 185 210 255 analogous-4-300 150 183 248 analogous-4-400 30 63 174 analogous-4-500 77 113 187 analogous-4-600 47 77 139 analogous-4-700 21 44 91 analogous-4-800 5 17 48 analogous-4-900 0 2 11 analogous-4-950 30 59 138 analogous-5 245 250 255 analogous-5-50 235 243 255 analogous-5-100 214 228 252 analogous-5-200 186 208 245 analogous-5-300 151 181 232 analogous-5-400 30 59 138 analogous-5-500 77 110 168 analogous-5-600 48 76 124 analogous-5-700 23 43 80 analogous-5-800 5 17 41 analogous-5-900 0 2 8 analogous-5-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.