Loading…

সম্পর্কে অনলাইন কালার পিকার ও কনভার্টার

একটি ইমেজ ড্রপ করুন, একটি কালার পেস্ট করুন বা হুইল ব্যবহার করে পিক্সেল-পারফেক্ট কালার নিন। টুলটি একটি সমৃদ্ধ ক্লায়েন্ট-সাইড অ্যানালাইসিস চালায়: এটি আপনার HEX নরমালাইজ করে, RGB/HSL/HSV/CMYK গণনা করে, XYZ/LAB/LCH-এ কনভার্ট করে, লুমিন্যান্স এবং WCAG কনট্রাস্ট ক্যালকুলেট করে, এবং হারমনিয়াস প্যালেট জেনারেট করে। আপনি তারপর যেকোনো ফরম্যাট CSS-রেডি টোকেন হিসেবে কপি করতে পারেন বা একটি সামঞ্জস্যপূর্ণ ডিজাইন সিস্টেম বিল্ড করতে হারমনি ব্যবহার করতে পারেন।

এই কালার পিকার কী করতে পারে

  • ইমেজ* থেকে কালার স্যাম্পল নিন অথবা সঠিক কালার হুইল বা HEX/RGB ইনপুট থেকে শুরু করুন
  • সমৃদ্ধ রূপান্তর: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • #000000 এবং #FFFFFF এর বিরুদ্ধে আপেক্ষিক লুমিন্যান্স ব্যবহার করে বিল্ট-ইন WCAG কনট্রাস্ট চেকার
  • প্রয়োজনে ওয়েব-সেফ এবং শর্টহ্যান্ড HEX পরামর্শ
  • কালার হারমনি: পরিপূরক, ট্রায়াডিক, টেট্রাডিক, অ্যানালগাস, মনোক্রোম (হিউ রোটেশন দ্বারা গণনা করা)
  • কনট্রাস্ট সমস্যা পূর্বাভাস দেওয়ার জন্য লুমিন্যান্স এবং উপলব্ধ ব্রাইটনেস প্রিভিউ
  • নিকটতম RGB দূরত্বের ভিত্তিতে আনুমানিক প্যান্টোন-এর মতো ম্যাচিং (ক্যাশড ডেটাসেট সহ)
  • বিশ্লেষণ ক্লায়েন্ট-সাইডে চলে; ঐচ্ছিক প্যান্টোন লুকআপ সক্ষম হলে শুধু ন্যূনতম ডেটা ব্যবহার করা হয়

🔧 কালার পিকার কীভাবে ব্যবহার করবেন for color-picker

1

১. একটি বেস কালার নির্বাচন বা পিক করুন

একটি HEX মান পেস্ট করুন, RGB/HSL টাইপ করুন, অথবা পিকার ব্যবহার করে একটি ইমেজ বা হুইল থেকে কালার নিন। টুলটি এটিকে অভ্যন্তরীণভাবে একটি নিরাপদ HEX মান হিসেবে স্বাভাবিক করে।

2

২. হিউ এবং লাইটনেস সূক্ষ্মভাবে সামঞ্জস্য করুন

হিউ, স্যাচুরেশন এবং লাইটনেস সামঞ্জস্য করুন যতক্ষণ না সোয়াচটি সঠিক দেখায়। একটি বড় প্রিভিউ প্রসঙ্গের জন্য হালকা এবং গাঢ় পৃষ্ঠতলে কালার দেখায়।

3

৩. আপনার প্রয়োজনীয় ফরম্যাট পড়ুন এবং কপি করুন

এক ক্লিকে HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB এবং LCH কপি করুন। CSS ভেরিয়েবল, ডিজাইন টোকেন বা হ্যান্ডঅফ নোটের জন্য এগুলি ব্যবহার করুন।

4

৪. WCAG কনট্রাস্ট চেক করুন

#000000 এবং #FFFFFF এর বিরুদ্ধে sRGB লুমিন্যান্সের ভিত্তিতে কনট্রাস্ট রেশিও দেখুন। বডি টেক্সট, বড় শিরোনাম বা UI এলিমেন্টের জন্য একটি কালার কাজ করে কিনা তা দ্রুত সিদ্ধান্ত নিতে ফলাফল ব্যবহার করুন।

5

৫. হারমনি তৈরি করুন এবং একটি প্যালেট তৈরি করুন

হিউ রোটেশনের মাধ্যমে তৈরি পরিপূরক, ট্রায়াডিক, টেট্রাডিক, অ্যানালগাস এবং মনোক্রোম কালার এক্সপ্লোর করুন। আপনার প্রিয়গুলি একটি প্যালেট/ইতিহাসে যোগ করুন এবং সেগুলি টোকেন হিসেবে এক্সপোর্ট করুন।

প্রযুক্তিগত বিবরণ

