← Back to Tools
Lighten & Darken
Lighten or darken any color by adjusting brightness.
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: #0084ff;
--analogous-1-50: #f0feff;
--analogous-1-100: #e3fbff;
--analogous-1-200: #caf4ff;
--analogous-1-300: #a6ebff;
--analogous-1-400: #75dcff;
--analogous-1-500: #0084ff;
--analogous-1-600: #00a1dd;
--analogous-1-700: #0071a4;
--analogous-1-800: #00456c;
--analogous-1-900: #002039;
--analogous-1-950: #00050e;
--analogous-2: #0004ff;
--analogous-2-50: #ecf8ff;
--analogous-2-100: #d9eeff;
--analogous-2-200: #b5d8ff;
--analogous-2-300: #86b9ff;
--analogous-2-400: #4b8bff;
--analogous-2-500: #0004ff;
--analogous-2-600: #0200e2;
--analogous-2-700: #0800b2;
--analogous-2-800: #0a007c;
--analogous-2-900: #050047;
--analogous-2-950: #010014;
--analogous-3: #7b00ff;
--analogous-3-50: #fff3ff;
--analogous-3-100: #ffe7ff;
--analogous-3-200: #f9ceff;
--analogous-3-300: #f0acff;
--analogous-3-400: #e17bff;
--analogous-3-500: #7b00ff;
--analogous-3-600: #9f00e0;
--analogous-3-700: #7500ab;
--analogous-3-800: #4b0074;
--analogous-3-900: #260040;
--analogous-3-950: #070011;
}
$analogous-1: #0084ff; $analogous-1-50: #f0feff; $analogous-1-100: #e3fbff; $analogous-1-200: #caf4ff; $analogous-1-300: #a6ebff; $analogous-1-400: #75dcff; $analogous-1-500: #0084ff; $analogous-1-600: #00a1dd; $analogous-1-700: #0071a4; $analogous-1-800: #00456c; $analogous-1-900: #002039; $analogous-1-950: #00050e; $analogous-2: #0004ff; $analogous-2-50: #ecf8ff; $analogous-2-100: #d9eeff; $analogous-2-200: #b5d8ff; $analogous-2-300: #86b9ff; $analogous-2-400: #4b8bff; $analogous-2-500: #0004ff; $analogous-2-600: #0200e2; $analogous-2-700: #0800b2; $analogous-2-800: #0a007c; $analogous-2-900: #050047; $analogous-2-950: #010014; $analogous-3: #7b00ff; $analogous-3-50: #fff3ff; $analogous-3-100: #ffe7ff; $analogous-3-200: #f9ceff; $analogous-3-300: #f0acff; $analogous-3-400: #e17bff; $analogous-3-500: #7b00ff; $analogous-3-600: #9f00e0; $analogous-3-700: #7500ab; $analogous-3-800: #4b0074; $analogous-3-900: #260040; $analogous-3-950: #070011;
colors: {
'analogous-1': {
50: '#f0feff',
100: '#e3fbff',
200: '#caf4ff',
300: '#a6ebff',
400: '#75dcff',
500: '#0084ff',
600: '#00a1dd',
700: '#0071a4',
800: '#00456c',
900: '#002039',
950: '#00050e',
DEFAULT: '#0084ff',
},
'analogous-2': {
50: '#ecf8ff',
100: '#d9eeff',
200: '#b5d8ff',
300: '#86b9ff',
400: '#4b8bff',
500: '#0004ff',
600: '#0200e2',
700: '#0800b2',
800: '#0a007c',
900: '#050047',
950: '#010014',
DEFAULT: '#0004ff',
},
'analogous-3': {
50: '#fff3ff',
100: '#ffe7ff',
200: '#f9ceff',
300: '#f0acff',
400: '#e17bff',
500: '#7b00ff',
600: '#9f00e0',
700: '#7500ab',
800: '#4b0074',
900: '#260040',
950: '#070011',
DEFAULT: '#7b00ff',
},
},
[
{
"name": "analogous-1",
"harmony": "Analogous",
"hex": "#0084ff",
"rgb": {
"r": 0,
"g": 132,
"b": 255
},
"hsl": {
"h": 209,
"s": 100,
"l": 50
},
"value": "#0084ff",
"tonalScale": {
"50": {
"hex": "#f0feff",
"rgb": {
"r": 240,
"g": 254,
"b": 255
}
},
"100": {
"hex": "#e3fbff",
"rgb": {
"r": 227,
"g": 251,
"b": 255
}
},
"200": {
"hex": "#caf4ff",
"rgb": {
"r": 202,
"g": 244,
"b": 255
}
},
"300": {
"hex": "#a6ebff",
"rgb": {
"r": 166,
"g": 235,
"b": 255
}
},
"400": {
"hex": "#75dcff",
"rgb": {
"r": 117,
"g": 220,
"b": 255
}
},
"500": {
"hex": "#0084ff",
"rgb": {
"r": 0,
"g": 132,
"b": 255
}
},
"600": {
"hex": "#00a1dd",
"rgb": {
"r": 0,
"g": 161,
"b": 221
}
},
"700": {
"hex": "#0071a4",
"rgb": {
"r": 0,
"g": 113,
"b": 164
}
},
"800": {
"hex": "#00456c",
"rgb": {
"r": 0,
"g": 69,
"b": 108
}
},
"900": {
"hex": "#002039",
"rgb": {
"r": 0,
"g": 32,
"b": 57
}
},
"950": {
"hex": "#00050e",
"rgb": {
"r": 0,
"g": 5,
"b": 14
}
}
}
},
{
"name": "analogous-2",
"harmony": "Analogous",
"hex": "#0004ff",
"rgb": {
"r": 0,
"g": 4,
"b": 255
},
"hsl": {
"h": 239,
"s": 100,
"l": 50
},
"value": "#0004ff",
"tonalScale": {
"50": {
"hex": "#ecf8ff",
"rgb": {
"r": 236,
"g": 248,
"b": 255
}
},
"100": {
"hex": "#d9eeff",
"rgb": {
"r": 217,
"g": 238,
"b": 255
}
},
"200": {
"hex": "#b5d8ff",
"rgb": {
"r": 181,
"g": 216,
"b": 255
}
},
"300": {
"hex": "#86b9ff",
"rgb": {
"r": 134,
"g": 185,
"b": 255
}
},
"400": {
"hex": "#4b8bff",
"rgb": {
"r": 75,
"g": 139,
"b": 255
}
},
"500": {
"hex": "#0004ff",
"rgb": {
"r": 0,
"g": 4,
"b": 255
}
},
"600": {
"hex": "#0200e2",
"rgb": {
"r": 2,
"g": 0,
"b": 226
}
},
"700": {
"hex": "#0800b2",
"rgb": {
"r": 8,
"g": 0,
"b": 178
}
},
"800": {
"hex": "#0a007c",
"rgb": {
"r": 10,
"g": 0,
"b": 124
}
},
"900": {
"hex": "#050047",
"rgb": {
"r": 5,
"g": 0,
"b": 71
}
},
"950": {
"hex": "#010014",
"rgb": {
"r": 1,
"g": 0,
"b": 20
}
}
}
},
{
"name": "analogous-3",
"harmony": "Analogous",
"hex": "#7b00ff",
"rgb": {
"r": 123,
"g": 0,
"b": 255
},
"hsl": {
"h": 269,
"s": 100,
"l": 50
},
"value": "#7b00ff",
"tonalScale": {
"50": {
"hex": "#fff3ff",
"rgb": {
"r": 255,
"g": 243,
"b": 255
}
},
"100": {
"hex": "#ffe7ff",
"rgb": {
"r": 255,
"g": 231,
"b": 255
}
},
"200": {
"hex": "#f9ceff",
"rgb": {
"r": 249,
"g": 206,
"b": 255
}
},
"300": {
"hex": "#f0acff",
"rgb": {
"r": 240,
"g": 172,
"b": 255
}
},
"400": {
"hex": "#e17bff",
"rgb": {
"r": 225,
"g": 123,
"b": 255
}
},
"500": {
"hex": "#7b00ff",
"rgb": {
"r": 123,
"g": 0,
"b": 255
}
},
"600": {
"hex": "#9f00e0",
"rgb": {
"r": 159,
"g": 0,
"b": 224
}
},
"700": {
"hex": "#7500ab",
"rgb": {
"r": 117,
"g": 0,
"b": 171
}
},
"800": {
"hex": "#4b0074",
"rgb": {
"r": 75,
"g": 0,
"b": 116
}
},
"900": {
"hex": "#260040",
"rgb": {
"r": 38,
"g": 0,
"b": 64
}
},
"950": {
"hex": "#070011",
"rgb": {
"r": 7,
"g": 0,
"b": 17
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 analogous-1,Analogous,#0084ff,"rgb(0, 132, 255)","hsl(209, 100%, 50%)",#0084ff,#f0feff,#e3fbff,#caf4ff,#a6ebff,#75dcff,#0084ff,#00a1dd,#0071a4,#00456c,#002039,#00050e analogous-2,Analogous,#0004ff,"rgb(0, 4, 255)","hsl(239, 100%, 50%)",#0004ff,#ecf8ff,#d9eeff,#b5d8ff,#86b9ff,#4b8bff,#0004ff,#0200e2,#0800b2,#0a007c,#050047,#010014 analogous-3,Analogous,#7b00ff,"rgb(123, 0, 255)","hsl(269, 100%, 50%)",#7b00ff,#fff3ff,#ffe7ff,#f9ceff,#f0acff,#e17bff,#7b00ff,#9f00e0,#7500ab,#4b0074,#260040,#070011
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 0 132 255 analogous-1 240 254 255 analogous-1-50 227 251 255 analogous-1-100 202 244 255 analogous-1-200 166 235 255 analogous-1-300 117 220 255 analogous-1-400 0 132 255 analogous-1-500 0 161 221 analogous-1-600 0 113 164 analogous-1-700 0 69 108 analogous-1-800 0 32 57 analogous-1-900 0 5 14 analogous-1-950 0 4 255 analogous-2 236 248 255 analogous-2-50 217 238 255 analogous-2-100 181 216 255 analogous-2-200 134 185 255 analogous-2-300 75 139 255 analogous-2-400 0 4 255 analogous-2-500 2 0 226 analogous-2-600 8 0 178 analogous-2-700 10 0 124 analogous-2-800 5 0 71 analogous-2-900 1 0 20 analogous-2-950 123 0 255 analogous-3 255 243 255 analogous-3-50 255 231 255 analogous-3-100 249 206 255 analogous-3-200 240 172 255 analogous-3-300 225 123 255 analogous-3-400 123 0 255 analogous-3-500 159 0 224 analogous-3-600 117 0 171 analogous-3-700 75 0 116 analogous-3-800 38 0 64 analogous-3-900 7 0 17 analogous-3-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.