Format

Classes for colour are named using the format: [color]-[luminance].

Where color includes:

• transparent - for color: var(--transparent)
• white - for color: var(--white)
• black - for color: var(--black)
• gray - for color: var(--gray-##)
• red - for color: var(--red-##)
• orange - for color: var(--orange-##)
• amber - for color: var(--amber-##)
• yellow - for color: var(--yellow-##)
• lime - for color: var(--lime-##)
• green - for color: var(--green-##)
• spring - for color: var(--spring-##)
• cyan - for color: var(--cyan-##)
• teal - for color: var(--teal-##)
• steel - for color: var(--steel-##)
• azure - for color: var(--azure-##)
• blue - for color: var(--blue-##)
• indigo - for color: var(--indigo-##)
• purple - for color: var(--purple-##)
• magenta - for color: var(--magenta-##)
• pink - for color: var(--pink-##)
• rose - for color: var(--rose-##)

Where luminance includes:

• # - luminance value for the colour. By default, color classes start at 5% luminance, and increment by 5% for the first/last step, and 10% for following steps until stopping at 95%.