ყავისფერი ფერის rgb კოდი. HTML გაკვეთილი. RGB ფერები. უსაფრთხო პალიტრა ფერები

12.08.2019

ვლად მერჟევიჩი

HTML-ში ფერი მითითებულია ორიდან ერთი გზით: თექვსმეტობითი კოდის გამოყენებით და გარკვეული ფერების სახელით. თექვსმეტობით რიცხვთა სისტემაზე დაფუძნებული მეთოდი უპირატესად გამოიყენება, რადგან ის ყველაზე უნივერსალურია.

თექვსმეტობითი ფერები

HTML იყენებს თექვსმეტობით ციფრებს ფერების დასაზუსტებლად. თექვსმეტობითი სისტემა, განსხვავებით ათობითი სისტემისგან, ეფუძნება, როგორც მისი სახელიდან ჩანს, რიცხვი 16. რიცხვები იქნება შემდეგი: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. რიცხვები 10-დან 15-მდე იცვლება ლათინური ასოებით. მაგიდაზე 6.1 გვიჩვენებს შესაბამისობას ათობითი და თექვსმეტობით რიცხვებს შორის.

თექვსმეტობით სისტემაში 15-ზე მეტი რიცხვები იქმნება ორი რიცხვის ერთში გაერთიანებით (ცხრილი 6.2). მაგალითად, რიცხვი 255 ათწილადში შეესაბამება რიცხვს FF თექვსმეტობით.

რიცხვების სისტემის განსაზღვრისას დაბნეულობის თავიდან ასაცილებლად, თექვსმეტობით რიცხვს წინ უძღვის ჰეშის სიმბოლო #, მაგალითად, #aa69cc. ამ შემთხვევაში საქმეს მნიშვნელობა არ აქვს, ამიტომ დასაშვებია #F0F0F0 ან #f0f0f0 ჩაწერა.

HTML-ში გამოყენებული ტიპიური ფერი ასე გამოიყურება.

აქ ვებგვერდის ფონის ფერი დაყენებულია #FA8E47. ჰეშის სიმბოლო # რიცხვის წინ ნიშნავს, რომ ის არის თექვსმეტობითი. პირველი ორი ციფრი (FA) განსაზღვრავს ფერის წითელ კომპონენტს, მესამედან მეოთხე ციფრით (8E) განსაზღვრავს მწვანე კომპონენტს, ხოლო ბოლო ორი ციფრი (47) განსაზღვრავს ლურჯ კომპონენტს. საბოლოო შედეგი იქნება ეს ფერი.

ფ.ა.

FA8E47

სამი ფერიდან თითოეულს - წითელს, მწვანეს და ლურჯს - შეუძლია მიიღოს მნიშვნელობები 00-დან FF-მდე, რის შედეგადაც სულ 256 ჩრდილია. ამრიგად, ფერების საერთო რაოდენობა შეიძლება იყოს 256x256x256 = 16,777,216 კომბინაცია. წითელ, მწვანე და ლურჯ კომპონენტებზე დაფუძნებულ ფერთა მოდელს ეწოდება RGB (წითელი, მწვანე, ლურჯი; წითელი, მწვანე, ლურჯი). ეს მოდელი არის დანამატი (დან დამატება - დამატება), რომელშიც სამივე კომპონენტის დამატება ქმნის თეთრ ფერს.

თექვსმეტობითი ფერების ნავიგაციის გასაადვილებლად, გაითვალისწინეთ რამდენიმე წესი.

