Color
Fourteen chromatic scales and three neutrals, thirteen steps each, generated rather than picked. Switch the theme in the toolbar and every swatch below moves.
Chromatic
Fourteen hues, thirteen steps each, 10 to 990 left to right.
Neutral
Three of them, ordered by how much blue they carry.
palette.pink[500] says what a color is; status.error.normal says what it is for, and only the second survives a decision to make errors crimson.The fourteen hues are spread around the wheel, the closest pair 12° apart. Equal HSL lightness is not equal perceived brightness, so cyan and green are pulled down. Without that, teal-500 is #00ffea.
Absolute
Four groups that do not follow the theme. Black and white are literals; dim and lighten are operations that work over anything.
color.white#ffffffcolor.black#000000dim[100] is black at 10%. Both ramps run 50 to 950 and stop there: 0% is transparent and 100% is color.black or color.white, which already exist above.Semantic
What a color is for. Background is the level a thing sits on, fill is a panel cut into it, and every tone including neutral carries the four roles below.
Text on each fill
onNormal records the color that clears AA on that fill, so no component has to decide.
White or black
Seven and seven across the hues: red through blue carry white, the cyan-to-orange arc needs black, and both themes agree because step 500 is the same lightness in each. The three grays are measured at 950 instead, where a solid neutral fill sits, and they are the only rows that answer differently in the two themes. (Reading the light one.)