I wrote this script specifically for my Systems, math and explosions (in no particular order) blog post. The script generates every combination pairing of colors from the list provided.
This script is intended to run within Figma through its plugin API. The fastest way to run this script is by copy-pasting within Scripter.
const FRAME_NAME = 'Color combinations';
const COLUMNS = 20;
const SQUARE_SIZE = 20;
const PADDING = 20;
const GAP = 10;
const SWATCH_1_PATH = "M 0 20 L 20 20 L 0 0 Z";
const SWATCH_2_PATH = "M 20 20 L 0 0 L 20 0 Z";
const COLORS = [
'#B71C1C',
'#C62828',
'#D32F2F',
'#E53935',
'#F44336',
'#EF5350',
'#E57373',
'#EF9A9A',
'#FFCDD2',
'#FFEBEE',
'#E65100',
'#EF6C00',
'#F57C00',
'#FB8C00',
'#FF9800',
'#FFA726',
'#FFB74D',
'#FFCC80',
'#FFE0B2',
'#FFF3E0',
'#1B5E20',
'#2E7D32',
'#388E3C',
'#43A047',
'#4CAF50',
'#66BB6A',
'#81C784',
'#A5D6A7',
'#C8E6C9',
'#E8F5E9',
'#01579B',
'#0277BD',
'#0288D1',
'#039BE5',
'#03A9F4',
'#29B6F6',
'#4FC3F7',
'#81D4FA',
'#B3E5FC',
'#E1F5FE',
'#212121',
'#424242',
'#616161',
'#757575',
'#9E9E9E',
'#BDBDBD',
'#E0E0E0',
'#EEEEEE',
'#F5F5F5',
'#FAFAFA'
]
let squares = []
let swatch1:VectorNode;
let swatch2:VectorNode;
let squareGroup:GroupNode;
let frame:FrameNode = figma.createFrame();
let frameWidth = (PADDING*2) + (SQUARE_SIZE*COLUMNS) + (GAP*(COLUMNS-1));
frame.name = FRAME_NAME;
frame.layoutMode = 'HORIZONTAL';
frame.layoutWrap = 'WRAP'
frame.paddingLeft = PADDING;
frame.paddingRight = PADDING;
frame.paddingTop = PADDING;
frame.paddingBottom = PADDING;
frame.itemSpacing = GAP;
frame.counterAxisSpacing = GAP;
frame.resize(frameWidth, 100);
frame.layoutSizingVertical = 'HUG'
figma.currentPage.appendChild(frame);
let fill = clone(frame.fills);
function clone(val) {
return JSON.parse(JSON.stringify(val))
}
function buildSwatch(hex, pathData):VectorNode {
let path:VectorNode = figma.createVector()
path.vectorPaths = [{
windingRule: 'NONE',
data: pathData
}]
path.strokes = []
let fill = clone(frame.fills)
let color:Object = hexToRgb(hex)
fill[0].color.r = color.r;
fill[0].color.g = color.g;
fill[0].color.b = color.b;
path.fills = fill;
return path;
}
function hexToRgb(hex):Object {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16)/255,
g: parseInt(result[2], 16)/255,
b: parseInt(result[3], 16)/255
} as Object : {};
}
for(let i = 0; i < COLORS.length; i++) {
for(let j = i + 1; j < COLORS.length; j++) {
if(i === j) continue;
fill = clone(frame.fills)
swatch1 = buildSwatch(COLORS[i], SWATCH_1_PATH);
swatch2 = buildSwatch(COLORS[j], SWATCH_2_PATH);
squareGroup = figma.group([swatch1, swatch2], frame)
frame.appendChild(squareGroup)
}
}