কালার পিকার
যেকোনো রং চোখে দেখে বাছুন বা মান টাইপ করুন। HEX, RGB, HSL বা HSV কপি করুন। আইড্রপার দিয়ে আপনার স্ক্রিন থেকে রং নিন। একটি প্যালেট তৈরি করুন এবং CSS ভেরিয়েবল বা JSON হিসেবে এক্সপোর্ট করুন। সবকিছু আপনার ব্রাউজারেই চলে — কিছুই আপলোড হয় না।
টিন্ট ও শেড
কোনো সোয়াচে ক্লিক করে সেটিকে সক্রিয় রং করুন। HEX মানের জন্য তার উপর হোভার করুন।
কালার হিস্ট্রি
এখনও কোনো রং নেই — শুরু করতে উপর থেকে একটি বাছুন।
কাস্টম প্যালেট
উপরের "+ প্যালেটে যোগ করুন" বোতাম দিয়ে রং যোগ করুন।
রঙের ফরম্যাট রেফারেন্স
| ফরম্যাট | উদাহরণ | রেঞ্জ | যার জন্য সেরা |
|---|---|---|---|
| HEX | #5b8cff | #000000–#FFFFFF | ওয়েব CSS, HTML, ডিজাইন টোকেন |
| RGB | rgb(91, 140, 255) | প্রতি চ্যানেল 0–255 | CSS, স্ক্রিন ডিজাইন, ব্লেন্ডিং |
| HSL | hsl(225, 100%, 68%) | H: 0–360°, S/L: 0–100% | CSS, সহজ মানবিক সম্পাদনা (হালকা/গাঢ় করা) |
| HSV / HSB | hsv(225, 64%, 100%) | H: 0–360°, S/V: 0–100% | ডিজাইন অ্যাপ (Figma, Photoshop পিকার) |
| rgba / hsla | rgba(91,140,255,0.8) | আলফা: 0–1 | CSS স্বচ্ছতা |
| 8-অঙ্কের HEX | #5b8cffcc | #00000000–#FFFFFFFF | CSS4, Android, আলফা সহ SVG |
রঙের গণিত কীভাবে কাজ করে
HSV (225°, 64%, 100%) থেকে শুরু করে — এই পিকারের মূল মডেল:
- HSV → RGB: হিউ 225° নীল-থেকে-ইন্ডিগো অংশে পড়ে। স্ট্যান্ডার্ড HSV→RGB সূত্র থেকে: R=91, G=140, B=255।
- RGB → HEX: প্রতিটি চ্যানেল বেস 16-এ → 91=0x5B, 140=0x8C, 255=0xFF →
#5B8CFF। - RGB → HSL: Max=255 (B), min=91 (R)। লাইটনেস = (255+91)/2/255 ≈ 67.8%। স্যাচুরেশন = (255−91)/(255−|255+91−255|) ≈ 100%। হিউ = 225°। →
hsl(225, 100%, 68%)। - আলফা: 0.8 আলফা hex-এ CC যোগ করে (0.8×255=204=0xCC) →
#5B8CFFCCবাrgba(91,140,255,0.8)।
একটি কালার পিকার কীভাবে কাজ করে
একটি গ্রাফিক্যাল কালার পিকার আসলে তিনটি নিয়ন্ত্রণ একসঙ্গে কাজ করা। যে বড় বর্গক্ষেত্রের ভিতরে আপনি টেনে নিয়ে যান তা একটি দ্বি-মাত্রিক স্যাচুরেশন/ভ্যালু ফিল্ড: বাঁ থেকে ডানে যাওয়ার সময় রংটি কতটা উজ্জ্বল তা বদলায় (স্যাচুরেশন), আর উপর থেকে নিচে যাওয়ার সময় রংটি কতটা হালকা বা গাঢ় তা বদলায় (ভ্যালু, অর্থাৎ ব্রাইটনেস)। তার পাশের সরু পট্টি — হিউ স্লাইডার — মূল রংটি বাছাই করে, যা লাল, কমলা, হলুদ, সবুজ, সায়ান, নীল ও ম্যাজেন্টা পেরিয়ে 360°-এ আবার লালে ফিরে আসে। তৃতীয় একটি ঐচ্ছিক স্লাইডার আলফা (অপাসিটি) ঠিক করে, সম্পূর্ণ স্বচ্ছ থেকে সম্পূর্ণ অস্বচ্ছ পর্যন্ত, সাধারণত একটি চেকারবোর্ডের উপর দেখানো হয় যাতে আপনি বুঝতে পারেন রংটি আসলে কতটা স্বচ্ছ।
এই বর্গ-এবং-স্লাইডার লেআউটটি সরাসরি RGB-এর উপর নয়, বরং HSV মডেল (Hue, Saturation, Value) এবং তার ঘনিষ্ঠ আত্মীয় HSL (Hue, Saturation, Lightness)-এর উপর তৈরি, আর এর কারণ মানবিক। HSV সেভাবেই মেলে যেভাবে মানুষ রঙের কথা ভাবে: আপনি প্রথমে ঠিক করেন কোন রং চান — হিউ — তারপর তা কতটা উজ্জ্বল ও কতটা ঝলমলে হবে। "একটু কম তীব্র আকাশি নীল" পেতে তিনটি স্বাধীন 0–255 লাল, সবুজ ও নীল মান সমন্বয় করা, একটিমাত্র বর্গের ভিতরে টেনে নেওয়ার চেয়ে অনেক কঠিন। যেহেতু স্লাইডার হিউকে স্থির রাখে যখন আপনি বর্গটি অন্বেষণ করেন, পিকার সেই একটি হিউয়ের জন্য পুরো স্যাচুরেশন/ভ্যালু তলকে একটি মসৃণ গ্রেডিয়েন্ট হিসেবে দেখাতে পারে — ঠিক সেই ফিল্ডটাই যা আপনি এই পৃষ্ঠায় দেখছেন।
এই ডিজাইনকে Adobe Photoshop-এর কালার পিকার জনপ্রিয় করে তুলেছিল এবং তারপর থেকে এটি Figma, Sketch, GIMP এবং প্রায় প্রতিটি ওয়েব-ভিত্তিক পিকারের মতো টুলে কার্যত মানদণ্ড হয়ে উঠেছে। প্রথাগুলি এত গভীরে প্রোথিত যে বেশিরভাগ মানুষ কোনো অপরিচিত পিকারও তৎক্ষণাৎ চালাতে পারেন: উজ্জ্বল রংগুলি বর্গের উপর-ডানে বসে, সাদা উপর-বাঁয়ে, আর কালো হিউ যাই হোক নিচের কিনারা বরাবর চলে।
আইড্রপার এবং নেটিভ ব্রাউজার পিকার
ব্রাউজারগুলি নিজস্ব রং-বাছাইয়ের যন্ত্রপাতি নিয়ে আসে, আর কোন অংশটি কী করে তা জানা কাজে লাগে। HTML-এর <input type="color"> এলিমেন্ট একটি নেটিভ সোয়াচ দেখায় যা ক্লিক করলে অপারেটিং সিস্টেমের রং-ডায়ালগ খোলে। প্রথাগতভাবে এর মান সবসময় #rrggbb রূপে সাত-অক্ষরের লোয়ারকেস hex স্ট্রিং — ঐতিহাসিকভাবে এতে কোনো আলফা চ্যানেল নেই এবং সেট না থাকলে এটি #000000-এ ডিফল্ট হয়, এই কারণেই এত সরল "কালার পিকার" কেবল hex-ই দেয়। (নতুন ব্রাউজারগুলি একটি ঐচ্ছিক alpha অ্যাট্রিবিউট ও বিস্তৃত রং-স্থান উন্মোচন করতে শুরু করেছে, তবে সাধারণ hex মানই সেই ন্যূনতম-সাধারণ ভিত্তি যার উপর আপনি সর্বত্র নির্ভর করতে পারেন।)
আইড্রপার একটি ভিন্ন ও নতুন ক্ষমতা। EyeDropper API কোনো ওয়েব পৃষ্ঠাকে স্ক্রিনের যেকোনো পিক্সেলের রং নিতে দেয় — কেবল পৃষ্ঠার ভিতরে নয়, বরং যেখানেই ব্যবহারকারী দেখতে পান, অন্য উইন্ডো সহ। new EyeDropper().open() কল করলে কার্সর একটি ম্যাগনিফায়ারে পরিণত হয়; ফেরত আসা promise কেবল তখনই রিজলভ হয় যখন ব্যবহারকারী ইচ্ছাকৃতভাবে কোনো পিক্সেলে ক্লিক করেন, এবং একটি অবজেক্ট ফেরত দেয় যার sRGBHex প্রপার্টিতে নেওয়া রংটি থাকে। গোপনীয়তার জন্য এটি কেবল কোনো প্রকৃত ব্যবহারকারী-অঙ্গভঙ্গি (যেমন এই টুলের আইড্রপার বোতাম) থেকেই ট্রিগার করা যায়, এটি কেবল নিরাপদ HTTPS প্রসঙ্গে চলে, এবং কখনও নীরবে পিক্সেল পড়ে না — Escape চাপলে তা বাতিল হয়। সমর্থন এখন Chromium-ভিত্তিক ব্রাউজার (Chrome, Edge ও Opera) পর্যন্ত সীমিত; Firefox ও Safari এখনও এটি বাস্তবায়ন করেনি, তাই একটি ভালো-তৈরি টুল API অনুপস্থিত থাকলে বোতামটি নিষ্ক্রিয় করে দেয়, যেমন এটি করে। আপনি যা নেন তা আপলোড হয় না — রংটি সম্পূর্ণ আপনার ডিভাইসেই সমাধান হয়।
আপনার চোখ আসলে কীভাবে রং দেখে
একটি স্ক্রিন কেবল তিনটি আলো দিয়ে প্রতিটি রং নকল করতে পারে কেন, তার শিকড় চোখের জীববিজ্ঞানে। মানুষের রং-দৃষ্টি ত্রিবর্ণী (trichromatic): রেটিনায় তিন ধরনের কোন কোষ থাকে, প্রতিটি তরঙ্গদৈর্ঘ্যের একটি ভিন্ন ব্যান্ডের প্রতি সংবেদনশীল। L (long) কোন প্রায় 560 nm-এ শীর্ষে থাকে ও লালচে আলোর প্রতি সবচেয়ে বেশি সাড়া দেয়, M (medium) কোন সবুজ আলোর জন্য প্রায় 530 nm-এ, এবং S (short) কোন নীল আলোর জন্য প্রায় 420 nm-এ শীর্ষে থাকে। আপনার মস্তিষ্ক তরঙ্গদৈর্ঘ্য সরাসরি মাপে না; এটি এই তিন কোন প্রকারের আপেক্ষিক ফায়ারিং হার তুলনা করে এবং সেই অনুপাত থেকে একটি রঙের অনুমান করে।
সেই তুলনা-ভিত্তিক ব্যবস্থার একটি গভীর পরিণতি আছে যাকে মেটামেরিজম বলে: তরঙ্গদৈর্ঘ্যের দুটি সম্পূর্ণ ভিন্ন মিশ্রণ একই কোন সাড়া তৈরি করতে পারে এবং তাই ঠিক একই রঙের মতো দেখাতে পারে। একটি বিশুদ্ধ বর্ণালী হলুদ এবং লাল-সবুজ আলোর একটি উপযুক্ত মিশ্রণ ভৌতভাবে ভিন্ন তবু অনুভূতিতে অভেদ্য। ডিসপ্লেগুলি এর নির্লজ্জ সুযোগ নেয় — কেবল লাল, সবুজ ও নীল সাব-পিক্সেল মিশিয়ে তারা চোখ যত রঙের নাম দিতে পারে প্রায় সবগুলির মেটামার পুনরায় তৈরি করে, ঠিক এই কারণেই RGB মডেল প্রতিটি স্ক্রিন ও প্রতিটি কালার পিকারের ভিত্তি।
প্রতি চ্যানেলে 8 বিট নিয়ে একটি ডিসপ্লে লাল, সবুজ ও নীলের 256-256 স্তর দেয় — 256 × 256 × 256 ≈ 1.67 কোটি সমন্বয়। চোখ কেবল প্রায় এক কোটি রঙের পার্থক্য করতে পারে, তাই সাধারণ স্ক্রিন-কাজের জন্য এই "ট্রুকালার" গভীরতা কার্যত অধিকাংশ মানুষ যা দেখতে পারে তার বাইরে, এবং দৃশ্যমান ব্যান্ডিং বিরল। জানার মতো একটি বৈশিষ্ট্য: চোখ লাল বা নীলের চেয়ে সবুজের প্রতি উল্লেখযোগ্যভাবে বেশি সংবেদনশীল — L ও M কোন প্রভাবশালী থাকে যখন S কোন মোটের একটি ছোট অংশ গঠন করে — এই কারণেই সবুজ অনুভূত ব্রাইটনেসে সবচেয়ে বেশি অবদান রাখে এবং পিকারে মাঝারি-সবুজ এত তীব্র দেখাতে পারে।
আপনার কোন রঙের ফরম্যাট কপি করা উচিত?
একটি পিকার তখনই কাজের যখন তা আপনাকে রং সেই নোটেশনে দেয় যা আপনার লক্ষ্য আসলে চায়। Hex (#rrggbb, বা আলফা সহ #rrggbbaa) ওয়েবের সর্বজনীন মুদ্রা — সংক্ষিপ্ত, কপি-পেস্ট-বান্ধব ও সর্বত্র গৃহীত — তবে এটি পড়া কঠিন: কেউ #5b8cff-এর দিকে তাকিয়ে জানতে পারে না এটি হালকা নীল। rgb() / rgba() একই সংখ্যা দশমিকে দেখায় এবং ব্লেন্ডিং বা স্ক্রিপ্টিং-এ কাজে লাগে। hsl() / hsla() CSS-এ হাতে সম্পাদনার জন্য সবচেয়ে সুবিধাজনক, কারণ কেবল লাইটনেস মান সমন্বয় করলে রং তার হিউ না ঘেঁটেই অনুমেয়ভাবে হালকা বা গাঢ় হয়।
এগুলি ছাড়িয়ে, আধুনিক CSS আরও কয়েকটি নতুন ফাংশন যোগ করে। hwb() (hue, whiteness, blackness) একটি রংকে কিছু সাদায় টিন্ট ও কিছু কালোয় শেড করা একটি মূল হিউ হিসেবে বর্ণনা করে — একটি স্বজ্ঞাত চিত্রকর-মডেল যা এখনও HSL-এর সঙ্গে sRGB স্থানেই থাকে। আরও গুরুত্বপূর্ণ, lab() ও lch() ডিভাইস-নিরপেক্ষ CIELAB স্থান ব্যবহার করে, এবং oklab() / oklch() Oklab স্থান। Oklab ও OkLCh-এর মূল সুবিধা হল যে তারা অনুভূতিতে সমরূপ (perceptually uniform): একটি স্থির সংখ্যাগত পদক্ষেপ রং-স্থানে যেখানেই হোক প্রায় সমান দেখতে পরিবর্তন তৈরি করে। এটিই তাদের সমান-ব্যবধানের প্যালেট, ধূসর "মৃত অঞ্চল" ছাড়া মসৃণ গ্রেডিয়েন্ট, এবং অনুমেয় লাইটনেস-র্যাম্প তৈরির জন্য চমৎকার করে তোলে — এই কারণেই ডিজাইন-সিস্টেম রং-স্কেলের জন্য oklch()-এর ক্রমবর্ধমান সুপারিশ করা হয়।
| ফরম্যাট | উদাহরণ / নোটেশন | যার জন্য সেরা |
|---|---|---|
| Hex (6 / 8-অঙ্কের) | #5b8cff, #5b8cffcc | সর্বজনীন ওয়েব ব্যবহার, ডিজাইন টোকেন |
rgb() / rgba() | rgb(91 140 255) | স্ক্রিপ্টিং, ব্লেন্ডিং, স্বচ্ছতা |
hsl() / hsla() | hsl(225 100% 68%) | হাতে সম্পাদনা: হালকা, গাঢ়, হিউ বদলানো |
hwb() | hwb(H W% B%) | চিত্রকর-শৈলীর "হিউ + সাদা + কালো" ভাবনা |
lab() / lch() | lab(L a b) / lch(L C H) | ডিভাইস-নিরপেক্ষ, ওয়াইড-গ্যামাট রং |
oklch() / oklab() | oklch(L C H) | অনুভূতিতে সমরূপ প্যালেট, গ্রেডিয়েন্ট, র্যাম্প |
বেশিরভাগ প্রতিদিনের ওয়েব-কাজের জন্য hex বা rgb() কপি করুন; হাতে বদল করতে চাইলে hsl()-এর আশ্রয় নিন, আর যখন আপনি একটি সুসংগঠিত প্যালেট তৈরি করছেন ও অনুভূতিতে সমান পদক্ষেপ চান তখন oklch() বা lab()। (উপরের প্রথম তিন সারি এই পৃষ্ঠার বর্তমান রং দেখায়; নিচের সারিগুলি ফাংশন নোটেশন দেখায়, একই মানের সঠিক রূপান্তর নয়।)
রং-অন্ধতা ও কনট্রাস্টের জন্য ডিজাইন করা
আপনার কাছে যে রং দুর্দান্ত দেখায় সেটি বাছা, সবার জন্য কাজ করে এমন রং বাছার মতো নয়। উত্তর-ইউরোপীয় বংশোদ্ভূত প্রায় 8% পুরুষ ও 0.5% নারী-র কোনো না কোনো রূপের রং-দৃষ্টির ঘাটতি আছে, কারণ সবচেয়ে সাধারণ প্রকারগুলি X ক্রোমোজোমের জিনের কারণে ঘটে। বিপুল সংখ্যাগরিষ্ঠ লাল–সবুজ ঘাটতির — ডিউটেরানোমালি, অর্থাৎ সবুজ সাড়ার একটি সরণ, একক সবচেয়ে সাধারণ রূপ — যা লাল, সবুজ, বাদামি ও কমলাকে সহজে গুলিয়ে দেয়। নীল–হলুদ (ট্রাইটান) ঘাটতি আছে তবে বিরল। ব্যবহারিক শিক্ষাটি সেই পুরনো সুগম্যতা-সূত্র "কেবল রঙের উপর নির্ভর করবেন না": অর্থ বোঝাতে রংকে কখনও একমাত্র উপায় করবেন না। কোনো লাল ত্রুটি-অবস্থাকে একটি আইকন বা লেবেলের সঙ্গে জোড়া দিন, চার্ট সিরিজগুলিকে প্যাটার্ন বা সরাসরি লেবেল দিয়ে আলাদা করুন, এবং লিঙ্ককে রঙিন হওয়ার পাশাপাশি আন্ডারলাইনও করুন।
পঠনযোগ্যতা সমস্যার অন্য অর্ধেক, আর এখানে দৃঢ় সংখ্যা আছে। Web Content Accessibility Guidelines (WCAG) টেক্সট ও তার পটভূমির মধ্যে একটি কনট্রাস্ট অনুপাত সংজ্ঞায়িত করে, এবং ব্যাপকভাবে ব্যবহৃত AA স্তরে তারা সাধারণ-আকারের টেক্সটের জন্য অন্তত 4.5:1 এবং বড় টেক্সটের জন্য 3:1 (মোটামুটি 18pt, বা 14pt বোল্ড) দাবি করে, সেই সঙ্গে ইউজার-ইন্টারফেস উপাদান ও অর্থপূর্ণ গ্রাফিক্সের জন্যও। তাই এই পিকার যখন আপনাকে বডি-টেক্সটের জন্য কোনো hex মান দেয়, তখন আসল প্রশ্ন "এটি কি সুন্দর?" নয় বরং "এটি কি পটভূমির বিপরীতে 4.5:1 পার করে?"। একটি ভালো অভ্যাস হল এখানে রং বাছুন এবং তারপর ঠিক করার আগে সেই জোড়াটি কোনো নিবেদিত কনট্রাস্ট চেকার-এ যাচাই করুন।
একটি রং-বাছাই ওয়ার্কফ্লো যা বাড়ে
একটি ভালো রং বাছা সহজ; পুরো প্রকল্প জুড়ে সামঞ্জস্যপূর্ণ থাকাই সেখানে পিকার তার মূল্য উশুল করে। একটি পুনরাবৃত্তিযোগ্য ওয়ার্কফ্লো এমন দেখায়। প্রথমে, ক্যাপচার — অনুমান করার বদলে কোনো লোগো, স্ক্রিনশট বা রেফারেন্স ছবি থেকে একটি সঠিক ব্র্যান্ড রং তুলতে আইড্রপার ব্যবহার করুন, যাতে মানটি পিক্সেল পর্যন্ত সঠিক থাকে। দ্বিতীয়, অ্যাঙ্কর — কয়েকটি মূল রঙের একটি ছোট সেটে (একটি প্রাইমারি, একটি সেকেন্ডারি, একটি নিউট্রাল ও কয়েকটি অ্যাকসেন্ট) থিতু হন এবং প্রতিটি প্যালেটে যোগ করুন দিয়ে সংরক্ষণ করুন যাতে আপনাকে সেগুলি স্মৃতি থেকে বারবার বের করতে না হয়। তৃতীয়, বিস্তার — সেই অ্যাঙ্কর থেকে হোভার-অবস্থা, বর্ডার ও পটভূমির জন্য প্রয়োজনীয় টিন্ট ও শেড তৈরি করুন, হিউ স্থির রেখে যাতে পুরো পরিবার সুসংগত থাকে। চতুর্থ, এক্সপোর্ট — পুরো সেটটি CSS কাস্টম প্রপার্টি (--color-1, --color-2, …) বা JSON হিসেবে বের করুন যাতে একই টোকেন প্রতিটি পৃষ্ঠা ও কম্পোনেন্ট চালায়।
স্বচ্ছতা তার নিজের উল্লেখের যোগ্য। যখনই আপনি কোনো ওভারলে, কোনো সূক্ষ্ম টিন্ট বা এমন রং চান যা তার পিছনের জিনিস অনুযায়ী মানিয়ে নেয়, তখন হাতে-মেশানো নিরেট রঙের বদলে আলফা ব্যবহার করুন — কোনো ছবির উপর একটি rgba(0, 0, 0, 0.5) স্ক্রিম, ছবি যাই হোক, সঠিক থাকে, যেখানে একটি বেকড-ইন ধূসর থাকে না। যেহেতু এই টুল তার হিস্ট্রি ও প্যালেট আপনার ব্রাউজারের লোকাল স্টোরেজে রাখে, আপনি ট্যাব বন্ধ করে পরে একই কাজ-সেটে ফিরতে পারেন, তারপর যেকোনো সোয়াচ সরাসরি আপনার স্টাইলশিটে কপি করতে পারেন। লক্ষ্য হল রঙের জন্য একটিমাত্র সত্য-উৎস যা আপনার ডিজাইন টোকেনে থাকে, ফাইলে ছড়িয়ে থাকা নকল করা hex স্ট্রিং নয়।
রং বাছাইয়ের সাধারণ ভুল
মুষ্টিমেয় কিছু ভুল বারবার সামনে আসে। প্রথমটি হল hex-কেই পুরো গল্প ধরে নেওয়া: একটি hex কোড এক নজরে কোনো রঙের লাইটনেস বা হিউ সম্পর্কে কিছু বলে না, তাই সরাসরি hex-এ সম্পাদনা করলে রং বিপথে যাওয়া সহজ। কোনো রং নিয়ে যুক্তি করতে চাইলে HSL বা HSV-তে যান, এবং hex সংরক্ষণের জন্য রাখুন। দ্বিতীয়টি হল আলফাকে উপেক্ষা করা — ভুলে যাওয়া যে #000000 এবং 50%-অপাসিটির কালো সম্পূর্ণ ভিন্ন আচরণ করে, বা কোনো আধা-স্বচ্ছ রূপকে একটি অস্বচ্ছ রং হিসেবে হার্ড-কোড করা যা তারপর অন্য পটভূমিতে ব্যর্থ হয়।
তৃতীয়, এবং সবচেয়ে গুরুতর, হল কম-কনট্রাস্টের জোড়া বাছা কারণ সেগুলি আপনার উজ্জ্বল, ভালোভাবে ক্যালিব্রেট করা মনিটরে মার্জিত দেখায়। সাদার উপর হালকা-ধূসর টেক্সট রোদে ফোনে অদৃশ্য হতে পারে এবং WCAG-এ সরাসরি ব্যর্থ হবে; অনুপাত সবসময় যাচাই করুন। চতুর্থটি হল ধরে নেওয়া যে স্ক্রিনের রং প্রিন্টের সমান: মনিটর RGB আলো নির্গত করে যখন প্রিন্ট কাগজে CMYK কালি মেশায়, আর দুটি গ্যামাট মেলে না — একটি উজ্জ্বল স্ক্রিন নীল বা নিয়ন সবুজ প্রায়ই কালিতে পুনরুৎপাদন করা যায় না, তাই প্রিন্টের জন্য নির্ধারিত রংগুলি স্ক্রিনে বিশ্বাস করার বদলে কোনো CMYK ওয়ার্কফ্লোতে প্রুফ করা উচিত। শেষে, আপনার রং সংরক্ষণ না করা সময় নষ্ট করে: সপ্তাহে পাঁচবার একই ব্র্যান্ড নীল আবার বের করা পাঁচটি সামান্য ভিন্ন নীল হওয়ার গ্যারান্টি। একবার এটি ধরুন, কোনো প্যালেটে সংরক্ষণ করুন, টোকেন হিসেবে এক্সপোর্ট করুন, এবং সর্বত্র পুনরায় ব্যবহার করুন।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
- কালার পিকারে HSL এবং HSV-এর মধ্যে পার্থক্য কী?
- HSL (Hue, Saturation, Lightness) এবং HSV (Hue, Saturation, Value/Brightness) দুটোই সিলিন্ডার-আকৃতির রঙের মডেল। HSL-এ লাইটনেস 0% কালো ও 100% সাদা, বিশুদ্ধ রং 50%-এ। HSV-তে ভ্যালু 0% কালো ও 100% সম্পূর্ণ স্যাচুরেটেড রং — সাদা কেবল স্যাচুরেশন কমিয়েই পাওয়া যায়। বেশিরভাগ কালার পিকার ক্যানভাস ভিতরে HSV ব্যবহার করে কারণ 2D গ্রেডিয়েন্ট স্বাভাবিকভাবেই এর সঙ্গে মেলে: অনুভূমিক = স্যাচুরেশন, উল্লম্ব = ভ্যালু।
- আইড্রপার টুলটি কীভাবে কাজ করে?
- আইড্রপার EyeDropper API ব্যবহার করে, একটি আধুনিক ব্রাউজার সুবিধা যা আপনাকে আপনার স্ক্রিনের যেকোনো জায়গা থেকে যেকোনো পিক্সেল নমুনা নিতে দেয়। এটি Chrome, Edge ও Opera-তে সমর্থিত। Firefox ও Safari এখনও এটি সমর্থন করে না। কোনো ছবির ডেটা কোনো সার্ভারে পাঠানো হয় না — নেওয়া রংটি সম্পূর্ণ আপনার ব্রাউজারেই প্রক্রিয়া করা হয়।
- কালার হিস্ট্রি কী এবং তা কতক্ষণ রাখা হয়?
- আপনি যে রংই বাছেন তা আপনার ব্যবহৃত সর্বশেষ ১২টি রং দেখানো একটি হিস্ট্রি স্ট্রিপে যুক্ত হয়। এটি আপনার ব্রাউজারের localStorage-এ সংরক্ষিত হয় এবং একই ডিভাইসে সেশনের মধ্যে থেকে যায়। আপনি যেকোনো সময় এটি মুছতে পারেন। কিছুই কোনো সার্ভারে পাঠানো হয় না।
- টিন্ট এবং শেড কী?
- টিন্ট তৈরি হয় কোনো রংকে সাদার সঙ্গে মিশিয়ে (HSL লাইটনেস 100%-এর দিকে বাড়িয়ে), যা হালকা সংস্করণ দেয়। শেড তৈরি হয় কালোর সঙ্গে মিশিয়ে (লাইটনেস 0%-এর দিকে কমিয়ে)। এই টুলটি বর্তমান রঙের 5টি টিন্ট ও 5টি শেড দেখায়।
- আমি আমার কাস্টম প্যালেট কীভাবে এক্সপোর্ট করব?
- একটি সংগ্রহ তৈরি করতে "প্যালেটে যোগ করুন" ব্যবহার করুন, তারপর CSS কাস্টম প্রপার্টি (যেমন
--color-1: #5b8cff;) সহ একটি .css ফাইল ডাউনলোড করতে "CSS এক্সপোর্ট করুন"-এ ক্লিক করুন, অথবা hex মানের একটি তালিকা পেতে "JSON এক্সপোর্ট করুন"-এ। আপনার প্যালেটও সেশনের মধ্যে localStorage-এ সংরক্ষিত থাকে।