কালার কোড জেনারেটর এবং পিকার

রঙের কোড, বৈচিত্র, সুর তৈরি করুন এবং বৈসাদৃশ্য অনুপাত পরীক্ষা করুন।

রঙ-রূপান্তর

HEX

#cccccc

Silver

HEX
#cccccc
HSL
0, 0, 80
RGB
204, 204, 204
XYZ
57, 60, 66
CMYK
0, 0, 0, 20
LUV
82,14,6,
LAB
82, 0, 0
HWB
0, 80, 20

বৈচিত্র্য

এই বিভাগের উদ্দেশ্য হল আপনার নির্বাচিত রঙের ১০% বৃদ্ধিতে সঠিকভাবে টিন্ট (বিশুদ্ধ সাদা যোগ করা) এবং শেড (বিশুদ্ধ কালো যোগ করা) তৈরি করা।

প্রো টিপ: হোভার স্টেট এবং শ্যাডোর জন্য শেড, হাইলাইট এবং ব্যাকগ্রাউন্ডের জন্য টিন্ট ব্যবহার করুন।

ছায়া

আপনার বেস রঙে কালো যোগ করে গাঢ়তর বৈচিত্র তৈরি করা হয়েছে।

টিন্টস

আপনার বেস রঙে সাদা যোগ করে হালকা বৈচিত্র্য তৈরি করা হয়েছে।

সাধারণ ব্যবহারের ক্ষেত্রে

  • UI কম্পোনেন্টের অবস্থা (হোভার, সক্রিয়, অক্ষম)
  • ছায়া এবং হাইলাইট দিয়ে গভীরতা তৈরি করা
  • সামঞ্জস্যপূর্ণ রঙ ব্যবস্থা তৈরি করা

ডিজাইন সিস্টেম টিপস

এই বৈচিত্রগুলি একটি সুসংগত রঙের প্যালেটের ভিত্তি তৈরি করে। আপনার পুরো প্রকল্প জুড়ে ধারাবাহিকতা বজায় রাখতে এগুলি রপ্তানি করুন।

রঙের সংমিশ্রণ

প্রতিটি সুরের নিজস্ব মেজাজ থাকে। সুরের মাধ্যমে ভালোভাবে কাজ করে এমন রঙের কম্বো নিয়ে আলোচনা করুন।

কিভাবে ব্যবহার করে

যেকোনো রঙের হেক্স মান কপি করতে তার উপর ক্লিক করুন। এই সমন্বয়গুলি দৃশ্যমান সাদৃশ্য তৈরি করতে গাণিতিকভাবে প্রমাণিত।

কেন এটা গুরুত্বপূর্ণ

রঙের সুরেলাতা আপনার নকশায় ভারসাম্য তৈরি করে এবং নির্দিষ্ট আবেগ জাগিয়ে তোলে।

পরিপূরক

রঙের চাকায় একটি রঙ এবং তার বিপরীত, +১৮০ ডিগ্রি রঙ। উচ্চ বৈসাদৃশ্য।

#cccccc
এর জন্য সেরা: উচ্চ-প্রভাবশালী ডিজাইন, সিটিএ, লোগো

বিভক্ত-পরিপূরক

একটি রঙ এবং তার পরিপূরকের সংলগ্ন দুটি, মূল রঙের বিপরীত মানের থেকে +/-30 ডিগ্রি রঙ। সরল পরিপূরকের মতো গাঢ়, কিন্তু আরও বহুমুখী।

এর জন্য সেরা: প্রাণবন্ত অথচ সুষম লেআউট

ট্রায়াডিক

রঙের চাকা বরাবর সমানভাবে তিনটি রঙ, প্রতিটি রঙের ব্যবধান ১২০ ডিগ্রি। একটি রঙকে প্রাধান্য দিতে দেওয়া এবং অন্যগুলিকে অ্যাকসেন্ট হিসেবে ব্যবহার করা সবচেয়ে ভালো।

এর জন্য সেরা: কৌতুকপূর্ণ, প্রাণবন্ত ডিজাইন

অনুরূপ

একই উজ্জ্বলতা এবং স্যাচুরেশনের তিনটি রঙ, যার রঙ চক্রের পাশে 30 ডিগ্রি দূরে অবস্থিত। মসৃণ রূপান্তর।

এর জন্য সেরা: প্রকৃতি-অনুপ্রাণিত, প্রশান্তিদায়ক ইন্টারফেস

একরঙা

একই রঙের তিনটি রঙ, যার উজ্জ্বলতা +/-৫০%। সূক্ষ্ম এবং পরিশীলিত।

এর জন্য সেরা: ন্যূনতম, পরিশীলিত ডিজাইন

টেট্রাডিক

৬০ ডিগ্রি রঙের মাধ্যমে পৃথক করা দুটি পরিপূরক রঙের সেট।

এর জন্য সেরা: সমৃদ্ধ, বৈচিত্র্যময় রঙের স্কিম

রঙ তত্ত্বের নীতিমালা

ভারসাম্য

একটি প্রভাবশালী রঙ ব্যবহার করুন, গৌণ রঙ ব্যবহার করুন এবং উচ্চারণে কিছুটা সংযত থাকুন।

বৈসাদৃশ্য

পঠনযোগ্যতা এবং অ্যাক্সেসযোগ্যতার জন্য পর্যাপ্ত বৈসাদৃশ্য নিশ্চিত করুন।

সম্প্রীতি

একটি সমন্বিত দৃশ্য অভিজ্ঞতা তৈরি করতে রঙগুলিকে একসাথে কাজ করা উচিত।

কালার কনট্রাস্ট চেকার

টেক্সট পঠনযোগ্যতার জন্য WCAG অ্যাক্সেসিবিলিটি মান পূরণ করে কিনা তা নিশ্চিত করার জন্য রঙের সংমিশ্রণ পরীক্ষা করুন।

লেখার রঙ
পেছনের রঙ
বৈপরীত্য
1.00
Fail
খুব দরিদ্র
ছোট লেখা
✖︎
বড় লেখা
✖︎
WCAG স্ট্যান্ডার্ড
AA:সাধারণ টেক্সটের জন্য ন্যূনতম কন্ট্রাস্ট অনুপাত ৪.৫:১ এবং বড় টেক্সটের জন্য ৩:১। বেশিরভাগ ওয়েবসাইটের জন্য প্রয়োজনীয়।
AAA:সাধারণ টেক্সটের জন্য ৭:১ এবং বড় টেক্সটের জন্য ৪.৫:১ এর উন্নত কন্ট্রাস্ট অনুপাত। সর্বোত্তম অ্যাক্সেসযোগ্যতার জন্য প্রস্তাবিত।
সমস্ত পাঠ্য আকারের জন্য খারাপ বৈসাদৃশ্য।

উন্নত কনট্রাস্ট পরীক্ষক

স্লাইডার, একাধিক প্রিভিউ এবং আরও অনেক কিছু দিয়ে সূক্ষ্ম-টিউন করুন

সবাই জিনিয়াস। কিন্তু আপনি যদি একটি মাছকে তার গাছে উঠার ক্ষমতা দিয়ে বিচার করেন, তবে এটি পুরো জীবন যাপন করবে এই বিশ্বাস করে যে এটি বোকা।

- Albert Einstein

কারিগরি বিন্যাস

ব্যবহারিক ফর্ম্যাট

রঙ বিশ্লেষণ

অন্ধত্ব সিমুলেটর

সৃজনশীল দিক