თუ ფერის კომპონენტების მნიშვნელობები იგივეა (მაგალითად: #D6D6D6), მაშინ შედეგი იქნება ნაცრისფერი ელფერი. რაც უფრო მაღალია რიცხვი, მით უფრო ღიაა ფერი, მნიშვნელობებით მერყეობს #000000 (შავი)-დან #FFFFFF-მდე (თეთრი).
კაშკაშა წითელი ფერი იქმნება, თუ წითელი კომპონენტი გაკეთდება მაქსიმუმ (FF) და დარჩენილი კომპონენტები დაყენებულია ნულზე. ფერი, რომლის ღირებულებაა #FF0000, არის წითელის ყველაზე წითელი შესაძლო ელფერი. იგივე ეხება მწვანეს (#00FF00) და ლურჯს (#0000FF).
ყვითელი (#FFFF00) მზადდება წითელი და მწვანე შერევით. ეს აშკარად ჩანს ფერის ბორბალზე (ნახ. 6.1), რომელიც წარმოადგენს ძირითად ფერებს (წითელი, მწვანე, ლურჯი) და დამატებითი ან დამატებითი ფერები. მათ შორისაა ყვითელი, ცისფერი და იისფერი (ასევე უწოდებენ მაგენტას). ზოგადად, ნებისმიერი ფერის მიღება შესაძლებელია მასთან ახლოს ფერების შერევით. ამრიგად, ციანი (#00FFFF) მიიღება ლურჯი და მწვანე კომბინაციით.

ბრინჯი. 6.1. ფერადი წრე

თექვსმეტობით მნიშვნელობებზე დაფუძნებული ფერები არ უნდა იყოს ემპირიულად შერჩეული. ამ მიზნით, შესაფერისია გრაფიკული რედაქტორი, რომელსაც შეუძლია იმუშაოს სხვადასხვა ფერის მოდელებთან, მაგალითად, Adobe Photoshop. ნახ. ნახაზი 6.2 გვიჩვენებს ამ პროგრამაში ფერის არჩევის ფანჯარას მიმდინარე ფერის თექვსმეტობითი მნიშვნელობა გამოსახულია ხაზით. შეგიძლიათ დააკოპიროთ და ჩასვათ თქვენს კოდში.

ბრინჯი. 6.2. ფანჯარა Photoshop-ში ფერების არჩევისთვის

ვებ ფერები

თუ მონიტორის ფერის გადაცემის ხარისხს დააყენებთ 8 ბიტზე (256 ფერი), მაშინ ერთი და იგივე ფერი შეიძლება განსხვავებულად იყოს ნაჩვენები სხვადასხვა ბრაუზერში. ეს განპირობებულია გრაფიკის ჩვენებით, როდესაც ბრაუზერი მუშაობს საკუთარი პალიტრით და ვერ აჩვენებს ფერს, რომელიც არ არის მის პალიტრაში. ამ შემთხვევაში ფერს ცვლის სხვა, მასთან ახლოს მყოფი ფერების პიქსელების კომბინაციით, რომლებიც მიბაძავს მოცემულს. იმის უზრუნველსაყოფად, რომ ფერი იგივე დარჩეს სხვადასხვა ბრაუზერში, დაინერგა ე.წ. ვებ ფერების პალიტრა. ვებ ფერები არის ის ფერები, რომლებისთვისაც თითოეული კომპონენტი - წითელი, მწვანე და ლურჯი - დაყენებულია ექვსი მნიშვნელობიდან ერთ-ერთზე - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). ამ კომპონენტის თექვსმეტობითი მნიშვნელობა მითითებულია ფრჩხილებში. ფერების საერთო რაოდენობა ყველა შესაძლო კომბინაციიდან იძლევა 6x6x6 - 216 ფერს. ვებ ფერის მაგალითია #33FF66.

ვებ ფერის მთავარი მახასიათებელი ის არის, რომ ის ყველა ბრაუზერში ერთნაირად ჩანს. ამ დროისთვის, ვებ ფერების აქტუალობა ძალიან მცირეა მონიტორების ხარისხის გაუმჯობესებისა და მათი შესაძლებლობების გაფართოების გამო.

ფერები სახელით

რიცხვების ნაკრების დამახსოვრების თავიდან ასაცილებლად, შეგიძლიათ გამოიყენოთ ხშირად გამოყენებული ფერების სახელები. მაგიდაზე 6.3 აჩვენებს პოპულარული ფერის სახელების სახელებს.

მაგიდა 6.3. ზოგიერთი ფერის სახელები

ფერის სახელი	აღწერა	თექვსმეტობითი მნიშვნელობა
შავი	შავი	#000000
ლურჯი	ლურჯი	#0000FF
ფუქსია	ღია იასამნისფერი	#FF00FF
ნაცრისფერი	Მუქი ნაცრისფერი	#808080
მწვანე	მწვანე	#008000
ცაცხვი	Ღია მწვანე	#00FF00
შავგვრემანი	Მუქი წითელი	#800000
საზღვაო	Მუქი ლურჯი	#000080
ზეთისხილის	ზეთისხილის	#808000
მეწამული	Მუქი იისფერი	#800080
წითელი	წითელი	#FF0000
ვერცხლი	Ღია ნაცრისფერი	#C0C0C0
ჩაისფერი	Ლურჯი მწვანე	#008080
თეთრი	თეთრი	#FFFFFF
ყვითელი	ყვითელი	#FFFF00

არ აქვს მნიშვნელობა ფერს მისი სახელით მიუთითებთ თუ თექვსმეტობითი რიცხვების გამოყენებით. ეს მეთოდები თანაბარია მათი ეფექტით. მაგალითი 6.1 გვიჩვენებს, თუ როგორ უნდა დააყენოთ ვებ გვერდის ფონის და ტექსტის ფერები.

მაგალითი 6.1. ფონის და ტექსტის ფერი

Ფერები

ტექსტის მაგალითი

ამ მაგალითში, ფონის ფერი დაყენებულია ტეგის bgcolor ატრიბუტის გამოყენებით , და ტექსტის ფერი ტექსტის ატრიბუტის მეშვეობით. მრავალფეროვნებისთვის, ტექსტის ატრიბუტი დაყენებულია თექვსმეტობით რიცხვზე, ხოლო bgcolor ატრიბუტი დაყენებულია დაჯავშნულ საკვანძო სიტყვაზე teal .

ყურადღებით დააკვირდით ნახატს. ჩამოსაშლელი ფანჯრის ფონი გამჭვირვალე ხდება. ეს საკმაოდ გავრცელებული დიზაინის ტექნიკაა. მოდით ვიფიქროთ იმაზე, თუ როგორ შეიძლება ეს განხორციელდეს.

დავალება

გახადეთ ფერადი ჯვარედინი ბრაუზერი გამჭვირვალე.

გამოსავალი

პირველი აზრი ამ სიტუაციაში არის png24 გამოსახულების გამოყენება წინასწარ დაყენებული გამჭვირვალობით ფონისთვის. მაგრამ ეს სურათი სრულიად არასაჭიროა. ამის გარეშეც შეგიძლიათ კარგად გააკეთოთ (და, შესაბამისად, სერვერზე დამატებითი მოთხოვნის გარეშე). მოდით მაინც ვეცადოთ ვიპოვოთ ოპტიმალური გადაწყვეტა.

მეორე აზრი არის გამოყენება. მაგრამ ამ შემთხვევაში ეს არ არის ძალიან მოსახერხებელი. ყოველივე ამის შემდეგ, მაშინ არა მხოლოდ ფონი, არამედ წარწერებიც გამჭვირვალე გახდება. დიახ, სინამდვილეში, მთელი ფანჯარა ერთდროულად.

რა თქმა უნდა, შეგიძლიათ სცადოთ დამატებითი კონტეინერის დამატება და მხოლოდ მასზე გამჭვირვალობის გამოყენება, მაგრამ ეს HTML ელემენტი განკუთვნილი იქნება მხოლოდ დეკორაციისთვის და აშკარად ზედმეტი იქნება. შესაძლებელია ამის გარეშე?

Რა თქმა უნდა შეგიძლიათ! თუ იყენებთ RGBA.

RGBA ფერის აღწერის ფორმატი

CSS3 საშუალებას გაძლევთ მიუთითოთ ფერი RGB და RGBA ფუნქციების გამოყენებით. ამ შემთხვევაში, ჩვენ უნდა მივუთითოთ თითოეული ფერის კომპონენტის პროპორცია, რომლისთვისაც არის გამოყოფილი ერთი ბაიტი (0-დან 255-მდე, თუ ვინმემ არ იცის).

ამ შემთხვევის სინტაქსი ძალიან მარტივია:

ფონი: rgb(0, 255, 0); /* სუფთა მწვანე */

RGBA-სთვის ემატება მეოთხე პარამეტრი - ალფა გამჭვირვალობა (0-დან 1-მდე).

ფონი: rgba(255, 0, 0, 0.5); /* სუფთა წითელი 50% გამჭვირვალობით */

აი, ეს არის ჩვენი პრობლემის გადაწყვეტა. უბრალოდ დააყენეთ ფონის ფერი rgba-ს გამოყენებით და ყველაფერი ისე გამოიყურება, როგორც ჩვენ გვინდა. ზედმეტი სურათებისა და ელემენტების გარეშე!

სად შემიძლია ამ ნომრების მიღება?

თქვენ შეგიძლიათ შეხედოთ ფერის კომპონენტებს Photoshop's eyedropper ინსტრუმენტის გამოყენებით.

ბრაუზერის ჯვარედინი თავსებადობის შესახებ

ვინაიდან RGB ფუნქცია ბევრად უფრო ძველია ვიდრე RGBA და არსებობს CSS2 სტანდარტის დღიდან, უძველესი ბრაუზერებისგან დასაცავად, შეგიძლიათ გამოიყენოთ შემდეგი დუბლიკატი კონსტრუქცია:

SomeBlock (ფონი: rgb(255, 0, 0); ფონი: rgba (255, 0, 0, 0.5); )

ამ მიდგომით, თანამედროვე ბრაუზერების ბაბუებს არ ექნებათ გამჭვირვალეობა, მაგრამ თავად ფერი დარჩება სწორი.

ცალკე მოგიწევთ IE-ზე ზრუნვა. ვირებს არ ესმით RGBA მე-8 ვერსიის ჩათვლით.

როგორც ყოველთვის: მიწა გლეხებისთვის, ქარხნები მუშებისთვის და ვირები ყავარჯენი! როგორც .

რა თქმა უნდა, საბრძოლო პირობებში ჩვენ ამ წესს ვდებთ ცალკე CSS-ში, რომელსაც ვაკავშირებთ.

SomeBlock (ფონი: გამჭვირვალე; ფილტრი:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); მასშტაბირება: 1;)

