پالت‌های رنگی

مرجع کامل پالت‌های رنگی پایه — scale های رنگی و نسبت کنتراست WCAG

اصل

پرتو دو تم دارد (روشن و تاریک) و همه رنگ‌ها از طریق CSS Variable منتقل می‌شوند — نه مستقیم از scale های Tailwind. این صفحه مرجع scale های پایه است؛ برای استفاده در کد، به صفحه رنگ‌ها مراجعه کنید.

قوانین اجباری

✅className="bg-background text-foreground"

❌className="bg-gray-900 text-white"

✅className="bg-[hsl(var(--brand)/0.1)] text-brand"

❌style={{ backgroundColor: '#1a1a2e' }}

این صفحه تمام رنگ‌های پایه و scale های رنگی موجود در سیستم را نمایش می‌دهد.

تغییر تم

برای مشاهده رنگ‌ها در تم‌های مختلف (روشن و تاریک)، از سوئیچ زیر استفاده کنید:

دسترسی‌پذیری و Contrast Ratio

تمام رنگ‌های دیزاین سیستم پرتو با استانداردهای WCAG (Web Content Accessibility Guidelines) سازگار هستند. برای اطمینان از خوانایی متن، Contrast Ratio باید حداقل:

4.5:1 برای متن عادی (Normal Text)
3:1 برای متن بزرگ (Large Text - 18pt+ یا 14pt+ bold)

مثال: نمایش Contrast Ratio

برای مشاهده Contrast Ratio هر رنگ با سفید و سیاه، روی دکمه‌های زیر کلیک کنید:

Blue - با نمایش Contrast Ratio

blue-50#eff6ff19.3:1

blue-100#dbeafe17.2:1

blue-200#bfdbfe14.8:1

blue-300#93c5fd11.6:1

blue-400#60a5fa8.3:1

blue-500#3b82f65.7:1

blue-600#2563eb5.2:1

blue-700#1d4ed86.7:1

blue-800#1e40af8.7:1

blue-900#1e3a8a10.4:1

blue-950#17255414.7:1

نکته مهم

اعداد سبز نشان می‌دهند که رنگ از استانداردهای WCAG AA عبور کرده (نسبت ≥4.5:1) و برای متن قابل استفاده است. اعداد نارنجی نشان می‌دهند که رنگ فقط برای عناصر بزرگ یا غیرمتنی مناسب است.

پالت‌های سیستم (برای تم‌سازی)

این پالت‌ها به طور مستقیم در سیستم رنگ‌بندی پرتو استفاده می‌شوند. روی هر نمونه کلیک کنید تا نام آن در کلیپ‌بورد کپی شود.

Gray Dark - تم تاریک

gray-dark-100#16161618.1:1

gray-dark-200#1c1c1c17.0:1

gray-dark-300#23232315.7:1

gray-dark-400#28282814.7:1

gray-dark-500#2e2e2e13.6:1

gray-dark-600#34343412.4:1

gray-dark-700#3e3e3e10.7:1

gray-dark-800#5050508.1:1

gray-dark-900#7070705.0:1

gray-dark-1000#7e7e7e5.2:1

gray-dark-1100#a0a0a08.0:1

gray-dark-1200#ededed17.9:1

Gray Light - تم روشن

gray-light-100#fcfcfc20.5:1

gray-light-200#f8f8f819.8:1

gray-light-300#f3f3f318.9:1

gray-light-400#ededed17.9:1

gray-light-500#e8e8e817.1:1

gray-light-600#e2e2e216.2:1

gray-light-700#dbdbdb15.2:1

gray-light-800#c7c7c712.4:1

gray-light-900#8f8f8f6.5:1

gray-light-1000#8585855.7:1

gray-light-1100#6f6f6f5.0:1

gray-light-1200#17171717.9:1

Slate Dark - تم تاریک

slate-dark-100#15171818.0:1

slate-dark-200#1a1d1e17.0:1

slate-dark-300#20242515.7:1

slate-dark-400#26292b14.6:1

slate-dark-500#2b2f3113.5:1

slate-dark-600#31353812.4:1

slate-dark-700#3a3f4210.7:1

slate-dark-800#4c51558.0:1

slate-dark-900#6971775.0:1

slate-dark-1000#787f855.2:1

slate-dark-1100#9ba1a68.0:1

slate-dark-1200#ecedee17.9:1

Slate Light - تم روشن

slate-light-100#fbfcfd20.4:1

slate-light-200#f8f9fa19.9:1

slate-light-300#f1f3f518.9:1

slate-light-400#eceef018.1:1

slate-light-500#e6e8eb17.1:1

slate-light-600#dfe3e616.3:1

slate-light-700#d7dbdf15.1:1

slate-light-800#c1c8cd12.4:1

slate-light-900#8890966.5:1

slate-light-1000#7e868c5.7:1

slate-light-1100#6870765.0:1

