रंग कोड जनरेटर आणि निवडक

रंग कोड, विविधता, सुसंवाद तयार करा आणि कॉन्ट्रास्ट रेशो तपासा.

रंग-रूपांतरण

HEX

#f1f3f4

Porcelain

HEX
#f1f3f4
HSL
200, 12, 95
RGB
241, 243, 244
XYZ
85, 89, 98
CMYK
1, 0, 0, 4
LUV
96,15,6,
LAB
96, 0, -1
HWB
200, 95, 4

विविधता

या विभागाचा उद्देश तुमच्या निवडलेल्या रंगाचे टिंट (शुद्ध पांढरे जोडलेले) आणि शेड्स (शुद्ध काळा जोडलेले) १०% वाढीने अचूकपणे तयार करणे आहे.

प्रो टिप: होव्हर स्टेट्स आणि सावल्यांसाठी शेड्स वापरा, हायलाइट्स आणि बॅकग्राउंडसाठी टिंट्स वापरा.

छटा

तुमच्या मूळ रंगात काळा रंग जोडून गडद रंग तयार केले जातात.

रंगछटा

तुमच्या मूळ रंगात पांढरा रंग जोडून हलके बदल तयार केले जातात.

सामान्य वापर प्रकरणे

  • UI घटक स्थिती (होव्हर, सक्रिय, अक्षम)
  • सावल्या आणि हायलाइट्स वापरून खोली निर्माण करणे
  • सुसंगत रंग प्रणाली तयार करणे

डिझाइन सिस्टम टीप

हे बदल एका सुसंगत रंग पॅलेटचा पाया तयार करतात. तुमच्या संपूर्ण प्रकल्पात सुसंगतता राखण्यासाठी त्यांना निर्यात करा.

रंग संयोजन

प्रत्येक हार्मोनीचा स्वतःचा मूड असतो. एकत्र चांगले काम करणाऱ्या रंगसंगतींवर विचारमंथन करण्यासाठी हार्मोनी वापरा.

कसे वापरायचे

कोणत्याही रंगावर क्लिक करून त्याचे हेक्स मूल्य कॉपी करा. हे संयोजन दृश्य सुसंवाद निर्माण करण्यासाठी गणितीयदृष्ट्या सिद्ध झाले आहे.

हे का महत्त्वाचे आहे

रंगसंगती तुमच्या डिझाइनमध्ये संतुलन निर्माण करतात आणि विशिष्ट भावना जागृत करतात.

पूरक

रंगचक्रावर एक रंग आणि त्याच्या विरुद्ध रंगछटा, +१८० अंश. उच्च कॉन्ट्रास्ट.

#f1f3f4
साठी सर्वोत्तम: उच्च-प्रभावी डिझाइन, CTA, लोगो

स्प्लिट-पूरक

एक रंग आणि त्याच्या पूरक रंगाला लागून असलेले दोन, मुख्य रंगाच्या विरुद्ध मूल्यापेक्षा +/-३० अंश रंगछटा. सरळ पूरक रंगासारखे ठळक, परंतु अधिक बहुमुखी.

साठी सर्वोत्तम: उत्साही तरीही संतुलित मांडणी

त्रिकोणी

रंगचक्रावर समान अंतरावर तीन रंग, प्रत्येकी १२० अंश रंगछटांचे अंतर. एका रंगाला वर्चस्व गाजवू देणे आणि इतरांचा अॅक्सेंट म्हणून वापर करणे चांगले.

साठी सर्वोत्तम: खेळकर, उत्साही डिझाइन्स

समानार्थी

रंगचक्रावर ३० अंशांच्या अंतरावर असलेल्या रंगछटांसह समान तेज आणि संतृप्ततेचे तीन रंग. गुळगुळीत संक्रमणे.

साठी सर्वोत्तम: निसर्ग-प्रेरित, शांत करणारे इंटरफेस

मोनोक्रोमॅटिक

+/-५०% ल्युमिनन्स मूल्यांसह एकाच रंगाचे तीन रंग. सूक्ष्म आणि परिष्कृत.

साठी सर्वोत्तम: किमान, अत्याधुनिक डिझाइन्स

टेट्राडिक

६० अंशांच्या रंगछटांनी वेगळे केलेले पूरक रंगांचे दोन संच.

साठी सर्वोत्तम: समृद्ध, वैविध्यपूर्ण रंगसंगती

रंग सिद्धांताची तत्त्वे

शिल्लक

एका प्रभावी रंगाचा वापर करा, दुय्यम रंगाचा आधार घ्या आणि उच्चार कमी वापरा.

कॉन्ट्रास्ट

वाचनीयता आणि सुलभतेसाठी पुरेसा कॉन्ट्रास्ट सुनिश्चित करा.

सुसंवाद

एकात्म दृश्य अनुभव निर्माण करण्यासाठी रंगांनी एकत्रितपणे काम केले पाहिजे.

रंग कॉन्ट्रास्ट तपासक

मजकूर वाचनीयतेसाठी रंग संयोजन WCAG प्रवेशयोग्यता मानकांची पूर्तता करतात याची खात्री करण्यासाठी त्यांची चाचणी घ्या.

मजकूर रंग
पार्श्वभूमी रंग
कॉन्ट्रास्ट
1.00
Fail
अतिशय गरीब
लहान मजकूर
✖︎
मोठा मजकूर
✖︎
WCAG मानके
AA:सामान्य मजकुरासाठी किमान कॉन्ट्रास्ट रेशो ४.५:१ आणि मोठ्या मजकुरासाठी ३:१. बहुतेक वेबसाइटसाठी आवश्यक.
AAA:सामान्य मजकुरासाठी ७:१ आणि मोठ्या मजकुरासाठी ४.५:१ चा वाढीव कॉन्ट्रास्ट रेशो. इष्टतम सुलभतेसाठी शिफारसित.
सर्व मजकूर आकारांसाठी खराब कॉन्ट्रास्ट.

प्रगत कॉन्ट्रास्ट तपासक

स्लायडर, एकाधिक पूर्वावलोकने आणि बरेच काही वापरून फाइन-ट्यून करा

सगळेच जिनियस आहेत. परंतु जर तुम्ही एखाद्या माशाचा झाडावर चढण्याच्या क्षमतेनुसार न्याय केला तर तो मूर्ख आहे असे मानून त्याचे संपूर्ण आयुष्य जगेल.

- Albert Einstein

तांत्रिक स्वरूपे

व्यावहारिक स्वरूपे

रंग विश्लेषण

अंधत्व सिम्युलेटर

सर्जनशील पैलू