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

रंग कोड, विविधता, सुसंगती निर्माण करा आणि विरोधाभास गुणोत्तर तपासा.

रंग रूपांतरण

HEX

#f8f7dc

Coconut Cream

HEX
#f8f7dc
HSL
58, 67, 92
RGB
248, 247, 220
XYZ
85, 92, 81
CMYK
0, 0, 11, 3
LUV
97,18,26
LAB
97, -4, 13
HWB
58, 86, 3

विविधता

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

प्रो टिप: हॉवर स्टेट्स आणि शॅडोजसाठी शेड्स वापरा, हायलाइट्स आणि पार्श्वभूमीसाठी टिंट्स वापरा.

शेड्स

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

टिंट्स

तुमच्या बेस रंगात पांढरा जोडून तयार केलेल्या हलक्या विविधता.

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

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

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

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

रंग संयोजन

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

कसे वापरावे

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

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

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

पूरक

रंग आणि त्याच्या रंग चक्रावर विरुद्ध, +180 अंश ह्यू. उच्च विरोधाभास.

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

विभाजित-पूरक

रंग आणि त्याच्या पूरकाच्या शेजारील दोन, मुख्य रंगाच्या विरुद्ध मूल्यापासून +/-30 अंश ह्यू. सरळ पूरकासारखे धाडसी, पण अधिक बहुपर्यायी.

सर्वोत्तम साठी: उत्साही पण संतुलित लेआउट्स

त्रिक

रंग चक्रावर समान अंतरावर तीन रंग, प्रत्येक 120 अंश ह्यू अंतरावर. एक रंगाला वर्चस्व देऊ द्या आणि इतरांना उच्चारण म्हणून वापरा.

सर्वोत्तम साठी: खेळकर, ऊर्जावान डिझाईन्स

समानार्थी

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

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

एकरंगी

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

सर्वोत्तम साठी: मिनिमलिस्ट, सुसंस्कृत डिझाईन्स

चतुष्क

दोन संच परस्परपूरक रंग, 60 अंशांच्या रंगछटेद्वारे विभक्त.

सर्वोत्तम साठी: समृद्ध, विविध रंग योजना

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

संतुलन

एक प्रमुख रंग वापरा, दुय्यम रंगाने समर्थन करा, आणि अल्प प्रमाणात उच्चारण करा.

विरोधाभास

वाचनक्षमता आणि प्रवेशयोग्यता सुनिश्चित करण्यासाठी पुरेसा विरोधाभास ठेवा.

सुसंगती

रंगांनी एकत्र काम करावे जेणेकरून एकसंध दृश्य अनुभव तयार होईल.

रंग विरोधाभास तपासक

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

मजकूर रंग
पार्श्वभूमी रंग
विरोधाभास
1.00
Fail
खूप खराब
लहान मजकूर
✖︎
मोठा मजकूर
✖︎
WCAG मानके
AA:सामान्य मजकूरासाठी किमान 4.5:1 विरोधाभास गुणोत्तर आणि मोठ्या मजकूरासाठी 3:1. बहुतेक वेबसाइट्ससाठी आवश्यक.
AAA:सामान्य मजकूरासाठी 7:1 चा वाढीव विरोधाभास गुणोत्तर आणि मोठ्या मजकूरासाठी 4.5:1. इष्टतम प्रवेशयोग्यतेसाठी शिफारस केलेले.
सर्व मजकूर आकारांसाठी अपुरा विरोधाभास - WCAG मानकांमध्ये अपयशी.

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

स्लायडर्स, एकाधिक पूर्वावलोकने आणि अधिकसह सूक्ष्म समायोजन करा

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

- Albert Einstein

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

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

रंग विश्लेषण

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

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