There's a proposed new color palette for the new CSS Framework.
I'm not sure yet if this is the final version. The focus has been on the definitions. I have been using the HSL color space for just this reason. Each of the above colors is defined as an HSL color. HSL is an acronym that stands for Hue Saturation and Lightness.
Those of us familiar with CSS are very familiar with HEX codes. Red, for example, would be #ff0000 (or short form: #f00). White would be #ffffff and black would be #000000. There's also RGB and RGBA color spaces. White in RGB would be rgb(255,255,255) and in RGBA as rgba(255,255,255,1). RGB is an acronym that stands for Reg Green and Blue. RGBA is also an acronym that stands for Reg Green Blue and Alpha. The Alpha channel is the one that defines opacity. So, the 1 as the fourth and final number in the white rgba code means 100% opacity. (50% would be expressed as .5).
White in HSL would be hsl(0, 0%, 100%) ... that means a Hue of 0, a Saturation of 0%, and a Lightness of 100%. It's the Lightness parameter that is important as it relates to this color palette.
Lets examin just the Primary color. First, I defined the main color (that's the one in the middle column): hsl(207, 90%, 51%) ...
The left column of this palette represents all the colors in "light" version, and the right column represents the colors in "dark" version.
The neat this is that all are simple to create ... I just changed the light versions by increasing the Lightness by 25% and decreating the Lightness by 25% for the dark version.
Primary light: hsl(207, 90%, 66%)
Primary main: hsl(207, 90%, 51%)
Primary dark: hsl(207, 90%, 36%)
The only colors that don't follow this are white and dark.
PS. The colors are listed alphabetically.