RGB მწვანე. HTML გაკვეთილი. RGB ფერები. უსაფრთხო პალიტრა ფერები
HEX/HTML
HEX ფერი სხვა არაფერია, თუ არა RGB-ის თექვსმეტობითი წარმოდგენა.
ფერები წარმოდგენილია თექვსმეტობითი რიცხვების სამი ჯგუფის სახით, სადაც თითოეული ჯგუფი პასუხისმგებელია საკუთარ ფერზე: #112233, სადაც 11 არის წითელი, 22 არის მწვანე, 33 არის ლურჯი. ყველა მნიშვნელობა უნდა იყოს 00-დან FF-მდე.
ბევრი აპლიკაცია იძლევა თექვსმეტობითი ფერის აღნიშვნის შემცირებულ ფორმას. თუ სამი ჯგუფიდან თითოეული შეიცავს იგივე სიმბოლოებს, მაგალითად #112233, მაშინ ისინი შეიძლება დაიწეროს როგორც #123.
- h1 (ფერი: #ff0000; ) /* წითელი */
- h2 (ფერი: #00ff00; ) /* მწვანე */
- h3 (ფერი: #0000ff; ) /* ლურჯი */
- h4 (ფერი: #00f; ) /* იგივე ლურჯი, სტენოგრამა */
RGB
RGB (წითელი, მწვანე, ლურჯი) ფერის სივრცე შედგება ყველა შესაძლო ფერისგან, რომლებიც შეიძლება შეიქმნას წითელი, მწვანე და ლურჯის შერევით. ეს მოდელი პოპულარულია ფოტოგრაფიაში, ტელევიზიაში და კომპიუტერულ გრაფიკაში.
RGB მნიშვნელობები მითითებულია, როგორც მთელი რიცხვი 0-დან 255-მდე. მაგალითად, rgb(0,0,255) ნაჩვენებია ლურჯად, რადგან ლურჯი პარამეტრი დაყენებულია მის უმაღლეს მნიშვნელობაზე (255), ხოლო დანარჩენები დაყენებულია 0-ზე.
ზოგიერთი აპლიკაცია (განსაკუთრებით ვებ ბრაუზერები) მხარს უჭერს RGB მნიშვნელობების პროცენტულ ჩაწერას (0%-დან 100%-მდე).
- h1 (ფერი: rgb(255, 0, 0); ) /* წითელი */
- h2 (ფერი: rgb(0, 255, 0); ) /* მწვანე */
- h3 (ფერი: rgb(0, 0, 255); ) /* ლურჯი */
- h4 ( ფერი: rgb(0%, 0%, 100%); ) /* იგივე ლურჯი, პროცენტული ჩანაწერი */
RGB ფერის მნიშვნელობები მხარდაჭერილია ყველა მთავარ ბრაუზერში.
RGBA
ახლახან, თანამედროვე ბრაუზერებმა ისწავლეს RGBA ფერის მოდელთან მუშაობა - RGB გაფართოება ალფა არხის მხარდაჭერით, რომელიც განსაზღვრავს ობიექტის გამჭვირვალობას.
RGBA ფერის მნიშვნელობა მითითებულია, როგორც: rgba (წითელი, მწვანე, ლურჯი, ალფა). ალფა პარამეტრი არის რიცხვი, რომელიც მერყეობს 0.0-დან (სრულიად გამჭვირვალე) 1.0-მდე (სრულიად გაუმჭვირვალე).
- h1 (ფერი: rgb(0, 0, 255); ) /* ლურჯი ჩვეულებრივ RGB-ში */
- h2 ( ფერი: rgba(0, 0, 255, 1); ) /* იგივე ლურჯი RGBA-ში, რადგან გამჭვირვალობა: 100% */
- h3 (ფერი: rgba(0, 0, 255, 0.5); ) /* გამჭვირვალობა: 50% */
- h4 (ფერი: rgba(0, 0, 255, .155); ) /* გამჭვირვალობა: 15.5% */
- h5 (ფერი: rgba(0, 0, 255, 0); ) /* სრულიად გამჭვირვალე */
RGBA მხარდაჭერილია IE9+, Firefox 3+, Chrome, Safari და Opera 10+-ში.
HSL
HSL ფერის მოდელი არის RGB მოდელის წარმოდგენა ცილინდრულ კოორდინატულ სისტემაში. HSL ასახავს ფერებს უფრო ინტუიციურად და ადამიანისათვის წასაკითხად, ვიდრე ტიპიური RGB. მოდელი ხშირად გამოიყენება გრაფიკულ აპლიკაციებში, ფერთა პალიტრებში და გამოსახულების ანალიზში.
HSL ნიშნავს Hue (ფერი/ელფერი), გაჯერება (გაჯერება), სიმსუბუქე/ნათება (სიმსუბუქე/სიმსუბუქე/ნათება, არ უნდა აგვერიოს სიკაშკაში).
Hue განსაზღვრავს ფერის პოზიციას ფერის ბორბალზე (0-დან 360-მდე). გაჯერება არის გაჯერების პროცენტული მნიშვნელობა (0%-დან 100%-მდე). სიმსუბუქე არის სიმსუბუქის პროცენტული მაჩვენებელი (0%-დან 100%-მდე).
- h1 (ფერი: hsl(120, 100%, 50%); ) /* მწვანე */
- h2 ( ფერი: hsl (120, 100%, 75%); ) /* ღია მწვანე */
- h3 (ფერი: hsl(120, 100%, 25%); ) /* მუქი მწვანე */
- h4 ( ფერი: hsl(120, 60%, 70%); ) /* პასტელი მწვანე */
HSL მხარდაჭერილია IE9+, Firefox, Chrome, Safari და Opera 10+-ში.
HSLA
RGB/RGBA-ს მსგავსად, HSL-ს აქვს HSLA რეჟიმი ალფა არხის მხარდაჭერით, რათა მიუთითოს ობიექტის გამჭვირვალობა.
HSLA ფერის მნიშვნელობა მითითებულია, როგორც: hsla (ელფერი, გაჯერება, სიმსუბუქე, ალფა). ალფა პარამეტრი არის რიცხვი, რომელიც მერყეობს 0.0-დან (სრულიად გამჭვირვალე) 1.0-მდე (სრულიად გაუმჭვირვალე).
- h1 ( ფერი: hsl(120, 100%, 50%); ) /* მწვანე ნორმალურ HSL-ში */
- h2 ( ფერი: hsla(120, 100%, 50%, 1); ) /* იგივე მწვანე HSLA-ში, რადგან გამჭვირვალობა: 100% */
- h3 ( ფერი: hsla (120, 100%, 50%, 0.5); ) /* გამჭვირვალობა: 50% */
- h4 (ფერი: hsla(120, 100%, 50%, .155); ) /* გამჭვირვალობა: 15.5% */
- h5 (ფერი: hsla(120, 100%, 50%, 0); ) /* სრულიად გამჭვირვალე */
CMYK
CMYK ფერის მოდელი ხშირად ასოცირდება ფერადი ბეჭდვასთან და ბეჭდვასთან. CMYK (განსხვავებით RGB) არის გამოკლებითი მოდელი, რაც იმას ნიშნავს, რომ უფრო მაღალი მნიშვნელობები ასოცირდება მუქ ფერებთან.
ფერები განისაზღვრება ცისფერის (ციანი), მეწამულის (მაჯენტა), ყვითელის (ყვითელი) თანაფარდობით, შავის დამატებით (Key/blacK).
თითოეული რიცხვი, რომელიც განსაზღვრავს ფერს CMYK-ში, წარმოადგენს მოცემული ფერის მელნის პროცენტს, რომელიც ქმნის ფერთა კომბინაციას, ან უფრო ზუსტად, ეკრანის წერტილის ზომას, რომელიც გამოდის ფოტოაკრეფის მანქანაზე ამ ფერის ფილმზე (ან პირდაპირ საბეჭდ ფირფიტაზე CTP-ის შემთხვევაში).
მაგალითად, PANTONE 7526 ფერის მისაღებად, თქვენ შეურიეთ 9 წილი ციანი, 83 წილი მაგენტა, 100 წილი ყვითელი და 46 წილი შავი. ეს შეიძლება აღვნიშნოთ შემდეგნაირად: (9,83,100,46). ზოგჯერ გამოიყენება შემდეგი აღნიშვნები: C9M83Y100K46, ან (9%, 83%, 100%, 46%), ან (0.09/0.83/1.0/0.46).
HSB/HSV
HSB (ასევე ცნობილია როგორც HSV) მსგავსია HSL-ს, მაგრამ ისინი ორი განსხვავებული ფერის მოდელია. ორივე დაფუძნებულია ცილინდრულ გეომეტრიაზე, მაგრამ HSB/HSV ეფუძნება „ჰექსკონის“ მოდელს, ხოლო HSL დაფუძნებულია „ბი-ჰექსკონის“ მოდელზე. მხატვრები ხშირად ამჯობინებენ ამ მოდელის გამოყენებას, ზოგადად მიღებულია, რომ HSB/HSV მოწყობილობა უფრო ახლოს არის ფერების ბუნებრივ აღქმასთან. კერძოდ, HSB ფერის მოდელი გამოიყენება Adobe Photoshop-ში.
HSB/HSV ნიშნავს Hue (ფერი/ელფერი), გაჯერება (გაჯერება), სიკაშკაშე/მნიშვნელობა (სიკაშკაშე/მნიშვნელობა).
Hue განსაზღვრავს ფერის პოზიციას ფერის ბორბალზე (0-დან 360-მდე). გაჯერება არის გაჯერების პროცენტული მნიშვნელობა (0%-დან 100%-მდე). სიკაშკაშე არის სიკაშკაშის პროცენტული მაჩვენებელი (0%-დან 100%-მდე).
XYZ
XYZ ფერის მოდელი (CIE 1931 XYZ) არის წმინდა მათემატიკური სივრცე. RGB, CMYK და სხვა მოდელებისგან განსხვავებით, XYZ-ში ძირითადი კომპონენტები არის „წარმოსახვითი“, რაც იმას ნიშნავს, რომ თქვენ არ შეგიძლიათ X, Y და Z დაუკავშიროთ ფერების რომელიმე კომპლექტს. XYZ არის ძირითადი მოდელი თითქმის ყველა სხვა ფერის მოდელისთვის, რომელიც გამოიყენება ტექნიკურ სფეროებში.
LAB
LAB ფერის მოდელი (CIELAB, "CIE 1976 L*a*b*") გამოითვლება CIE XYZ სივრციდან. ლაბორატორიის დიზაინის მიზანი იყო ფერთა სივრცის შექმნა, რომელშიც ფერის ცვლილებები უფრო წრფივი იქნებოდა ადამიანის აღქმის თვალსაზრისით (XYZ-თან შედარებით), ანუ ფერთა სივრცის სხვადასხვა რეგიონში ფერის კოორდინატების მნიშვნელობების იგივე ცვლილება. წარმოქმნის ფერის ცვლილების იგივე შეგრძნებას.
თექვსმეტობითი რიცხვები გამოიყენება ფერების დასაზუსტებლად. თექვსმეტობითი სისტემა, განსხვავებით ათობითი სისტემისგან, ეფუძნება, როგორც მისი სახელიდან ჩანს, რიცხვი 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 ან #0ffff | 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. |
ამ შემთხვევაში ფერი მითითებულია სამი თექვსმეტობითი რიცხვით, რომელთაგან თითოეული შედგება ორი ციფრისგან. პირველი რიცხვი განსაზღვრავს ინტენსივობას წითელიფერები, საშუალო - მწვანე, ბოლო რამ- ლურჯიფერები. ყველა რიცხვს შეუძლია მიიღოს მნიშვნელობები დიაპაზონში 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 |
ვლად მერჟევიჩი
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 .ყურადღებით დააკვირდით ნახატს. ჩამოსაშლელი ფანჯრის ფონი გამჭვირვალე ხდება. ეს საკმაოდ გავრცელებული დიზაინის ტექნიკაა. მოდით ვიფიქროთ იმაზე, თუ როგორ შეიძლება ეს განხორციელდეს.
დავალება
გახადეთ ფერადი ჯვარედინი ბრაუზერი გამჭვირვალე.
გამოსავალი
პირველი აზრი ამ სიტუაციაში არის 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