ხრიკი იმაში მდგომარეობს, რომ მიუთითოთ საწყისი და დასასრული ფერები, როგორც ერთნაირი (ff0000 - წითელი) და ისარგებლოთ იმით, რომ შეგიძლიათ დააყენოთ ალფა არხი გრადიენტისთვის ამ ფილტრში (მაგალითში, მნიშვნელობა არის 80).

ცნობისთვის: ფილტრი იყენებს თექვსმეტობით სისტემას და სრულიად გაუმჭვირვალე ფერის კოდი არის FF (ათწილადში ეს არის 255). შესაბამისად, თექვსმეტობითი 80 არის ათობითი 128, ანუ 50% გამჭვირვალობა.

ტესტირებულია:

IE 6-9
Firefox 3+
ოპერა 10+
Safari 4
Chrome

ფერის კოდები CSS-ში გამოიყენება ფერების დასაზუსტებლად. როგორც წესი, ფერის კოდები ან ფერის მნიშვნელობები გამოიყენება ელემენტის წინა პლანზე ფერის დასაყენებლად (მაგ. ტექსტის ფერი, ბმულის ფერი) ან ელემენტის ფონის ფერი (ფონის ფერი, ბლოკის ფერი). ისინი ასევე შეიძლება გამოყენებულ იქნას ღილაკის, საზღვრის, მარკერის, ჰოვერის და სხვა დეკორატიული ეფექტების ფერის შესაცვლელად.

