Game Changing Global Color Management in Oxygen - DigitalAmbition.co

PHOTO EMBED

Thu Feb 17 2022 17:00:02 GMT+0000 (UTC)

Saved by @Prowhiz #css

:root {
	
/*** COLOR SYSTEM ***/
	
/* 
GLOBAL COLOR SETUP (HSL)
Set the global colors below using HSL variables.
*/
	
	--primary-h: 44;
	--primary-s: 98%;
	--primary-l: 50%;

	--secondary-h: 41.1;
	--secondary-s: 100%;
	--secondary-l: 63.3%;

	--accent-h: 54.5;
	--accent-s: 15.5%;
	--accent-l: 86.1%;

	--base-h: 357.2;
	--base-s: 70.5%;
	--base-l: 47.8%;

/* 
SHADING VARIABLES
If you want to adjust the generated shade variants, you can adjust the percentages here.
Higher percentages are lighter and lower are darker.
*/

	--ultra-light: 95%;
	--light: 85%;
	--dark: 25%;
	--ultra-dark: 10%;

/* 
GLOBAL COLOR VARIABLES
These are the variables you can use in styling. They don't need to be edited.
Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
*/

	--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
	--primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
	--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
	--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
	--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
	--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
	--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
	--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
	--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
	--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
	--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
	--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
	--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
	--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
	--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
	--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
	--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
	--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
	--accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
	--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
	--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
	--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
	--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
	--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
	--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
	--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
	--base: hsl(var(--base-h), var(--base-s), var(--base-l));
	--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
	--base-light: hsl(var(--base-h), var(--base-s), var(--light));
	--base-dark: hsl(var(--base-h), var(--secondary-s), var(--dark));
	--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
	--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
	--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
	--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
	--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
	--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
	
/*** END COLOR SYSTEM ***/
}
content_copyCOPY

to apply it, set the element color to var(--primary)

https://digitalambition.co/watch/game-changing-global-color-management-in-oxygen/