← Back to Tools
Generate high-converting micro-palettes with dark base and neon CTA accents, contrasting a deep obsidian backdrop (#090A0F) against an ultra-crisp conversion lime green (#00FF66).
Export
Copy or download this palette as CSS, SCSS, Tailwind config, JSON, CSV, GPL, ASE or ACO.
:root {
--deep-obsidian-backdrop: #090A0F;
--deep-obsidian-backdrop-50: #f6f6f8;
--deep-obsidian-backdrop-100: #e8e9ec;
--deep-obsidian-backdrop-200: #cecfd5;
--deep-obsidian-backdrop-300: #abadb6;
--deep-obsidian-backdrop-400: #7e818d;
--deep-obsidian-backdrop-500: #090A0F;
--deep-obsidian-backdrop-600: #2b2d39;
--deep-obsidian-backdrop-700: #1b1d27;
--deep-obsidian-backdrop-800: #0c0e15;
--deep-obsidian-backdrop-900: #030307;
--deep-obsidian-backdrop-950: #000001;
--lime-green: #00FF66;
--lime-green-50: #f1fff8;
--lime-green-100: #e5fff2;
--lime-green-200: #ceffe7;
--lime-green-300: #adffd7;
--lime-green-400: #7cffc4;
--lime-green-500: #00FF66;
--lime-green-600: #00da8b;
--lime-green-700: #009d5b;
--lime-green-800: #006331;
--lime-green-900: #003212;
--lime-green-950: #000b02;
}
$deep-obsidian-backdrop: #090A0F; $deep-obsidian-backdrop-50: #f6f6f8; $deep-obsidian-backdrop-100: #e8e9ec; $deep-obsidian-backdrop-200: #cecfd5; $deep-obsidian-backdrop-300: #abadb6; $deep-obsidian-backdrop-400: #7e818d; $deep-obsidian-backdrop-500: #090A0F; $deep-obsidian-backdrop-600: #2b2d39; $deep-obsidian-backdrop-700: #1b1d27; $deep-obsidian-backdrop-800: #0c0e15; $deep-obsidian-backdrop-900: #030307; $deep-obsidian-backdrop-950: #000001; $lime-green: #00FF66; $lime-green-50: #f1fff8; $lime-green-100: #e5fff2; $lime-green-200: #ceffe7; $lime-green-300: #adffd7; $lime-green-400: #7cffc4; $lime-green-500: #00FF66; $lime-green-600: #00da8b; $lime-green-700: #009d5b; $lime-green-800: #006331; $lime-green-900: #003212; $lime-green-950: #000b02;
colors: {
'deep-obsidian-backdrop': {
50: '#f6f6f8',
100: '#e8e9ec',
200: '#cecfd5',
300: '#abadb6',
400: '#7e818d',
500: '#090A0F',
600: '#2b2d39',
700: '#1b1d27',
800: '#0c0e15',
900: '#030307',
950: '#000001',
DEFAULT: '#090A0F',
},
'lime-green': {
50: '#f1fff8',
100: '#e5fff2',
200: '#ceffe7',
300: '#adffd7',
400: '#7cffc4',
500: '#00FF66',
600: '#00da8b',
700: '#009d5b',
800: '#006331',
900: '#003212',
950: '#000b02',
DEFAULT: '#00FF66',
},
},
[
{
"name": "deep-obsidian-backdrop",
"harmony": "Palette",
"hex": "#090A0F",
"rgb": {
"r": 9,
"g": 10,
"b": 15
},
"hsl": {
"h": 230,
"s": 25,
"l": 5
},
"value": "#090A0F",
"tonalScale": {
"50": {
"hex": "#f6f6f8",
"rgb": {
"r": 246,
"g": 246,
"b": 248
}
},
"100": {
"hex": "#e8e9ec",
"rgb": {
"r": 232,
"g": 233,
"b": 236
}
},
"200": {
"hex": "#cecfd5",
"rgb": {
"r": 206,
"g": 207,
"b": 213
}
},
"300": {
"hex": "#abadb6",
"rgb": {
"r": 171,
"g": 173,
"b": 182
}
},
"400": {
"hex": "#7e818d",
"rgb": {
"r": 126,
"g": 129,
"b": 141
}
},
"500": {
"hex": "#090A0F",
"rgb": {
"r": 9,
"g": 10,
"b": 15
}
},
"600": {
"hex": "#2b2d39",
"rgb": {
"r": 43,
"g": 45,
"b": 57
}
},
"700": {
"hex": "#1b1d27",
"rgb": {
"r": 27,
"g": 29,
"b": 39
}
},
"800": {
"hex": "#0c0e15",
"rgb": {
"r": 12,
"g": 14,
"b": 21
}
},
"900": {
"hex": "#030307",
"rgb": {
"r": 3,
"g": 3,
"b": 7
}
},
"950": {
"hex": "#000001",
"rgb": {
"r": 0,
"g": 0,
"b": 1
}
}
}
},
{
"name": "lime-green",
"harmony": "Palette",
"hex": "#00FF66",
"rgb": {
"r": 0,
"g": 255,
"b": 102
},
"hsl": {
"h": 144,
"s": 100,
"l": 50
},
"value": "#00FF66",
"tonalScale": {
"50": {
"hex": "#f1fff8",
"rgb": {
"r": 241,
"g": 255,
"b": 248
}
},
"100": {
"hex": "#e5fff2",
"rgb": {
"r": 229,
"g": 255,
"b": 242
}
},
"200": {
"hex": "#ceffe7",
"rgb": {
"r": 206,
"g": 255,
"b": 231
}
},
"300": {
"hex": "#adffd7",
"rgb": {
"r": 173,
"g": 255,
"b": 215
}
},
"400": {
"hex": "#7cffc4",
"rgb": {
"r": 124,
"g": 255,
"b": 196
}
},
"500": {
"hex": "#00FF66",
"rgb": {
"r": 0,
"g": 255,
"b": 102
}
},
"600": {
"hex": "#00da8b",
"rgb": {
"r": 0,
"g": 218,
"b": 139
}
},
"700": {
"hex": "#009d5b",
"rgb": {
"r": 0,
"g": 157,
"b": 91
}
},
"800": {
"hex": "#006331",
"rgb": {
"r": 0,
"g": 99,
"b": 49
}
},
"900": {
"hex": "#003212",
"rgb": {
"r": 0,
"g": 50,
"b": 18
}
},
"950": {
"hex": "#000b02",
"rgb": {
"r": 0,
"g": 11,
"b": 2
}
}
}
}
]
Name,Harmony,Hex,RGB,HSL,Value,T50,T100,T200,T300,T400,T500,T600,T700,T800,T900,T950 deep-obsidian-backdrop,Palette,#090A0F,"rgb(9, 10, 15)","hsl(230, 25%, 5%)",#090A0F,#f6f6f8,#e8e9ec,#cecfd5,#abadb6,#7e818d,#090A0F,#2b2d39,#1b1d27,#0c0e15,#030307,#000001 lime-green,Palette,#00FF66,"rgb(0, 255, 102)","hsl(144, 100%, 50%)",#00FF66,#f1fff8,#e5fff2,#ceffe7,#adffd7,#7cffc4,#00FF66,#00da8b,#009d5b,#006331,#003212,#000b02
GIMP Palette Name: PocketSwiss analogous Columns: 4 # 9 10 15 deep-obsidian-backdrop 246 246 248 deep-obsidian-backdrop-50 232 233 236 deep-obsidian-backdrop-100 206 207 213 deep-obsidian-backdrop-200 171 173 182 deep-obsidian-backdrop-300 126 129 141 deep-obsidian-backdrop-400 9 10 15 deep-obsidian-backdrop-500 43 45 57 deep-obsidian-backdrop-600 27 29 39 deep-obsidian-backdrop-700 12 14 21 deep-obsidian-backdrop-800 3 3 7 deep-obsidian-backdrop-900 0 0 1 deep-obsidian-backdrop-950 0 255 102 lime-green 241 255 248 lime-green-50 229 255 242 lime-green-100 206 255 231 lime-green-200 173 255 215 lime-green-300 124 255 196 lime-green-400 0 255 102 lime-green-500 0 218 139 lime-green-600 0 157 91 lime-green-700 0 99 49 lime-green-800 0 50 18 lime-green-900 0 11 2 lime-green-950
Binary ASE — use Download to save the file.
Binary ACO — use Download to save the file.