ფერის გადამყვანი
ფერების კონვერტაცია HEX, RGB და HSL ფორმატებს შორის.
გადახედვა
HEX
RGB
HSL
დიზაინის ინსტრუმენტი
ფერის გადამყვანი
აირჩიეთ ფერი და მიიღეთ კოპირებისთვის მზად HEX, RGB და HSL მნიშვნელობები.
ყველა ხელსაწყო
დაკავშირებული ინსტრუმენტები
განაგრძეთ ახლომდებარე ამოცანების სასარგებლო ხელსაწყოები.
როგორ გამოვიყენოთ ფერის გადამყვანი
დააჭირეთ ფერის ველს, რომ გაიხსნას სისტემის ფერის ამომრჩევი, ან აკრიფეთ საწყისი მნიშვნელობა, შემდეგ კი გადაათრიეთ ამომრჩევი, სანამ გადახედვის კვადრატი სასურველ ელფერს არ აჩვენებს. გადაადგილებისას სამივე მაჩვენებელი ცოცხლად განახლდება: HEX კოდი, RGB სამეული და HSL მნიშვნელობები. თითოეული მათგანი ერთსა და იმავე ფერს განსხვავებული ჩაწერით აღწერს, ამიტომ შეგიძლიათ დააკოპიროთ ის ფორმატი, რომელსაც თქვენი სტილის ფაილი, დიზაინის ხელსაწყო ან კოდი ელის, და პირდაპირ ჩასვათ.
HEX, RGB და HSL განმარტებული
ერთი და იგივე ფერი სამნაირად შეიძლება ჩაიწეროს. HEX არის ექვსციფრიანი თექვსმეტობითი კოდი, მაგალითად #0f766e, სადაც ციფრების წყვილები წითელ, მწვანე და ლურჯ არხებს კოდავს 00-დან ff-მდე. RGB იმავე სამ არხს ათობით რიცხვებად, 0-დან 255-მდე წერს, მაგალითად rgb(15, 118, 110), რაც ეკრანების მიერ სინათლის შერევას ასახავს. HSL ფერს აღწერს ტონით (Hue — კუთხე ფერის წრეზე), გაჯერებით (Saturation — რამდენად ნათელია) და სიკაშკაშით (Lightness — რამდენად კაშკაშაა) — hsl(174, 78%, 26%) — და ეს ყველაზე ადამიანისთვის გასაგები მოდელია ფერის ხელით შესასწორებლად.
გავრცელებული ფერები ყველა ფორმატში
ერთი და იგივე ფერი ძალიან განსხვავებულად გამოიყურება ჩაწერის მიხედვით. ქვემოთ მოცემული ცხრილი ჩამოთვლის რამდენიმე ნაცნობ ფერს გვერდიგვერდ, რომ დაინახოთ, როგორ ემთხვევა HEX, RGB და HSL ერთმანეთს.
| ფერი | HEX | RGB | HSL |
|---|---|---|---|
| თეთრი | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| შავი | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| წითელი | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| მწვანე | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| ლურჯი | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| ზურმუხტისფერი | #0f766e | rgb(15, 118, 110) | hsl(174, 78%, 26%) |
შეამჩნიეთ, რომ წმინდა წითელს, მწვანესა და ლურჯს HSL-ში ერთნაირი 100% გაჯერება და 50% სიკაშკაშე აქვს და მხოლოდ ტონის კუთხით განსხვავდებიან.
მაგალითი: ფერის გაღიავება HSL-ით
დავუშვათ, თქვენი ბრენდის ზურმუხტისფერი არის #0f766e, ანუ hsl(174, 78%, 26%). რომ შექმნათ hover მდგომარეობა იმავე ფერით, ოღონდ უფრო ნათელი, ტონი და გაჯერება უცვლელი დატოვეთ და მხოლოდ სიკაშკაშე აწიეთ — ვთქვათ, 36%-მდე — რაც მოგცემთ hsl(174, 78%, 36%)-ს. იმავე ცვლილების HEX-ში ან RGB-ში გაკეთება სამივე არხის ხელით თავიდან გამოთვლას მოითხოვდა. სწორედ ეს პროგნოზირებადობაა მიზეზი, რის გამოც HSL ერთი საბაზისო ფერიდან ღია და მუქი ელფერების ასაგებად ყველაზე მარტივი მოდელია.
რატომ არის ეს ინსტრუმენტი სასარგებლო
დიზაინის ფაილები, CSS, ეკრანის სურათები და გამოსახულების რედაქტორები იშვიათად თანხმდებიან ფერის ერთ ჩაწერაზე, ამიტომ მუდმივად გჭირდებათ ერთის მეორედ გადათარგმნა. ეს გადამყვანი ერთი არჩევანიდან სამივეს ერთდროულად გაძლევთ, რაც აშორებს HEX-დან RGB-ში ხელით გადათვლას, ბრენდის ფერებს ფაილებს შორის ზუსტად ინარჩუნებს და ამარტივებს ღილაკების, hover მდგომარეობებისა და თემების თანმიმდევრული პალიტრის — ღია და მუქი ელფერების — აგებას.
სიზუსტე და კონფიდენციალურობა
კონვერტაცია იყენებს იმავე სტანდარტულ ფორმულებს, რომლებსაც ბრაუზერები ფერის დასახატად იყენებენ, ამიტომ თქვენ მიერ დაკოპირებული HEX, RGB და HSL მნიშვნელობები იდენტურად გამოჩნდება, სადაც არ უნდა ჩასვათ ისინი. ყველაფერი ლოკალურად, თქვენს ბრაუზერში მუშავდება — არჩეული ან ჩასმული არაფერი იტვირთება, ილოგება ან ინახება სერვერზე, და ხელსაწყო მუშაობას აგრძელებს მაშინაც კი, თუ გვერდის ჩატვირთვის შემდეგ კავშირი გაწყდა.
FAQ
რა არის HSL და როდის გამოვიყენო?
HSL ნიშნავს Hue (ტონი), Saturation (გაჯერება) და Lightness (სიკაშკაშე). ტონი არის კუთხე 0-დან 360 გრადუსამდე ფერის წრეზე, ხოლო გაჯერება და სიკაშკაშე პროცენტებში იზომება. ეს საუკეთესო მოდელია, როცა ფერის ინტუიციურად მორგება გინდათ — ელფერის გაღიავება ან ნაკლებად ინტენსიურად ქცევა — ისე, რომ HEX-ის ან RGB-ის მსგავსად ფონური რიცხვები თავიდან არ გადათვალოთ.
როგორ მუშაობს alpha და გამჭვირვალობა ფერებში?
Alpha აკონტროლებს გამჭვირვალობას. CSS-ში მისი დამატება შეგიძლიათ rgba() ან hsla() ფუნქციით 0-დან 1-მდე მნიშვნელობით, სადაც 0 სრულად გამჭვირვალეა და 1 სრულად გაუმჭვირვალე, ან HEX ფერისთვის ორი დამატებითი თექვსმეტობითი ციფრის დართვით, მაგალითად #0f766e80 დაახლოებით 50% გაუმჭვირვალობისთვის. ეს გადამყვანი მუშაობს მკვრივ, სრულად გაუმჭვირვალე ფერებთან, ამიტომ alpha არხი თავად დაამატეთ, როცა გამჭვირვალობა გჭირდებათ.
რა არის 3-ციფრიანი HEX შემოკლება?
როცა სამივე HEX წყვილი ორი ერთნაირი სიმბოლოსგან შედგება, კოდის სამ ციფრამდე შემოკლება შეიძლება. მაგალითად #ffffff იქცევა #fff-ად და #0088cc იქცევა #08c-ად. ბრაუზერი თითო ციფრს გააორმაგებს, ამიტომ შემოკლებული და სრული ფორმა ზუსტად ერთსა და იმავე ფერს ხატავს. შემოკლება მხოლოდ მაშინ მუშაობს, როცა ყველა წყვილი გამეორებული სიმბოლოა.
რომელი ფერის ფორმატი გამოვიყენო CSS-ში?
სამივე მართებულია CSS-ში და იდენტურად იხატება. HEX კომპაქტურია და გავრცელებულია ფიქსირებული ბრენდის ფერებისთვის. RGB მოსახერხებელია, როცა მნიშვნელობები კოდიდან ან გამოსახულების ხელსაწყოებიდან მოდის. HSL საუკეთესოა, როცა ფერის ხელით შესწორებას აპირებთ, რადგან სიკაშკაშის ან გაჯერების შეცვლა ბევრად უფრო პროგნოზირებადია, ვიდრე HEX ან RGB რიცხვების რედაქტირება.
აგზავნის თუ არა ეს ხელსაწყო ჩემს ფერებს სერვერზე?
არა. HEX, RGB და HSL შორის გადაყვანა მთლიანად თქვენს ბრაუზერში, ლოკალური გამოთვლებით ხდება. არჩეული ან ჩასმული არაფერი იტვირთება ან ინახება, ამიტომ ხელსაწყო ისევ მუშაობს მაშინაც კი, თუ გვერდის ჩატვირთვის შემდეგ ხაზგარეშე გახვალთ.