← ሁሉም መሣሪያዎች

የቀለም ፓሌት ጀነሬተር

የዘፈቀደና ተስማሚ የቀለም ፓሌቶችን በመስመር ላይ ከሚገለበጥ HEX፣ RGB እና HSL ኮዶች ጋር ይፍጠሩ። የቀለም ንድፈ ሃሳብና ተደራሽ ንፅፅርን በቀላል ቃላት ይወቁ።
HEX ለመቅዳት ቀለም ጠቅ ያድርጉ።

ጥሩ የቀለም ስብስብ ሙሉ ንድፍን የሚሸከመው ለምንድን ነው

የተሳሳተ ቀለም ይምረጡ፣ ሰዎች ስም ከመስጠት በፊት ይሰማቸዋል። ገጽ ርካሽ ይመስላል፣ ሎጎ ደብዛዛ ይታያል፣ ግራፍ ወደ ጫጫታ ይለወጣል። ትክክለኛዎቹን ይምረጡ ሥራው በቀላሉ ይገባል፦ ሆን ተብሎ የተደረገ፣ ረጋ ያለ፣ ለመቃኘት ቀላል ይሰማል። ቀለም ብዙ ጸጥ ያለ ሥራ ይሠራል፣ ስሜትን ያዘጋጃል፣ ዓይንን ይመራል፣ አንባቢ ምን ትልቁ ጉዳይ እንደሆነ ይነግረዋል። ስለዚህ የቀለም ስብስብ በመጨረሻ የሚደረግ ጌጥ አይደለም። ገና ቀደም ብለው የሚወስኑት ውሳኔ ነው፣ ማለት ይቻላል ሁሉም ነገር በእሱ ላይ ይመሠረታል።

ጥሩ ዜናው ጠንካራ እቅድ ለማግኘት የስዕል ዲግሪ አያስፈልግዎትም። ከቀለም ንድፈ-ሐሳብ ጥቂት ደንቦችና ሐሳቦችን በፍጥነት ለመሞከር መንገድ ያስፈልግዎታል። ይህ ልክ ማመንጫ የተፈጠረበት ነው፦ በአንድ ጊዜ ላይ ውስብስብ በነበረበት ጊዜ ውስጥ በደርዘኖች ጥምረቶች እንዲዞሩ ያደርግዎታል።

በጨለማ ኢንዲጎ ዳራ ላይ ከሄክስ ኮዶች ጋር የሚያበራ የተስማሙ ቀለም ናሙናዎች ሪባን
የተስማማ የቀለም ስብስብ ንፅፅርንና አንድነትን ያመጣጥናል ስለዚህ እያንዳንዱ ናሙና ቦታውን ያገኛል።

የቀለም ንድፈ-ሐሳብ፣ ያለ ቴክኒካዊ ቃላት

አብዛኞቹ ስምምነቶች ከአንድ ቀላል ሐሳብ ይመጣሉ፦ ቀለሞች እርስ በርሳቸው በክበቡ ላይ የት እንደሚቀመጡ። አራት ንድፎችን ይማሩ ማንኛውንም ስብስብ ማንበብ ወይም መገንባት ይችላሉ።

  • ተማጋጅ (Complementary) ልክ ተቃራኒ ቦታ ላይ ያሉ ሁለት ቀለሞችን ይጠቀማል፣ እንደ ሰማያዊና ብርቱካናማ። ከፍተኛ ኃይል ያለው ነው ትኩረት ለመሳብ ጥሩ ነው፣ ምንም እንኳ የሁለቱም ብዛት ትኩረት ስለሚወዳደር፣ አንዱ እንዲመራ ሌላውን ደግሞ እንደ አጽንኦት ይጠቀሙ።
  • ተመሳሳይ (Analogous) እርስ በርሳቸው አጠገብ ያሉ ሦስት ቀለሞችን ይጠቀማል፣ እንደ ቀይ፣ ብርቱካናማ፣ ቢጫ። ዝቅተኛ-ንፅፅር፣ ረጋ ያለ ነው፣ በተፈጥሮ ውስጥ በሁሉም ቦታ የሚያዩት ዓይነት ስምምነት ነው። ለዓይን ቀላል ነው፣ ግን ነገሮች ጠፍጣፋ እንዳይሆኑ አንድ ቦታ ንፅፅር መጨመር ሊያስፈልግዎት ይችላል።
  • ትሪያዲክ (Triadic) በክበቡ ዙሪያ በእኩል ተከፋፍለው ያሉ ሦስት ቀለሞችን ይጠቀማል፣ እንደ ቀይ፣ ቢጫ፣ ሰማያዊ። ብሩህና ሚዛናዊ ነው፣ አንድ ቀለም ሲቆጣጠር ሌሎቹ ሁለት ደግፎ ሲጫወቱ በተሻለ ይሠራል።
  • ሞኖክሮማቲክ (Monochromatic) በአንድ ጥላ ላይ ተጣብቆ ብርሃናማነቱን እና ብዘቱን ያለያያል። ካሉት ስብስቦች ሁሉ በጣም ስህተት-አልባ ነው፣ ንጹህና አንድነት ያለው፣ ምንም ሌላ ነገር ትክክል ካልመሰለ ጥሩ አማራጭ ነው።