ইনপুট হ্যান্ডলিং ও স্বাভাবিকীকরণ

টুলটি হেক্সাডেসিমাল কালার কোড গ্রহণ করে এবং সেগুলিকে অভ্যন্তরীণ রেফারেন্স হিসেবে একটি স্বাভাবিকীকৃত ৬-অঙ্কের HEX-এ রূপান্তরিত করে।

দিকআচরণমন্তব্য
HEX স্বাভাবিকীকরণ৩-অঙ্ক এবং ৬-অঙ্ক HEX, ঐচ্ছিক প্রারম্ভিক #সংক্ষিপ্ত HEX (যেমন #0f8) প্রসারিত হয়ে #00ff88 হয়; হেক্স নয় এমন অক্ষরগুলি সরানো হয়।
HEX8 সমর্থনRGBA #RRGGBBAA এর মাধ্যমেআলফা চ্যানেল ০–২৫৫ এ রূপান্তরিত হয়ে ৪র্থ বাইট হিসাবে যুক্ত হয়।
ওয়েব-সেইফ পরামর্শপ্রতি চ্যানেলে নিকটতম ৫১-ধাপে স্ন্যাপ করুনমানগুলি ৫১ এর নিকটতম গুণিতকে (০, ৫১, ১০২, ১৫৩, ২০৪, ২৫৫) বৃত্তাকার করা হয়।
সংক্ষিপ্ত HEX পরামর্শশুধুমাত্র যখন সংকোচনযোগ্যযখন HEX ডিজিটের প্রতিটি জোড়া পুনরাবৃত্তি হয় তখন দেখানো হয় (যেমন #112233 → #123)।

রং স্পেস এবং রূপান্তর

সমস্ত গণনা D65 রেফারেন্স সাদা সহ sRGB এর উপর ভিত্তি করে।

স্পেসগণনাব্যবহার
RGBস্বাভাবিকীকৃত HEX থেকে (প্রতি চ্যানেলে ০–২৫৫)রূপান্তরের জন্য বেস উপস্থাপনা।
HSL / HSVsRGB থেকে স্ট্যান্ডার্ড সিলিন্ড্রিক্যাল ট্রান্সফর্মস্বজ্ঞাত সম্পাদনা এবং সুরেলা গণনার জন্য ব্যবহৃত।
CMYKডিভাইস-স্বাধীন আনুমানিক১−সর্বোচ্চ(R,G,B) হিসাবে গণনা করা হয় ০–১০০% উপাদান সহ; ICC প্রোফাইলের সাথে যুক্ত নয়।
XYZলিনিয়ারাইজড sRGB → D65 ম্যাট্রিক্স ব্যবহার করে XYZLAB/LCH এবং গভীর বিশ্লেষণের জন্য মধ্যবর্তী স্পেস।
LABXYZ থেকে CIE L*a*b*উপলব্ধিগতভাবে আরও অভিন্ন মেট্রিক স্পেস।
LCHLAB থেকে CIE L*C*h°হিউ/ক্রোমা/লাইটনেস সমন্বয় এবং উপলব্ধিগত প্যালেট ডিজাইনের জন্য উপযোগী।

লুমিন্যান্স এবং WCAG কনট্রাস্ট

কনট্রাস্ট স্ট্যান্ডার্ড WCAG আপেক্ষিক লুমিন্যান্স সূত্র ব্যবহার করে গণনা করা হয়।

দিকবিস্তারিতনোট
আপেক্ষিক উজ্জ্বলতালিনিয়ারাইজড এসআরজিবি (Y উপাদান) থেকে গণনা করা হয়েছে০.২১২৬R + ০.৭১৫২G + ০.০৭২২B সহগ ব্যবহার করে।
কনট্রাস্ট অনুপাত(L1 + ০.০৫) / (L2 + ০.০৫)টুলটি #000000 এবং #FFFFFF এর বিপরীতে কনট্রাস্ট রিপোর্ট করে।
ডব্লিউসিএজি থ্রেশহোল্ডসাধারণ ও বড় টেক্সটের জন্য এএ/এএএসাধারণ থ্রেশহোল্ড: ৪.৫:১ (এএ সাধারণ), ৩:১ (এএ বড়), ৭:১ (এএএ সাধারণ), ৪.৫:১ (এএএ বড়)।

সুরেলা ও প্রাপ্ত রং

সুরেলা রংগুলো এইচএসএলে সহজ হিউ ঘূর্ণন হিসাবে তৈরি করা হয়, সম্পৃক্তি এবং উজ্জ্বলতা সংরক্ষণ করে।

সুরেলানিয়মউদাহরণ
পরিপূরক+১৮০° হিউরং চক্রের বিপরীত বিন্দু।
ত্রয়ী±১২০° হিউসমান ব্যবধানে তিনটি রং।
চতুর্মুখী+৯০°, +১৮০°, +২৭০° হিউচক্রে একটি আয়ত গঠনকারী চারটি রং।
সদৃশ−৩০° / +৩০° হিউমূল রঙের চারপাশের প্রতিবেশী।
একরঙাL-এ হালকা/গাঢ় করাএকই হিউ-এর উজ্জ্বল ও গাঢ় সংস্করণ।

প্যান্টোন-সদৃশ মিল (আনুমানিক)

যখন প্যান্টোন ডেটাসেট উপলব্ধ থাকে, টুলটি আরজিবি স্পেসে নিকটতম মিল গণনা করে।

দিকআচরণনোট
ডেটাসেট লোডিংক্যাশড + অ্যাসিঙ্ক লোডিং getPantoneColors / getPantoneColorsCached এর মাধ্যমেক্যাশ গরম থাকলে UI সঙ্গে সঙ্গে মিল দেখাতে পারে, অথবা সংক্ষিপ্ত অ্যাসিঙ্ক লোডের পরে।
মিল মেট্রিকআরজিবিতে স্কোয়ার্ড ইউক্লিডীয় দূরত্ব (০-২৫৫)দ্রুত, সহজ আনুমানিক; কোনো পারসেপচুয়াল ΔE* মেট্রিক নয়।
আউটপুটপ্যান্টোন-সদৃশ আইডি এবং নামশুধুমাত্র নির্দেশিকা হিসেবে প্রদর্শিত; কোনো অফিসিয়াল প্যান্টোন ম্যাপিং নয়।

পারফরম্যান্স ও গোপনীয়তা

রূপান্তর, লুমিন্যান্স, কনট্রাস্ট এবং হারমনি সম্পূর্ণ ক্লায়েন্ট-সাইডে গণনা করা হয়। কনফিগারেশনের উপর নির্ভর করে প্যান্টোন লুকআপ স্থানীয় বা দূরবর্তী ডেটাসেট পরামর্শ করতে পারে, কিন্তু কাঁচা রং সাধারণ HEX স্ট্রিং হিসেবেই থাকে যতক্ষণ না আপনি স্পষ্টভাবে শেয়ার বা এক্সপোর্ট করেন।

জনপ্রিয় ব্যবহারের ক্ষেত্র

UI/UX ও ফ্রন্ট-এন্ড

  • বাটন, লিংক এবং টেক্সটের জন্য অ্যাক্সেসিবল ফোরগ্রাউন্ড/ব্যাকগ্রাউন্ড জোড়া তৈরি করুন।
  • নির্বাচিত রং থেকে সরাসরি CSS ভেরিয়েবল এবং ডিজাইন টোকেন এক্সপোর্ট করুন।
  • থিম সুইচার বাস্তবায়নের আগে লাইট/ডার্ক মোডের জন্য কনট্রাস্ট চেক করুন।
/* CSS color tokens */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

ব্র্যান্ডিং ও ভিজুয়াল আইডেন্টিটি

  • একটি হিরো কালার থেকে প্রাইমারি/সেকেন্ডারি/অ্যাকসেন্ট প্যালেট তৈরি করুন।
  • লোগো বা প্রোডাক্ট লাইনের জন্য কমপ্লিমেন্টারি বা ট্রায়াডিক অপশন এক্সপ্লোর করুন।
  • ব্র্যান্ড গাইডলাইন প্রস্তুত করার আগে আনুমানিক প্যান্টোন-সদৃশ নামকরণ পান।

ডেটা ভিজুয়ালাইজেশন ও ড্যাশবোর্ড

  • সিরিজ কালার সংজ্ঞায়িত করুন যা লাইট এবং ডার্ক উভয় ব্যাকগ্রাউন্ডে আলাদা থাকে।
  • নিয়ন্ত্রিত পারসেপচুয়াল ধাপ সহ প্যালেট ডিজাইন করতে LAB/LCH ব্যবহার করুন।
  • দ্রুত চেক করুন যে চার্ট কালারগুলি লিজেন্ড এবং লেবেলে কনট্রাস্ট প্রত্যাশা পূরণ করে কিনা।

❓ Frequently Asked Questions

HEX, RGB, HSL এবং HSV-এর মধ্যে পার্থক্য কী?

HEX হল বেস 16-এ RGB মান লেখার একটি কমপ্যাক্ট উপায়। RGB sRGB-তে লাল/সবুজ/নীল উপাদান বর্ণনা করে। HSL এবং HSV আরও স্বজ্ঞাত সিলিন্ড্রিকাল মডেল: H হল কালার হুইলের হিউ, S হল স্যাচুরেশন, এবং L/V ব্রাইটনেস বা লাইটনেস নিয়ন্ত্রণ করে।

CMYK মান আনুমানিক দেখায় কেন?

রিয়েল CMYK আউটপুট প্রিন্টার প্রোফাইল, কালি, কাগজ এবং ক্যালিব্রেশনের উপর নির্ভর করে। এই টুলটি একটি ডিভাইস-স্বাধীন আনুমানিক মান দেখায় যা প্রাথমিক ডিজাইন সিদ্ধান্তের জন্য দরকারী, তবে চূড়ান্ত প্রিন্ট কাজ আপনার প্রিন্ট প্রদানকারীর ICC প্রোফাইল দিয়ে চেক করা উচিত।

LAB এবং LCH কীসের জন্য দরকারী?

LAB এবং LCH কাঁচা RGB-এর চেয়ে বেশি পারসেপচুয়ালি ইউনিফর্ম। L বা C-তে সমান সংখ্যাসূচক ধাপ সাধারণত চোখের কাছে আরও সামঞ্জস্যপূর্ণ দেখায়, যা টিন্ট, শেড এবং ভারসাম্যপূর্ণ প্যালেট তৈরি করতে বা রংয়ের মধ্যে ভিজুয়াল দূরত্ব পরিমাপের জন্য দুর্দান্ত করে তোলে।

কনট্রাস্ট কীভাবে গণনা করা হয়?

আমরা WCAG সূত্র ব্যবহার করে sRGB থেকে রিলেটিভ লুমিন্যান্স গণনা করি, তারপর কনট্রাস্ট রেশিও (L1 + 0.05) / (L2 + 0.05) বের করি। ফলাফল সাধারণ থ্রেশহোল্ড যেমন 4.5:1 (AA নরমাল টেক্সট) এবং 7:1 (AAA নরমাল টেক্সট) এর সাথে তুলনা করা হয়।

প্যান্টোন নাম কি সঠিক?

না। যেকোনো প্যান্টোন-সদৃশ লেবেল হল RGB স্পেসে একটি আনুমানিক নিকটতম-প্রতিবেশী ম্যাচ এবং শুধুমাত্র নির্দেশিকার জন্য প্রদান করা হয়। প্রোডাকশন-ক্রিটিক্যাল কাজের জন্য, সর্বদা অফিসিয়াল প্যান্টোন লাইব্রেরি এবং টুলস দিয়ে বৈধতা যাচাই করুন।

আপনারা কি আমার ইমেজ বা কালার সংরক্ষণ করেন?

কালার কম্পিউটেশন (ফরম্যাট, কনট্রাস্ট, হারমনি) ক্লায়েন্ট-সাইডে সম্পাদিত হয়। কনফিগারেশনের উপর নির্ভর করে, ইমেজ আপলোড এবং প্যান্টোন ডেটাসেট সার্ভার জড়িত হতে পারে, কিন্তু টুলটি স্থায়ী সংরক্ষণের জন্য নয়, অস্থায়ী প্রসেসিংয়ের জন্য ডিজাইন করা হয়েছে। অত্যন্ত গোপনীয় অ্যাসেটের জন্য, স্থানীয়/অফলাইন টুলস পছন্দ করুন।

Pro Tips

Best Practice

সবসময় হালকা এবং গাঢ় পৃষ্ঠতলে রং প্রিভিউ করুন; প্রেক্ষাপটের সাথে উপলব্ধি করা স্যাচুরেশন এবং কনট্রাস্ট নাটকীয়ভাবে পরিবর্তিত হতে পারে।

Best Practice

টিন্ট এবং শেড তৈরি করার সময় ল্যাব বা এলসিএইচ ব্যবহার করুন যাতে মানব চোখে উজ্জ্বলতার পরিবর্তন আরও অভিন্ন মনে হয়।

Best Practice

শুধুমাত্র ডিফল্ট বাটন রং নয়, সমস্ত ইন্টারেক্টিভ অবস্থার জন্য এএ/এএএ কনট্রাস্ট পরীক্ষা করুন (হোভার, অ্যাক্টিভ, ডিসেবল্ড)।

Best Practice

আপনার কম্পোনেন্ট জুড়ে রং সামঞ্জস্যপূর্ণ রাখতে ফরম্যাট ট্যাব থেকে সিএসএস ভেরিয়েবল বা ডিজাইন টোকেন এক্সপোর্ট করুন।

Best Practice

ছবি থেকে স্যাম্পলিং করার সময়, কম্প্রেশন এবং অ্যান্টি-অ্যালিয়াসিং থেকে শব্দ কমানোর জন্য একটি একক পিক্সেলের পরিবর্তে একটি ছোট এলাকার উপর গড় নিন।

Additional Resources

WCAG 2.2 – কনট্রাস্ট (সর্বনিম্ন)
Documentation
CSS কালার মডিউল লেভেল 4
Documentation
এমডিএন – <color> মানসমূহ
Documentation
সিআইই কালোরিমেট্রি (এক্সওয়াইজেড/ল্যাব)
Documentation

Other Tools