თქვენ შეგიძლიათ მიუთითოთ თქვენი ფერის მნიშვნელობები სხვადასხვა ფორმატში. შემდეგი ცხრილი ჩამოთვლის ყველა შესაძლო ფორმატს:

ჩამოთვლილი ფორმატები უფრო დეტალურად არის აღწერილი ქვემოთ.

CSS ფერები - Hex კოდები

თექვსმეტობითი ფერის კოდიარის ფერის ექვსციფრიანი გამოსახულება. პირველი ორი ციფრი (RR) წარმოადგენს წითელ მნიშვნელობას, შემდეგი ორი წარმოადგენს მწვანე მნიშვნელობას (GG), ხოლო ბოლო ორი წარმოადგენს ლურჯ მნიშვნელობას (BB).

CSS ფერები - მოკლე Hex კოდები

მოკლე თექვსმეტობითი ფერის კოდიარის ექვსსიმბოლოიანი აღნიშვნის მოკლე ფორმა. ამ ფორმატში, თითოეული ციფრი მეორდება ექვივალენტური ექვსნიშნა ფერის მნიშვნელობის მისაღებად. მაგალითად: #0F0 ხდება #00FF00.

თექვსმეტობითი მნიშვნელობა შეიძლება იქნას მიღებული ნებისმიერი გრაფიკული პროგრამული უზრუნველყოფიდან, როგორიცაა Adobe Photoshop, Core Draw და ა.შ.

CSS-ში თითოეულ თექვსმეტობითი ფერის კოდს წინ უძღვის ჰეშის ნიშანი "#". ქვემოთ მოცემულია თექვსმეტობითი აღნიშვნების გამოყენების მაგალითები.

CSS ფერები - RGB მნიშვნელობები

RGB ღირებულებაარის ფერის კოდი, რომელიც დაყენებულია rgb() თვისების გამოყენებით. ეს თვისება იღებს სამ მნიშვნელობას: თითო წითელი, მწვანე და ლურჯი. მნიშვნელობა შეიძლება იყოს მთელი რიცხვი, 0-დან 255-მდე, ან პროცენტი.

Შენიშვნა:ყველა ბრაუზერი არ უჭერს მხარს rgb() ფერის თვისებას, ამიტომ არ არის რეკომენდებული მისი გამოყენება.

ქვემოთ მოცემულია მაგალითი, რომელიც აჩვენებს მრავალ ფერს RGB მნიშვნელობების გამოყენებით.

ფერის კოდის გენერატორი

თქვენ შეგიძლიათ შექმნათ მილიონობით ფერის კოდი ჩვენი სერვისის გამოყენებით.

ბრაუზერის უსაფრთხო ფერები

ქვემოთ მოცემულია 216 ფერის ცხრილი, რომლებიც ყველაზე უსაფრთხო და კომპიუტერისგან დამოუკიდებელია. ეს ფერები CSS-ში მერყეობს 000000-დან FFFFFF თექვსმეტობით კოდამდე. მათი გამოყენება უსაფრთხოა, რადგან ისინი უზრუნველყოფენ, რომ ყველა კომპიუტერი სწორად აჩვენებს ფერს 256 ფერთა პალიტრასთან მუშაობისას.

"უსაფრთხო" ფერების ცხრილი CSS-ში
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	#99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	#99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

