DevToys Web Pro iconDevToys Web Proብሎግ
ደረጃ ይስጡን፦
የአሳሽ ቅጥያን ይሞክሩ፦

የቲንቶች እና ሼዶች ጀነሬተር

ትክክለኛ
10

21 ቀለሞች

Tint 100%#ffffff
Tint 90%#ebf3fe
Tint 80%#d8e6fd
Tint 70%#c4dafc
Tint 60%#b1cdfb
Tint 50%#9dc1fb
Tint 40%#89b4fa
Tint 30%#76a8f9
Tint 20%#629bf8
Tint 10%#4f8ff7
Base#3b82f6
Shade 10%#3575dd
Shade 20%#2f68c5
Shade 30%#295bac
Shade 40%#234e94
Shade 50%#1e417b
Shade 60%#183462
Shade 70%#12274a
Shade 80%#0c1a31
Shade 90%#060d19
Shade 100%#000000
ቴክኒካዊ ዝርዝሮች

የቲንትስ እና ሼድስ ጀነሬተሩ እንዴት እንደሚሰራ

መሣሪያው ምን ያደርጋል

የቲንትስ እና ሼድስ ጀነሬተሩ ከማንኛውም መሠረታዊ ቀለም ነጭ በመቀላቀል የሚፈጠሩ የበለጠ ብርሃን ቲንቶችን እና ጥቁር በመቀላቀል የሚፈጠሩ የበለጠ ጨለማ ሼዶችን ይፈጥራል። አንድ ቀለም ያስገቡ እና ለስላሳ ግሬዲየንት የልዩነቶች ቁጥር ደረጃዎችን ይምረጡ። እያንዳንዱ ደረጃ HEX፣ RGB እሴቶችን እና የመቀላቀል መቶኛን ያሳያል፣ ይህም ለUI ዲዛይን፣ ለብራንዲንግ እና ለዳታ ቪዙዋላይዜሽን ተመጣጣኝ የቀለም ስኬሎችን መገንባት ቀላል ያደርገዋል።

የተለመዱ የገንቢ አጠቃቀም ሁኔታዎች

ዴቨሎፐሮች የቲንት እና ሼድ ጀነሬተሮችን የዲዛይን ቶከን ስኬሎችን (ለምሳሌ blue-100 እስከ blue-900) ሲገነቡ፣ ለተግባራዊ ክፍሎች የhover እና የactive ሁኔታዎችን ሲፈጥሩ፣ ተደራሽ የቀለም ተዋረዶችን ሲያቀናብሩ እና ለብርሃን እና ለጨለማ ጭብጦች ተመጣጣኝ የጀርባ እና የሰርፌስ ቀለሞችን ሲያመነጩ ይጠቀማሉ። መሳሪያው የTailwind CSS ብጁ የቀለም ፓሌቶችን ወይም የMaterial Design የቀለም ስርዓቶችን ለመገንባት አስፈላጊ ነው።

ቲንትስ እና ሼድስ እንዴት እንደሚሰሩ

ቲንት ቀለምን ከነጭ ጋር በመቀላቀል ይፈጠራል፣ ብርሃንነቱን ይጨምራል። ሼድ ደግሞ ከጥቁር ጋር በመቀላቀል ይፈጠራል፣ ብርሃንነቱን ይቀንሳል። ለቲንቶች ፎርሙላው: new = base + (255 - base) × factor ነው። ለሼዶች: new = base × (1 - factor)። ደረጃዎች በመሠረታዊ ቀለም እና በንጹህ ነጭ (ቲንቶች) ወይም በንጹህ ጥቁር (ሼዶች) መካከል በእኩል ይተካሉ፣ ይህም የቀለም እሴቶች መስመራዊ ግሬዲየንት ያመነጫል።

የተለመዱ ስህተቶች እና የጠርዝ ሁኔታዎች

ከነጭ ወይም ከጥቁር ጋር መስመራዊ መቀላቀል ለአንዳንድ ሁዮች ደብዛዛ ቲንቶች ወይም ጭቃማ ሼዶችን ሊያመነጭ ይችላል። ቢጫዎች ሲጨልሙ አረንጓዴ ያለ ጥላ ሊኖራቸው ይችላል፣ ሰማያዎች ደግሞ ሲበሩ ብርታታቸውን ሊያጡ ይችላሉ። በማስተዋል የተመጣጠኑ ስኬሎች ለማግኘት OKLCH ወይም CIELAB የቀለም ቦታዎችን መጠቀም ያስቡ። በጣም ብርሃን ቲንቶችዎ እና በጣም ጨለማ ሼዶችዎ ከታሰቡላቸው ጀርባዎች ጋር በቂ ንፅፅር እንዳላቸው ሁልጊዜ ያረጋግጡ።

ይህን መሣሪያ ከኮድ ጋር መቼ መጠቀም እንደሚገባ

በዲዛይን ስራ ወቅት ፈጣን መመርመር እና የቀለም ስኬሎችን ለማመንጨት ይህን የአሳሽ መሳሪያ ይጠቀሙ። ለምርት የዲዛይን ስርዓቶች ግን በchroma.js ወይም culori ያሉ የቀለም ላይብረሪዎች በመጠቀም ቲንቶችን እና ሼዶችን በፕሮግራም መንገድ ያመነጩ፤ እነዚህ በማስተዋል የተመጣጠኑ የቀለም ቦታዎችን ይደግፋሉ እና የዲዛይን ቶከኖችን በማንኛውም ቅርጸት ማውጣት ይችላሉ።