MediaWiki talk:Gadget-colorPalette.css

Our current color palette
You can use any of these in your CSS styles by using the var function.
 * For example
 * color: var(--secondary-lightish)
 * background-color: var(--primary-desaturateder)

 lightest    lightest  lighter    lighter  lighter-1    lighter-1  lighter-2    lighter-2  lighter-3    lighter-3  light    light  light-1    light-1  light-2    light-2  lightish    lightish  lightish-1    lightish-1  lightish-2    lightish-2  base    base  darkish-2    darkish-2  darkish-1    darkish-1  darkish    darkish  dark-1    dark-1 <div class="color-col" data-color="var(--primary-dark-2)"> dark-2    dark-2 <div class="color-col" data-color="var(--primary-dark)"> dark    dark <div class="color-col" data-color="var(--primary-darker-3)"> darker-3    darker-3 <div class="color-col" data-color="var(--primary-darker-2)"> darker-2    darker-2 <div class="color-col" data-color="var(--primary-darker-1)"> darker-1    darker-1 <div class="color-col" data-color="var(--primary-darker)"> darker    darker <div class="color-col" data-color="var(--primary-darkest-3)"> darkest    darkest <div class="color-col" data-color="var(--primary-darkest)"> darkest    darkest <div class="color-col" data-color="var(--primary-desaturatedest)"> desaturatedest    desaturatedest <div class="color-col" data-color="var(--primary-desaturateder)"> desaturateder    desaturateder <div class="color-col" data-color="var(--primary-desaturated)"> desaturated    desaturated <div class="color-col" data-color="var(--primary-desaturatedish)"> desaturatedish    desaturatedish <div class="color-col" data-color="var(--primary)"> base    base <div class="color-col" data-color="var(--primary-saturatedish)"> saturatedish    saturatedish <div class="color-col" data-color="var(--primary-saturated)"> saturated    saturated <div class="color-col" data-color="var(--primary-saturateder)"> saturateder    saturateder <div class="color-col" data-color="var(--primary-saturatedest)"> saturatedest    saturatedest <div class="color-col" data-color="var(--secondary-lightest)"> lightest    lightest <div class="color-col" data-color="var(--secondary-lighter)"> lighter    lighter <div class="color-col" data-color="var(--secondary-lighter-1)"> lighter-1    lighter-1 <div class="color-col" data-color="var(--secondary-lighter-2)"> lighter-2    lighter-2 <div class="color-col" data-color="var(--secondary-lighter-3)"> lighter-3    lighter-3 <div class="color-col" data-color="var(--secondary-light)"> light    light <div class="color-col" data-color="var(--secondary-light-1)"> light-1    light-1 <div class="color-col" data-color="var(--secondary-light-2)"> light-2    light-2 <div class="color-col" data-color="var(--secondary-lightish)"> lightish    lightish <div class="color-col" data-color="var(--secondary-lightish-1)"> lightish-1    lightish-1 <div class="color-col" data-color="var(--secondary-lightish-2)"> lightish-2    lightish-2 <div class="color-col" data-color="var(--secondary)"> base    base <div class="color-col" data-color="var(--secondary-darkish-2)"> darkish-1    darkish-2 <div class="color-col" data-color="var(--secondary-darkish-1)"> darkish-1    darkish-1 <div class="color-col" data-color="var(--secondary-darkish)"> darkish    darkish <div class="color-col" data-color="var(--secondary-dark-2)"> dark-2    dark-2 <div class="color-col" data-color="var(--secondary-dark-1)"> dark-1    dark-1 <div class="color-col" data-color="var(--secondary-dark)"> dark    dark <div class="color-col" data-color="var(--secondary-darker-3)"> darker-3    darker-3 <div class="color-col" data-color="var(--secondary-darker-2)"> darker-2    darker-2 <div class="color-col" data-color="var(--secondary-darker-1)"> darker-1    darker-1 <div class="color-col" data-color="var(--secondary-darker)"> darker    darker <div class="color-col" data-color="var(--secondary-darkest-3)"> darkest-3    darkest-3 <div class="color-col" data-color="var(--secondary-darkest)"> darkest    darkest <div class="color-col" data-color="var(--secondary-desaturatedest)"> desaturatedest    desaturatedest <div class="color-col" data-color="var(--secondary-desaturateder)"> desaturateder    desaturateder <div class="color-col" data-color="var(--secondary-desaturated)"> desaturated    desaturated <div class="color-col" data-color="var(--secondary-desaturatedish)"> desaturatedish    desaturatedish <div class="color-col" data-color="var(--secondary)"> base    base <div class="color-col" data-color="var(--secondary-saturatedish)"> saturatedish    saturatedish <div class="color-col" data-color="var(--secondary-saturated)"> saturated    saturated <div class="color-col" data-color="var(--secondary-saturateder)"> saturateder    saturateder <div class="color-col" data-color="var(--secondary-saturatedest)"> saturatedest    saturatedest <div class="color-col" data-color="var(--accent-lightest)"> lightest    lightest <div class="color-col" data-color="var(--accent-lighter)"> lighter    lighter <div class="color-col" data-color="var(--accent-light)"> light    light <div class="color-col" data-color="var(--accent-lightish)"> lightish    lightish <div class="color-col" data-color="var(--accent)"> base    base <div class="color-col" data-color="var(--accent-darkish)"> darkish    darkish <div class="color-col" data-color="var(--accent-dark)"> dark    dark <div class="color-col" data-color="var(--accent-darker)"> darker    darker <div class="color-col" data-color="var(--accent-darkest)"> darkest    darkest <div class="color-col" data-color="var(--accent-desaturatedest)"> desaturatedest    desaturatedest <div class="color-col" data-color="var(--accent-desaturateder)"> desaturateder    desaturateder <div class="color-col" data-color="var(--accent-desaturated)"> desaturated    desaturated <div class="color-col" data-color="var(--accent-desaturatedish)"> desaturatedish    desaturatedish <div class="color-col" class="color-col" data-color="var(--accent)"> base    base <div class="color-col" data-color="var(--accent-saturatedish)"> saturatedish    saturatedish <div class="color-col" data-color="var(--accent-saturated)"> saturated    saturated <div class="color-col" data-color="var(--accent-saturateder)"> saturateder    saturateder <div class="color-col" data-color="var(--accent-saturatedest)"> saturatedest    saturatedest <div class="color-col" data-color="var(--tertiary-lightest)"> lightest    lightest <div class="color-col" data-color="var(--tertiary-lighter)"> lighter    lighter <div class="color-col" data-color="var(--tertiary-light)"> light    light <div class="color-col" data-color="var(--tertiary-lightish)"> lightish    lightish <div class="color-col" data-color="var(--tertiary)"> base    base <div class="color-col" data-color="var(--tertiary-darkish)"> darkish    darkish <div class="color-col" data-color="var(--tertiary-dark)"> dark    dark <div class="color-col" data-color="var(--tertiary-darker)"> darker    darker <div class="color-col" data-color="var(--tertiary-darkest)"> darkest    darkest <div class="color-col" data-color="var(--tertiary-desaturatedest)"> desaturatedest    desaturatedest <div class="color-col" data-color="var(--tertiary-desaturateder)"> desaturateder    desaturateder <div class="color-col" data-color="var(--tertiary-desaturated)"> desaturated    desaturated <div class="color-col" data-color="var(--tertiary-desaturatedish)"> desaturatedish    desaturatedish <div class="color-col" data-color="var(--tertiary)"> base    base <div class="color-col" data-color="var(--tertiary-saturatedish)"> saturatedish    saturatedish <div class="color-col" data-color="var(--tertiary-saturated)"> saturated    saturated <div class="color-col" data-color="var(--tertiary-saturateder)"> saturateder    saturateder <div class="color-col" data-color="var(--tertiary-saturatedest)"> saturatedest    saturatedest <div class="color-col" data-color="var(--white)"> White  White <div class="color-col" data-color="var(--gray-lightest)"> Gray lightest  Gray lightest <div class="color-col" data-color="var(--gray-lighter)"> Gray lighter  Gray lighter <div class="color-col" data-color="var(--gray-light)"> Gray light  Gray light <div class="color-col" data-color="var(--gray-lightish)"> Gray lightish  Gray lightish <div class="color-col" data-color="var(--gray)"> Gray  Gray <div class="color-col" data-color="var(--gray-darkish)"> Gray darkish  Gray darkish <div class="color-col" data-color="var(--gray-dark)"> Gray dark  Gray dark <div class="color-col" data-color="var(--gray-darker)"> Gray darker  Gray darker <div class="color-col" data-color="var(--gray-darkest)"> Gray darkest  Gray darkest <div class="color-col" data-color="var(--black)"> Black  Black <div class="color-col" data-color="var(--text-light)"> Text light  Text light <div class="color-col" data-color="var(--text-alt)"> Text alt  Text alt <div class="color-col" data-color="var(--text-dark)"> Text  Text <div class="color-col" data-color="var(--text-dark)"> Text dark  Text dark