თექვსმეტობითი რიცხვები გამოიყენება ფერების დასაზუსტებლად. თექვსმეტობითი სისტემა, განსხვავებით ათობითი სისტემისგან, ეფუძნება, როგორც მისი სახელიდან ჩანს, რიცხვი 16. რიცხვები იქნება შემდეგი: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. რიცხვები 10-დან 15-მდე იცვლება ლათინური ასოებით. თექვსმეტობით სისტემაში 15-ზე მეტი რიცხვები იქმნება ორი რიცხვის ერთში გაერთიანებით. მაგალითად, რიცხვი 255 ათწილადში შეესაბამება რიცხვს FF თექვსმეტობით. რიცხვების სისტემის განსაზღვრისას დაბნეულობის თავიდან ასაცილებლად, ჰეშის სიმბოლო # მოთავსებულია თექვსმეტობით რიცხვამდე, მაგალითად #666999. სამი ფერიდან თითოეულს - წითელ, მწვანე და ლურჯი - შეუძლია მიიღოს მნიშვნელობები 00-დან FF-მდე. ამრიგად, ფერის სიმბოლო დაყოფილია სამ კომპონენტად #rrggbb, სადაც პირველი ორი სიმბოლო მიუთითებს ფერის წითელ კომპონენტზე, შუა ორი - მწვანე, ხოლო ბოლო ორი - ლურჯი. ნებადართულია შემოკლებული ფორმის #rgb გამოყენება, სადაც თითოეული სიმბოლო უნდა გაორმაგდეს. ამრიგად, ჩანაწერი #fe0 უნდა ჩაითვალოს როგორც #ffee00.

Სახელით

Internet Explorer	Chrome	ოპერა	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

ბრაუზერები მხარს უჭერენ ზოგიერთ ფერს მათი სახელით. მაგიდაზე 1 აჩვენებს სახელებს, თექვსმეტობით კოდს, RGB, HSL მნიშვნელობებს და აღწერას.

მაგიდა 1. ფერების სახელები

სახელი	კოდი	RGB	HSL	აღწერა
თეთრი	#ffffff ან #fff	rgb(255,255,255)	hsl(0.0%,100%)	თეთრი
ვერცხლი	#c0c0c0	rgb(192,192,192)	hsl(0.0%,75%)	რუხი
ნაცრისფერი	#808080	rgb(128,128,128)	hsl(0.0%,50%)	Მუქი ნაცრისფერი
შავი	#000000 ან #000	rgb(0,0,0)	hsl(0.0%,0%)	შავი
შავგვრემანი	#800000	rgb(128,0,0)	hsl(0.100%,25%)	Მუქი წითელი
წითელი	#ff0000 ან #f00	rgb(255,0,0)	hsl(0,100%,50%)	წითელი
ფორთოხალი	#ffa500	rgb(255,165,0)	hsl(38.8,100%,50%)	ნარინჯისფერი
ყვითელი	#ffff00 ან #ff0	rgb(255,255,0)	hsl(60,100%,50%)	ყვითელი
ზეთისხილის	#808000	rgb(128,128,0)	hsl(60,100%,25%)	ზეთისხილის
ცაცხვი	#00ff00 ან #0f0	rgb(0,255,0)	hsl(120,100%,50%)	Ღია მწვანე
მწვანე	#008000	rgb(0,128,0)	hsl(120,100%,25%)	მწვანე
აკვა	#00ffff ან #0ff	rgb(0,255,255)	hsl(180,100%,50%)	ლურჯი
ლურჯი	#0000ff ან #00f	rgb(0,0,255)	hsl(240,100%,50%)	ლურჯი
საზღვაო	#000080	rgb(0,0,128)	hsl(240,100%,25%)	Მუქი ლურჯი
ჩაისფერი	#008080	rgb(0,128,128)	hsl(180,100%,25%)	Ლურჯი მწვანე
ფუქსია	#ff00ff ან #f0f	rgb(255,0,255)	hsl(300,100%,50%)	ვარდისფერი
მეწამული	#800080	rgb(128,0,128)	hsl(300,100%, 25%)	იისფერი

RGB-ის გამოყენება

Internet Explorer	Chrome	ოპერა	Safari	Firefox	Android	iOS
5.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

თქვენ შეგიძლიათ განსაზღვროთ ფერი წითელი, მწვანე და ლურჯი მნიშვნელობების გამოყენებით ათობითი თვალსაზრისით. სამი ფერის კომპონენტიდან თითოეული იღებს მნიშვნელობას 0-დან 255-მდე. ასევე დასაშვებია ფერის მითითება პროცენტულად, 100% შეესაბამება რიცხვს 255. ჯერ მიუთითეთ rgb საკვანძო სიტყვა და შემდეგ მიუთითეთ ფერის კომპონენტები ფრჩხილებში. , გამოყოფილი მძიმეებით, მაგალითად rgb(255 , 128, 128) ან rgb(100%, 50%, 50%).

RGBA

