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.