ფერის მნიშვნელობები

CSS-ში ელემენტისთვის ფერის მისანიჭებლად საჭიროა, რომ ფერი ჩავწეროთ ციფრულ ფორმატში, რათა კომპიუტერმა მისი დამუშავება შეძლოს. არსებობს სხვადასხვა ფერის მოდელი/სტანდარტი, რომლის მიხედვითაც შეგვიძლია ფერები სხვადასხვაგვარად ჩავწეროთ.

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

• მზა სახელები
• RGB
• HEX
• HSL

მზა სახელები

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

p {
  color: red;
}

RGB მნიშვნელობა

RGB არის ფერის მოდელი, რომლის მიხედვითაც შეგვიძლია აღვწეროთ ნებისმიერი ფერი. RGB აღიწერება 3 რიცხვით, რომელიც იქნება 0-დან 255-ის ჩათვლით მოცემული. ეს რიცხვები განსაზღვრავენ ფერში წითელი (R), მწვანე (G) და ლურჯი (B) ფერების თანაფარდობას. ამ სამი ფერის გაერთიანებით შეგვიძლია გამოვსახოთ ფერთა ფართო სპექტრი.

p {
  color: rgb(255, 0, 0);
}

RGBA მნიშვნელობა

RGBA არის RGB-ზე დაფუძნებული მოდელი, რომელსაც შეგვიძლია გადავცეთ მეოთხე პარამეტრი (alpha), რომელიც განსაზღვრავს ფერის გამჭვირვალობას, 0-დან 1-ის სკალაზე, სადაც 0 სრულიად გამჭვირვალეა და 1 სრულიად გაუმჭვირვალე.

h1 {
  color: rgb(189, 70, 33, 0.86);
}

p {
  color: rgba(78, 205, 186, 0.7);
}

HEX მნიშვნელობა

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

p {
  color: #00ff00;
}

სტანდარტული HEX-ის ფორმულა არის: #RRGGBB, მაგრამ ასევე გვაქვს #RRGGBBAA. ამ შემთხვევაში AA განსაზღვრავს გამჭვირვალობას (alpha), რომელიც ჩაიწერება თექვსმეტობითში. ასევე გვაქვს შემოკლებული ფორმატი: #RGB და #RGBA.

h1 {
  color: #cdcdcd10;
}

h2 {
  color: #f00;
}

p {
  color: #f004;
}

HSL მნიშვნელობა

HSL (Hue, Saturation, Lightness) არის ფერის მოდელი, რომელიც უფრო ბუნებრივად აღწერს ფერებს. HSL-ში გამოიყენება სამი პარამეტრი:

• H (Hue, შეფერილობა) - ფერის ძირითადი ტონი (0°-360°)
  • 0° – წითელი
  • 120° – მწვანე
  • 240° – ლურჯი
• S (Saturation, სიმკვეთრე) - რამდენად "მაძღარია" ფერი (0%-100%)
  • 0% - ნაცრისფერი
  • 100% - თეთრი
• L (Lightness, განათება) – რამდენად ღია ან მუქია ფერი (0%-100%)
  • 0% - შავი
  • 50% - სტანდარტული ფერი
  • 100% - თეთრი

HSL-საც გააჩნია alpha პარამეტრი, რომელიც განსაზღვრავს გამჭვირვალობას (0-დან 1-ის ჩათვლით).

h1 {
  color: hsl(120, 100%, 50%);
}

p {
  color: hsla(240, 100%, 50%, 0.2);
}

შეჯამება

ამ სტატიაში განვიხილეთ RGB, HEX და HSL ფერის მოდელები. თუ რა ფერს გამოიყენებთ თქვენს პროექტში, დამოკიდებულაი პროექტის წესებსა და სტანდარტებზე, ხოლო პირად პროექტებში - თქვენს გემოვნებაზე!

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