রঙ কোড জেনারেটর ও পিকার

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

রঙ রূপান্তর

HEX

#e5e0e1

Bon Jour

HEX
#e5e0e1
HSL
348, 9, 89
RGB
229, 224, 225
XYZ
73, 75, 82
CMYK
0, 2, 2, 10
LUV
90,18,6
LAB
90, 2, 0
HWB
348, 88, 10

ভিন্নতা

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

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

শেডস

তোমার বেস রঙে কালো যোগ করে তৈরি করা গাঢ় ভিন্নতা।

টিন্টস

তোমার বেস রঙে সাদা যোগ করে তৈরি করা হালকা ভিন্নতা।

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

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

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

এই ভিন্নতাগুলি একটি সামঞ্জস্যপূর্ণ রঙের প্যালেটের ভিত্তি গঠন করে। তোমার পুরো প্রকল্প জুড়ে সামঞ্জস্য বজায় রাখতে এগুলি রপ্তানি করো।

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

প্রতিটি সাদৃশ্যের নিজস্ব মেজাজ আছে। একসাথে ভাল কাজ করে এমন রঙের কম্বো নিয়ে চিন্তা করতে সাদৃশ্য ব্যবহার করো।

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

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

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

রঙের সাদৃশ্য ভারসাম্য তৈরি করে এবং তোমার ডিজাইনে নির্দিষ্ট আবেগ উদ্রেক করে।

পরিপূরক

একটি রঙ এবং তার বিপরীত রঙ চাকা, +180 ডিগ্রি হিউ। উচ্চ বৈপরীত্য।

#e5e0e1
সেরা জন্য: উচ্চ-প্রভাব ডিজাইন, CTA, লোগো

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

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

সেরা জন্য: উজ্জ্বল কিন্তু ভারসাম্যপূর্ণ বিন্যাস

ত্রিকোণ

রঙ চাকার উপর সমানভাবে স্থানান্তরিত তিনটি রঙ, প্রতিটি 120 ডিগ্রি হিউ দূরে। একটি রঙকে প্রাধান্য দিতে দিন এবং অন্যগুলিকে সংযোজনী হিসেবে ব্যবহার করুন।

সেরা জন্য: মজাদার, উদ্যমী ডিজাইন

সাদৃশ্যপূর্ণ

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

সেরা জন্য: প্রকৃতি-প্রেরিত, শান্ত ইন্টারফেস

একবর্ণ

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

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

চতুর্ভুজ

দুটি সেটের পরিপূরক রং, যা ৬০ ডিগ্রি হিউ দ্বারা পৃথক।

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

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

ভারসাম্য

একটি প্রধান রঙ ব্যবহার করুন, সহায়ক হিসেবে দ্বিতীয় রঙ এবং সংযোজনী রঙ কম ব্যবহার করুন।

বৈপরীত্য

পাঠযোগ্যতা এবং অ্যাক্সেসিবিলিটির জন্য যথেষ্ট বৈপরীত্য নিশ্চিত করুন।

সামঞ্জস্য

রঙগুলি একসাথে কাজ করা উচিত যাতে একটি ঐক্যবদ্ধ ভিজ্যুয়াল অভিজ্ঞতা তৈরি হয়।

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

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

টেক্সটের রঙ
ব্যাকগ্রাউন্ডের রঙ
কনট্রাস্ট
1.00
Fail
খুবই খারাপ
ছোট টেক্সট
✖︎
বড় টেক্সট
✖︎
WCAG স্ট্যান্ডার্ডস
AA:সাধারণ টেক্সটের জন্য ন্যূনতম কনট্রাস্ট অনুপাত 4.5:1 এবং বড় টেক্সটের জন্য 3:1। বেশিরভাগ ওয়েবসাইটের জন্য প্রয়োজনীয়।
AAA:সাধারণ টেক্সটের জন্য উন্নত কনট্রাস্ট অনুপাত 7:1 এবং বড় টেক্সটের জন্য 4.5:1। সর্বোত্তম অ্যাক্সেসিবিলিটির জন্য সুপারিশকৃত।
সমস্ত টেক্সট সাইজের জন্য অপর্যাপ্ত কনট্রাস্ট - WCAG মানদণ্ডে ব্যর্থ।

উন্নত কনট্রাস্ট চেকার

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

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

- Albert Einstein

প্রযুক্তিগত ফরম্যাট

প্রায়োগিক ফরম্যাট

রঙ বিশ্লেষণ

ব্লাইন্ডনেস সিমুলেটর

সৃজনশীল দিক