কালার ফরম্যাট কনভার্টার যেকোনো রঙ HEX, RGB, HSL, HSV, ও OKLCH-এর মধ্যে রূপান্তর করে। নেটিভ পিকার দিয়ে একটি রঙ বেছে নিন, একটি hex ভ্যালু টাইপ করুন, যেকোনো CSS কালার স্ট্রিং পেস্ট করুন, বা RGB স্লাইডার সামঞ্জস্য করুন — প্রতিটি ফরম্যাট লাইভ আপডেট হয় এবং প্রতিটির নিজস্ব Copy বাটন আছে।
আধুনিক CSS আপনাকে একই রঙ লেখার এক ডজন উপায় দেয়: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), সাথে প্রতিটির আলফা ভ্যারিয়েন্ট। আপনাকে প্রায়ই এগুলোর মধ্যে রূপান্তর করতে হয় — একটি Figma ডিজাইন আপনাকে একটি OKLCH দেয়, আপনার কোডবেস HEX ব্যবহার করে, আর আপনার থিম ভেরিয়েবল হোভার টুইকের জন্য HSL পছন্দ করে। কালার ফরম্যাট কনভার্টার একটি প্যানেলেই সব রূপান্তর করে। নেটিভ কালার পিকার থেকে একটি রঙ বেছে নিন, যেকোনো সিনট্যাক্সে একটি বিদ্যমান রঙ পেস্ট করুন, বা RGB স্লাইডার টেনে একটি ঠিক করুন। প্রতিটি সাধারণ ফরম্যাট একসাথে রেন্ডার হয়: HEX (আলফা সহ), rgb()/rgba(), hsl()/hsla(), hsv(), এবং oklch() — সাথে একটি CSS ভেরিয়েবল স্নিপেট এবং দ্রুত কনট্রাস্ট হিসাবের জন্য গণনাকৃত luminance ভ্যালু। আলফা চ্যানেল শুরু থেকে শেষ পর্যন্ত সাপোর্ট করা হয়। প্রতিটি ফরম্যাটের নিজস্ব Copy বাটন এক-ক্লিক ব্যবহারের জন্য আছে, এবং পার্সার নেটিভ কালার নাম ও CSS-এর সমর্থিত সবকিছু গ্রহণ করে।
একসাথে HEX, RGB/RGBA, HSL/HSLA, HSV, ও OKLCH দেখায় — প্রতিবার আলাদাভাবে রূপান্তর না করেই আপনার টার্গেট কোড যে ফরম্যাট প্রত্যাশা করে সেটা বেছে নিন।
HEX (#abc বা #aabbcc বা #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), এবং নেটিভ কালার নাম গ্রহণ করে। CSS যা সমর্থন করে তার যেকোনো কিছু পেস্ট করুন।
আধুনিক CSS-এ ব্যবহৃত নতুন OKLCH ফরম্যাট সামলায় — একটি perceptually uniform কালার স্পেস যা নতুন ডিজাইন-সিস্টেম ডিফল্ট হয়ে উঠছে।
প্রতিটি আউটপুটের নিজস্ব Copy বাটন আছে। আপনার কোডের জন্য ঠিক যে ফরম্যাট দরকার সেটা নিতে ক্লিক করুন, ম্যানুয়াল সিলেকশনের দরকার নেই।
সূক্ষ্ম সমন্বয়ের জন্য Red/Green/Blue/Alpha স্লাইডার সামঞ্জস্য করুন। টানার সাথে সাথে প্রতিটি ফরম্যাট রিয়েল টাইমে আপডেট হয়।
স্বচ্ছতা প্রতিটি ফরম্যাটে সামলানো হয়: #RRGGBBAA, rgba(...), hsla(...)। একবার সেট করুন, সবখানে রূপান্তরিত হবে।
Figma আপনাকে একটি OKLCH বা HSL দেয় — সেটা পেস্ট করুন, ব্রাউজার না ছেড়েই আপনার Tailwind কনফিগ বা CSS ভেরিয়েবলের জন্য সমতুল্য HEX কপি করুন।
শেড খুঁজতে স্লাইডার টানুন, একটি নিয়মতান্ত্রিক ডিজাইন-সিস্টেম প্যালেটের জন্য OKLCH ভ্যালুগুলো নোট করুন।
একটি ব্র্যান্ড রঙকে তার HSL রূপে রূপান্তর করুন যাতে হোভার স্টেটের জন্য hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) ব্যবহার করতে পারেন।
Luminance ফিল্ড আপনাকে WCAG কনট্রাস্ট গণনায় ব্যবহৃত কাঁচা ভ্যালু দেয় — a11y গণিতের জন্য উপযোগী।
আপনি পড়ছেন এমন একটি CSS ফাইল থেকে একটি oklch(...) পেস্ট করুন এবং তাৎক্ষণিক দেখুন এটি আসলে কোন রঙ তৈরি করে।
DevSuite Pro ডকে Color Formats আইকনে ক্লিক করুন। একটি কালার পিকার, hex ইনপুট, ও RGB স্লাইডার সহ একটি প্যানেল খুলবে।
কালার পিকার ব্যবহার করুন, একটি hex টাইপ করুন, বা যেকোনো CSS কালার স্ট্রিং (rgb(...), oklch(...), ইত্যাদি) পেস্ট করুন। রঙটি তাৎক্ষণিক প্রিভিউ হয়।
নিচে প্রতিটি ফরম্যাট রেন্ডার হয়: HEX, RGB, HSL, HSV, OKLCH, CSS ভেরিয়েবল, ও luminance। আপনি সামঞ্জস্য করলে সবকিছু সিঙ্কে থাকে।
সূক্ষ্ম সমন্বয়ের জন্য R/G/B/A স্লাইডার টানুন। একটি ডিজাইন স্পেকের সাথে মেলে এমন নির্দিষ্ট শেড ঠিক করার জন্য দারুণ।
আপনার চাওয়া ফরম্যাট রো-তে Copy ক্লিক করুন — ভ্যালুটি সঠিক সিনট্যাক্সে আপনার ক্লিপবোর্ডে চলে আসবে।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