slate-light-1200#11181c17.9:1

پالت‌های رنگی Tailwind (مرجع)

این رنگ‌ها برای موارد خاص و سفارشی‌سازی در دسترس هستند.

Slate

slate-50#f8fafc20.1:1

slate-100#f1f5f919.2:1

slate-200#e2e8f017.0:1

slate-300#cbd5e114.1:1

slate-400#94a3b88.2:1

slate-500#64748b4.8:1

slate-600#4755697.6:1

slate-700#33415510.4:1

slate-800#1e293b14.6:1

slate-900#0f172a17.9:1

slate-950#02061720.2:1

Gray

gray-50#f9fafb20.1:1

gray-100#f3f4f619.1:1

gray-200#e5e7eb17.0:1

gray-300#d1d5db14.3:1

gray-400#9ca3af8.3:1

gray-500#6b72804.8:1

gray-600#4b55637.6:1

gray-700#37415110.3:1

gray-800#1f293714.7:1

gray-900#11182717.7:1

gray-950#03071220.1:1

Zinc

zinc-50#fafafa20.1:1

zinc-100#f4f4f519.1:1

zinc-200#e4e4e716.6:1

zinc-300#d4d4d814.2:1

zinc-400#a1a1aa8.2:1

zinc-500#71717a4.8:1

zinc-600#52525b7.7:1

zinc-700#3f3f4610.4:1

zinc-800#27272a14.9:1

zinc-900#18181b17.7:1

zinc-950#09090b19.9:1

Neutral

neutral-50#fafafa20.1:1

neutral-100#f5f5f519.3:1

neutral-200#e5e5e516.7:1

neutral-300#d4d4d414.2:1

neutral-400#a3a3a38.3:1

neutral-500#7373734.7:1

neutral-600#5252527.8:1

neutral-700#40404010.4:1

neutral-800#26262615.1:1

neutral-900#17171717.9:1

neutral-950#0a0a0a19.8:1

Stone

stone-50#fafaf920.1:1

stone-100#f5f5f419.2:1

stone-200#e7e5e416.7:1

stone-300#d6d3d114.1:1

stone-400#a8a29e8.3:1

stone-500#78716c4.8:1

stone-600#57534e7.6:1

stone-700#44403c10.3:1

stone-800#29252415.2:1

stone-900#1c191717.5:1

stone-950#0c0a0919.8:1

Red

red-50#fef2f219.2:1

red-100#fee2e217.2:1

red-200#fecaca14.5:1

red-300#fca5a511.1:1

red-400#f871717.6:1

red-500#ef44445.6:1

red-600#dc26264.8:1

red-700#b91c1c6.5:1

red-800#991b1b8.3:1

red-900#7f1d1d10.0:1

red-950#450a0a16.1:1

Orange

orange-50#fff7ed19.8:1

orange-100#ffedd518.3:1

orange-200#fed7aa15.5:1

orange-300#fdba7412.5:1

orange-400#fb923c9.3:1

orange-500#f973167.5:1

orange-600#ea580c5.9:1

orange-700#c2410c5.2:1

orange-800#9a34127.3:1

orange-900#7c2d129.4:1

orange-950#43140715.7:1

Amber

amber-50#fffbeb20.3:1

amber-100#fef3c718.9:1

amber-200#fde68a16.9:1

amber-300#fcd34d14.6:1

amber-400#fbbf2412.6:1

amber-500#f59e0b9.8:1

amber-600#d977066.6:1

amber-700#b453095.0:1

amber-800#92400e7.1:1

amber-900#78350f9.1:1

amber-950#451a0315.0:1

Yellow

yellow-50#fefce820.3:1

yellow-100#fef9c319.6:1

yellow-200#fef08a18.0:1

yellow-300#fde04715.9:1

yellow-400#facc1513.7:1

yellow-500#eab30811.0:1

yellow-600#ca8a047.1:1

yellow-700#a162074.9:1

yellow-800#854d0e6.9:1

yellow-900#713f128.7:1

yellow-950#42200614.6:1

Lime

lime-50#f7fee720.3:1

lime-100#ecfccb19.4:1

lime-200#d9f99d18.0:1

lime-300#bef26416.1:1

lime-400#a3e63513.9:1

lime-500#84cc1610.6:1

lime-600#65a30d6.8:1

lime-700#4d7c0f5.0:1

lime-800#3f62127.1:1

lime-900#3653148.7:1

lime-950#1a2e0514.6:1

Green

green-50#f0fdf420.1:1

green-100#dcfce719.1:1

green-200#bbf7d017.3:1

green-300#86efac15.0:1

green-400#4ade8012.1:1

green-500#22c55e9.2:1

green-600#16a34a6.4:1

green-700#15803d5.0:1

green-800#1665347.1:1

green-900#14532d9.1:1

green-950#052e1614.9:1

Emerald

emerald-50#ecfdf519.9:1

