پالتهای رنگی
تمام رنگهای پایه و scale های رنگی موجود در سیستم - از Supabase Design System
این صفحه تمام رنگهای پایه و 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 (مرجع)
هر خانواده رنگی در زیر دقیقاً از مقادیر Tailwind/Supabase استخراج شده است. این رنگها برای موارد خاص و سفارشیسازی در دسترس هستند.
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