Game Changing Global Color Management in Oxygen - DigitalAmbition.co
Thu Feb 17 2022 17:00:02 GMT+0000 (Coordinated Universal Time)
: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 ***/ }
to apply it, set the element color to var(--primary)
https://digitalambition.co/watch/game-changing-global-color-management-in-oxygen/
Comments