Nuanțe și Tonuri
Generatorul de tinte și umbre creează variante mai deschise (amestecate cu alb) și mai închise (amestecate cu negru) ale oricărei culori de bază, în 5, 10 sau 20 de pași, cu export ca variabile CSS.
Despre acest instrument
Generatorul de tinte și umbre creează variante mai deschise (amestecate cu alb) și mai închise (amestecate cu negru) ale oricărei culori de bază, în 5, 10 sau 20 de pași, cu export ca variabile CSS.
Cum se folosește
- Alege o culoare de bază.
- Alege 5, 10 sau 20 de pași.
- Apasă pe orice mostră pentru a copia valoarea hex.
- Apasă Copy as CSS Variables pentru a exporta toată scala.
Bine de știut
- O tintă este o culoare amestecată cu alb; o umbră este o culoare amestecată cu negru.
- Generatorul amestecă în pași RGB egali, așa că fiecare pas schimbă culoarea cu aceeași cantitate.
- Design systems precum Tailwind folosesc o scală 50–900 construită din tintele și umbrele fiecărei culori de brand.
- Verifică contrastul culorilor de text luate dintr-o scală, deoarece pașii din mijloc adesea nu trec WCAG AA pe alb.
Funcționează complet în browserul tău — nimic din ce introduci nu este încărcat sau salvat.
Întrebări frecvente
Care este diferența dintre o tintă și o umbră?
O tintă deschide o culoare prin adăugarea de alb; o umbră o închide prin adăugarea de negru. Un ton adaugă gri.
Câte nuanțe ar trebui să aibă o culoare dintr-un design system?
Aproximativ 10 pași este un număr obișnuit, de exemplu 50, 100 … 900 în Tailwind. Oferă suficientă plajă pentru fundaluri, borduri, text și stări hover.
Cum folosesc scala în CSS?
Copiază scala ca proprietăți personalizate și folosește-le cu var(--color-name), de exemplu pentru fundaluri, borduri sau stări hover.
De ce unele tinte par decolorate?
Amestecul cu alb scade saturația pe lângă creșterea luminozității. Pentru variante deschise mai vii, ajustează saturația separat în HSL.