emerald-100#d1fae518.5:1

emerald-200#a7f3d016.4:1

emerald-300#6ee7b713.8:1

emerald-400#34d39910.9:1

emerald-500#10b9818.3:1

emerald-600#0596695.6:1

emerald-700#0478575.5:1

emerald-800#065f467.7:1

emerald-900#064e3b9.7:1

emerald-950#022c2215.2:1

Teal

teal-50#f0fdfa20.1:1

teal-100#ccfbf118.6:1

teal-200#99f6e416.7:1

teal-300#5eead414.2:1

teal-400#2dd4bf11.3:1

teal-500#14b8a68.4:1

teal-600#0d94885.6:1

teal-700#0f766e5.5:1

teal-800#115e597.6:1

teal-900#134e4a9.5:1

teal-950#042f2e14.5:1

Cyan

cyan-50#ecfeff20.2:1

cyan-100#cffafe18.8:1

cyan-200#a5f3fc16.8:1

cyan-300#67e8f914.5:1

cyan-400#22d3ee11.6:1

cyan-500#06b6d48.6:1

cyan-600#0891b25.7:1

cyan-700#0e74905.4:1

cyan-800#155e757.3:1

cyan-900#164e639.1:1

cyan-950#08334413.4:1

Sky

sky-50#f0f9ff19.7:1

sky-100#e0f2fe18.3:1

sky-200#bae6fd15.8:1

sky-300#7dd3fc12.6:1

sky-400#38bdf89.8:1

sky-500#0ea5e97.6:1

sky-600#0284c75.1:1

sky-700#0369a15.9:1

sky-800#0759857.6:1

sky-900#0c4a6e9.5:1

sky-950#082f4913.9:1

Blue

blue-50#eff6ff19.3:1

blue-100#dbeafe17.2:1

blue-200#bfdbfe14.8:1

blue-300#93c5fd11.6:1

blue-400#60a5fa8.3:1

blue-500#3b82f65.7:1

blue-600#2563eb5.2:1

blue-700#1d4ed86.7:1

blue-800#1e40af8.7:1

blue-900#1e3a8a10.4:1

blue-950#17255414.7:1

Indigo

indigo-50#eef2ff18.8:1

indigo-100#e0e7ff17.0:1

indigo-200#c7d2fe14.1:1

indigo-300#a5b4fc10.5:1

indigo-400#818cf87.0:1

indigo-500#6366f14.7:1

indigo-600#4f46e56.3:1

indigo-700#4338ca7.9:1

indigo-800#3730a39.9:1

indigo-900#312e8111.4:1

indigo-950#1e1b4b16.0:1

Violet

violet-50#f5f3ff19.1:1

violet-100#ede9fe17.7:1

violet-200#ddd6fe15.1:1

violet-300#c4b5fd11.4:1

violet-400#a78bfa7.7:1

violet-500#8b5cf65.0:1

violet-600#7c3aed5.7:1

violet-700#6d28d97.1:1

violet-800#5b21b69.0:1

violet-900#4c1d9511.0:1

violet-950#1e1b4b16.0:1

Purple

purple-50#faf5ff19.6:1

purple-100#f3e8ff17.8:1

purple-200#e9d5ff15.4:1

purple-300#d8b4fe11.9:1

purple-400#c084fc7.9:1

purple-500#a855f75.3:1

purple-600#9333ea5.4:1

purple-700#7e22ce7.0:1

purple-800#6b21a88.7:1

purple-900#581c8710.9:1

purple-950#3b076415.0:1

Fuchsia

fuchsia-50#fdf4ff19.6:1

fuchsia-100#fae8ff18.1:1

fuchsia-200#f5d0fe15.3:1

fuchsia-300#f0abfc11.9:1

fuchsia-400#e879f98.5:1

fuchsia-500#d946ef6.1:1

fuchsia-600#c026d34.7:1

fuchsia-700#a21caf6.3:1

fuchsia-800#86198f8.2:1

fuchsia-900#701a7510.0:1

fuchsia-950#4a044e14.8:1

Pink

pink-50#fdf2f819.2:1

pink-100#fce7f317.9:1

pink-200#fbcfe815.2:1

pink-300#f9a8d411.6:1

pink-400#f472b67.9:1

pink-500#ec48996.0:1

pink-600#db27774.6:1

pink-700#be185d6.0:1

pink-800#9d174d7.9:1

pink-900#8318439.6:1

pink-950#50072415.0:1

Rose

rose-50#fff1f219.1:1

rose-100#ffe4e617.5:1

rose-200#fecdd314.9:1

rose-300#fda4af11.1:1

rose-400#fb71857.8:1

rose-500#f43f5e5.7:1

rose-600#e11d484.7:1

rose-700#be123c6.3:1

rose-800#9f12398.0:1

rose-900#8813379.6:1

rose-950#4c051915.6:1

اصل