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

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

रंग रूपान्तरण

HEX

#fefced

Orange White

HEX
#fefced
HSL
53, 89, 96
RGB
254, 252, 237
XYZ
91, 97, 94
CMYK
0, 1, 7, 0
LUV
99,18,18
LAB
99, -2, 7
HWB
53, 93, 0

भिन्नताहरू

यस खण्डको उद्देश्य तिम्रो चयन गरिएको रंगको १०% वृद्धिमा टिन्ट्स (शुद्ध सेतो थपिएको) र शेड्स (शुद्ध कालो थपिएको) सटीक रूपमा उत्पादन गर्नु हो।

प्रो टिप: होभर अवस्थाहरू र छायाहरूको लागि शेड्स प्रयोग गर, हाइलाइट्स र पृष्ठभूमिहरूको लागि टिन्ट्स।

शेड्स

तिम्रो आधार रंगमा कालो थपेर बनाइएका गाढा भिन्नताहरू।

टिन्ट्स

तिम्रो आधार रंगमा सेतो थपेर बनाइएका हल्का भिन्नताहरू।

सामान्य प्रयोगका केसहरू

  • UI कम्पोनेन्ट अवस्थाहरू (होभर, सक्रिय, अक्षम)
  • छायाहरू र हाइलाइट्सको साथ गहिराई सिर्जना गर्दै
  • सुसंगत रंग प्रणालीहरू निर्माण गर्दै

डिजाइन प्रणाली टिप

यी भिन्नताहरू एक सुसंगत रंग Palette को आधार बनाउँछन्। तिम्रो सम्पूर्ण परियोजनामा ​​सुसंगतता कायम राख्न तिनीहरूलाई निर्यात गर।

रंग संयोजनहरू

प्रत्येक हार्मनीको आफ्नै मूड हुन्छ। राम्रोसँग काम गर्ने रंग संयोजनहरूको मस्तिष्कमा आँधी ल्याउन हार्मनीहरू प्रयोग गर।

कसरी प्रयोग गर्ने

कुनै पनि रंगमा क्लिक गरेर यसको Hex मान प्रतिलिपि गर। यी संयोजनहरू दृश्यात्मक हार्मनी सिर्जना गर्न गणितीय रूपमा प्रमाणित छन्।

किन यो महत्त्वपूर्ण छ

रंग हार्मनीहरूले सन्तुलन सिर्जना गर्छन् र तिम्रो डिजाइनहरूमा विशिष्ट भावनाहरू उत्पन्न गर्छन्।

पूरक

रंग र यसको विपरीत रंग चक्रमा, +180 डिग्रीको ह्यूसँग। उच्च विपरीत।

#fefced
का लागि उत्तम: उच्च प्रभावकारी डिजाइनहरू, 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

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

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

रंग विश्लेषण

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

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