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جاهز للطباعة ونص قابل للتحديد منظّف النص: إزالة التكرار والترتيب والاستبدالأسطر ومسافات وبحث واستبدال مولّد الخطوط المزخرفةخطوط Unicode للنبذة الشخصية مولّد Lorem Ipsumفقرات نصية مؤقتة