ფერების შემრევი

აირჩიეთ ორი ფერი, გადაათრიეთ პროპორციის სლაიდერი და მიიღეთ ნარევის ზუსტი HEX და RGB კოდი — პლუს სრული გრადიენტული ზოლი, რომელიც აჩვენებს ყოველ საფეხურს 0%-დან 100%-მდე, რათა აირჩიოთ ზუსტად საჭირო შუალედური წერტილი. სასარგებლოა hover ან აქცენტის ჩრდილის საპოვნელად, რომელიც ბუნებრივად ჯდება ორ ბრენდის ფერს შორის.

რა არის ეს ხელსაწყო?

ფერების შემრევი ხაზოვნად ინტერპოლირებს ორი ფერის წითელ, მწვანე და ლურჯ არხებს შორის არჩეული პროპორციით — იგივე მათემატიკა, რასაც გრადიენტი შინაგანად იყენებს. 0%-ზე შედეგი არის ფერი A, 100%-ზე — ფერი B, ხოლო 50%-ზე თითოეული RGB არხის არითმეტიკული საშუალო.

ეს განსხვავდება ფიზიკური საღებავის შერევისგან (რომელიც სუბტრაქტიულია და დამოკიდებულია პიგმენტზე), და ეს ასევე არ არის იგივე, რაც საშუალო HSL სივრცეში — ხაზოვანი RGB ინტერპოლაცია არის ის, რასაც CSS გრადიენტები, დიზაინის ხელსაწყოები და უმეტესი „ფერი ორ ფერს შორის" ხელსაწყო იყენებს, ასე რომ შედეგი ემთხვევა იმას, რასაც ბრაუზერის გრადიენტში ნახავდით იმავე ორ ფერს შორის.

რატომ გამოვიყენო ის?

იპოვეთ ბუნებრივი hover ან აქტიური მდგომარეობის ფერი, რომელიც თქვენს საბაზისო ფერსა და აქცენტს შორის მდებარეობს — შემთხვევითი კორექტირების გამოცნობის ნაცვლად.
იხილეთ ზუსტი HEX კოდი ნებისმიერ პროპორციაზე, ნაცვლად გრადიენტის სქრინშოტის თვალით შეფასებისა.
11-საფეხურიანი კიბე გაძლევთ სრულ პალიტრას ერთი ფერიდან მეორემდე ერთი დაწკაპუნებით, სასარგებლოა მონაცემთა ვიზუალიზაციისთვის ან მრავალსაფეხურიანი გრადიენტისთვის.
დააწკაპუნეთ ნებისმიერ საფეხურზე მისი HEX კოდის მყისიერად კოპირებისთვის.
უფასო, მყისიერი და მთლიანად ლოკალური — არანაირი ატვირთვა, არანაირი ანგარიში.

როგორ გამოვიყენო

აირჩიეთ ფერი A და ფერი B ფერის ამომრჩევებით ან HEX კოდის აკრეფით.
გადაათრიეთ პროპორციის სლაიდერი, რათა დააყენოთ რამდენი ფერი B შეურიოთ.
წაიკითხეთ მიღებული HEX და RGB მნიშვნელობები ნიმუშის ზემოთ.
დააწკაპუნეთ ქვემოთ 11-საფეხურიან კიბეზე ნებისმიერ ნიმუშზე მისი HEX კოდის კოპირებისთვის.

მაგალითი

შეყვანა

ფერი A #3B82F6 (ლურჯი), ფერი B #F59E0B (ქარვისფერი), პროპორცია 50%

შედეგი

#9B9E7D — rgb(155, 158, 125)

ზუსტად 50%-ზე თითოეული RGB არხი არის ორივე შემავალი ფერის არხების არითმეტიკული საშუალო.

ხშირად დასმული კითხვები

რატომ არ ემთხვევა ეს იმას, რასაც ნამდვილი საღებავის შერევით მივიღებდი?

საღებავის შერევა სუბტრაქტიულია (პიგმენტები შთანთქავენ სინათლეს) და დამოკიდებულია კონკრეტულ ჩართულ პიგმენტებზე — მაგალითად, ლურჯი და ყვითელი საღებავის შერევა მწვანეს იძლევა. ეს ხელსაწყო ერევა სინათლეს (RGB არხებს) ადიტიურად/ხაზოვნად, რაც არის ის გზა, რომლითაც ეკრანები, CSS გრადიენტები და უმეტესი ციფრული დიზაინის ხელსაწყოები ერევენ ფერებს. ორივე სისტემა განზრახ განსხვავებულ შედეგებს იძლევა, არა შეცდომის გამო.

არის ეს იგივე, რაც CSS linear-gradient ორ ფერს შორის?

დიახ — CSS linear-gradient(colorA, colorB) RGB არხებს იმავე გზით ინტერპოლირებს, როგორც ეს ხელსაწყო, ასე რომ ფერი, რომელსაც ამ გრადიენტის შუაში ნახავდით, ემთხვევა აქ 50%-ის შედეგს.

რატომ გამოიყურება შერეული ფერი ზოგჯერ ტლანქი ან ნაცრისფერი?

ორი გაჯერებული, მაგრამ ძალიან განსხვავებული ტონის (მაგალითად ლურჯისა და ნარინჯისფრის, რომლებიც თითქმის კომპლემენტარულია) შერევა RGB სივრცეში ხშირად იძლევა დაბალგაჯერებულ, ნაცრისფერ-ყავისფერ შუალედურ წერტილს — ეს RGB ინტერპოლაციის ნამდვილი თვისებაა, არა ხარვეზი. თუ გინდათ უფრო ცოცხალი ნარევი, სცადეთ ფერების შერევა, რომლებიც ფერთა წრეზე ერთმანეთთან უფრო ახლოსაა, ან შერიეთ HSL სივრცეში ტონის რეგულირებით მაღალი გაჯერების შენარჩუნებისას (რასაც ეს პირდაპირი RGB შემრევი არ აკეთებს).

შემიძლია ორზე მეტი ფერის შერევა ერთდროულად?

არა ერთ საფეხურში — ხელსაწყო ზუსტად ორ ფერს ერევა. სამის გასაერთიანებლად, შეურიეთ პირველი ორი თქვენ მიერ არჩეული პროპორციით, დააკოპირეთ შედეგი და ჩასვით ის როგორც ახალი ფერი A თქვენი მესამე ფერის საწინააღმდეგოდ. ეტაპობრივად გაკეთება ასევე გაძლევთ კონტროლს წონაზე, რასაც ერთჯერადი სამმხრივი საშუალო არ მოგცემდათ.

ეს უნდა გამოვიყენო თუ ფერის ჩრდილების გენერატორი?

თუ გჭირდებათ ფერი, რომელიც ორ განსხვავებულ ფერს შორის მდებარეობს — ვთქვათ, გარდამავალი ტონი თქვენი ბრენდის ლურჯსა და ქარვისფერ აქცენტს შორის — გამოიყენეთ ეს შემრევი. თუ გჭირდებათ ერთი ფერის უფრო ღია და მუქი ვარიანტები (hover მდგომარეობები, ფონები, Tailwind-სტილის 50-900 კიბე), სამაგიეროდ გამოიყენეთ ფერის ჩრდილების გენერატორი: ის ინარჩუნებს ტონსა და გაჯერებას ფიქსირებულს და მხოლოდ სიმქრივეს ცვლის, ასე რომ ყოველი შედეგი მკაფიოდ იმავე ფერთა ოჯახში რჩება.

რა ფერის ფორმატები შემიძლია აკრიფო შეყვანის ველებში?

ტექსტური ველები იღებს 6-ციფრიან HEX კოდებს, წამყვანი # ნიშნით ან მის გარეშე (მაგ., 3B82F6 ან #3B82F6). შემოკლებული 3-ციფრიანი hex, rgb() ჩანაწერი და CSS ფერების სახელები იქ არ იშიფრება — მაგრამ შეგიძლიათ ნებისმიერი ფერი ვიზუალურად აირჩიოთ თითოეული ველის გვერდით არსებული ჩაშენებული ფერის ამომრჩევით, და HEX ველი შესაბამისად განახლდება.