رنگ

رنگ‌های جغد از رنگ‌های متریال دیزاین گوگل الهام گرفته شده‌اند. در کنار این رنگ‌ها و به کمک کامپوننت‌های جغد شما قادر خواهید بود تا هر بار محیطی آرام، زیبا و کاربرپسند با محتویاتی چشم گیر با تیره‌روشن‌های جذاب و سایه‌هایی عمیق طراحی کنید.

پالت رنگ

پالت رنگ شامل چند رنگ پایه و پرده‌های تیره‌تر، روشن‌تر و تاکیدی از آن رنگ‌ها است. این رنگ‌ها برای همکاری هماهنگ با یکدیگر طراحی شده‌اند.

  • قرمز
  • #f44336 red
  • #ffebee red-lighten-5
  • #ffcdd2 red-lighten-4
  • #ef9a9a red-lighten-3
  • #e57373 red-lighten-2
  • #ef5350 red-lighten-1
  • #f44336 red
  • #e53935 red-darken-1
  • #d32f2f red-darken-2
  • #c62828 red-darken-3
  • #b71c1c red-darken-4
  • #ff8a80 red-accent-1
  • #ff5252 red-accent-2
  • #ff1744 red-accent-3
  • #d50000 red-accent-4
  • صورتی
  • #e91e63 pink
  • #fce4ec pink-lighten-5
  • #f8bbd0 pink-lighten-4
  • #f48fb1 pink-lighten-3
  • #f06292 pink-lighten-2
  • #ec407a pink-lighten-1
  • #e91e63 pink
  • #d81b60 pink-darken-1
  • #c2185b pink-darken-2
  • #ad1457 pink-darken-3
  • #880e4f pink-darken-4
  • #ff80ab pink-accent-1
  • #ff4081 pink-accent-2
  • #f50057 pink-accent-3
  • #c51162 pink-accent-4
  • بنفش
  • #9c27b0 purple
  • #f3e5f5 purple-lighten-5
  • #e1bee7 purple-lighten-4
  • #ce93d8 purple-lighten-3
  • #ba68c8 purple-lighten-2
  • #ab47bc purple-lighten-1
  • #9c27b0 purple
  • #8e24aa purple-darken-1
  • #7b1fa2 purple-darken-2
  • #6a1b9a purple-darken-3
  • #4a148c purple-darken-4
  • #ea80fc purple-accent-1
  • #e040fb purple-accent-2
  • #d500f9 purple-accent-3
  • #aa00ff purple-accent-4
  • بنفش عمیق
  • #673ab7 deep-purple
  • #ede7f6 deep-purple-lighten-5
  • #d1c4e9 deep-purple-lighten-4
  • #b39ddb deep-purple-lighten-3
  • #9575cd deep-purple-lighten-2
  • #5e35b1 deep-purple-lighten-1
  • #673ab7 deep-purple
  • #8e24aa deep-purple-darken-1
  • #7b1fa2 deep-purple-darken-2
  • #6a1b9a deep-purple-darken-3
  • #4a148c deep-purple-darken-4
  • #b388ff deep-purple-accent-1
  • #7c4dff deep-purple-accent-2
  • #651fff deep-purple-accent-3
  • #6200ea deep-purple-accent-4
  • نیلی
  • #3f51b5 indigo
  • #e8eaf6 indigo-lighten-5
  • #c5cae9 indigo-lighten-4
  • #9fa8da indigo-lighten-3
  • #7986cb indigo-lighten-2
  • #5c6bc0 indigo-lighten-1
  • #3f51b5 indigo
  • #3949ab indigo-darken-1
  • #303f9f indigo-darken-2
  • #283593 indigo-darken-3
  • #1a237e indigo-darken-4
  • #8c9eff indigo-accent-1
  • #536dfe indigo-accent-2
  • #3d5afe indigo-accent-3
  • #304ffe indigo-accent-4
  • آبی
  • #2196f3 blue
  • #e3f2fd blue-lighten-5
  • #bbdefb blue-lighten-4
  • #90caf9 blue-lighten-3
  • #64b5f6 blue-lighten-2
  • #42a5f5 blue-lighten-1
  • #2196f3 blue
  • #1e88e5 blue-darken-1
  • #1976d2 blue-darken-2
  • #1565c0 blue-darken-3
  • #0d47a1 blue-darken-4
  • #82b1ff blue-accent-1
  • #448aff blue-accent-2
  • #2979ff blue-accent-3
  • #2962ff blue-accent-4
  • آبی یواش
  • #03a9f4 light-blue
  • #e1f5fe light-blue-lighten-5
  • #b3e5fc light-blue-lighten-4
  • #81d4fa light-blue-lighten-3
  • #4fc3f7 light-blue-lighten-2
  • #29b6f6 light-blue-lighten-1
  • #03a9f4 light-blue
  • #039be5 light-blue-darken-1
  • #0288d1 light-blue-darken-2
  • #0277bd light-blue-darken-3
  • #01579b light-blue-darken-4
  • #80d8ff light-blue-accent-1
  • #40c4ff light-blue-accent-2
  • #00b0ff light-blue-accent-3
  • #0091ea light-blue-accent-4
  • فیروزه‌ای
  • #00bcd4 cyan
  • #e0f7fa cyan-lighten-5
  • #b2ebf2 cyan-lighten-4
  • #80deea cyan-lighten-3
  • #4dd0e1 cyan-lighten-2
  • #26c6da cyan-lighten-1
  • #00bcd4 cyan
  • #00acc1 cyan-darken-1
  • #0097a7 cyan-darken-2
  • #00838f cyan-darken-3
  • #006064 cyan-darken-4
  • #84ffff cyan-accent-1
  • #18ffff cyan-accent-2
  • #00e5ff cyan-accent-3
  • #00b8d4 cyan-accent-4
  • کله غازی
  • #009688 teal
  • #e0f2f1 teal-lighten-5
  • #b2dfdb teal-lighten-4
  • #80cbc4 teal-lighten-3
  • #4db6ac teal-lighten-2
  • #26a69a teal-lighten-1
  • #009688 teal
  • #00897b teal-darken-1
  • #00796b teal-darken-2
  • #00695c teal-darken-3
  • #004d40 teal-darken-4
  • #a7ffeb teal-accent-1
  • #64ffda teal-accent-2
  • #1de9b6 teal-accent-3
  • #00bfa5 teal-accent-4
  • سبز
  • #4caf50 green
  • #e8f5e9 green-lighten-5
  • #c8e6c9 green-lighten-4
  • #a5d6a7 green-lighten-3
  • #81c784 green-lighten-2
  • #66bb6a green-lighten-1
  • #4caf50 green
  • #43a047 green-darken-1
  • #388e3c green-darken-2
  • #2e7d32 green-darken-3
  • #1b5e20 green-darken-4
  • #b9f6ca green-accent-1
  • #69f0ae green-accent-2
  • #00e676 green-accent-3
  • #00c853 green-accent-4
  • سبز یواش
  • #8bc34a light-green
  • #f1f8e9 light-green-lighten-5
  • #dcedc8 light-green-lighten-4
  • #c5e1a5 light-green-lighten-3
  • #aed581 light-green-lighten-2
  • #9ccc65 light-green-lighten-1
  • #8bc34a light-green
  • #7cb342 light-green-darken-1
  • #689f38 light-green-darken-2
  • #558b2f light-green-darken-3
  • #33691e light-green-darken-4
  • #ccff90 light-green-accent-1
  • #b2ff59 light-green-accent-2
  • #76ff03 light-green-accent-3
  • #64dd17 light-green-accent-4
  • لیموئی
  • #cddc39 lime
  • #f9fbe7 lime-lighten-5
  • #f0f4c3 lime-lighten-4
  • #e6ee9c lime-lighten-3
  • #dce775 lime-lighten-2
  • #d4e157 lime-lighten-1
  • #cddc39 lime
  • #c0ca33 lime-darken-1
  • #afb42b lime-darken-2
  • #9e9d24 lime-darken-3
  • #827717 lime-darken-4
  • #f4ff81 lime-accent-1
  • #eeff41 lime-accent-2
  • #c6ff00 lime-accent-3
  • #aeea00 lime-accent-4
  • زرد
  • #ffeb3b yellow
  • #fffde7 yellow-lighten-5
  • #fff9c4 yellow-lighten-4
  • #fff59d yellow-lighten-3
  • #fff176 yellow-lighten-2
  • #ffee58 yellow-lighten-1
  • #ffeb3b yellow
  • #fdd835 yellow-darken-1
  • #fbc02d yellow-darken-2
  • #f9a825 yellow-darken-3
  • #f57f17 yellow-darken-4
  • #ffff8d yellow-accent-1
  • #ffff00 yellow-accent-2
  • #ffea00 yellow-accent-3
  • #ffd600 yellow-accent-4
  • کهربائی
  • #ffc107 amber
  • #fff8e1 amber-lighten-5
  • #ffecb3 amber-lighten-4
  • #ffe082 amber-lighten-3
  • #ffd54f amber-lighten-2
  • #ffca28 amber-lighten-1
  • #ffc107 amber
  • #ffb300 amber-darken-1
  • #ffa000 amber-darken-2
  • #ff8f00 amber-darken-3
  • #ff6f00 amber-darken-4
  • #ffe57f amber-accent-1
  • #ffd740 amber-accent-2
  • #ffc400 amber-accent-3
  • #ffab00 amber-accent-4
  • نارنجی
  • #ff9800 orange
  • #fff3e0 orange-lighten-5
  • #ffe0b2 orange-lighten-4
  • #ffcc80 orange-lighten-3
  • #ffb74d orange-lighten-2
  • #ffa726 orange-lighten-1
  • #ff9800 orange
  • #fb8c00 orange-darken-1
  • #f57c00 orange-darken-2
  • #ef6c00 orange-darken-3
  • #e65100 orange-darken-4
  • #ffd180 orange-accent-1
  • #ffab40 orange-accent-2
  • #ff9100 orange-accent-3
  • #ff6d00 orange-accent-4
  • نارنجی عمیق
  • #ff5722 deep-orange
  • #fbe9e7 deep-orange-lighten-5
  • #ffccbc deep-orange-lighten-4
  • #ffab91 deep-orange-lighten-3
  • #ff8a65 deep-orange-lighten-2
  • #ff7043 deep-orange-lighten-1
  • #ff5722 deep-orange
  • #f4511e deep-orange-darken-1
  • #e64a19 deep-orange-darken-2
  • #d84315 deep-orange-darken-3
  • #bf360c deep-orange-darken-4
  • #ff9e80 deep-orange-accent-1
  • #ff6e40 deep-orange-accent-2
  • #ff3d00 deep-orange-accent-3
  • #dd2c00 deep-orange-accent-4
  • قهوه‌ای
  • #795548 brown
  • #efebe9 brown-lighten-5
  • #d7ccc8 brown-lighten-4
  • #bcaaa4 brown-lighten-3
  • #a1887f brown-lighten-2
  • #8d6e63 brown-lighten-1
  • #795548 brown
  • #6d4c41 brown-darken-1
  • #5d4037 brown-darken-2
  • #4e342e brown-darken-3
  • #3e2723 brown-darken-4
  • خاکستری
  • #9e9e9e grey
  • #fafafa grey-lighten-5
  • #f5f5f5 grey-lighten-4
  • #eeeeee grey-lighten-3
  • #e0e0e0 grey-lighten-2
  • #bdbdbd grey-lighten-1
  • #9e9e9e grey
  • #757575 grey-darken-1
  • #616161 grey-darken-2
  • #424242 grey-darken-3
  • #212121 grey-darken-4
  • آبی-خاکستری
  • #607d8b blue-grey
  • #eceff1 blue-grey-lighten-5
  • #cfd8dc blue-grey-lighten-4
  • #b0bec5 blue-grey-lighten-3
  • #90a4ae blue-grey-lighten-2
  • #78909c blue-grey-lighten-1
  • #607d8b blue-grey
  • #546e7a blue-grey-darken-1
  • #455a64 blue-grey-darken-2
  • #37474f blue-grey-darken-3
  • #263238 blue-grey-darken-4
  • سیاه
  • #000000 black
  • سفید
  • #ffffff white

