What is a color harmony?

A color harmony is a combination of colors that are visually pleasing together based on their positions on the color wheel. Common harmonies include complementary (opposite colors), analogous (adjacent colors), triadic (three equally-spaced colors), tetradic (four equally-spaced colors), split-complementary (base plus two colors flanking its complement), and monochromatic (same hue with varying lightness and saturation).

What is the difference between complementary and split-complementary colors?

Complementary colors are directly opposite each other on the color wheel (180° apart), creating the highest contrast. Split-complementary uses the base color plus the two colors on either side of its complement (at 150° and 210°). Split-complementary is often easier to work with than direct complementary because the contrast is high but slightly softer, making it more versatile for design.

How do I use a generated color palette in CSS?

You can export the palette as CSS custom properties (variables) and include them in your stylesheet. For example: :root { --color-1: #3b82f6; --color-2: #f63b3b; }. Then reference them in your CSS with var(--color-1). This approach keeps colors consistent across your project and makes it easy to update your design system.

What is the HSL color model and why is it useful for generating palettes?

HSL stands for Hue (0-360), Saturation (0-100%), and Lightness (0-100%). It is more intuitive than RGB because you can adjust individual aspects of a color independently. For palette generation, HSL is ideal: you rotate the hue to get harmonious colors, keep saturation consistent to maintain color vibrancy, and vary lightness to create shades. This makes it easy to generate mathematically harmonious palettes that look great together.

রঙের প্যালেট জেনারেটর

বৈধ

রঙের সামঞ্জস্য

Two colors opposite on the color wheel

তৈরি করা প্যালেট

#3b82f6

#3B82F6

RGB: 59, 130, 246

HSL: 217°, 91%, 60%

#f6af3c

#F6AF3C

RGB: 246, 175, 60

HSL: 37°, 91%, 60%

প্যালেট প্রিভিউ

প্যালেট এক্সপোর্ট করুন

:root {
  --color-1: #3b82f6;
  --color-2: #f6af3c;
}

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

কালার প্যালেট জেনারেটর কীভাবে কাজ করে

টুলটি কী করে

কালার প্যালেট জেনারেটর প্রতিষ্ঠিত রঙ তত্ত্বের নীতিমালা ব্যবহার করে যেকোনো বেস রঙ থেকে সামঞ্জস্যপূর্ণ রঙের স্কিম তৈরি করে। একটি বেস রঙ নির্বাচন করুন এবং ছয়টি হারমনি টাইপের মধ্যে থেকে বেছে নিন — complementary, analogous, triadic, tetradic, split-complementary, বা monochromatic — যাতে সঙ্গে সঙ্গে একটি সমন্বিত প্যালেট তৈরি হয়। প্রতিটি তৈরি হওয়া রঙে HEX, RGB, এবং HSL মান দেখায়, যা আপনার CSS, ডিজাইন টুল, বা স্টাইল গাইডে কপি করার জন্য প্রস্তুত।

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

ডিজাইনার এবং ডেভেলপাররা নতুন প্রজেক্ট শুরু করার সময়, ডিজাইন সিস্টেম তৈরি করতে, বা ব্র্যান্ডের রঙ রিফ্রেশ করতে প্যালেট জেনারেটর ব্যবহার করেন। সাধারণ পরিস্থিতির মধ্যে রয়েছে প্রাইমারি ব্র্যান্ড রঙের জন্য complementary অ্যাকসেন্ট রঙ তৈরি করা, ডেটা ভিজ্যুয়ালাইজেশনের জন্য analogous রঙের স্কিম তৈরি করা, প্রাণবন্ত UI থিমের জন্য triadic প্যালেট বানানো, এবং মিনিমাল ডিজাইনের জন্য monochromatic ভ্যারিয়েশন অন্বেষণ করা। এই টুলটি CSS কাস্টম প্রপার্টি সেট এবং ডিজাইন সিস্টেমের জন্য JSON কালার টোকেন জেনারেট করতেও উপকারী।

কালার হারমনি টাইপসমূহ

কালার হারমনি রঙের চাকার (color wheel) ওপর ভিত্তি করে। Complementary রঙ একে অপরের বিপরীতে (180°) থাকে এবং উচ্চ কনট্রাস্ট তৈরি করে। Analogous রঙ পাশাপাশী (±30°) থাকে এবং একসঙ্গে সামঞ্জস্যপূর্ণ লাগে। Triadic রঙ 120° ব্যবধানে সমানভাবে ছড়িয়ে থাকে, ফলে ভারসাম্যপূর্ণ প্রাণবন্ততা পাওয়া যায়। Tetradic (rectangle) 90° ব্যবধানে চারটি রঙ ব্যবহার করে। Split-complementary একটি বেস রঙকে তার complement-এর পাশের দুইটি রঙের সঙ্গে জোড়া দেয়। Monochromatic একটি একক hue-এর lightness এবং saturation পরিবর্তন করে সূক্ষ্ম, একীভূত প্যালেট তৈরি করে।

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

জেনারেট করা প্যালেটগুলো শুরু করার জন্য, চূড়ান্ত ডিজাইন নয়। অ্যাক্সেসিবিলিটি নিশ্চিত করতে জেনারেট করা রঙগুলোর মধ্যে কনট্রাস্ট রেশিও সবসময় যাচাই করুন। খুব বেশি saturated বা খুব গাঢ় বেস রঙ এমন প্যালেট তৈরি করতে পারে যার পাঠযোগ্যতা কম। মনে রাখুন, স্ক্রিনের রঙ প্রিন্টে ভিন্নভাবে দেখা যায়। শুধু swatch প্রিভিউয়ের ওপর নির্ভর না করে বাস্তব কনটেন্ট এবং UI এলিমেন্টের সঙ্গে প্যালেট পরীক্ষা করুন।

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

ডিজাইন স্প্রিন্টের সময় ইন্টারঅ্যাকটিভ এক্সপ্লোরেশন এবং দ্রুত প্যালেট জেনারেশনের জন্য এই ব্রাউজার টুলটি ব্যবহার করুন। প্রোডাকশন ডিজাইন সিস্টেমের জন্য chroma.js, culori, বা polished-এর মতো লাইব্রেরি ব্যবহার করে প্রোগ্রাম্যাটিকভাবে প্যালেট জেনারেশন ইমপ্লিমেন্ট করুন, যা হারমনি জেনারেট করতে পারে, কনট্রাস্ট রেশিও এনফোর্স করতে পারে, এবং বিল্ড পাইপলাইনের সঙ্গে ইন্টিগ্রেট হতে পারে।