Skip to content

डिज़ाइन टोकन एक्सपोर्टर

रंग पैलेट और मॉड्यूलर टाइप स्केल को CSS वेरिएबल, Tailwind थीम, JSON या Figma Tokens (Tokens Studio) में बदलें। ऑफ़लाइन और तुरंत।

कोई अपलोड नहीं
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
5xl · 61.04 Design tokens
4xl · 48.83 Design tokens
3xl · 39.06 Design tokens
2xl · 31.25 Design tokens
xl · 25 Design tokens
lg · 20 Design tokens
base · 16 Design tokens
sm · 12.8 Design tokens
xs · 10.24 Design tokens
:root {
  --color-primary: #4f46e5;
  --color-primary-50: #f2f2fd;
  --color-primary-100: #e5e4fb;
  --color-primary-200: #c3c0f6;
  --color-primary-300: #9994f0;
  --color-primary-400: #665ee8;
  --color-primary-500: #372de1;
  --color-primary-600: #261cc9;
  --color-primary-700: #1f17a5;
  --color-primary-800: #191282;
  --color-primary-900: #120d5e;
  --color-primary-950: #0b083a;
  --color-accent: #f97316;
  --color-accent-50: #fff6f0;
  --color-accent-100: #feede1;
  --color-accent-200: #fdd5b9;
  --color-accent-300: #fcb788;
  --color-accent-400: #fa934c;
  --color-accent-500: #f97315;
  --color-accent-600: #e05f06;
  --color-accent-700: #b84e05;
  --color-accent-800: #903d04;
  --color-accent-900: #682c03;
  --color-accent-950: #411b02;
  --color-neutral: #64748b;
  --color-neutral-50: #f6f7f9;
  --color-neutral-100: #edeff2;
  --color-neutral-200: #d5dae1;
  --color-neutral-300: #b8c0cc;
  --color-neutral-400: #94a1b2;
  --color-neutral-500: #74849b;
  --color-neutral-600: #606f85;
  --color-neutral-700: #4f5c6e;
  --color-neutral-800: #3e4856;
  --color-neutral-900: #2d343e;
  --color-neutral-950: #1c2027;

  --font-sans: Inter, system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9531rem;
  --text-3xl: 2.4413rem;
  --text-4xl: 3.0519rem;
  --text-5xl: 3.815rem;
}

डिज़ाइन टोकन एक्सपोर्टर कैसे इस्तेमाल करें

  1. 1डिज़ाइन टोकन एक्सपोर्टर खोलें। यह आपके ब्राउज़र में चलता है, साइन-अप की ज़रूरत नहीं।
  2. 2अपना इनपुट टाइप या पेस्ट करें।
  3. 3नतीजा कॉपी या डाउनलोड करें।

सवाल

How are shades generated?

Each colour keeps its hue and saturation while lightness steps from 97% (50) down to 13% (950), giving a Tailwind-style 50–950 ramp. Untick “Generate shades” to export only your exact colours.

What is the Figma Tokens format?

JSON for the Tokens Studio for Figma plugin, using $value and $type keys. Import it in the plugin to create colour and typography tokens.

Where do I get a palette?

Extract one with the Color Palette from Image tool, then paste the hex codes here.

और टूल

QR कोड जनरेटरलिंक, Wi-Fi, टेक्स्ट — SVG या PNG शब्द और अक्षर गणकशब्द, अक्षर, पढ़ने का समय केस कन्वर्टर और स्लगिफ़ाईUPPER, Title, camel, kebab Markdown से HTMLलाइव प्रीव्यू और एक्सपोर्ट Markdown से PDFप्रिंट के लिए तैयार, चुनने योग्य टेक्स्ट टेक्स्ट क्लीनर: डुप्लिकेट हटाएँ, सॉर्ट, बदलेंपंक्तियाँ, स्पेस, खोजें और बदलें फ़ैंसी टेक्स्ट जनरेटरबायो के लिए यूनिकोड फ़ॉन्ट Lorem Ipsum जनरेटरप्लेसहोल्डर अनुच्छेद