رنگ‌های پس‌زمینه

استفاده

برای استفاده از رنگ‌های موجود در جغد به بعنوان رنگ پس‌زمینه (background) لازم است نخست جغد را با استفاده از کلاس joqd صدا زده و سپس اسم (کلاس) رنگ مورد نظر خود را بر روی عنصر پیاده کنید.

  • برای آشنایی بیشتر با کارت، به کارت‌ها نگاه کنید.

  • برای آشنایی بیشتر با گوشه‌ی گرد، به گوشه‌ها نگاه کنید.

این قسمت با پس‌زمینه آبی است.

<div class="joqd blue soft-corner elevate-2 demo-panel">
	<p>.این قسمت با پس‌زمینه آبی است</p>
</div>
رویداد‌ها

رنگ پس‌زمینه را می‌توان با توجه به رویداد‌های مختلف تغییر داد.

شما می‌توانید با قرار دادن hover- به انتهای کلاس رنگ، مشخص کنید تا زمانی که اشاره‌گر ماوس بر روی عنصر قرار گرفت (هاور شد - اشاره کرد)، پس‌زمینه عنصر به رنگ مورد نظر تغییر پیدا کند.
قابل ذکر است که با خارج شدن ماوس از روی عنصر، رنگ پس‌زمینه به صورت اولیه خود بازمی‌گردد.

