የቲንቶች እና ሼዶች ጀነሬተር
21 ቀለሞች
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)ቴክኒካዊ ዝርዝሮች
የቲንትስ እና ሼድስ ጀነሬተሩ እንዴት እንደሚሰራ
መሣሪያው ምን ያደርጋል
የቲንትስ እና ሼድስ ጀነሬተሩ ከማንኛውም መሠረታዊ ቀለም ነጭ በመቀላቀል የሚፈጠሩ የበለጠ ብርሃን ቲንቶችን እና ጥቁር በመቀላቀል የሚፈጠሩ የበለጠ ጨለማ ሼዶችን ይፈጥራል። አንድ ቀለም ያስገቡ እና ለስላሳ ግሬዲየንት የልዩነቶች ቁጥር ደረጃዎችን ይምረጡ። እያንዳንዱ ደረጃ 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 ያሉ የቀለም ላይብረሪዎች በመጠቀም ቲንቶችን እና ሼዶችን በፕሮግራም መንገድ ያመነጩ፤ እነዚህ በማስተዋል የተመጣጠኑ የቀለም ቦታዎችን ይደግፋሉ እና የዲዛይን ቶከኖችን በማንኛውም ቅርጸት ማውጣት ይችላሉ።