Tint Color
Class | Properties | |
---|---|---|
t.tintTransparent | tintColor: 'transparent' | |
t.tintBlack | tintColor: '#000' | |
t.tintWhite | tintColor: '#fff' | |
t.tintGray100 | tintColor: '#f7fafc' | |
t.tintGray200 | tintColor: '#edf2f7' | |
t.tintGray300 | tintColor: '#e2e8f0' | |
t.tintGray400 | tintColor: '#cbd5e0' | |
t.tintGray500 | tintColor: '#a0aec0' | |
t.tintGray600 | tintColor: '#718096' | |
t.tintGray700 | tintColor: '#4a5568' | |
t.tintGray800 | tintColor: '#2d3748' | |
t.tintGray900 | tintColor: '#1a202c' | |
t.tintRed100 | tintColor: '#fff5f5' | |
t.tintRed200 | tintColor: '#fed7d7' | |
t.tintRed300 | tintColor: '#feb2b2' | |
t.tintRed400 | tintColor: '#fc8181' | |
t.tintRed500 | tintColor: '#f56565' | |
t.tintRed600 | tintColor: '#e53e3e' | |
t.tintRed700 | tintColor: '#c53030' | |
t.tintRed800 | tintColor: '#9b2c2c' | |
t.tintRed900 | tintColor: '#742a2a' | |
t.tintOrange100 | tintColor: '#fffaf0' | |
t.tintOrange200 | tintColor: '#feebc8' | |
t.tintOrange300 | tintColor: '#fbd38d' | |
t.tintOrange400 | tintColor: '#f6ad55' | |
t.tintOrange500 | tintColor: '#ed8936' | |
t.tintOrange600 | tintColor: '#dd6b20' | |
t.tintOrange700 | tintColor: '#c05621' | |
t.tintOrange800 | tintColor: '#9c4221' | |
t.tintOrange900 | tintColor: '#7b341e' | |
t.tintYellow100 | tintColor: '#fffff0' | |
t.tintYellow200 | tintColor: '#fefcbf' | |
t.tintYellow300 | tintColor: '#faf089' | |
t.tintYellow400 | tintColor: '#f6e05e' | |
t.tintYellow500 | tintColor: '#ecc94b' | |
t.tintYellow600 | tintColor: '#d69e2e' | |
t.tintYellow700 | tintColor: '#b7791f' | |
t.tintYellow800 | tintColor: '#975a16' | |
t.tintYellow900 | tintColor: '#744210' | |
t.tintGreen100 | tintColor: '#f0fff4' | |
t.tintGreen200 | tintColor: '#c6f6d5' | |
t.tintGreen300 | tintColor: '#9ae6b4' | |
t.tintGreen400 | tintColor: '#68d391' | |
t.tintGreen500 | tintColor: '#48bb78' | |
t.tintGreen600 | tintColor: '#38a169' | |
t.tintGreen700 | tintColor: '#2f855a' | |
t.tintGreen800 | tintColor: '#276749' | |
t.tintGreen900 | tintColor: '#22543d' | |
t.tintTeal100 | tintColor: '#e6fffa' | |
t.tintTeal200 | tintColor: '#b2f5ea' | |
t.tintTeal300 | tintColor: '#81e6d9' | |
t.tintTeal400 | tintColor: '#4fd1c5' | |
t.tintTeal500 | tintColor: '#38b2ac' | |
t.tintTeal600 | tintColor: '#319795' | |
t.tintTeal700 | tintColor: '#2c7a7b' | |
t.tintTeal800 | tintColor: '#285e61' | |
t.tintTeal900 | tintColor: '#234e52' | |
t.tintBlue100 | tintColor: '#ebf8ff' | |
t.tintBlue200 | tintColor: '#bee3f8' | |
t.tintBlue300 | tintColor: '#90cdf4' | |
t.tintBlue400 | tintColor: '#63b3ed' | |
t.tintBlue500 | tintColor: '#4299e1' | |
t.tintBlue600 | tintColor: '#3182ce' | |
t.tintBlue700 | tintColor: '#2b6cb0' | |
t.tintBlue800 | tintColor: '#2c5282' | |
t.tintBlue900 | tintColor: '#2a4365' | |
t.tintIndigo100 | tintColor: '#ebf4ff' | |
t.tintIndigo200 | tintColor: '#c3dafe' | |
t.tintIndigo300 | tintColor: '#a3bffa' | |
t.tintIndigo400 | tintColor: '#7f9cf5' | |
t.tintIndigo500 | tintColor: '#667eea' | |
t.tintIndigo600 | tintColor: '#5a67d8' | |
t.tintIndigo700 | tintColor: '#4c51bf' | |
t.tintIndigo800 | tintColor: '#434190' | |
t.tintIndigo900 | tintColor: '#3c366b' | |
t.tintPurple100 | tintColor: '#faf5ff' | |
t.tintPurple200 | tintColor: '#e9d8fd' | |
t.tintPurple300 | tintColor: '#d6bcfa' | |
t.tintPurple400 | tintColor: '#b794f4' | |
t.tintPurple500 | tintColor: '#9f7aea' | |
t.tintPurple600 | tintColor: '#805ad5' | |
t.tintPurple700 | tintColor: '#6b46c1' | |
t.tintPurple800 | tintColor: '#553c9a' | |
t.tintPurple900 | tintColor: '#44337a' | |
t.tintPink100 | tintColor: '#fff5f7' | |
t.tintPink200 | tintColor: '#fed7e2' | |
t.tintPink300 | tintColor: '#fbb6ce' | |
t.tintPink400 | tintColor: '#f687b3' | |
t.tintPink500 | tintColor: '#ed64a6' | |
t.tintPink600 | tintColor: '#d53f8c' | |
t.tintPink700 | tintColor: '#b83280' | |
t.tintPink800 | tintColor: '#97266d' | |
t.tintPink900 | tintColor: '#702459' |
Usage
Changes the color of all the non-transparent pixels to the ttint{Color}
.
without tint color
with tint color