Internet Explorer	Chrome	ოპერა	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

RGBA ფორმატი სინტაქსით RGB-ის მსგავსია, მაგრამ მოიცავს ალფა არხს, რომელიც განსაზღვრავს ელემენტის გამჭვირვალობას. მნიშვნელობა 0 არის სრულად გამჭვირვალე, 1 არის გაუმჭვირვალე და შუალედური მნიშვნელობა, როგორიცაა 0.5, არის ნახევრად გამჭვირვალე.

RGBA დაემატა CSS3-ს, ამიტომ CSS კოდი უნდა იყოს დამოწმებული ამ ვერსიის მიხედვით. უნდა აღინიშნოს, რომ CSS3 სტანდარტი ჯერ კიდევ დამუშავების პროცესშია და ზოგიერთი ფუნქცია შეიძლება შეიცვალოს. მაგალითად, ფერი RGB ფორმატში, რომელიც დაემატა ფონის ფერის თვისებას, დამოწმებულია, მაგრამ ფონის თვისებაზე დამატებული ფერი აღარ არის მოქმედი. ამავდროულად, ბრაუზერებს საკმაოდ სწორად ესმით ფერი ორივე თვისებისთვის.

HSL

Internet Explorer	Chrome	ოპერა	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.0+	2.1+	2.0+

HSL ფორმატის სახელწოდება მომდინარეობს პირველი ასოების Hue (hue), Saturate (გაჯერება) და Lightness (სიმსუბუქე) კომბინაციიდან. Hue არის ფერის მნიშვნელობა ფერის ბორბალზე (ნახ. 1) და მოცემულია გრადუსებში. 0° შეესაბამება წითელს, 120° მწვანეს და 240° ლურჯს. შეფერილობის მნიშვნელობა შეიძლება განსხვავდებოდეს 0-დან 359-მდე.

ბრინჯი. 1. ფერადი ბორბალი

გაჯერება არის ფერის ინტენსივობა და იზომება პროცენტულად 0%-დან 100%-მდე. მნიშვნელობა 0% მიუთითებს ფერის არარსებობაზე და ნაცრისფერი ელფერით, 100% არის მაქსიმალური მნიშვნელობა გაჯერებისთვის.

სიმსუბუქე განსაზღვრავს რამდენად ნათელია ფერი და მითითებულია პროცენტულად 0%-დან 100%-მდე. დაბალი მნიშვნელობები ფერს უფრო მუქს ხდის, ხოლო მაღალი მნიშვნელობები ფერს ნათელს ხდის 0% და 100% შავ-თეთრს;

HSLA

Internet Explorer	Chrome	ოპერა	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

HSLA ფორმატი სინტაქსით მსგავსია HSL-ს, მაგრამ შეიცავს ალფა არხს ელემენტის გამჭვირვალობის დასაზუსტებლად. მნიშვნელობა 0 არის სრულად გამჭვირვალე, 1 არის გაუმჭვირვალე და შუალედური მნიშვნელობა, როგორიცაა 0.5, არის ნახევრად გამჭვირვალე.

RGBA, HSL და HSLA ფერის მნიშვნელობები ემატება CSS3-ს, ამიტომ გთხოვთ, შეამოწმოთ თქვენი კოდი ვერსიის მოქმედებისთვის ამ ფორმატების გამოყენებისას.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Ფერები

გაფრთხილება

საიტზე ჩამოთვლილი ლომის დაჭერის ყველა მეთოდი თეორიულია და დაფუძნებულია გამოთვლით მეთოდებზე. ავტორები არ იძლევიან გარანტიას თქვენს უსაფრთხოებაზე მათი გამოყენებისას და უარს ამბობენ შედეგებზე პასუხისმგებლობაზე. გახსოვდეთ, ლომი მტაცებელი და საშიში ცხოველია!

არრჰ!

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 2.

ბრინჯი. 2. ფერები ვებ გვერდზე

>> ფერების მართვა

თექვსმეტობითი RGB ფერის მნიშვნელობები

ფერის აღწერისა და დამუშავების მეთოდები განსხვავდება ერთმანეთისგან იმით, თუ რა საბოლოო წარმოდგენისთვისაა განკუთვნილი. მოდით შევადაროთ, მაგალითად, ფერების წარმოდგენა ბეჭდვისთვის და კომპიუტერის მონიტორებისთვის. პირველ შემთხვევაში, საფუძველია მიღებული თეთრიქაღალდის ფერი, რომელზეც შემდგომში გამოყენებულია სამი ძირითადი ფერი: ლურჯი, მეწამულიდა ყვითელი. ერთმანეთთან და ქაღალდის თეთრ ფერთან სხვადასხვა პროპორციით შერევით, ეს სამი ძირითადი ფერი იძლევა სხვადასხვა ფერის ჩრდილს, გარდა სუფთა შავისა, ან საღებავების სრული არარსებობის შემთხვევაში აძლევენ თეთრ ქაღალდს. თუ მათ შავ ფერს დავუმატებთ, მივიღებთ CMYK-ფერის გადაცემის მეთოდი, როდესაც საჭირო ფერი მიიღება თეთრს დაკარგული ფერების გამოკლებით.

