किसी भी रंग को 11-स्टेप डिज़ाइन-सिस्टम स्केल (50→950) में बदलें: स्रोत रंग को उसके निकटतम स्टेप पर एंकर करते हुए धारणात्मक रूप से सम OKLCH इंटरपोलेशन, हर स्टेप पर सफ़ेद/काले के साथ WCAG कंट्रास्ट, Tailwind / CSS वेरिएबल्स / SCSS / JSON में एक-क्लिक एक्सपोर्ट।
// tailwind.config.js / @theme
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: "#ffedfa",
100: "#ffd8f4",
200: "#ffbdec",
300: "#fea4e4",
400: "#f47bd4",
500: "#e653c4",
600: "#d222af",
700: "#b90098",
800: "#9c007f",
900: "#7c0063",
950: "#560044",
},
},
},
},
};एक रंग से 11-स्टेप डिज़ाइन-सिस्टम स्केल प्राप्त करें, OKLCH में अनुभूति रूप से एकसमान।
एक HEX पेस्ट करें, या किसी भी रंग पृष्ठ पर "स्केल बनाएं" दबाकर मान लाएं।
आपका रंग अपने निकटतम स्टेप पर स्नैप हो जाता है; हर स्टेप के नीचे सफ़ेद और काले के विरुद्ध WCAG कंट्रास्ट प्रदर्शित होता है।
Tailwind / CSS vars / SCSS / JSON चुनें और इसे सीधे अपने कोड में कॉपी करें।
शेड जेनरेशन के बारे में लोग वास्तव में पूछने वाले चार प्रश्न।
यहां से आगे बढ़ें और रंगों को काम में लाएं।
एक RAL, Pantone या NCS कोड दर्ज करें — या कोई भी HEX — और इसे सभी 10 मानक प्रणालियों में CIEDE2000 ΔE के साथ मैच करें।
WCAG 2.1 किसी भी अग्रभूमि और पृष्ठभूमि रंग के बीच कंट्रास्ट सत्यापन।
स्पेसबार से रैंडमाइज़ करें, लॉक करें, पुनः क्रमबद्ध करने के लिए ड्रैग करें, URL से साझा करें - वह सब कुछ जो एक पैलेट बोर्ड को करना चाहिए।
एक पंक्ति में किसी दृश्य या मूड का वर्णन करें - तर्क के साथ पांच-भूमिका वाला पैलेट प्राप्त करें।