ዘፈቀደ ማመንጫ ለመነሳሳት አስደሳች ነው፣ ነገር ግን የስምምነት ዘዴዎች እውነተኛው ዋጋ ያለበት ቦታ ናቸው። ቀለሞችዎ በሂሳብ ግንኙነት እንዲኖራቸው ይይዙታል፣ ስለዚህ ምንም ከማስተካከልዎ በፊት እንኳ አብረው የሚገጣጠሙ ይመስላሉ።

HEX፣ RGB፣ HSL በቀላል ቃላት

የሚቀዱት እያንዳንዱ ቀለም በጥቂት ማስታወሻዎች ይመጣል፣ ሁሉም ተመሳሳይ ነገር በተለያየ ሁኔታ ይገልፃሉ።

HEX ብዙ ጊዜ የሚያዩት ስድስት-ፊደል ኮድ ነው፣ እንደ #3A7BD5። ቀይ፣ አረንጓዴ፣ ሰማያዊ ወደ አንድ ፊደላት ቅንብር የታሸጉ ናቸው፣ ሁለት ፊደላት እያንዳንዱ። ጥቅጥቅ ያለ ነው ወደ CSS ወይም ንድፍ መሣሪያ የሚለጥፉት ነው።

RGB እነዚያኑ ሦስት ቻናሎች ከ0 እስከ 255 ባሉ ቁጥሮች ይገልጻል፣ እንደ rgb(58, 123, 213)። ተመሳሳይ ቀለም፣ ለማንበብ ይበልጥ ተስማሚ፣ ለግልጽነት alpha ቻናል ሲፈልጉ ጠቃሚ ነው።

HSL ሰዎች በእውነት እንደሚያስቡት ቀለምን ይገልፃል፦ hue (የትኛው ቀለም፣ 0 እስከ 360 ዲግሪ በክበቡ ዙሪያ)፣ saturation (ምን ያህል ብሩህ)፣ lightness (ምን ያህል ደማቅ)። ብርሃናማነትን ወይም ብዘትን ማወዛወዝ በትክክል የሚጠብቁትን ስለሚያደርግ በእጅ ለማስተካከል ቀላሉ ቅርጸት ነው። ቅርጸቶች መካከል መንቀሳቀስ ካስፈለገዎት፣ ፈጣን HEX ወደ RGB ልወጣ ህመም-አልባ ያደርገዋል።

ተማጋጅና ትሪያዲክ ጥላዎችን የሚያገናኙ የስምምነት መስመሮች ያለው የቀለም ክበብ በዲዛይነር ስቱዲዮ ስሜት
የቀለም ክበብ የስምምነት ደንቦችን በአንድ እይታ ሊታይ ወደ ሚችል ነገር ይለውጣል።

ንፅፅርንና ተደራሽነትን አይርሱ

የቀለም ስብስብ ውብ ሊመስል ይችላል ግን አንድ ሰው በላዩ ላይ ጽሑፍ ለማንበብ ሲሞክር ወዲያውኑ ውድቅ ሊሆን ይችላል። ንፅፅር ውብነት ከጥቅም ጋር የሚገናኝበት ነው። Web Content Accessibility Guidelines ግልጽ አሞሌ ያስቀምጣል፦ መደበኛ አካል ጽሑፍ ከዳራው ጋር ቢያንስ 4.5:1 የንፅፅር ጥምርታ ሊኖረው ይገባል፣ ትልቅ ጽሑፍ ደግሞ ቢያንስ 3:1። ያ ቀይ ቴፕ አይደለም፣ ገጽዎን በቀላሉ የሚያልፍ አንባቢ እና ዓይኑን የሚያጥብ፣ የሚተውና የሚወጣ አንባቢ መካከል ያለው ልዩነት ነው።

ተግባራዊ እርምጃው ገና እየገነቡ ሳሉ የፊት እና የዳራ ጥምረቶችዎን መሞከር ነው፣ ከዚያ በኋላ ሳይሆን። ብርሃናማ ግራጫ በነጭ ላይ በሞክአፕ ውስጥ ብልህ ሊመስል ይችላል በቀን ብርሃን ላይ ባለ ስልክ ላይ ግን የማይታይ ይሆናል። ጥምረት ሲወድቅ፣ ብዙ ጊዜ አንድ ቀለም ብቻ ጨልመው ወይም አብርተው መግፋት ያስፈልግዎታል፣ መላውን ንድፍ አይጣሉት። ብሩህ የአጽንኦት ቀለሞችዎን ለረዥም ጽሑፍ ክፍሎች ሳይሆን ለቁልፎች፣ ለሊንኮች፣ ለማድመቂያዎች ይያዙ፣ ብዙ የንፅፅር ችግሮችን ከመጀመሪያው ያስወግዳሉ።

ተግባራዊ የሥራ ፍሰት

