CodeKitHubრა არის ეს ხელსაწყო?
ვებში ფერები რამდენიმე ეკვივალენტურ ფორმატში იწერება, ყველა განსაზღვრულია MDN-ის CSS ფერების სპეციფიკაციაში. HEX (#4f46e5) არის კომპაქტური ფორმა, რომელიც ყველგან გამოიყენება CSS-სა და დიზაინის გადაცემისას. RGB (rgb(79, 70, 229)) პირდაპირ განსაზღვრავს წითელი, მწვანე და ლურჯი ფერების კომპონენტებს, რაც ხშირად კოდს სჭირდება. HSL (hsl(243, 75%, 59%)) აღწერს ტონს, გაჯერებას და სიბრტყეს — ყველაზე ინტუიციური ფორმატია ფერის დასარეგულირებლად, მაგალითად მისი გასაბნელებლად ან ნაკლებად გასაჯერებლად.
სამივე ერთსა და იმავე ფერს აღწერს; ეს ინსტრუმენტი მათ შორის ზუსტად გადაიყვანს და აჩვენებს გადახედვას, რათა დარწმუნდეთ, რომ სწორედ ის ფერია, რომელიც გინდოდათ.
რატომ გამოვიყენო ის?
- იღებს ნებისმიერ შემავალ ფორმატს — HEX (3 ან 6 ციფრი), RGB ან HSL — და გამოაქვს ყველა ფორმატი.
- ცოცხალი გადახედვის ნიმუში, რომ ნახოთ თავად ფერი, არა მხოლოდ რიცხვები.
- ვიზუალური ფერის ამომრჩევი, თუ თვალით არჩევა გირჩევნიათ.
- ერთი დაწკაპუნებით კოპირება ყოველი ფორმატისთვის, მზად CSS-ისთვის ან კოდისთვის.
- უფასო, მყისიერი, ატვირთვის გარეშე.
როგორ გამოვიყენო
- აკრიფეთ ან ჩასვით ფერი: #4f46e5, rgb(79, 70, 229) ან hsl(243, 75%, 59%) — ყველა მუშაობს.
- ან დააწკაპუნეთ ფერის ამომრჩევზე და აირჩიეთ ვიზუალურად.
- წაიკითხეთ სამივე ფორმატი შედეგებში და შეამოწმეთ გადახედვის ნიმუში.
- დააწკაპუნეთ "კოპირება" თქვენთვის საჭირო ფორმატის გვერდით.
მაგალითი
შეყვანა
#4f46e5შედეგი
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)სამი ჩანაწერი, ერთი და იგივე ფერი.
რომელი ფორმატი უნდა გამოვიყენოთ?
სამივე ერთსა და იმავე ფერს ზუსტად აღწერს — არჩევანი ეხება არა სიზუსტეს, არამედ იმას, თუ რომელთან მუშაობაა უფრო მოსახერხებელი კონკრეტული ამოცანისთვის.
| ფორმატი | საუკეთესო არჩევანია | რატომ |
|---|---|---|
| HEX (#4f46e5) | CSS, დიზაინის გადაცემა, სწრაფი კოპირება-ჩასმა | ყველაზე მოკლეა ჩასაწერად და ჩასასმელად; უნივერსალური ფორმატია დიზაინის ინსტრუმენტებში, როგორიცაა Figma. |
| RGB (rgb(79,70,229)) | კოდი, რომელიც პირდაპირ მართავს არხებს, canvas/გამოსახულებებზე მუშაობა | შეესაბამება იმას, თუ როგორ ინახავენ გრაფიკული API-ები და გამოსახულების პიქსელური მონაცემები ფერს რეალურად. |
| HSL (hsl(243,75%,59%)) | ფერის რეგულირება — უფრო ღია, მუქი, მეტად ან ნაკლებად გაჯერებული | სიბრტყე და გაჯერება ცალკეული რიცხვებია, რომელთა პირდაპირ დარეგულირება შესაძლებელია, HEX/RGB-სგან განსხვავებით, სადაც ყოველი არხი იცვლება. |
ხშირი გამოყენების შემთხვევები
- ფერის ვიზუალურად არჩევა დიზაინის ინსტრუმენტში, შემდეგ მისი გადაყვანა CSS-ში ან კოდში საჭირო ზუსტ HEX ან RGB მნიშვნელობაზე.
- დაკავშირებული ტონების ნაკრების გენერირება (უფრო ღია/მუქი ვარიანტები) HSL-ზე გადაყვანით, სიბრტყის დარეგულირებით და უკან გადაყვანით.
- ბრენდის ფერის შესაბამისობაში მოყვანა სხვადასხვა ინსტრუმენტში, რომელთაგან თითოეული სხვადასხვა ფორმატს მოელის — ლოგოს ფაილი RGB-ში, სტილის სახელმძღვანელო HEX-ში, CSS ცვლადი, რომელსაც თემატიზაციისთვის HSL სჭირდება.
- იმის გადამოწმება, რომ ეკრანის ანაბეჭდიდან ან დიზაინის ფაილიდან აღებული ფერი (ხშირად RGB სახით მოცემული) ემთხვევა სტილის ფურცელში HEX მნიშვნელობას.
ხშირად დასმული კითხვები
როდის უნდა გამოვიყენო HSL, HEX-ის ან RGB-ის ნაცვლად?
როცა ფერზე ლოგიკურად გინდათ ფიქრი. ფერის 10%-ით გასაბნელებლად HSL-ში საკმარისია სიბრტყის 10 პუნქტით შემცირება; HEX-ში ან RGB-ში კი ყველა არხის ხელახლა გამოთვლა მოგიწევდათ. დიზაინის სისტემები ხშირად სწორედ ამიტომ განსაზღვრავენ პალიტრებს HSL-ში.
უჭერს თუ არა ინსტრუმენტი მხარს 3-ციფრიან HEX-ს, როგორიცაა #fff?
დიახ. #fff არის #ffffff-ის შემოკლებული ფორმა — თითოეული ციფრი ორმაგდება. ორივე ფორმა მიიღება და შედეგი გვიჩვენებს სრულ 6-ციფრიან ფორმას.
როგორ არის საქმე გამჭვირვალობასთან (alpha)?
ეს ინსტრუმენტი გადაყავს გაუმჭვირვალე ფერებს (RGB/HSL მნიშვნელობებს). თუ გამჭვირვალობა გჭირდებათ, დაამატეთ alpha თავად: rgba(79, 70, 229, 0.5) ან #4f46e580 — ფერის ნაწილი უცვლელი რჩება.
რატომ განსხვავდება ჩემი HSL მნიშვნელობები 1-ით სხვა ინსტრუმენტისგან?
დამრგვალების გამო. HSL↔RGB გადაყვანა წარმოქმნის წილად მნიშვნელობებს, და სხვადასხვა ინსტრუმენტი განსხვავებულად ამრგვალებს. ±1-ის განსხვავება ტონში ან პროცენტში თვალით შეუმჩნეველია და ნორმალურია.
მხარდაჭერილია თუ არა ფერების სახელები, როგორიცაა 'red'?
პირველ ფაზაში — არა; ინსტრუმენტი ფოკუსირებულია სამ რიცხვით ფორმატზე, რომლებსაც დეველოპერები ყველაზე ხშირად გადაყავენ. შეიყვანეთ ფერის HEX/RGB/HSL მნიშვნელობა, ან აირჩიეთ იგი ვიზუალურად ამომრჩევის მეშვეობით.
როდის უნდა გამოვიყენო HEX, RGB თუ HSL?
თუ გამჭვირვალობა გჭირდებათ, გამოიყენეთ 8-ციფრიანი HEX (#RRGGBBAA) ან rgba() — 6-ციფრიან HEX-ს alpha არხი არ აქვს. თუ იმავე ფერის უფრო ღია ან მუქი ვარიანტები გინდათ, HSL ყველაზე მარტივია: შეინარჩუნეთ ტონი და გაჯერება ფიქსირებული და შეცვალეთ მხოლოდ სიბრტყის მაჩვენებელი. CSS-ში ან დიზაინის ინსტრუმენტებში უბრალო კოპირება-ჩასმისთვის, 6-ციფრიანი HEX ყველაზე უნივერსალურად მიღებული ფორმა რჩება.