سازنده طیف رنگ (۵۰ تا ۹۰۰)
از یک رنگ پایه، طیف دهمرحلهای ۵۰–۹۰۰ با کد HEX و نسبت کنتراست WCAG بسازید.
دربارهی سازنده طیف رنگ (۵۰ تا ۹۰۰)
در فضای رنگی HSL، روشناییِ ۵۰٪ برای زرد و آبی دقیقاً یک عدد است، اما چشم زردِ ۵۰٪ را چند برابر روشنتر از آبیِ ۵۰٪ میبیند؛ به همین دلیل طیفی که فقط روی مؤلفهی L حرکت میکند، لزوماً پلههای بصریِ یکنواخت نمیدهد. این ابزار رمپ استاندارد ۵۰ تا ۹۰۰ را با درونیابی رنگ پایه به سمت سفید و سیاه میسازد و کنار هر پله نسبت کنتراست واقعی WCAG را مینویسد تا بهجای حدس زدن، با عدد تصمیم بگیرید. فام (Hue) در تمام ده پله ثابت میماند، پس طیف از هویت رنگی برند خارج نمیشود.
راهنمای استفاده از سازنده طیف رنگ (۵۰ تا ۹۰۰)
- 1
رنگ پایه را با انتخابگر بردارید یا کد آن را به شکل HEX، RGB یا HSL در کادر بنویسید.
- 2
نام متغیر را بگذارید؛ همین نام در خروجی CSS و Tailwind به کار میرود و کاراکترهای غیرمجاز خودکار به خط تیره تبدیل میشود.
- 3
اگر تینتها و شیدها بیش از حد سیر به نظر میرسند، گزینهی ملایمکردن دو سر طیف را بزنید تا اشباع در پلههای انتهایی کم شود.
- 4
در هر ردیف کد HEX و نسبت کنتراست روی سفید و سیاه را ببینید و با کلیک روی کد، آن را کپی کنید.
- 5
در پایان، بلوک متغیرهای CSS یا قطعهی تنظیمات Tailwind را یکجا کپی کنید.
پرسشهای متداول
چرا فاصلهی بصری پلهها یکنواخت نیست؟
چون HSL فضای ادراکی نیست. اختلاف روشنایی عددی با اختلافی که چشم میبیند یکی نیست، مخصوصاً در زرد و فیروزهای که در روشنایی یکسان بسیار درخشانتر به نظر میرسند. اگر فاصلهی کاملاً یکنواخت میخواهید باید سراغ فضاهایی مثل OKLCH بروید؛ در این ابزار ملاک عملی شما همان ستون نسبت کنتراست است که عدد واقعی و قابل استناد میدهد.
برای متن اصلی سایت کدام پله را بردارم؟
تصور رایج این است که پلهی ۵۰۰ یعنی رنگ برند، پس برای متن هم مناسب است؛ این معمولاً غلط است. مثلاً فیروزهای #22d3ee روی سفید فقط ۱٫۸۱:۱ کنتراست دارد و حتی برای متن درشت هم رد میشود. روی پسزمینهی سفید معمولاً باید تا پلهی ۶۰۰ یا ۷۰۰ پایین بروید تا به ۴٫۵:۱ برسید — ستون «روی سفید» دقیقاً همین را نشان میدهد.
چرا وقتی رنگ پایهام روشن است، پلههای ۵۰ تا ۳۰۰ تقریباً یکسان درمیآیند؟
این محدودیت واقعی روش کار است: رنگ پایه همیشه روی پلهی ۵۰۰ مینشیند، پس اگر روشنایی آن مثلاً ۹۰٪ باشد، تا سفید فقط ۱۰٪ فضا باقی میماند و چهار پلهی بالایی ناچار در هم میروند. برای گرفتن رمپ متعادل، رنگی با روشنایی حدود ۴۵ تا ۶۰ درصد را بهعنوان پایه بدهید؛ عدد HSL زیر کادر ورودی همین را به شما نشان میدهد.
خروجی با پالتهای خود Tailwind یکی میشود؟
خیر. پالتهای پیشفرض Tailwind دستی و چشمی تنظیم شدهاند و فامشان در طول طیف کمی جابهجا میشود. این ابزار یک رمپ ریاضی و یکدست از رنگ خودتان میسازد که فام ثابتی دارد. قطعهی خروجی زیر theme.extend.colors قرار میگیرد و پالتهای پیشفرض را حذف نمیکند.