Skip to content

Instantly share code, notes, and snippets.

@g12n
Last active August 18, 2020 20:02
Show Gist options
  • Save g12n/c11f4c7256a3d92336fa82c60843a3f5 to your computer and use it in GitHub Desktop.
Save g12n/c11f4c7256a3d92336fa82c60843a3f5 to your computer and use it in GitHub Desktop.

Title

let brandNeutral = new Color("lch(54.5% 0 260)");
let brandMain = new Color("Lch(60 60 260)");
let brandAccent =new Color("lch(64.5% 100 51)");

let eMax = new Color("lch(99.5% 0 260)");
let eMin = new Color("lch(98% 2 260)");
eMax.to("srgb").toString({format:"hex"});
eMax.steps(eMin,{steps:5});

brandNeutral.to("srgb").toString({format:"hex"});
brandMain.to("srgb").toString({format:"hex"});
brandAccent.to("srgb").toString({format:"hex"});

brandNeutral.to("p3").toString({precision:3});
brandAccent.to("p3").toString({precision:3});
brandMain.to("p3").toString({precision:3});

brandNeutral.to("lab").toString({precision:3});
brandAccent.to("lab").toString({precision:3});
brandMain.to("lab").toString({precision:3});


let b100 = new Color("Lch(95 9 250)");
b100.to("p3").toGamut().to("lch");

let b300 = new Color("Lch(80 50 260)");
let b200 = b100.mix(b300)
let b500 = brandMain;
let b400 = b300.mix(b500);
let b700 = new Color("Lch(40 60 260)");
let b600 = b500.mix(b700);
let b900 = new Color("Lch(10 50 230)").to("p3").toGamut().to("lch");
let b800 = b700.mix(b900);
let b500 = brandMain
let b400 = b300.mix(b500);
let b200 = b300.mix(b100);

let steps= [b100,b200,b300,b400,b500,b600,b700,b800,b900];

darkSteps.shift();
brightSteps.push(...darkSteps);
brightSteps;
let brand = steps.map((c,i)=>{
	let o =  {
		c: `brand-${(i+1) * 100}`
	}
	o.p3= c.to("p3").toString({precision:3})
	o.p3= c.to("srgb").toString({precision:3})
return o});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment