ფერის ჩრდილები და ტონები — სრული პალიტრა ერთი ფერიდან

აირჩიეთ ერთი საბაზისო ფერი და მიიღეთ ტონებისა და ჩრდილების სრული სკალა — ღია ტონები, შერეული თეთრისკენ, მის ზემოთ, და მუქი ჩრდილები, შერეული შავისკენ, მის ქვემოთ — თითოეული საფეხური ზუსტი HEX კოდითა და სინათლის პროცენტით. ეს არის იგივე ტიპის 50-900 სკალა, რომელსაც იყენებს Tailwind CSS და დიზაინის უმეტესი სისტემები, გენერირებული ნებისმიერი ფერიდან, რომელსაც აირჩევთ.

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

ჩრდილების სკალა არის ერთი ფერის ვარიაციების სერია სხვადასხვა სინათლის დონეზე, რომელსაც იყენებენ UI დიზაინში ისეთი ელემენტებისთვის, როგორიცაა hover მდგომარეობები, გამორთული მდგომარეობები, საზღვრები და ფონები, რომლებიც უნდა უკავშირდებოდეს ბრენდის ფერს, მაგრამ არ იყოს მისი იდენტური.

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

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

აგენერირებს დიზაინის სისტემის სტილის სკალას (Tailwind-ის 50/100/200.../900 სკალის მსგავსად) ნებისმიერი ცალკეული ფერიდან, და არა მხოლოდ ფიქსირებული წინასწარ განსაზღვრული პალიტრიდან.
აირჩიეთ 7, 9 ან 11 საფეხური, იმის მიხედვით, თუ რამდენად დეტალური სკალა გჭირდებათ.
ყოველი საფეხური აჩვენებს ზუსტ HEX კოდსა და სინათლის პროცენტს — დააწკაპუნეთ კოპირებისთვის.
ინარჩუნებს ტონსა და გაჯერებას მუდმივად მთელ სკალაზე, ამიტომ ყველა ჩრდილი აშკარად უკავშირდება საბაზისო ფერს და არ იხრება ნაცრისფრისკენ.
უფასო, მყისიერი და მთლიანად ლოკალურად მომუშავე.

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

აირჩიეთ თქვენი საბაზისო ფერი ფერის ამომრჩევის საშუალებით ან HEX კოდის აკრეფით.
აირჩიეთ, რამდენი საფეხური გსურთ სკალაში (7, 9 ან 11).
წაიკითხეთ თითოეული ჩრდილის HEX კოდი და სინათლის პროცენტი პირდაპირ მის ნიმუშზე.
დააწკაპუნეთ ნებისმიერ ნიმუშზე მისი HEX კოდის დასაკოპირებლად.

მაგალითი

შეყვანა

#3B82F6 (საშუალო ლურჯი), 9 საფეხური

შედეგი

9 ჩრდილი, თითქმის თეთრი ტონიდან (~95% სინათლე) თითქმის შავ ჩრდილამდე (~10% სინათლე), სადაც #3B82F6 თავად განთავსებულია როგორც შუა საფეხური

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

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

ეს იგივე სისტემაა, რომელსაც Tailwind CSS იყენებს თავისი ფერების სკალებისთვის?

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

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

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

შემიძლია გამოვიყენო ეს ჩრდილები პირდაპირ როგორც CSS custom properties?

დიახ — დააკოპირეთ თითოეული HEX კოდი და ჩასვით თქვენს CSS ცვლადებში (მაგ. --color-brand-100-დან --color-brand-900-მდე), სკალის პოზიციის შესაბამისად, თქვენი პროექტის სახელდების სისტემის მიხედვით.

ამის თუ ფერის შემრევის გამოყენება მჯობს?

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

რა მოხდება, თუ ჩემი საბაზისო ფერი უკვე ძალიან ღია ან ძალიან მუქია?

საბაზისო ფერი ყოველთვის შუა რიგში მდებარეობს, ტონები კი მის ზემოთ დაახლოებით 95% სინათლემდე იზრდება, ხოლო ჩრდილები მის ქვემოთ დაახლოებით 10%-მდე მცირდება. თუ თქვენი საბაზისო ფერი უკვე თითქმის თეთრია, სკალის ტონის ნახევარი შეკუმშული იქნება ვიწრო სინათლის დიაპაზონში (თითქმის იდენტური რიგები), ჩრდილის ნახევარი კი ფართოდ გაიშლება — და პირიქით, ძალიან მუქი საბაზისო ფერისთვის. ყველაზე თანაბრად განაწილებული სკალისთვის, დაიწყეთ თქვენი ფერის საშუალო სინათლის ვერსიით (დაახლოებით 40-60% სინათლე).

შეუძლია მას ტონების (ფერი ნაცრისფერთან შერეული) გენერირებაც?

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

ფერის ჩრდილების გენერატორი