DevToys Web Pro iconDevToys Web Proব্লগ
আমাদের রেট দিন:
ব্রাউজার এক্সটেনশন ব্যবহার করে দেখুন:

রঙের হারমোনি জেনারেটর

  • বেস
    স্কিম
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    প্রযুক্তিগত বিবরণ

    কালার হারমোনিজ জেনারেটর কীভাবে কাজ করে

    টুলটি কী করে

    কালার হারমোনিজ জেনারেটর একটি একক বেস হিউ থেকে গাণিতিকভাবে সম্পর্কিত রঙের সেট গণনা করে: complementary, analogous, triadic, tetradic, square, split-complementary, monochromatic, এবং shades। প্রতিটি প্যালেট HEX, RGB, এবং HSL মানসহ রেন্ডার করা হয়, যা আপনি এক ক্লিকে কপি করে সরাসরি CSS বা ডিজাইন টোকেনে ব্যবহার করতে পারেন।

    ডেভেলপারদের সাধারণ ব্যবহারক্ষেত্র

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

    ডেটা ফরম্যাট, টাইপ বা ভ্যারিয়েন্ট

    আটটি স্কিম উপলব্ধ: Complementary (base + 180°), Analogous (base ± 30°), Triadic (3 colors 120° apart), Tetradic (rectangular 4-color), Square (4 colors 90° apart), Split-complementary (base + ±150°), Monochromatic (same hue at varying lightness 10–90%), এবং Shades (same hue, dark to light)। প্রতিটি রঙের সাথে তার HEX, RGB, এবং HSL রিপ্রেজেন্টেশন থাকে, সঙ্গে একটি রোল লেবেলও থাকে।

    সাধারণ ভুল ও এজ কেস

    অত্যন্ত ডেস্যাচুরেটেড বা প্রায় গ্রেস্কেল বেস কালার থেকে তৈরি হারমোনিগুলো বিভিন্ন স্কিমে আলাদা করে বোঝা যায় না — স্যাচুরেটেড বেস থেকে শুরু করুন। খুব বেশি স্যাচুরেটেড বেসকে triadic বা tetradic স্কিমের সাথে মিলালে অতিরিক্ত চড়া, ব্যালান্স করা কঠিন প্যালেট তৈরি হতে পারে; UI ব্যবহারের জন্য স্যাচুরেশন কিছুটা কমানোর কথা ভাবুন। হারমোনি থেকে পাওয়া কিছু জুটি WCAG কনট্রাস্টে ফেল করতে পারে — শিপ করার আগে Color Contrast টুলে টেক্সট/ব্যাকগ্রাউন্ড জুটিগুলো সবসময় যাচাই করুন।

    কোডের বদলে কখন এই টুল ব্যবহার করবেন

    আইডিয়েশন, দ্রুত এক্সপ্লোরেশন, এবং ডিজাইন রিভিউয়ের জন্য ব্রাউজার টুলটি ব্যবহার করুন। কোডে chroma.js, colord, বা culori-এর মতো লাইব্রেরি দিয়ে আপনি প্রোগ্রাম্যাটিকভাবে হারমোনি গণনা করতে পারেন, সেগুলোকে ডিজাইন-টোকেন বিল্ড পাইপলাইনে ইন্টিগ্রেট করতে পারেন, এবং আরও সমান দেখায় এমন প্যালেটের জন্য Oklch-এর মতো পারসেপচুয়ালি ইউনিফর্ম কালার স্পেসের সাথে হারমোনি ম্যাথ একত্র করতে পারেন।