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

የቀለም ስምምነቶች ጀነሬተር

  • መሠረት
    እቅድ
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    ቴክኒካዊ ዝርዝሮች

    የቀለም ስምምነቶች ጀነሬተር እንዴት እንደሚሰራ

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

    የቀለም ስምምነቶች ጀነሬተር ከአንድ መሠረታዊ ሂዩ በመነሳት በሂሳብ የተያያዙ የቀለም ስብስቦችን ያሰላል፦ ተቃራኒ (complementary)፣ ተመሳሳይ (analogous)፣ ትሪያዲክ (triadic)፣ ቴትራዲክ (tetradic)፣ ካሬ (square)፣ ስፕሊት-ተቃራኒ (split-complementary)፣ አንድ-ቀለም (monochromatic) እና ጥላዎች (shades)። እያንዳንዱ ፓሌት በHEX፣ RGB እና HSL እሴቶች ይታያል፤ በአንድ ጠቅታ መቅዳት እና በቀጥታ በCSS ወይም በዲዛይን ቶከኖች ውስጥ መጠቀም ይችላሉ።

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

    ዲዛይነሮች የብራንድ ሂዩ በተለያዩ የስምምነት ህጎች ስር እንዴት እንደሚለዋወጥ በመመርመር የብራንድ ፓሌቶችን ይፈትሻሉ። የፊት-መጨረሻ ዴቨሎፐሮች ከዋና የብራንድ ቀለም በመነሳት ለአዝራሮች፣ ማስጠንቀቂያዎች እና ባጅዎች የአክሰንት ቀለሞችን ይጀምራሉ። የዳታ ቪዝ ኢንጂነሮች በተወሰነ ዓላማ የተመረጡ የሚመስሉ ነገር ግን እርስ በርስ የሚለዩ የምድብ ቀለም ስብስቦችን ይመርጣሉ። የምርት አስተዳዳሪዎች ልዩ የዲዛይን መሣሪያ ሳያስፈልጋቸው የዲዛይን ጥቆማዎችን ሲገምግሙ የፓሌት አማራጮችን ያነጻጽራሉ።

    የውሂብ ቅርጾች፣ አይነቶች ወይም ልዩነቶች

    ስምንት ስኪሞች ይገኛሉ፦ ተቃራኒ (መሠረት + 180°)፣ ተመሳሳይ (መሠረት ± 30°)፣ ትሪያዲክ (3 ቀለሞች 120° ርቀት)፣ ቴትራዲክ (አራት-ቀለም አራት ማዕዘን/አራት ጎን አቀማመጥ)፣ ካሬ (4 ቀለሞች 90° ርቀት)፣ ስፕሊት-ተቃራኒ (መሠረት + ±150°)፣ አንድ-ቀለም (ተመሳሳይ ሂዩ በተለያዩ ብርሃንነት 10–90%)፣ እና ጥላዎች (ተመሳሳይ ሂዩ፣ ከጨለማ ወደ ብርሃን)። እያንዳንዱ ቀለም ከሚና መለያ ጋር የHEX፣ RGB እና HSL አቀራረቦቹን ያካትታል።

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

    ከእጅግ ዝቅተኛ ሳቹሬሽን ወይም ግራይስኬል ቅርብ የሆኑ መሠረታዊ ቀለሞች የተገኙ ስምምነቶች በስኪሞች መካከል ልዩነታቸው የማይታይ ይሆናል — ከሳቹሬት የሆነ መሠረት ይጀምሩ። እጅግ ሳቹሬት የሆኑ መሠረቶችን ከትሪያዲክ ወይም ቴትራዲክ ስኪሞች ጋር ሲያጣምሩ ጮክ ያሉ እና ለማመጣጠን ከባድ ፓሌቶች ሊወጡ ይችላሉ፤ ለUI አጠቃቀም ሳቹሬሽንን ትንሽ ማሳነስ ያስቡ። ከስምምነቶች የተገኙ አንዳንድ ጥንዶች የWCAG ኮንትራስትን ሊያልፉ አይችሉም — ከመልቀቅ በፊት በColor Contrast መሣሪያ ውስጥ የጽሑፍ/ጀርባ ጥንዶችን ሁልጊዜ ያረጋግጡ።

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

    ለሀሳብ ማመንጨት፣ ፈጣን ምርመራ እና የዲዛይን ግምገማ የአሳሽ መሣሪያውን ይጠቀሙ። በኮድ ውስጥ ግን chroma.js, colord, ወይም culori ያሉ ላይብረሪዎች ስምምነቶችን በፕሮግራም መልኩ እንዲያሰሉ፣ ወደ ዲዛይን-ቶከን ቢልድ ፓይፕላይኖች እንዲያቀናብሩ እና የስምምነት ሂሳብን ከOklch ያሉ በስሜት ተመጣጣኝ (perceptually uniform) የቀለም ስፔሶች ጋር በማጣመር የበለጠ ተመጣጣኝ የሚመስሉ ፓሌቶችን እንዲፈጥሩ ያስችላሉ።