سازنده گرادیان CSS
گرادیان‌های CSS خطی، شعاعی و مخروطی را با ترکیب OKLCH یا OKLab و جایگزین sRGB بسازید، سپس CSS، کلاس Tailwind یا SVG را کپی کنید یا PNG دانلود کنید.
نقاط رنگ
برای افزودن نقطه روی نوار کلیک کنید و برای جابه‌جا کردن هر نقطه، آن را بکشید. وقتی نقطه‌ای انتخاب شده است، کلیدهای جهت‌نما آن را جابه‌جا می‌کنند و Delete آن را حذف می‌کند.
ترکیب رنگ‌ها در
همان نقاط، به سه روش ترکیب‌شده. sRGB کلاسیک ممکن است بین رنگ‌های دور از هم خاکستری یا گل‌آلود شود؛ OKLab روشنایی را یکنواخت نگه می‌دارد و OKLCH رنگ را پرقدرت نگه می‌دارد. مرورگرهایی که OKLab یا OKLCH را نمی‌شناسند یک جایگزین sRGB دریافت می‌کنند که دقیقاً همان‌طور به نظر می‌رسد.
متن روی گرادیان
- متن سفید
- ۲٫۱:1
- خیلی کم
- متن سیاه
- ۴٫۲:1
- AA فقط برای متن بزرگ
کمترین کنتراست در هر جای گرادیان. WCAG AA برای متن معمولی 4.5:1 و برای متن بزرگ 3:1 لازم دارد.
کد
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);یک گرادیان CSS را با چشم بسازید و کدی کپی کنید که همه‌جا کار می‌کند. خطی، شعاعی یا مخروطی را انتخاب کنید، نقاط رنگ را بکشید و تعیین کنید رنگ‌ها چطور ترکیب شوند: مرورگرهای مدرن می‌توانند در OKLab یا OKLCH ترکیب کنند که از ناحیه خاکستری و بی‌جان گرادیان‌های کلاسیک sRGB جلوگیری می‌کند، و کد برای مرورگرهای قدیمی‌تر یک جایگزین sRGB هماهنگ هم دارد. همچنین می‌بینید که متن سفید یا سیاه روی آن خوانا می‌ماند یا نه، و می‌توانید از آن کلاس Tailwind، فایل SVG یا تصویر PNG در هر اندازه‌ای خروجی بگیرید.