رنگ پس‌زمینه‌ی این قسمت از آبی به صورتی تغییر می‌کند.

<div class="joqd blue pink-hover soft-corner elevate-2 demo-panel">
	<p>.رنگ پس‌زمینه‌ی این قسمت از آبی به صورتی تغییر می‌کند</p>
</div>

رنگ‌های نوشته

استفاده

برای استفاده از رنگ‌های موجود در جغد به بعنوان رنگ نوشته (text) لازم است نخست جغد را با استفاده از کلاس joqd صدا زده و سپس اسم (کلاس) رنگ مورد نظر خود را بعلاوه‌ی text- بر روی عنصر پیاده کنید.

  • برای آشنایی بیشتر با نوشته‌ها، به تایپوگرافی نگاه کنید.

این قسمت با نوشته‌های آبی تیره است.

<div class="joqd white blue-darken-4-text soft-corner elevate-2 demo-panel">
	<p>.این قسمت با نوشته‌های آبی تیره است</p>
</div>
رویداد‌ها

رنگ نوشته را می‌توان با توجه به رویداد‌های مختلف تغییر داد.

شما می‌توانید با قرار دادن hover- به انتهای کلاس رنگ، مشخص کنید تا زمانی که اشاره‌گر ماوس بر روی عنصر قرار گرفت (هاور شد - اشاره کرد)، نوشته‌های عنصر به رنگ مورد نظر تغییر پیدا کند.
قابل ذکر است که با خارج شدن ماوس از روی عنصر، رنگ نوشته به صورت اولیه خود بازمی‌گردد.

