Text Color

Class Properties
t.textTransparent color: 'transparent' Aa
t.textBlack color: '#000' Aa
t.textWhite color: '#fff' Aa
t.textGray100 color: '#f7fafc' Aa
t.textGray200 color: '#edf2f7' Aa
t.textGray300 color: '#e2e8f0' Aa
t.textGray400 color: '#cbd5e0' Aa
t.textGray500 color: '#a0aec0' Aa
t.textGray600 color: '#718096' Aa
t.textGray700 color: '#4a5568' Aa
t.textGray800 color: '#2d3748' Aa
t.textGray900 color: '#1a202c' Aa
t.textRed100 color: '#fff5f5' Aa
t.textRed200 color: '#fed7d7' Aa
t.textRed300 color: '#feb2b2' Aa
t.textRed400 color: '#fc8181' Aa
t.textRed500 color: '#f56565' Aa
t.textRed600 color: '#e53e3e' Aa
t.textRed700 color: '#c53030' Aa
t.textRed800 color: '#9b2c2c' Aa
t.textRed900 color: '#742a2a' Aa
t.textOrange100 color: '#fffaf0' Aa
t.textOrange200 color: '#feebc8' Aa
t.textOrange300 color: '#fbd38d' Aa
t.textOrange400 color: '#f6ad55' Aa
t.textOrange500 color: '#ed8936' Aa
t.textOrange600 color: '#dd6b20' Aa
t.textOrange700 color: '#c05621' Aa
t.textOrange800 color: '#9c4221' Aa
t.textOrange900 color: '#7b341e' Aa
t.textYellow100 color: '#fffff0' Aa
t.textYellow200 color: '#fefcbf' Aa
t.textYellow300 color: '#faf089' Aa
t.textYellow400 color: '#f6e05e' Aa
t.textYellow500 color: '#ecc94b' Aa
t.textYellow600 color: '#d69e2e' Aa
t.textYellow700 color: '#b7791f' Aa
t.textYellow800 color: '#975a16' Aa
t.textYellow900 color: '#744210' Aa
t.textGreen100 color: '#f0fff4' Aa
t.textGreen200 color: '#c6f6d5' Aa
t.textGreen300 color: '#9ae6b4' Aa
t.textGreen400 color: '#68d391' Aa
t.textGreen500 color: '#48bb78' Aa
t.textGreen600 color: '#38a169' Aa
t.textGreen700 color: '#2f855a' Aa
t.textGreen800 color: '#276749' Aa
t.textGreen900 color: '#22543d' Aa
t.textTeal100 color: '#e6fffa' Aa
t.textTeal200 color: '#b2f5ea' Aa
t.textTeal300 color: '#81e6d9' Aa
t.textTeal400 color: '#4fd1c5' Aa
t.textTeal500 color: '#38b2ac' Aa
t.textTeal600 color: '#319795' Aa
t.textTeal700 color: '#2c7a7b' Aa
t.textTeal800 color: '#285e61' Aa
t.textTeal900 color: '#234e52' Aa
t.textBlue100 color: '#ebf8ff' Aa
t.textBlue200 color: '#bee3f8' Aa
t.textBlue300 color: '#90cdf4' Aa
t.textBlue400 color: '#63b3ed' Aa
t.textBlue500 color: '#4299e1' Aa
t.textBlue600 color: '#3182ce' Aa
t.textBlue700 color: '#2b6cb0' Aa
t.textBlue800 color: '#2c5282' Aa
t.textBlue900 color: '#2a4365' Aa
t.textIndigo100 color: '#ebf4ff' Aa
t.textIndigo200 color: '#c3dafe' Aa
t.textIndigo300 color: '#a3bffa' Aa
t.textIndigo400 color: '#7f9cf5' Aa
t.textIndigo500 color: '#667eea' Aa
t.textIndigo600 color: '#5a67d8' Aa
t.textIndigo700 color: '#4c51bf' Aa
t.textIndigo800 color: '#434190' Aa
t.textIndigo900 color: '#3c366b' Aa
t.textPurple100 color: '#faf5ff' Aa
t.textPurple200 color: '#e9d8fd' Aa
t.textPurple300 color: '#d6bcfa' Aa
t.textPurple400 color: '#b794f4' Aa
t.textPurple500 color: '#9f7aea' Aa
t.textPurple600 color: '#805ad5' Aa
t.textPurple700 color: '#6b46c1' Aa
t.textPurple800 color: '#553c9a' Aa
t.textPurple900 color: '#44337a' Aa
t.textPink100 color: '#fff5f7' Aa
t.textPink200 color: '#fed7e2' Aa
t.textPink300 color: '#fbb6ce' Aa
t.textPink400 color: '#f687b3' Aa
t.textPink500 color: '#ed64a6' Aa
t.textPink600 color: '#d53f8c' Aa
t.textPink700 color: '#b83280' Aa
t.textPink800 color: '#97266d' Aa
t.textPink900 color: '#702459' Aa

Usage

Control the text color of an element using the t.text{Color} utilities.

The quick brown fox jumped over the lazy dog.