የቀለም ፓሌት ጀነሬተር
የቀለም ማስማማት
Two colors opposite on the color wheel
የተፈጠረ ፓሌት
የፓሌት ቅድመ እይታ
ፓሌት ወደ ውጭ ላክ
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}ቴክኒካዊ ዝርዝሮች
የቀለም ፓሌት ጀነሬተሩ እንዴት እንደሚሰራ
መሣሪያው ምን ያደርጋል
የቀለም ፓሌት ጀነሬተሩ ከማንኛውም መሠረታዊ ቀለም በተረጋገጡ የቀለም ንድፈ ሀሳብ መርሆዎች ተመስርቶ ተስማሚ የቀለም እቅዶችን ይፈጥራል። መሠረታዊ ቀለም ይምረጡ እና ከስድስት የስምምነት አይነቶች — ተቃራኒ (complementary)፣ ተመሳሳይ (analogous)፣ ትራያዲክ (triadic)፣ ቴትራዲክ (tetradic)፣ ተከፋፈለ-ተቃራኒ (split-complementary) ወይም አንድ-ቀለም (monochromatic) — ይምረጡ እና በአፋጣኝ የተቀናጀ ፓሌት ያመነጫሉ። እያንዳንዱ የተፈጠረ ቀለም ለCSS፣ ለዲዛይን መሳሪያ ወይም ለስታይል መመሪያ ለመቅዳት ዝግጁ የሆኑ HEX፣ RGB እና HSL እሴቶችን ያሳያል።
የተለመዱ የገንቢ አጠቃቀም ሁኔታዎች
ዲዛይነሮችና ዴቨሎፐሮች አዲስ ፕሮጀክቶችን ሲጀምሩ፣ የዲዛይን ስርዓቶችን ሲፈጥሩ ወይም የብራንድ ቀለሞችን ሲያድሱ የፓሌት ጀነሬተሮችን ይጠቀማሉ። የተለመዱ ሁኔታዎች ዋና የብራንድ ቀለም ለማጉላት ተቃራኒ አክሰንት ቀለሞችን መፍጠር፣ ለዳታ ቪዙዋላይዜሽን ተመሳሳይ የቀለም እቅዶችን መፍጠር፣ ለብሩህ የUI ጭብጦች ትራያዲክ ፓሌቶችን መገንባት እና ለአነስተኛ ዲዛይኖች አንድ-ቀለም ልዩነቶችን መመርመር ያካትታሉ። መሳሪያው እንዲሁም የCSS ብጁ ንብረት ስብስቦችን እና ለዲዛይን ስርዓቶች የJSON ቀለም ቶከኖችን ለመፍጠር ጠቃሚ ነው።
የቀለም ስምምነት አይነቶች
የቀለም ስምምነቶች በቀለም ጎማ ላይ የተመሰረቱ ናቸው። ተቃራኒ ቀለሞች እርስ በርሳቸው በተቃራኒ ጎን (180°) ይገኛሉ እና ከፍተኛ ንፅፅር ይፈጥራሉ። ተመሳሳይ ቀለሞች አጎራባች (±30°) ናቸው እና ተዋሃድ የሆነ ስሜት ይሰጣሉ። ትራያዲክ ቀለሞች በ120° ክፍተት በእኩል ርቀት ይተካሉ እና ሚዛናዊ ብርታት ይሰጣሉ። ቴትራዲክ (አራት ማዕዘን) በ90° ክፍተት አራት ቀለሞችን ይጠቀማል። ተከፋፈለ-ተቃራኒ አንድ መሠረት ቀለምን ከተቃራኒው አጎራባች ሁለት ቀለሞች ጋር ያጣምራል። አንድ-ቀለም ደግሞ ለረጋ እና አንድነት ያለው ፓሌት የአንድ ሁይ ብርሃንነትን እና ሳቹሬሽንን ይለዋዋጣል።
የተለመዱ ስህተቶች እና የጠርዝ ሁኔታዎች
የተፈጠሩ ፓሌቶች መጀመሪያ ነጥቦች ናቸው፣ መጨረሻ ዲዛይኖች አይደሉም። ተደራሽነትን ለማረጋገጥ በተፈጠሩ ቀለሞች መካከል ያሉ የንፅፅር ሬሾዎችን ሁልጊዜ ያረጋግጡ። በጣም የተሞሉ (saturated) ወይም በጣም ጨለማ መሠረታዊ ቀለሞች ዝቅተኛ ንባብ ያላቸው ፓሌቶችን ሊያመነጩ ይችላሉ። የስክሪን ቀለሞች በህትመት ላይ በተለየ መልኩ እንደሚታዩ ያስታውሱ። በስዋች ቅድመ እይታ ብቻ ከመተማመን ይልቅ ፓሌቶችን ከእውነተኛ ይዘት እና የUI ክፍሎች ጋር ይፈትሹ።
ይህን መሣሪያ ከኮድ ጋር መቼ መጠቀም እንደሚገባ
በዲዛይን ስፕሪንቶች ወቅት ለተግባራዊ መመርመር እና ፈጣን ፓሌት ማመንጨት ይህን የአሳሽ መሳሪያ ይጠቀሙ። ለምርት የዲዛይን ስርዓቶች ግን chroma.js፣ culori ወይም polished ያሉ ላይብረሪዎችን በመጠቀም ፓሌት ማመንጨትን በፕሮግራም መንገድ ያተግብሩ፤ እነዚህ ስምምነቶችን ማመንጨት፣ የንፅፅር ሬሾዎችን ማስገደድ እና ከቢልድ ፓይፕላይኖች ጋር መዋሃድ ይችላሉ።