Color Picker & Converter

Color Picker & Converter

ভিজুয়ালি বাছুন বা যেকোনো মান paste করুন — HEX, RGB, HSL, OKLCH এবং OKLAB একসাথে সিঙ্ক থাকে। সাথে আছে WCAG 2.2 contrast checker এবং OKLCH-ভিত্তিক palette generator। সম্পূর্ণটাই আপনার ব্রাউজারে চলে।

Color Picker & Converter — TL;DR

ভিজুয়ালি বাছুন বা যেকোনো মান paste করুন — HEX, RGB, HSL, OKLCH এবং OKLAB একসাথে সিঙ্ক থাকে। সাথে আছে WCAG 2.2 contrast checker এবং OKLCH-ভিত্তিক palette generator। সম্পূর্ণটাই আপনার ব্রাউজারে চলে।

আপনার hex মান (যেমন #ff5722) HEX ফিল্ডে paste করুন — RGB সারি তাৎক্ষণিকভাবে আপডেট হবে। একইভাবে, RGB ফিল্ডে rgb(255 87 34) paste করলে HEX, HSL, OKLCH ও OKLAB সব সিঙ্ক হবে। সমর্থিত প্রতিটি ফরম্যাটে রূপান্তর দ্বিমুখী।

OKLCH হলো CSS Color Module Level 4-এর একটি color space যা পারসেপচুয়াল lightness (L), chroma (C) এবং hue (h) ব্যবহার করে — HSL-এর মতো, কিন্তু পারসেপচুয়ালি ইউনিফর্ম। একই L মানের দুটি OKLCH রঙ ভিন্ন hue-তেও সমান উজ্জ্বল দেখায়। এটি ডিজাইন টোকেন, জেনারেটেড palette এবং অ্যাক্সেসিবল রঙের ramp-কে HSL-এর চেয়ে অনেক বেশি অনুমেয় করে। সব evergreen ব্রাউজার (Chrome 111+, Safari 15.4+, Firefox 113+) এটি সমর্থন করে।

রঙের মান কখনো আপনার ডিভাইস ছাড়ে না। DevTools → Network খুলুন — রূপান্তর, picking, palette তৈরি বা contrast পরীক্ষার সময় কোনো outbound request দেখাবে না।

HEX
RGB
HSL
OKLCH
OKLAB
নামকৃত

Palette

WCAG 2.2 contrast

টেক্সট
ব্যাকগ্রাউন্ড
—
প্রিভিউ
বড় শিরোনামের নমুনা
মূল টেক্সটের নমুনা — দ্রুত বাদামী শেয়াল অলস কুকুরের উপর দিয়ে লাফ দেয়।

বাস্তব কাজের জন্য ডিজাইন করা

ডিজাইন সিস্টেম থেকে অ্যাক্সেসিবিলিটি অডিট পর্যন্ত — প্রয়োজনীয় প্রতিটি ফরম্যাট ও চেক, এক জায়গায়।

ছয়টি color space

HEX (3 / 4 / 6 / 8 ডিজিট), RGB(A), HSL(A), OKLCH, OKLAB এবং CSS নামকৃত রঙের মধ্যে দুদিকেই রূপান্তর করুন। আউটপুট স্ট্রিং CSS Color Module Level 4 সিনট্যাক্সের সাথে মেলে — সরাসরি stylesheet-এ paste করুন।

WCAG 2.2 contrast checker

যেকোনো দুই রঙের contrast ratio দেখুন, AA (4.5 : 1) ও AAA (7 : 1)-এর জন্য এক ক্লিকে pass/fail ব্যাজ — সাধারণ ও বড় উভয় টেক্সট সাইজে। গণনা W3C রেফারেন্সের সাথে মেলে: sRGB linearization, relative luminance, এরপর (L1+0.05)/(L2+0.05)।

EyeDropper — যেকোনো পিক্সেল নমুনা

EyeDropper-এ ক্লিক করে স্ক্রিনের যেকোনো রঙ নমুনা নিন — ডিজাইন, স্ক্রিনশট, ছবি, এমনকি অন্য ব্রাউজার ট্যাবেও। Chromium ব্রাউজারে নেটিভ EyeDropper API ব্যবহার করে।

OKLCH-ভিত্তিক palette

৯ ধাপের tints ও shades, সাথে complementary, triadic এবং analogous harmonies তৈরি করুন — OKLCH-এ derive করা, ফলে প্রতিটি ধাপ পারসেপচুয়ালি সমান ফাঁকে থাকে (HSL-এর তুলনায়, যেখানে lightness অস্বাভাবিকভাবে পরিবর্তিত হয়)।

ডিজাইন থেকেই গোপনীয়তা

প্রতিটি রূপান্তর আপনার ডিভাইসেই JavaScript-এ চলে। কিছুই আপলোড, লগ বা তৃতীয় পক্ষের কাছে পাঠানো হয় না — নিজে যাচাই করতে চাইলে DevTools → Network খুলুন।

গতির জন্য তৈরি

শুদ্ধ JavaScript, কোনো framework runtime নেই। Cold load 50 KB gzipped-এর কম; পাঁচ বছরের পুরনো ল্যাপটপেও রূপান্তর ও palette তৈরি এক মিলিসেকেন্ডের কম সময়ে শেষ হয়।

Color picker কীভাবে ব্যবহার করবেন

শুরু করার চারটি উপায়, প্রতিটি ফরম্যাট সিঙ্কে।

  1. 1

    ভিজুয়ালি বাছুন

    শেড বেছে নিতে saturation/value স্কোয়ারের ভেতরে drag করুন, base রঙ বদলাতে নিচের hue বার slide করুন এবং স্বচ্ছতার জন্য alpha স্লাইডার ব্যবহার করুন। ডানদিকের প্রতিটি ফরম্যাট তাৎক্ষণিকভাবে আপডেট হয়।

  2. 2

    যেকোনো মান paste করুন

    একটি HEX (#4f46e5), RGB (rgb(79 70 229)), HSL (hsl(244 76% 59%)), OKLCH (oklch(53% 0.22 277)) বা এমনকি একটি CSS নামকৃত রঙ (tomato) মিল-থাকা ইনপুটে paste করুন — picker এবং অন্যান্য ফরম্যাট সব সিঙ্ক হবে।

  3. 3

    EyeDropper দিয়ে নমুনা নিন

    স্ক্রিনের যেকোনো পিক্সেল ক্যাপচার করতে EyeDropper বোতামে ক্লিক করুন — অন্য ট্যাব, স্ক্রিনশট, ছবি বা আইকন। Chrome, Edge এবং Opera-তে নেটিভ EyeDropper API ব্যবহার করে।

  4. 4

    Copy বা contrast পরীক্ষা

    যেকোনো ফরম্যাটের পাশের copy আইকনে ক্লিক করে clipboard-এ রাখুন। অথবা WCAG 2.2 contrast সেকশনে স্ক্রল করে দেখুন আপনার foreground / background জোড়া সাধারণ ও বড় টেক্সট সাইজে AA বা AAA pass করে কিনা।

ডিজাইনার, ডেভেলপার এবং অ্যাক্সেসিবিলিটি অডিটরদের জন্য তৈরি

একটির color tool যা চারটি সাধারণ workflow-তে ফিট করে।

ডিজাইন সিস্টেম টোকেন তৈরি

ব্র্যান্ড HEX মানগুলোকে OKLCH-এ রূপান্তর করুন যাতে আপনার টোকেন ramp-এর প্রতিটি শেডে একই পারসেপচুয়াল lightness ধাপ থাকে। OKLCH আউটপুট সরাসরি আপনার CSS-এ paste করুন — কোনো preprocessor লাগবে না।

WCAG অ্যাক্সেসিবিলিটি অডিট

Foreground / background জোড়া বসান এবং contrast ratio-র সাথে AA / AAA ব্যাজ পড়ুন। ব্যর্থ কম্বিনেশন ship হওয়ার আগেই ধরুন — W3C-নির্দেশিত 4.5 : 1 সাধারণ / 7 : 1 enhanced থ্রেশহোল্ড পূরণ করে।

ফ্রন্ট-এন্ড CSS রূপান্তর

ডিজাইনার মকআপ থেকে HEX আছে কিন্তু Tailwind কনফিগের জন্য HSL বা আধুনিক stylesheet-এর জন্য OKLCH দরকার? একবার paste করুন, যেকোনো ফরম্যাটে কপি করুন। আউটপুট স্ট্রিং বৈধ CSS Color Module Level 4 সিনট্যাক্স।

Palette অন্বেষণ

একটি base রঙ বাছুন এবং তাৎক্ষণিকভাবে নয়টি পারসেপচুয়ালি সমান-ফাঁক tints ও shades দেখুন, সাথে complementary, triadic এবং analogous harmonies — OKLCH-এ তৈরি, ফলে প্রতিটি ধাপ সমান উজ্জ্বল দেখায়।

১০০% গোপনীয় — আপনার ব্রাউজারে চলে

রঙের মান কখনো আপনার ডিভাইস ছাড়ে না। DevTools → Network খুলুন — রূপান্তর, picking, palette তৈরি বা contrast পরীক্ষার সময় কোনো outbound request দেখাবে না।

  • প্রতিটি রূপান্তর (HEX ↔ RGB ↔ HSL ↔ OKLCH ↔ OKLAB) আপনার মেশিনে JavaScript হিসেবে চলে — সূত্রগুলো পেজ সোর্সেই দৃশ্যমান।
  • EyeDropper API শুধু সেই রঙগুলোই ফেরায় যেগুলো আপনি স্পষ্টভাবে ক্লিক করেন; ব্রাউজার অনুমতি পরিচালনা করে এবং পেজকে কখনোই যথেচ্ছ পিক্সেল দেখতে দেয় না।
  • কোনো লগইন নেই, রঙের মানে কোনো টেলিমেট্রি নেই, কোনো তৃতীয় পক্ষের color API নেই। সাইটটি বাক্স থেকেই GDPR-সম্মত।

সম্পর্কিত গাইড

ডিজাইনার, ডেভেলপার এবং অ্যাক্সেসিবিলিটি দলের জন্য বাছাই করা টিউটোরিয়াল।

প্রায়শই জিজ্ঞাসিত

HEX কে RGB-তে কীভাবে রূপান্তর করব?

আপনার hex মান (যেমন #ff5722) HEX ফিল্ডে paste করুন — RGB সারি তাৎক্ষণিকভাবে আপডেট হবে। একইভাবে, RGB ফিল্ডে rgb(255 87 34) paste করলে HEX, HSL, OKLCH ও OKLAB সব সিঙ্ক হবে। সমর্থিত প্রতিটি ফরম্যাটে রূপান্তর দ্বিমুখী।

OKLCH কী এবং কেন ব্যবহার করব?

OKLCH হলো CSS Color Module Level 4-এর একটি color space যা পারসেপচুয়াল lightness (L), chroma (C) এবং hue (h) ব্যবহার করে — HSL-এর মতো, কিন্তু পারসেপচুয়ালি ইউনিফর্ম। একই L মানের দুটি OKLCH রঙ ভিন্ন hue-তেও সমান উজ্জ্বল দেখায়। এটি ডিজাইন টোকেন, জেনারেটেড palette এবং অ্যাক্সেসিবল রঙের ramp-কে HSL-এর চেয়ে অনেক বেশি অনুমেয় করে। সব evergreen ব্রাউজার (Chrome 111+, Safari 15.4+, Firefox 113+) এটি সমর্থন করে।

WCAG contrast ফলাফল কি নির্ভরযোগ্য?

হ্যাঁ। আমরা WCAG 2.2 §1.4.3-এর অ্যালগরিদম ব্যবহার করি: প্রতিটি sRGB চ্যানেল linearize করি, relative luminance গণনা করি (0.2126·R + 0.7152·G + 0.0722·B), এরপর (L_lighter + 0.05) / (L_darker + 0.05)। সাধারণ টেক্সটের জন্য AA pass করে 4.5 : 1-এ এবং বড় টেক্সটের (18 pt+ বা 14 pt+ bold) জন্য 3 : 1-এ। AAA pass করে যথাক্রমে 7 : 1 ও 4.5 : 1-এ।

ছবি বা অন্য অ্যাপ থেকে কি রঙ নমুনা নিতে পারব?

হ্যাঁ — ব্রাউজারের বিল্ট-ইন EyeDropper API চালু করতে EyeDropper বোতামে ক্লিক করুন। স্ক্রিনের যেকোনো জায়গার যেকোনো পিক্সেল নমুনা নিতে পারবেন: অন্য ব্রাউজার ট্যাব, একটি Figma ডিজাইন, একটি ভিডিও ফ্রেম, এমনকি স্ক্রিনশট। বর্তমানে Chrome, Edge ও Opera-তে সমর্থিত; Firefox ও Safari-তে স্বাভাবিকভাবে fallback হয় (বোতামটি নিষ্ক্রিয় থাকে)।

আপনাদের সার্ভারে কি কিছু পাঠানো হয়?

না। picker, প্রতিটি রূপান্তর, palette generator এবং contrast checker — সব আপনার ব্রাউজারেই চলে। কোনো রঙের মান, ছবির নমুনা বা টেক্সট কখনোই প্রেরণ করা হয় না। DevTools → Network খুলে যাচাই করতে পারেন — ব্যবহারের সময় কোনো outbound request যাবে না।