رنگ نوشته‌ی این قسمت از آبی تیره به صورتی تغییر پیدا می‌کند.

<div class="joqd white blue-darken-4-text pink-text-hover soft-corner elevate-2 demo-panel">
	<p>.رنگ نوشته‌ی این قسمت از آبی تیره به صورتی تغییر پیدا می‌کند</p>
</div>

رنگ‌های لبه

استفاده

برای استفاده از رنگ‌های موجود در جغد به بعنوان رنگ لبه (border) لازم است نخست جغد را با استفاده از کلاس joqd صدا زده و سپس اسم (کلاس) رنگ مورد نظر خود را بعلاوه‌ی border بر روی عنصر پیاده کنید.

  • توجه داشته باشید که برای به نمایش درآمدن رنگ لبه‌ها، حتما باید از قبل border-style و border-width آن از قبل مشخص شده باشد.

  • برای آشنایی بیشتر با لبه، به لبه‌ها نگاه کنید.

این قسمت با لبه‌های نازک آبی است.

<div class="joqd white thin-border blue-border soft-corner elevate-2 demo-panel">
	<p>.این قسمت با لبه‌های نازک آبی است</p>
</div>
رویداد‌ها

رنگ لبه را می‌توان با توجه به رویداد‌های مختلف تغییر داد.

شما می‌توانید با قرار دادن hover- به انتهای کلاس رنگ، مشخص کنید تا زمانی که اشاره‌گر ماوس بر روی عنصر قرار گرفت (هاور شد - اشاره کرد)، لبه‌های عنصر به رنگ مورد نظر تغییر پیدا کند.
قابل ذکر است که با خارج شدن ماوس از روی عنصر، رنگ لبه‌ها به صورت اولیه خود بازمی‌گردد.

رنگ لبه‌های این قسمت از آبی به صورتی تغییر پیدا می‌کند.

<div class="joqd white thin-border blue-border pink-border-hover soft-corner elevate-2 demo-panel">
	<p>.رنگ لبه‌های این قسمت از آبی به صورتی تغییر پیدا می‌کند</p>
</div>