ნაცრისფერი rgb ფერი. HTML გაკვეთილი. RGB ფერები. უსაფრთხო პალიტრა ფერები
ყურადღებით დააკვირდით ნახატს. ჩამოსაშლელი ფანჯრის ფონი გამჭვირვალე ხდება. ეს საკმაოდ გავრცელებული დიზაინის ტექნიკაა. მოდით ვიფიქროთ იმაზე, თუ როგორ შეიძლება ეს განხორციელდეს.
დავალება
გახადეთ ფერადი ჯვარედინი ბრაუზერი გამჭვირვალე.
გამოსავალი
პირველი აზრი ამ სიტუაციაში არის 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
ვლად მერჟევიჩი
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) განსაზღვრავს ლურჯ კომპონენტს. საბოლოო შედეგი იქნება ეს ფერი.
| ფ.ა. | + | 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 აჩვენებს პოპულარული ფერის სახელების სახელებს.
| ფერის სახელი | ფერი | აღწერა | თექვსმეტობითი მნიშვნელობა |
|---|---|---|---|
| შავი | შავი | #000000 | |
| ლურჯი | ლურჯი | #0000FF | |
| ფუქსია | ღია იასამნისფერი | #FF00FF | |
| ნაცრისფერი | Მუქი ნაცრისფერი | #808080 | |
| მწვანე | მწვანე | #008000 | |
| ცაცხვი | Ღია მწვანე | #00FF00 | |
| შავგვრემანი | Მუქი წითელი | #800000 | |
| საზღვაო | Მუქი ლურჯი | #000080 | |
| ზეთისხილის | ზეთისხილი | #808000 | |
| მეწამული | Მუქი იისფერი | #800080 | |
| წითელი | წითელი | #FF0000 | |
| ვერცხლი | Ღია ნაცრისფერი | #C0C0C0 | |
| ჩაისფერი | Ლურჯი მწვანე | #008080 | |
| თეთრი | თეთრი | #FFFFFF | |
| ყვითელი | ყვითელი | #FFFF00 |
არ აქვს მნიშვნელობა ფერს მისი სახელით მიუთითებთ თუ თექვსმეტობითი რიცხვების გამოყენებით. ეს მეთოდები თანაბარია მათი ეფექტით. მაგალითი 6.1 გვიჩვენებს, თუ როგორ უნდა დააყენოთ ვებ გვერდის ფონის და ტექსტის ფერები.
მაგალითი 6.1. ფონის და ტექსტის ფერი
ტექსტის მაგალითი
ამ მაგალითში, ფონის ფერი დაყენებულია ტეგის bgcolor ატრიბუტის გამოყენებით
, და ტექსტის ფერი ტექსტის ატრიბუტის მეშვეობით. მრავალფეროვნებისთვის, ტექსტის ატრიბუტი დაყენებულია თექვსმეტობით რიცხვზე, ხოლო bgcolor ატრიბუტი დაყენებულია დაჯავშნულ საკვანძო სიტყვაზე teal .თექვსმეტობითი რიცხვები გამოიყენება ფერების დასაზუსტებლად. თექვსმეტობითი სისტემა, განსხვავებით ათობითი სისტემისგან, ეფუძნება, როგორც მისი სახელიდან ჩანს, რიცხვი 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 მნიშვნელობებს და აღწერას.
| სახელი | ფერი | კოდი | 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. ფერები ვებ გვერდზე
CSS-ში ფერის დაყენება შესაძლებელია სხვადასხვა გზით:
- სახელით,
- თექვსმეტობითი მნიშვნელობით,
- RGB და RGBA ფორმატებში,
- HSL და HSLA ფორმატებში.
დააყენეთ ფერი სახელის მიხედვით
ბრაუზერები მხარს უჭერენ ელემენტების ზოგიერთი ფერის მითითებას სახელით. ეს ცხრილი შეიცავს რამდენიმე საკვანძო სიტყვას (ინგლისური ფერის სახელები), რომლებიც გამოიყენება ფერის თვისებების, RGB კოდის, თექვსმეტობითი კოდის (HEX) და HSL კოდის დასაზუსტებლად.
| სახელი | ფერი | RGB | HEX | HSL | აღწერა |
|---|---|---|---|---|---|
| თეთრი | rgb(255, 255, 255) | #ffffff ან #fff | hsl(0, 0%, 100%) | თეთრი | |
| ვერცხლი | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | ნაცრისფერი | |
| ნაცრისფერი | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Მუქი ნაცრისფერი | |
| შავი | rgb(0, 0, 0) | #000000 ან #000 | hsl(0, 0%, 0%) | შავი | |
| შავგვრემანი | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Მუქი წითელი | |
| წითელი | rgb(255, 0, 0) | #ff0000 ან #f00 | hsl(0, 100%, 50%) | წითელი | |
| ფორთოხალი | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | ნარინჯისფერი | |
| ყვითელი | rgb(255, 255, 0) | #ffff00 ან #ff0 | hsl(60, 100%, 50%) | ყვითელი | |
| ზეთისხილის | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | ზეთისხილი | |
| ცაცხვი | rgb(0, 255, 0) | #00ff00 ან #0f0 | hsl(120, 100%, 50%) | Ღია მწვანე | |
| მწვანე | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | მწვანე | |
| აკვა | rgb(0, 255, 255) | #00ffff ან #0ff | hsl(180, 100%, 50%) | ლურჯი | |
| ლურჯი | rgb(0, 0, 255) | #0000ff ან #00f | hsl(240, 100%, 50%) | ლურჯი | |
| საზღვაო | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Მუქი ლურჯი | |
| ჩაისფერი | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Ლურჯი მწვანე | |
| ფუქსია | rgb(255, 0, 255) | #ff00ff ან #f0f | hsl(300, 100%, 50%) | ვარდისფერი | |
| მეწამული | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | იისფერი |
ეს არის ფერების სახელების გამოყენების მაგალითი, ფერების სახელები აღებულია გაფართოებული ცხრილიდან.
აი, როგორ მუშაობს ეს კოდი:
ფერის დაყენება RGB-ის გამოყენებით
RGB არის დამატებითი ფერის მოდელი. Ინგლისურად დამატება- დამატება. RGB არის ინგლისური სიტყვების აბრევიატურა: Red, Green, Blue - წითელი, მწვანე, ლურჯი). აქედან ირკვევა, რომ RGB მოდელში ფერების სინთეზირება ხდება სამი ფერის (წითელი, მწვანე, ლურჯი) სხვადასხვა რაოდენობით დამატებით.
წითელი, მწვანე და ლურჯი ფერების შერევით შეგიძლიათ მიიღოთ რამდენიმე მილიონი ჩრდილი. ყველა შესაძლო კომბინაცია ინახება კომპიუტერის მეხსიერებაში.
გადადით აზრამდე.
ამ ფორმატში თვისებების დასაყენებლად გამოიყენეთ აღნიშვნა rgb(r, g, b), სადაც r, g, b არის სამი არხი თითოეული ფერისთვის (წითელი, მწვანე, ლურჯი). თითოეული არხისთვის მნიშვნელობები მითითებულია 0-დან 255-მდე დიაპაზონში.
მაგალითი კოდი.
ყველაფრის გასაგებად, აქ არის კოდის მაგალითი:
ასე უნდა მუშაობდეს ეს მაგალითი:
ნახ.1. ფერები RGB-ში. მაგალითად, განმარტებები.
გვერდის დასაწყისში ვქმნით div.rgb კლასს, ის საჭიროა ტეგის მიერ შექმნილი ბლოკებისთვის
შემდეგი, კოდში ჩვენ ვაყენებთ ბლოკის ფონის ფერს
სცადეთ ამ მაგალითის რედაქტირება და თქვენი საკუთარი მნიშვნელობების მითითება, მაგალითად rgb(100, 100, 100) .
ფერის დაყენება RGBA-ს გამოყენებით
CSS3-ს აქვს ფერებთან მუშაობის ახალი ინსტრუმენტი - RGBA ფორმატი. მას შეიძლება ეწოდოს RGB მოდელის ევოლუცია, მაგრამ ერთი ახალი არხის დამატებით - A ან ალფა არხი. ეს არხი ადგენს ფერის გამჭვირვალობას. მისი მნიშვნელობები დაყენებულია 0-დან 1-მდე დიაპაზონში. მნიშვნელობა 0 შეესაბამება სრულ გამჭვირვალობას, 1 - სრულ გამჭვირვალობას (ფერი იგივე იქნება, რაც მითითებულია პირველ სამ RGB არხში) და შუალედური მნიშვნელობები . როგორიცაა 0.4 ან 0.6 - გამჭვირვალობა სხვადასხვა ხარისხით.
მაგალითი კოდი.
აი, როგორ იმუშავებს:
ეს კოდი ვიზუალურად ჰგავს შემდეგს, რომელიც იყენებს RGB მოდელს ფერის მნიშვნელობის დასაზუსტებლად:
აი მისი შედეგი:
ნულის ტოლი ალფა არხის მნიშვნელობა ნებისმიერ ფერს უხილავს ხდის - აბსოლუტურად გამჭვირვალე ერთის ტოლი მნიშვნელობა თარგმნის ფერს RGB კოდში ცვლილებების გარეშე. rgba(255,0,0,1.0) თვისება აჩვენებს წითელ ფერს rgb(255, 0, 0).
თექვსმეტობითი მნიშვნელობით (HEX კოდი)
ყოველდღიურ ცხოვრებაში ჩვენ ვიყენებთ ათობითი დათვლის სისტემას. მისი წარმომავლობა ძალიან მარტივია – ხელზე ათი თითი გვაქვს, თითებზე დათვლა კი ცხოვრებაში მოსახერხებელი ყოფილა. თუ ათობითი სისტემას აქვს ათი ციფრი: 0-დან 9-მდე, ხოლო რიცხვი 10 არის შემდეგი ციფრი, მაშინ თექვსმეტობით რიცხვთა სისტემას აქვს 16 ციფრი, ხოლო შემდეგი ციფრი არის რიცხვი 16.
ფერის კოდების აღსანიშნავად, ჩვეულებრივი ათობითი ციფრები 0-დან 9-მდე გამოიყენება თექვსმეტობითი რიცხვების სახით, ხოლო ლათინური ასოები A-დან F-მდე გამოიყენება 10-დან 15-მდე რიცხვების აღსანიშნავად, ანუ (0, 1, 2, 3, 4, 5). , 6, 7, 8, 9, A, B, C, D, E, F). სიცხადისთვის, მოდით ჩავდოთ ეს ცხრილში:
F-ზე მეტი თექვსმეტობითი რიცხვების დასაწერად (ათწილადის სისტემაში 15), ისევე როგორც ათობითი სისტემაში, ისინი ასევე იყენებენ ორი ციფრის კომბინაციას, მაგრამ უკვე თექვსმეტობით, რაც აშკარაა. ამრიგად, ათობითი რიცხვი 255 თექვსმეტობითი აღნიშვნით დასაწერად გამოიყენეთ FF აღნიშვნა.
თექვსმეტობითი სისტემა უფრო გასაგებია კომპიუტერისთვის და ის უფრო სწრაფად ამუშავებს თექვსმეტობითი მნიშვნელობებით დადგენილ მნიშვნელობებს.
თექვსმეტობითი ფერის დასაზუსტებლად, ციფრულ მნიშვნელობას წინ უძღვის "#" ნიშანი, მაგალითად: #FFC0CB. თავად მნიშვნელობა #FFC0CB შედგება სამი თექვსმეტობითი ციფრისგან FF, C0 და CB. ამ ჩანაწერის მნიშვნელობა იგივეა, რაც ფერის დაყენება RGB ფორმატში (rgb(r, g, b)) - HEX კოდის თითოეული თექვსმეტობითი ციფრი მიუთითებს RGB მოდელის მის არხში ფერის გაჯერებაზე.
ეს კოდი აჩვენებს შემდეგ ელემენტებს:
და აქ არის სურათი, რომლის შედეგია განყოფილებიდან "ფერების დაყენება RGB გამოყენებით" ამ გვერდზე ზემოთ.
ნახ.1. ფერები RGB-ში. ჩვენ ვხედავთ, რომ ფერები იდენტურია.
ნებადართულია HEX ფერის კოდის შემოკლებული აღნიშვნა: 6-ნიშნა რიცხვი შეიძლება დაიწეროს 3-ნიშნა რიცხვად. ეს მოქმედებს მხოლოდ მაშინ, როდესაც ერთი არხის ფერის მნიშვნელობის ორი ციფრი მეორდება.
ანუ მისაღებია შემდეგი აბრევიატურა:
მაგალითად, ფერი #ff22aa შეიძლება დაიწეროს როგორც #f2a, ან ფერი #44aa22 შეიძლება დაიწეროს როგორც #4a2.
ფერის დაყენება HSL-ის გამოყენებით
CSS3-ს აქვს ახალი ფორმატი ფერების დასაზუსტებლად.
HSL ფორმატი არის ინგლისური სიტყვების აბრევიატურა: Hue (hue), Saturate (გაჯერება) და Lightness (სიმსუბუქე).
Hue in HSL არის ფერის მნიშვნელობა სპეციალურ ფერთა ბორბალზე (სურათი 2) და მითითებულია გრადუსებში. თუ ანალოგიებს ვხატავთ RGB მოდელთან, მაშინ 0° შეესაბამება წითელს, 120° შეესაბამება მწვანეს და 240° შეესაბამება ლურჯს.
ფერის მნიშვნელობა შეიცვლება 0-დან 359-მდე.
სურათი 2. HSL ფერის ბორბალი. მეორე მნიშვნელობა - გაჯერება (Saturate) დაყენებულია პროცენტულად. 100% გაჯერებისას ფერი რაც შეიძლება "წვნიანი" არის, რადგან გაჯერების მაჩვენებელი 0%-ისკენ მიიწევს, ფერი ხდება უფრო ბუნდოვანი და ნაცრისფერი ხდება.
მესამე მნიშვნელობა, სიმსუბუქე, ასევე მითითებულია პროცენტულად. რაც უფრო მაღალია პროცენტი, მით უფრო ნათელი იქნება ფერი. 0% და 100% უკიდურესი მნიშვნელობები მიუთითებს შავ (შუქის გარეშე) და თეთრ (გადაფარვის) ფერებზე, შესაბამისად, და არ აქვს მნიშვნელობა, რომელი ფერი შეირჩა პირველ არხზე ფერის ბორბალიდან. ფერის სიკაშკაშის ოპტიმალური მნიშვნელობა არის 50%.
ფერის დაყენება HSLA-ს გამოყენებით
HSLA ფორმატი დაკავშირებულია HSL-თან, ისევე როგორც RGB არის RGBA-სთან. HSLA ფორმატში, როგორც RGBA-ში, ემატება ალფა არხი, რომელიც პასუხისმგებელია ფერის გამჭვირვალობაზე.
HSL ფორმატში მითითებული ფერი უფრო ადვილად იკითხება. შეიძლება ითქვას, რომ ინტუიციურია. მაგალითად, კოდი hsl(120,60%,50%) შეიძლება წარმოადგენდეს საბოლოო ფერს, თუ მეხსიერებაში არის HSL ფერის ბორბლის სურათი. იგივეს ვერ ვიტყვით RGB და HEX ფორმატებზე, ამ ფორმატებში მითითებული ფერის კოდი ცხადი ხდება მხოლოდ მონიტორზე ვიზუალიზაციის შემდეგ.
ახალი ფორმატები CSS3-ში (HSL, HSLA და RGBA) მუშაობს ბრაუზერებში დაწყებული ვერსიებიდან: IE 9.0, Opera 10.0 Firefox 3.0. როგორ გავაკეთო სტილები ძველ ბრაუზერებზე?
Somebloсk (ფონის ფერი: rgb(255,50,50); ფონის ფერი: rgba(255,50,50,0,85)
ამ კოდის ძველ ბრაუზერებში გამოყენებისას, .somebloсk კლასის ფონის ფერი, თუმცა ის არ გამოიყენებს ალფა არხს, გამოჩნდება RGB ფორმატში.
ფერის კოდები 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 |