მეორე შემთხვევაში, საფუძველია მიღებული შავიმონიტორის ეკრანის ფერი, რომლის თითოეული უჯრედი ანათებს სამიდან ერთ ფერში: წითელი-წითელი, მწვანე-მწვანე და ლურჯი- ლურჯი. შემდეგ, რაიმე ბზინვის სრული არარსებობის შემთხვევაში, ჩვენ ვიღებთ სუფთა შავი ეკრანის ფერს და ნებისმიერი საჭირო ფერი მოცემულია სამი ფერის თითოეული შეფარდებით. ამ შემთხვევაში მივიღებთ RGB- ფერის გადაცემის მეთოდი. პირველადი ფერები შეიძლება ჰქონდეს მნიშვნელობები დაწყებული 0 ადრე 255 , ან დან 0% ადრე 100% , ან შეიძლება წარმოდგენილი იყოს თექვსმეტობითი მნიშვნელობით. ქვემოთ მოცემულ ფიგურაში ხედავთ პირველადი ფერების შერევის შედეგებს.

თექვსმეტობით რიცხვთა სისტემა, ათწილადი რიცხვების სისტემისგან განსხვავებით, აქვს არა ათი ციფრი, არამედ თექვსმეტი - აქედან მოდის სახელი. შესაბამისად, შეიძლება იყოს მხოლოდ ორი ციფრის კომბინაციის არაგანმეორებადი ვარიანტები - 256 , რათა გავაგრძელოთ რიცხვების სერია შემდეგ 9 წერილები აადრე ფმაშასადამე, სერია ასე გამოიყურება -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

რიცხვების ერთი რიცხვითი სისტემიდან მეორეში გადასაყვანად და პირიქით, გამოიყენეთ ქვემოთ მოცემული კალკულატორი. მაქსიმალური მნიშვნელობა აქ შეიძლება იყოს FF - 255 .

ამ შემთხვევაში ფერი მითითებულია სამი თექვსმეტობითი რიცხვით, რომელთაგან თითოეული შედგება ორი ციფრისგან. პირველი რიცხვი განსაზღვრავს ინტენსივობას წითელიფერები, საშუალო - მწვანე, ბოლო რამ- ლურჯიფერები. ყველა რიცხვს შეუძლია მიიღოს მნიშვნელობები დიაპაზონში 00 ადრე FF(0-დან 255-მდე). მაგალითად: მწვანე ფერი მოცემულია როგორც #00FF00, წითელი - მსგავსი #FF0000, ლურჯი - მსგავსი #0000FF, თეთრი - მსგავსი #FFFFFF, ფერის ან შავის სრული არარსებობა მოცემულია როგორც #000000 .

ქვემოთ მოცემულ ფორმაში შეგიძლიათ მიუთითოთ ნებისმიერი თექვსმეტობითი მნიშვნელობები სამივე ფერისთვის და ნახოთ მათი შერევის შედეგი გამომავალი ველზე დაწკაპუნებით.

ზოგიერთი თექვსმეტობითი RGB ფერის მნიშვნელობის მაგალითები: წითელი, ლურჯი და მწვანე გრადაციები.

ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

ფერის მითითება სიმებიანი ლიტერალის გამოყენებით

გამოყენების სიმარტივის მიზნით, ზოგიერთ ფერს და მათ კომბინაციებს მიენიჭა სახელები, რომლებიც აღიარებულია ყველა ბრაუზერის მიერ და შესაძლებელი გახდა მრავალი მათგანის დასახელება. ქვემოთ მოყვანილი ცხრილი გვიჩვენებს ზოგიერთი ფერის სახელს:

