Tailwind రంగు జనరేషన్
1 రంగు యొక్క Hex కోడ్ నుండి Tailwind CSS యొక్క 50 నుండి 950 వరకు 11 తీవ్రతల పాలెట్‌ను, సెట్టింగ్ కోడ్‌ను రూపొందించండి
ప్రత్యేకతలు
1 రంగు నుండి 11 తీవ్రతలను ఆటోమేటిక్‌గా జనరేట్ చేయడం
నమోదు చేసిన రంగును 500గా ఉంచి, 50 నుండి 950 వరకు ఛాయలను లెక్కిస్తుంది
v3 మరియు v4 రెండు ఫార్మాట్‌లకు మద్దతు
config మరియు @theme రాయడం విధానాలను ట్యాబ్‌లతో మార్చుకోవచ్చు
ప్రతి తీవ్రతకు Hex కాపీ చేయడం
ప్రతి కలర్ స్వాచ్ బటన్‌తో రంగు కోడ్‌ను ఒక్కొక్కటిగా కాపీ చేయవచ్చు
నమోదుతో పాటే పాలెట్ అప్‌డేట్
ఎగ్జిక్యూట్ బటన్ అవసరం లేకుండా రంగులను ప్రయత్నిస్తూ పోల్చవచ్చు
ఉపయోగించే విధానం
ప్రాథమిక రంగు యొక్క Hex నమోదు చేయండి
Hex కోడ్‌ను నమోదు చేయండి, లేదా ఎడమవైపు ఉన్న కలర్ స్వాచ్‌ను క్లిక్ చేసి కలర్ పికర్‌తో ఎంచుకోండి
అవసరమైతే రంగు పేరు నమోదు చేయండి
కోడ్‌లో ఉపయోగించే రంగు పేరును ఆంగ్ల చిన్న అక్షరాలలో నమోదు చేయండి. ఖాళీగా ఉంటే primary ఉపయోగించబడుతుంది
11 తీవ్రతల కలర్ స్వాచ్‌లను తనిఖీ చేయండి
50 నుండి 950 వరకు కలర్ స్వాచ్‌లు, Hex కోడ్‌లను తనిఖీ చేసి, స్వాచ్‌పై ఉన్న కాపీ బటన్‌తో ఒక్కొక్క రంగును కాపీ చేయండి
అవుట్‌పుట్ ఫార్మాట్‌ను ఎంచుకుని కాపీ చేయండి
v3 లేదా v4 ఎంచుకుని "కోడ్‌ను కాపీ చేయండి" నొక్కి tailwind.config.js లేదా CSS ఫైల్‌కు పేస్ట్ చేయండి
వినియోగ సందర్భాలు
బ్రాండ్ రంగు ఛాయల తయారీ
బటన్ హోవర్ లేదా బ్యాక్‌గ్రౌండ్‌కు ఉపయోగించే ఛాయలను బ్రాండ్ రంగు 1 నుండి సమన్వయం చేయడం
ప్రామాణిక పాలెట్‌లో లేని రంగును జోడించడం
Tailwind ప్రామాణిక రంగుల్లో లేని ప్రాజెక్ట్ స్వంత రంగును 11 తీవ్రతలతో సెట్టింగ్ ఫైల్‌కు జోడించడం
v4 @theme సెట్టింగ్ తయారీ
సైట్ యొక్క ప్రధాన రంగు నుండి Tailwind v4 యొక్క CSS వేరియబుల్స్‌ను ఒకేసారి రాయడం
డిజైన్ కాంప్ అమలుకు సిద్ధపాటు
కాంప్‌లో నిర్దేశించిన రంగు నుండి అమలు కోసం 11 తీవ్రతల కోడ్‌ను సిద్ధం చేసి, డిజైన్ టూల్‌కు కూడా బదిలీ చేయడం
ప్రాథమిక పరిజ్ఞానం
Tailwind యొక్క 50 నుండి 950 సూచించేది
Tailwind CSS రంగులు 50 (అత్యంత లేత) నుండి 950 (అత్యంత గాఢం) వరకు 11 స్థాయిల సంఖ్యలతో ప్రకాశాన్ని సూచిస్తాయి, 500 ఆ రంగుకు ప్రాతిపదిక అవుతుంది. సంఖ్యలను "bg-primary-500" లేదా "text-primary-700" వంటి క్లాస్ పేరు చివర జోడించి ఉపయోగిస్తారు.
- 50 నుండి 300 స్థాయిలు：50 నుండి 300 స్థాయిలు బ్యాక్‌గ్రౌండ్ రంగులకు లేదా తేలికపాటి నింపుకు ఎక్కువగా ఉపయోగించే ప్రకాశవంతమైన రంగులు, వాటిపై గాఢమైన అక్షరాలను పెట్టినా చదవడానికి సులభంగా ఉంటాయి.
- 600 నుండి 950 స్థాయిలు：600 నుండి 950 స్థాయిలు బటన్ హోవర్ సమయంలో లేదా హెడ్డింగ్ అక్షర రంగుగా ఎక్కువగా ఉపయోగించే గాఢమైన రంగులు, తెల్లని బ్యాక్‌గ్రౌండ్‌పై కూడా స్పష్టంగా కనిపిస్తాయి.
v3 మరియు v4 మధ్య రంగు నిర్వచన విధానంలో తేడా
Tailwind CSS యొక్క v3లో రంగులను tailwind.config.js లో JavaScriptతో నిర్వచిస్తారు, v4లో CSS ఫైల్ యొక్క @theme లోపల CSS వేరియబుల్‌గా నిర్వచిస్తారు. ఏ విధానంలో రాసినా, నిర్వచించిన రంగును "bg-primary-500" వంటి ఒకే క్లాస్ పేరుతో ఉపయోగించవచ్చు.
- v3 రాసే విధానం：v3 రాసే విధానం theme.extend.colors లోపల "primary: { 500: '#3B82F6' }" వంటి రంగు పేరు మరియు స్థాయిని నెస్ట్ చేసి రాసే ఫార్మాట్.
- v4 రాసే విధానం：v4 రాసే విధానం @theme లోపల "--color-primary-500: #3B82F6;" వంటి రంగు పేరు మరియు స్థాయిని హైఫన్‌తో కలిపిన వేరియబుల్ పేరుతో రాసే ఫార్మాట్.
భద్రత మరియు గోప్యత
పూర్తిగా బ్రౌజర్‌లోనే
నమోదు చేసిన డేటా మీ బ్రౌజర్‌లోనే ప్రాసెస్ చేయబడుతుంది, బయటకు పంపబడదు.
బ్రౌజర్ లోపల మాత్రమే ప్రాసెస్ చేయడం
పాలెట్ లెక్కింపు మరియు కోడ్ జనరేషన్ అన్నీ మీ బ్రౌజర్‌లో చేయబడతాయి, ఇన్‌పుట్ డేటా సర్వర్‌కు పంపబడదు.
సంచారం HTTPS ద్వారా గుప్తీకరించబడింది
పేజీ లోడింగ్ కూడా TLS ద్వారా గుప్తీకరించబడుతుంది, మూడవ పక్షం విషయాలను చదవలేదు.
మూడవ పక్షానికి పంపడం లేదు
ఇన్‌పుట్ విషయాలను విజ్ఞాపన నెట్‌వర్క్ లేదా ట్రాకర్‌ల వంటి బాహ్య సేవలకు పంపము.
ఫలితాల స్వయంచాలిత సేవ్ చేయడం లేదు
నమోదు చేసిన రంగు లేదా రంగు పేరు లేదా ఇన్‌పుట్ సూచనలను సర్వర్‌లో భద్రపరచడం లేదు.
Google శోధనలో RAKKOTOOLSను ఫాలో అవ్వండి
187 ఉపయోగకరమైన సాధనాలు Google శోధన మరియు AI శోధనలో సులభంగా కనుగొనవచ్చు!
- శోధనలో కనిపిస్తుంది
- AI శోధనలో కూడా కనిపిస్తుంది
- కొత్త సాధనాలను కూడా కనుగొనండి
అప్‌డేట్ సమాచారం
- update #318
Tailwind కలర్ జనరేటర్ జోడించబడింది, ఒక రంగు నుండి 11 షేడ్‌లు మరియు సెట్టింగ్ కోడ్‌ను రూపొందించండి