← Back to Tools
Analogous Palette Generator
Create calm, harmonious palettes with three adjacent colors at 30° intervals.
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: #00ff6f;
--analogous-1-50: #f1fff9;
--analogous-1-100: #e5fff3;
--analogous-1-200: #ceffe9;
--analogous-1-300: #adffda;
--analogous-1-400: #7cffc9;
--analogous-1-500: #00ff6f;
--analogous-1-600: #00da91;
--analogous-1-700: #009d61;
--analogous-1-800: #006336;
--analogous-1-900: #003215;
--analogous-1-950: #000b02;
--analogous-2: #00ffee;
--analogous-2-50: #f0ffff;
--analogous-2-100: #e5ffff;
--analogous-2-200: #cfffff;
--analogous-2-300: #adffff;
--analogous-2-400: #7cffff;
--analogous-2-500: #00ffee;
--analogous-2-600: #00d9d2;
--analogous-2-700: #009c97;
--analogous-2-800: #00625f;
--analogous-2-900: #003230;
--analogous-2-950: #000b0a;
--analogous-3: #0091ff;
--analogous-3-50: #f0ffff;
--analogous-3-100: #e4fcff;
--analogous-3-200: #cbf6ff;
--analogous-3-300: #a7eeff;
--analogous-3-400: #76e2ff;
--analogous-3-500: #0091ff;
--analogous-3-600: #00a8dc;
--analogous-3-700: #0077a3;
--analogous-3-800: #00496b;
--analogous-3-900: #002238;
--analogous-3-950: #00060e;
}
$analogous-1: #00ff6f; $analogous-1-50: #f1fff9; $analogous-1-100: #e5fff3; $analogous-1-200: #ceffe9; $analogous-1-300: #adffda; $analogous-1-400: #7cffc9; $analogous-1-500: #00ff6f; $analogous-1-600: #00da91; $analogous-1-700: #009d61; $analogous-1-800: #006336; $analogous-1-900: #003215; $analogous-1-950: #000b02; $analogous-2: #00ffee; $analogous-2-50: #f0ffff; $analogous-2-100: #e5ffff; $analogous-2-200: #cfffff; $analogous-2-300: #adffff; $analogous-2-400: #7cffff; $analogous-2-500: #00ffee; $analogous-2-600: #00d9d2; $analogous-2-700: #009c97; $analogous-2-800: #00625f; $analogous-2-900: #003230; $analogous-2-950: #000b0a; $analogous-3: #0091ff; $analogous-3-50: #f0ffff; $analogous-3-100: #e4fcff; $analogous-3-200: #cbf6ff; $analogous-3-300: #a7eeff; $analogous-3-400: #76e2ff; $analogous-3-500: #0091ff; $analogous-3-600: #00a8dc; $analogous-3-700: #0077a3; $analogous-3-800: #00496b; $analogous-3-900: #002238; $analogous-3-950: #00060e;
colors: {
'analogous-1': {
50: '#f1fff9',
100: '#e5fff3',
200: '#ceffe9',
300: '#adffda',
400: '#7cffc9',
500: '#00ff6f',
600: '#00da91',
700: '#009d61',
800: '#006336',
900: '#003215',
950: '#000b02',
DEFAULT: '#00ff6f',
},
'analogous-2': {
50: '#f0ffff',
100: '#e5ffff',
200: '#cfffff',
300: '#adffff',
400: '#7cffff',
500: '#00ffee',
600: '#00d9d2',
700: '#009c97',
800: '#00625f',
900: '#003230',
950: '#000b0a',
DEFAULT: '#00ffee',
},
'analogous-3': {
50: '#f0ffff',
100: '#e4fcff',
200: '#cbf6ff',
300: '#a7eeff',
400: '#76e2ff',
500: '#0091ff',
600: '#00a8dc',
700: '#0077a3',
800: '#00496b',
900: '#002238',
950: '#00060e',
DEFAULT: '#0091ff',
},
},
[
{
"name": "analogous-1",
"harmony": "Analogous",
"hex": "#00ff6f",
"rgb": {
"r": 0,
"g": 255,
"b": 111
},
"hsl": {
"h": 146,
"s": 100,
"l": 50
},
"value": "#00ff6f",
"tonalScale": {
"50": {
"hex": "#f1fff9",
"rgb": {
"r": 241,
"g": 255,
"b": 249
}
},
"100": {
"hex": "#e5fff3",
"rgb": {
"r": 229,
"g": 255,
"b": 243
}
},
"200": {
"hex": "#ceffe9",
"rgb": {
"r": 206,
"g": 255,
"b": 233
}
},
"300": {
"hex": "#adffda",
"rgb": {
"r": 173,
"g": 255,
"b": 218
}
},
"400": {
"hex": "#7cffc9",
"rgb": {
"r": 124,
"g": 255,
"b": 201
}
},
"500": {
"hex": "#00ff6f",
"rgb": {
"r": 0,
"g": 255,
"b": 111
}
},
"600": {
"hex": "#00da91",
"rgb": {
"r": 0,
"g": 218,
"b": 145
}
},
"700": {
"hex": "#009d61",
"rgb": {
"r": 0,
"g": 157,
"b": 97
}
},
"800": {
"hex": "#006336",
"rgb": {
"r": 0,
"g": 99,
"b": 54
}
},
"900": {
"hex": "#003215",
"rgb": {
"r": 0,
"g": 50,
"b": 21
}
},
"950": {
"hex": "#000b02",
"rgb": {
"r": 0,
"g": 11,
"b": 2
}
}
}
},
{
"name": "analogous-2",
"harmony": "Analogous",
"hex": "#00ffee",
"rgb": {
"r": 0,
"g": 255,
"b": 238
},
"hsl": {
"h": 176,
"s": 100,
"l": 50
},
"value": "#00ffee",
"tonalScale": {
"50": {
"hex": "#f0ffff",
"rgb": {
"r": 240,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#e5ffff",
"rgb": {
"r": 229,
"g": 255,
"b": 255
}
},
"200": {
"hex": "#cfffff",
"rgb": {
"r": 207,
"g": 255,
"b": 255
}
},
"300": {
"hex": "#adffff",
"rgb": {
"r": 173,
"g": 255,
"b": 255
}
},
"400": {
"hex": "#7cffff",
"rgb": {
"r": 124,
"g": 255,
"b": 255
}
},
"500": {
"hex": "#00ffee",
"rgb": {
"r": 0,
"g": 255,
"b": 238
}
},
"600": {
"hex": "#00d9d2",
"rgb": {
"r": 0,
"g": 217,
"b": 210
}
},
"700": {
"hex": "#009c97",
"rgb": {
"r": 0,
"g": 156,
"b": 151
}
},
"800": {
"hex": "#00625f",
"rgb": {
"r": 0,
"g": 98,
"b": 95
}
},
"900": {
"hex": "#003230",
"rgb": {
"r": 0,
"g": 50,
"b": 48
}
},
"950": {
"hex": "#000b0a",
"rgb": {
"r": 0,
"g": 11,
"b": 10
}
}
}
},
{
"name": "analogous-3",
"harmony": "Analogous",
"hex": "#0091ff",
"rgb": {
"r": 0,
"g": 145,
"b": 255
},
"hsl": {
"h": 206,
"s": 100,
"l": 50
},
"value": "#0091ff",
"tonalScale": {
"50": {
"hex": "#f0ffff",
"rgb": {
"r": 240,
"g": 255,
"b": 255
}
},
"100": {
"hex": "#e4fcff",
"rgb": {
"r": 228,
"g": 252,
"b": 255
}
},
"200": {
"hex": "#cbf6ff",
"rgb": {
"r": 203,
"g": 246,
"b": 255
}
},
"300": {
"hex": "#a7eeff",
"rgb": {
"r": 167,
"g": 238,
"b": 255
}
},
"400": {
"hex": "#76e2ff",
"rgb": {
"r": 118,
"g": 226,
"b": 255
}
},
"500": {
"hex": "#0091ff",
"rgb": {
"r": 0,
"g": 145,
"b": 255
}
},
"600": {
"hex": "#00a8dc",
"rgb": {
"r": 0,
"g": 168,
"b": 220
}
},
"700": {
"hex": "#0077a3",
"rgb": {
"r": 0,
"g": 119,
"b": 163
}
},
"800": {
"hex": "#00496b",
"rgb": {
"r": 0,
"g": 73,
"b": 107
}
},
"900": {
"hex": "#002238",
"rgb": {
"r": 0,
"g": 34,
"b": 56
}
},
"950": {
"hex": "#00060e",
"rgb": {
"r": 0,
"g": 6,
"b": 14
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 analogous-1,Analogous,#00ff6f,"rgb(0, 255, 111)","hsl(146, 100%, 50%)",#00ff6f,#f1fff9,#e5fff3,#ceffe9,#adffda,#7cffc9,#00ff6f,#00da91,#009d61,#006336,#003215,#000b02 analogous-2,Analogous,#00ffee,"rgb(0, 255, 238)","hsl(176, 100%, 50%)",#00ffee,#f0ffff,#e5ffff,#cfffff,#adffff,#7cffff,#00ffee,#00d9d2,#009c97,#00625f,#003230,#000b0a analogous-3,Analogous,#0091ff,"rgb(0, 145, 255)","hsl(206, 100%, 50%)",#0091ff,#f0ffff,#e4fcff,#cbf6ff,#a7eeff,#76e2ff,#0091ff,#00a8dc,#0077a3,#00496b,#002238,#00060e
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 0 255 111 analogous-1 241 255 249 analogous-1-50 229 255 243 analogous-1-100 206 255 233 analogous-1-200 173 255 218 analogous-1-300 124 255 201 analogous-1-400 0 255 111 analogous-1-500 0 218 145 analogous-1-600 0 157 97 analogous-1-700 0 99 54 analogous-1-800 0 50 21 analogous-1-900 0 11 2 analogous-1-950 0 255 238 analogous-2 240 255 255 analogous-2-50 229 255 255 analogous-2-100 207 255 255 analogous-2-200 173 255 255 analogous-2-300 124 255 255 analogous-2-400 0 255 238 analogous-2-500 0 217 210 analogous-2-600 0 156 151 analogous-2-700 0 98 95 analogous-2-800 0 50 48 analogous-2-900 0 11 10 analogous-2-950 0 145 255 analogous-3 240 255 255 analogous-3-50 228 252 255 analogous-3-100 203 246 255 analogous-3-200 167 238 255 analogous-3-300 118 226 255 analogous-3-400 0 145 255 analogous-3-500 0 168 220 analogous-3-600 0 119 163 analogous-3-700 0 73 107 analogous-3-800 0 34 56 analogous-3-900 0 6 14 analogous-3-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.