ხედი	სახელი	ხედი	სახელი	ხედი	სახელი	ხედი	სახელი
	თეთრი		წითელი		ნარინჯისფერი		ყვითელი
	მწვანე		ლურჯი		მეწამული		შავი
	ალისბლუი		ანტიკვარული თეთრი		აკვა		აკვამარინი
	ცისფერი		კრემისფერი		ბისკვიტი		ბლანშედამონდი
	ლურჯი იისფერი		ყავისფერი		ბურლივუდი		კადეტბლუი
	ჩარტრეუზი		შოკოლადი		მარჯანი		სიმინდისფერი ლურჯი
	სიმინდის აბრეშუმი		ჟოლოსფერი		ციანი		Მუქი ლურჯი
	ბნელი		ბნელი ოქროსფერი		Მუქი ნაცრისფერი		Მუქი მწვანე
	დარხხაკი		Darkmagenta		მუქი მწვანე		მუქი ნარინჯისფერი
	დარკორჩიდი		Მუქი წითელი		მუქი ორაგული		მუქი ზღვისფერი
	მუქი ფირფიტა ლურჯი		მუქი ნაცრისფერი		მუქი ფირუზისფერი		მუქი იისფერი
	ღრმა პინკი		ღრმა ლურჯი		დიმგრეი		დოჯერბლუი
	ცეცხლგამძლე აგური		ყვავილოვანი თეთრი		ტყის მწვანე		ფუშჩია
	გეინსბორო		აჩრდილი		ოქრო		გოლდენროდი
	რუხი		მწვანე ყვითელი		თაფლისფერი		Ვარდისფერი
	ინდური		ინდიგო		სპილოს ძვლისფერი		ხაკი
	ლავანდა		ლავანდისფერი		ლიმონჩიფონი		Ცისფერი
	ლაითკორალი		ლაითციანი		ღია როდი ყვითელი		Ღია მწვანე
	Ღია ნაცრისფერი		Ღია ვარდისფერი		ორაგული		ღია ზღვისფერი
	ღია ცისფერი		ნაცრისფერი ნაცრისფერი		ღია ცისფერი		Ღია ყვითელი
	ცაცხვი		Მწვანე		თეთრეული		მაგენტა
	მარუნი		საშუალო აქვამარინი		საშუალო ლურჯი		საშუალო ორქიდეა
	საშუალო მეწამული		საშუალო ზღვის მწვანე		საშუალო ფირფიტა ლურჯი		საშუალო გაზაფხულის მწვანე
	საშუალო ფირუზისფერი		საშუალო იისფერი		შუაღამის ლურჯი		პიტნის კრემი
	მისტიროზა		ნავახო თეთრი		საზღვაო ძალები		ოლდლეისი
	ზეთისხილის		ოლივერაბი		ნარინჯისფერი		ორქიდეა
	პალეგოლდენროდი		Ღია მწვანე		პალიტრა ფირუზი		პალეიისფერი
	პაპაიაჰაპი		ატამი		პერუს		ვარდისფერი
	ქლიავი		ფხვნილი ლურჯი		როზიბრაუნი		სამეფო ლურჯი
	უნაგირისფერი		ზღვის მწვანე		ზღვის ნაჭუჭი		სიენა
	ვერცხლი		ცისფერი		ფიქალისფერი		სლატეგრეი
	თოვლი		Springgreen		ფოლადის ლურჯი		თან
	ჩაისფერი		ეკალი		Პომიდორი		ფირუზისფერი
	იისფერი		ხორბალი		Whitesmoke		Ყვითელი მწვანე

ფერთა სახელებით მცირე ასოების სია საკმაოდ ვრცელია და საკმარისზე მეტია. თუ თქვენ გჭირდებათ ფონის ფერის დაყენება, რომელიც იმდენად უჩვეულოა, რომ მას სახელიც კი არ აქვს, შეგიძლიათ გამოიყენოთ თექვსმეტობითი მნიშვნელობა.

უსაფრთხო ფერის პალიტრის გამოყენება

სამწუხაროდ, სხვადასხვა პლატფორმებზე, სხვადასხვა სისტემის პარამეტრებით, სწორი ფერის რეპროდუქცია პრობლემაა. საქმე იმაშია, რომ ბრაუზერი ყოველთვის ცდილობს შეცვალოს დოკუმენტის ფერთა პალიტრა სისტემის პარამეტრებსა და მონიტორის შესაძლებლობებზე, ფერების დამოუკიდებლად შერევით და მათი ჩანაცვლებით. შედეგად, ზოგჯერ მომხმარებელი ვერ ხედავს ზუსტად იმას, რისი ჩვენებაც სურდა ვებმასტერს. ამ სიტუაციიდან გამოსავალი იქნა ნაპოვნი პალიტრის გამოყენებაში, რომლის თითოეული ფერი გარანტირებულია თანაბრად გამოსახული ყველა ბრაუზერის მიერ სხვადასხვა პლატფორმაზე. ეს არის ე.წ გარანტირებულიპალიტრა, ასევე ე.წ უსაფრთხოპალიტრა. ეს პალიტრა მოიცავს ფერებს, რომელთა ფერის კომპონენტები იღებენ შემდეგ მნიშვნელობებს: 00 ,33 ,66 ,99 , CC,FF, ყველა შესაძლო გზით 216 მათი კომბინაციები.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699 0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000 FF 0000cc 0033CC 000033 3333FF 3300 FF 3300cc 3333CC 000099 000066 9999CC 6666FF 6666CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF 6600cc 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF 660099 663366 CC66FF CC33FF CC00FF 9900cc 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი	ხედი	კოდი

წითელი		მწვანე		ლურჯი
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f

...დააკლიკე აქ