የጽሑፍ ቅርጸ-ቁምፊውን ፣ መጠኑን እና ቀለሙን ያዘጋጁ

የጽሑፍ ቅርጸ-ቁምፊውን ፣ መጠኑን እና ቀለሙን ያዘጋጁ

በመጽሐፉ የመጀመሪያ ክፍል ውስጥ የጽሑፍ ቀለምን በ CSS ውስጥ እንዴት ማዘጋጀት እንደሚቻል በአንዳንድ ምሳሌዎች አስቀድመን አሳይተናል። እዚህ ምንም የተወሳሰበ ነገር የለም-የቀለም ንብረቱን እና ጽሑፉን ለመሳል የሚፈልጉትን ቀለም ዋጋ ያስፈልግዎታል.

ፒ ( ቀለም፡ # 211C18; )

በእኛ ምሳሌ፣ እሴቱ #211C18 ሄክሳዴሲማል የቀለም ኮድን ይወክላል። የሄክሳዴሲማል ቁጥር ስርዓትን አስቀድመው የሚያውቁ ከሆነ የሚቀጥለውን አንቀጽ ማንበብ ይችላሉ። እንዲሁም በድር ላይ ቀለሞችን ለመወከል ስለሌሎች መንገዶች የበለጠ እንነጋገራለን - የቀለም ሞዴሎችን (RGB ፣ HSL) እና ቁልፍ ቃላትን በመጠቀም። ይህ መረጃ ለጀማሪዎች ጠቃሚ ይሆናል እና ለማንበብ ይመከራል.

ሄክሳዴሲማል ቀለሞች (ሄክስ)

ሄክሳዴሲማል ቁጥር ስርዓት ( ሄክሳዴሲማል፣ ሄክስ) በቁጥር 16 ላይ የተመሰረተ ነው. ሄክሳዴሲማል እሴት ለመጻፍ 16 ቁምፊዎች ጥቅም ላይ ይውላሉ: የአረብ ቁጥሮች ከ 0 እስከ 9 እና የላቲን ፊደላት የመጀመሪያ ፊደላት (A, B, C, D, E, F). ቀለም በሄክሳዴሲማል ቅርጸት ከ 00 እስከ ኤፍኤፍ ባለ ሶስት ባለ ሁለት አሃዝ ቁጥሮች ይፃፋል (በሃሽ ምልክት # መቅደም አለባቸው) ፣ እሱም ከሶስት አካላት ጋር ይዛመዳል-ቀይ ፣ አረንጓዴ ፣ ሰማያዊ (አርጂቢ ቀለም ሞዴል)። በሌላ አነጋገር የቀለም ግቤት እንደ # RRGGBB ሊወከል ይችላል, የመጀመሪያዎቹ ጥንድ ቁምፊዎች የቀይውን ደረጃ, ሁለተኛው - አረንጓዴ ደረጃ, እና ሦስተኛው - ሰማያዊ ደረጃን የሚወስኑበት. የተገኘው ቀለም የእነዚህ ሶስት ቀለሞች ጥምረት ነው.

ለሄክስ ቀለሞች አጭር የእጅ ምልክት

አንዳንድ ሄክሳዴሲማል የቀለም እሴቶች በምህፃረ ቃል ሊፃፉ ይችላሉ። ይህንን ለማድረግ እንደ # RRGGBB ያለውን ግቤት ወደ # RGB ይለውጡት። ይህ የሄክስ ቁጥር ሶስት ጥንድ ተመሳሳይ ቁምፊዎችን ሲይዝ ማድረግ ይቻላል.

አህጽሮተ ቃል በጣም የተለመደ ነው፣ እና ለማጣቀሻዎ በርካታ የአህጽሮተ ቃላት ምሳሌዎችን እናቀርባለን። በነገራችን ላይ የሄክስ ቀለም ዋጋዎች ለጉዳይ የተጋለጡ አይደሉም - ሁለቱንም አቢይ ሆሄያት እና ትንሽ ፊደላትን መጠቀም ይችላሉ, ሁሉም በእርስዎ ፍላጎት እና ጣዕም ላይ የተመሰረተ ነው.

ለሄክስ ቀለሞች ምህጻረ ቃል ምሳሌዎች፡-

የ RGB ቀለም ሞዴል

በሲኤስኤስ ውስጥ ቀለሞችን ለመለየት ሁለተኛው መንገድ የአስርዮሽ RGB እሴቶችን (ቀይ ፣ ሰማያዊ ፣ አረንጓዴ) መጠቀም ነው። ይህንን ለማድረግ ከቀለም ንብረቱ በኋላ rgb የሚለውን ቁልፍ መፃፍ ያስፈልግዎታል ፣ እና በቅንፍ ውስጥ እና በነጠላ ሰረዞች ይለያሉ - ከ 0 እስከ 255 ባለው ክልል ውስጥ ሶስት ቁጥሮች ፣ እያንዳንዳቸው የቀይ ፣ አረንጓዴ እና ሰማያዊ ቀለሞች (r) ጥንካሬ ማለት ነው ። , g, ለ). ቁጥሩ ከፍ ባለ መጠን ቀለሙ ይበልጥ ኃይለኛ ይሆናል. ለምሳሌ, ደማቅ አረንጓዴ ቀለም ለማግኘት, መጻፍ ያስፈልግዎታል:

P ( ቀለም፡ rgb (0, 255, 0);

ነገር ግን ቢጫ-ሰናፍጭ ቀለም የሚከተለው ትርጉም አለው.

ቀለም: rgb (94, 81, 3); /* ከታች ያለው ተመሳሳይ ቀለም ነው, በሄክሳዴሲማል የተጻፈው: */ ቀለም: # 5E5103;

የጥቁር ዋጋ እንደ (0፣ 0፣ 0) እና በነጭ እንደ (255፣ 255፣ 255) ተጽፏል። እነዚህን እሴቶች እንደ መቶኛ ማመልከትም ይቻላል. ስለዚህ ቁጥሩ 255 ከ 100% ጋር ይዛመዳል, ስለዚህ ነጭ ቀለም እንደሚከተለው ሊዘጋጅ ይችላል.

ቀለም: rgb (100%, 100%, 100%);

የቀለም ትርጉሞችን የት እንደሚፈልጉ

ምናልባት አንድ ጥያቄ ይኖርዎታል-እነዚህን ሁሉ የቀለም ትርጉሞች ከየት ያገኛሉ? ቀለሞችን መምረጥ እና የቀለም ንድፎችን መገንባት የሚችሉባቸው ብዙ ግራፊክ አርታዒዎች እና የመስመር ላይ አገልግሎቶች አሉ። ተስማሚ ቀለም መምረጥ እና RGB ፣ hex values ​​እና ሌሎችም ማግኘት የሚችሉበት በጣም ታዋቂ ከሆኑ ፕሮግራሞች አንዱ አዶቤ ፎቶሾፕ ነው። እንደ አማራጭ, ቀለምን ብቻ ሳይሆን ሙሉ የቀለም መርሃ ግብርን በቀላሉ መምረጥ የሚችሉባቸው ልዩ ጣቢያዎች አሉ. ጥሩ ምሳሌ የAdobe Color CC አገልግሎት ነው።

RGBA ቀለም ሞዴል

እንደ RGB በተመሳሳይ መልኩ ቀለምን በ RGBA ቅርጸት ማዘጋጀት ይችላሉ። በ RGBA እና RGB መካከል ያለው ልዩነት ለቀለም ግልጽነት ኃላፊነት ያለው የአልፋ ቻናል መኖር ነው። ግልጽነት የሚዋቀረው ከ0 እስከ 1 ባለው ቁጥር በመጠቀም ነው፣ 0 ሙሉ በሙሉ ግልፅ የሆነበት እና 1 ሙሉ በሙሉ ግልጽ ያልሆነ። እንደ 0.5 ያሉ መካከለኛ እሴቶች ግልጽ የሆነ መልክ እንዲያዘጋጁ ያስችሉዎታል (አጭር ምልክት ዜሮ ሳይኖር ይፈቀዳል ፣ ግን በነጥብ - .5)። ለምሳሌ፣ ጽሑፉ ቀለም ያለው እና ትንሽ ግልጽ ለማድረግ፣ ከቀለም ንብረቱ በኋላ የ rgba ቁልፍ ቃሉን እና የቀለም እሴትን መፃፍ ያስፈልግዎታል።

P ( ቀለም፡ rgba (94, 81, 3, .9);

የ RGBA ጉዳቱ በInternet Explorer ስሪት 8 እና ከዚያ በፊት አለመደገፍ ነው። በተለይ ለ IE8, የሚከተለውን መፍትሄ ማመልከት ይችላሉ.

P ( ቀለም፡ rgb (94፣ 81፣ 3)፤ ቀለም፡ rgba (94፣ 81፣ 3፣ .9)፤)

በምሳሌው ውስጥ ያለው የመጀመሪያው ንብረት ለ IE8 አሳሽ የታሰበ ነው, ይህም ጽሑፉን በሚፈለገው ቀለም ያሳያል, ነገር ግን ግልጽነት የለውም. እና እነዚያ RGBAን የተረዱ አሳሾች ሁለተኛውን ንብረት በንብረቱ ላይ ይተገብራሉ፣ ግልፅነት።

HSL (HSLA) ቀለም ሞዴሎች

እንዲሁም የHSL ቀለም ሞዴል (Hue, Saturation, Lightness) መጋጠሚያዎችን በመጠቀም በሲኤስኤስ ውስጥ ቀለም ማዘጋጀት ይችላሉ. እንዲህ ተብሎ ተጽፏል።

P ( ቀለም: hsl (165, 100%, 50%);)

በቅንፍ ውስጥ ያለው የመጀመሪያው ቁጥር ቀለም ማለት ሲሆን በዲግሪዎች (የቁጥር ክልል ከ 0 እስከ 359) ይሰጣል። የቀለም መንኮራኩሩ ምን እንደሚመስል ካስታወሱ ዲግሪዎች ለምን ጥቅም ላይ እንደሚውሉ ለመረዳት ቀላል ይሆናል-

በቅንፍ ውስጥ ያሉት ሁለተኛው እና ሦስተኛው ቁጥሮች በቅደም ተከተል ሙሌት እና ብርሃን ማለት ነው። እሴቶቻቸው ከ 0 እስከ 100 በመቶኛ ተቀምጠዋል። የሙሌት እሴቱ ባነሰ መጠን ቀለሙ የበለጠ ድምጸ-ከል ይሆናል። የዜሮ ሙሌት ዋጋ ግራጫ ቀለምን ያመጣል, ምንም እንኳን የሂው እሴቱ ምንም ይሁን ምን. የብርሃን እሴቱ የቀለሙን ብሩህነት እንዲገልጹ ያስችልዎታል. ዝቅተኛ ዋጋዎች ጥቁር ጥላዎች ቀለም, ከፍተኛ እሴቶች የብርሃን ጥላዎችን ያስከትላሉ. ለብርሃን 100% ዋጋ ነጭ, 0% ጥቁር ማለት ነው.

የ HSLA ቀለም ሞዴል ከ HSL ጋር ተመሳሳይ ነው የሚሰራው ነገር ግን ከ RGBA ጋር ተመሳሳይነት ያለው የአልፋ ቻናል አለው ከ 0 እስከ 1 ባለው ክልል ውስጥ የሚፈለገውን ዋጋ በመግለጽ የቀለሙን ግልጽነት ማዘጋጀት ይችላሉ.

P ( ቀለም: hsla (165, 100%, 50%, .6);)

ኤችኤስኤል እና HSLA ከኢንተርኔት ኤክስፕሎረር ስሪት 8 እና ቀደም ብሎ በስተቀር በሁሉም አሳሾች ይደገፋሉ።

መደበኛ HTML ቀለሞች

በድር ላይ ቀለሞችን የሚወክሉበት ሌላው መንገድ በቁልፍ ቃላቶች በኩል ነው, ይህም ለአንድ አካል ቀለምን ለመለየት ሊያገለግል ይችላል. ለምሳሌ፥

ፒ (ቀለም: ጥቁር;)

በቀለም ንብረቱ ዋጋ ውስጥ ሊጻፉ የሚችሉ 16 መደበኛ ቀለሞች አሉ።

እነዚህ ቀለሞች በሁሉም አሳሾች ይደገፋሉ. ከእነዚህ በተጨማሪ ለተለያዩ የቀለም ጥላዎች ወደ 130 የሚጠጉ ተጨማሪ ቁልፍ ቃላት አሉ። የእነዚህ ቀለሞች የተሟላ ሰንጠረዥ በ W3C ማመሳከሪያ መጽሐፍ ውስጥ ሊታይ ይችላል.

እንደነዚህ ያሉ ቁልፍ ቃላትን መጠቀም ተቀባይነት አለው, ነገር ግን አንዳንድ ቃላት በአሳሹ ተቀባይነት እንዳይኖራቸው ስጋት አለ. ስለዚህ, ከቁልፍ ቃላቶች ይልቅ የሄክሳዴሲማል ቀለም ኮድ ለመጻፍ ይመከራል.

ውጤቶች

በ CSS ውስጥ የጽሑፍ ቀለም የተገለጸው የቀለም ንብረቱን በመጠቀም ነው, እና እሴቱ በተለያዩ መንገዶች ሊጻፍ ይችላል - በሄክሳዴሲማል (ሄክስ) ቅርጸት, በ RGB ወይም HSL ቅርጸት, ወይም ቁልፍ ቃልን በመግለጽ. ቁልፍ ቃልን በመጠቀም የተገለጸውን ቀለም ትክክል ያልሆነ ማሳያን ለማስወገድ የሄክስ ዋጋውን መግለጽ የተሻለ ነው።

እንዲሁም የአልፋ ቻናልን (RGBA እና HSLA ቅርጸቶችን) በመጠቀም የኤለመንቱን ግልጽነት ማዘጋጀት ይቻላል። የ IE8 አሳሽ እና ቀደምት ስሪቶች RGBA፣ HSL እና HSLA ቅርጸቶችን እንደማይደግፉ ግምት ውስጥ ማስገባት ተገቢ ነው።

በኤችቲኤምኤል ውስጥ ቀለም በሦስት መንገዶች ሊገለጽ ይችላል-

በኤችቲኤምኤል ውስጥ አንድ ቀለም በስሙ ማዘጋጀት

አንዳንድ ቀለሞች በስማቸው ሊገለጹ ይችላሉ, በእንግሊዝኛ የቀለም ስም እንደ ዋጋ ይጠቀማሉ. በጣም የተለመዱት ቁልፍ ቃላት፡ ጥቁር፣ ነጭ፣ ቀይ፣ አረንጓዴ፣ ሰማያዊ፣ ወዘተ.

የጽሑፍ ቀለም - ቀይ

የአለም አቀፍ ድር ኮንሰርቲየም (W3C) መስፈርት በጣም ተወዳጅ ቀለሞች፡-

የተለያየ ቀለም ስሞችን የመጠቀም ምሳሌ፡-

ምሳሌ፡ አንድን ቀለም በስሙ መግለጽ

• እራስዎ ይሞክሩት »

ራስጌ በቀይ ዳራ ላይ

ራስጌ በብርቱካናማ ጀርባ ላይ

በኖራ ዳራ ላይ በማምራት ላይ

በሰማያዊ ጀርባ ላይ ነጭ ጽሑፍ

ራስጌ በቀይ ዳራ ላይ

ራስጌ በብርቱካናማ ጀርባ ላይ

በኖራ ዳራ ላይ በማምራት ላይ

በሰማያዊ ጀርባ ላይ ነጭ ጽሑፍ

RGB በመጠቀም ቀለም መግለጽ

በሞኒተር ላይ የተለያዩ ቀለሞችን በሚያሳዩበት ጊዜ የ RGB ቤተ-ስዕል እንደ መሰረት ይጠቀማል. ማንኛውም ቀለም የሚገኘው ሶስት መሰረታዊ ነገሮችን በማቀላቀል ነው. አር - ቀይ, ጂ - አረንጓዴ, ቢ - ሰማያዊ. የእያንዳንዱ ቀለም ብሩህነት በአንድ ባይት የሚሰጥ ስለሆነ ከ0 እስከ 255 እሴቶችን ሊወስድ ይችላል። ለምሳሌ፣ RGB(255,0,0) ቀይ ሆኖ ይታያል ምክንያቱም ቀይ ወደ ከፍተኛ ዋጋው (255) እና ቀሪው ወደ 0 ተቀናብሯል እንዲሁም ቀለሙን እንደ መቶኛ ማዘጋጀት ይችላሉ። እያንዳንዱ ግቤት የሚዛመደውን ቀለም ብሩህነት ደረጃ ያሳያል። ለምሳሌ: እሴቶቹ rgb (127, 255, 127) እና rgb (50%, 100%, 50%) መካከለኛ ሙሌት ተመሳሳይ አረንጓዴ ቀለም ያስቀምጣሉ.

ምሳሌ፡ RGB በመጠቀም ቀለም መግለጽ

• እራስዎ ይሞክሩት »

አርጂቢ (127, 255, 127)

rgb(50%፣ 100%፣ 50%)

አርጂቢ (127, 255, 127)

rgb(50%፣ 100%፣ 50%)

ቀለም በሄክሳዴሲማል እሴት አዘጋጅ

እሴቶች አር ጂ ለእንዲሁም ሄክሳዴሲማል (HEX) የቀለም እሴቶችን በቅጹ በመጠቀም ሊገለጽ ይችላል፡ #RRGGBB RR (ቀይ)፣ ጂጂ (አረንጓዴ) እና BB (ሰማያዊ) ሄክሳዴሲማል ከ 00 እስከ FF (ከአስርዮሽ 0-255 ጋር ተመሳሳይ ነው) ) . ሄክሳዴሲማል ከአስርዮሽ ስርዓት በተለየ መልኩ ስሙ እንደሚያመለክተው በቁጥር 16 ላይ የተመሰረተ ነው። A, B, C, D, E, F. እዚህ ከ 10 እስከ 15 ያሉት ቁጥሮች በላቲን ፊደላት ተተክተዋል. በሄክሳዴሲማል ስርዓት ውስጥ ከ15 በላይ ቁጥሮች የሚወከሉት ሁለት ቁምፊዎችን ወደ አንድ እሴት በማጣመር ነው። ለምሳሌ፣ በአስርዮሽ ውስጥ ያለው ከፍተኛው ቁጥር 255 በሄክሳዴሲማል ካለው ከፍተኛው የኤፍኤፍ እሴት ጋር ይዛመዳል። እንደ አስርዮሽ ስርዓት፣ ሄክሳዴሲማል ቁጥር በሃሽ ምልክት ይቀድማል። # ለምሳሌ #FF0000 ቀይ ሆኖ ይታያል ምክንያቱም ቀይ ወደ ከፍተኛ እሴቱ (ኤፍኤፍ) እና የተቀሩት ቀለሞች ዝቅተኛ እሴታቸው (00) ላይ ተቀምጠዋል. ከሃሽ ምልክት በኋላ ምልክቶች # ሁለቱንም አቢይ ሆሄያት እና ትንሽ ሆሄ መተየብ ትችላለህ። የሄክሳዴሲማል ስርዓት #rgb የሚለውን አህጽሮተ ቃል እንድትጠቀም ይፈቅድልሃል፣እያንዳንዱ ቁምፊ ከእጥፍ ጋር እኩል ነው። ስለዚህ፣ የ#f7O መግቢያ እንደ #ff7700 መቆጠር አለበት።

ምሳሌ፡- HEX ቀለም

• እራስዎ ይሞክሩት »

ቀይ፡ #ኤፍኤፍ0000

አረንጓዴ: # 00FF00

ሰማያዊ፡ # 0000FF

ቀይ፡ #ኤፍኤፍ0000

አረንጓዴ: # 00FF00

ሰማያዊ: # 0000FF

ቀይ+አረንጓዴ=ቢጫ፡ #FFFF00

ቀይ+ሰማያዊ=ሐምራዊ፡ #FF00FF

አረንጓዴ+ሰማያዊ=ሳይያን፡ #00FFFF

የተለመዱ ቀለሞች ዝርዝር (ስም ፣ HEX እና RGB)

የቀለም ኮዶች (ዳራ) በሙሌት እና በቀለም።