Color combination generator
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.
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.
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)
}
}