रङ कोड जेनरेटर र पिकर

रङ कोड, भिन्नता, सामंजस्य उत्पन्न गर्नुहोस्, र कन्ट्रास्ट अनुपात जाँच गर्नुहोस्।

रङ-रूपान्तरण

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

प्राविधिक ढाँचाहरू

व्यावहारिक ढाँचाहरू

रङ विश्लेषण

अन्धोपन सिम्युलेटर

रचनात्मक पक्षहरू