በፕሮጀክቶች ዘንድ የሚቆይ ፍሰት ይኸውና። ርግጠኛ በሆኑበት አንድ መልህቅ ቀለም ይጀምሩ፣ ብዙ ጊዜ የምርት ስም ቀለም ወይም ከሚፈልጉት ስሜት ጋር የሚስማማ ጥላ። ይቆልፉት፣ ከዚያ ማመንጫው ስምምነት በዙሪያው እንዲገነባ ያድርጉ። ነገር ትክክል እስኪመስል ድረስ በተማጋጅ፣ ተመሳሳይ፣ ትሪያዲክ ውስጥ ይሽከረከሩ፣ የመጀመሪያውን ዙር ብዙ አያስቡበት፤ የመጨረሻውን መልስ ሳይሆን አቅጣጫ እየፈለጉ ነው።

እጩ ካገኙ በኋላ፣ ሚናዎችን ይመድቡ። ለዳራዎችና ትላልቅ ቦታዎች ዋና ቀለም፣ ለመዋቅር ሁለተኛ፣ ለብልጭ ማድረግ ለሚያስፈልጋቸው ቁርጥራጮች አንድ ደማቅ አጽንኦት ይምረጡ። 60-30-10 ገደማ ስንጠቃ፣ ዋና ወደ ሁለተኛ ወደ አጽንኦት፣ ጥብቅ ሳይሆኑ ሚዛናዊ ያደርገዋል። ከዚያ በእያንዳንዱ የጽሑፍ ጥምረት ላይ ንፅፅርን ያረጋግጡ፣ ሄክስ ኮዶቹን ይቅዱ፣ ተጠናቅቋል። የሠሩትን ያስቀምጡ፣ ምክንያቱም ለአንድ ፕሮጀክት በትክክል የገነቡት ስብስብ ብዙ ጊዜ ለሚቀጥለው ዘር ነውና። ግንባታውን መቀጠል ሲፈልጉ፣ ቀሪው የሁሉንም ማመንጫዎች ስብስባችን ሌሎቹን ቁርጥራጮች ማስተናገድ ይችላል።

ተደጋግመው የሚጠየቁ ጥያቄዎች

ይህ የቀለም ስብስብ ማመንጫ ለመጠቀም ነጻ ነው?

አዎ። ሙሉ በሙሉ በአሳሽዎ ውስጥ ይሠራል፣ ምንም ምዝገባ የለም፣ የፈለጉትን ያህል ስብስቦች ያለ ምንም ወጪ ማመንጨት ይችላሉ።

በዘፈቀደ ስብስብና በተስማማ ስብስብ መካከል ያለው ልዩነት ምንድን ነው?

ዘፈቀደ ስብስብ ለመነሳሳት አምስት ግንኙነት የሌላቸው ቀለሞችን ይሰጣል። እንደ ተማጋጅ ወይም ትሪያዲክ ያለ የተስማማ ስብስብ ቀለሞቹ በቀለም ክበቡ ላይ በሂሳብ ግንኙነት እንዲኖራቸው ይይዛል፣ ስለዚህ ተያይዘው ሚዛናዊና ሆን ተብለው የተደረጉ ይመስላሉ።

የቀለም ኮድ እንዴት እቀዳለሁ?

በማንኛውም ናሙና ስር ያለውን ሄክስ ኮድ ጠቅ ያድርጉ ወደ ክሊፕቦርድዎ ይቀዳል። ከዚያ በቀጥታ ወደ CSS፣ ወደ ንድፍ መሣሪያ፣ ወይም ወደሚያስፈልግዎት ማንኛውም ቦታ መለጠፍ ይችላሉ።

WCAG ንፅፅር ምን ማለት ነው ለምንስ ማሰብ አለብኝ?

WCAG የድር ተደራሽነት ደረጃ ነው። ሰዎች ይዘትዎን በምቾት እንዲያነቡ፣ ዝቅተኛ እይታ ያላቸውን ጨምሮ፣ በመደበኛ ጽሑፍና ዳራው መካከል ቢያንስ 4.5:1 የንፅፅር ጥምርታ ይጠይቃል።

የትኛውን የቀለም ስምምነት መምረጥ አለብኝ?

በስሜቱ ላይ ይመሠረታል። ተማጋጅ ደፋርና ከፍተኛ-ኃይል ያለው ነው፣ ተመሳሳይ ረጋ ያለና ተፈጥሯዊ ነው፣ ትሪያዲክ ሕያውና ሚዛናዊ ነው፣ ሞኖክሮማቲክ ንጹህና ስህተት-አልባ ነው። ጥቂት ይሞክሩ የትኛው ለፕሮጀክትዎ እንደሚስማማ ይመልከቱ።

ቀለሞቹን ወደ RGB ወይም HSL መቀየር እችላለሁ?

አዎ። ሁሉም ተመሳሳይ እሴት ስለሚገልጹ እያንዳንዱ ቀለም ወደ HEX፣ RGB፣ HSL ይካተታል። ቅርጸቶችን በፍጥነት ለመቀየር ካስፈለገዎት የHEX ወደ RGB መሣሪያችንን ይጠቀሙ።