DevToys Web Pro iconDevToys Web ProBlogu
Tupatie ukadiriaji:
Jaribu kiendelezi cha kivinjari:

Kizalishaji cha Tinti na Vivuli

Halali
10

21 rangi

Tint 100%#ffffff
Tint 90%#ebf3fe
Tint 80%#d8e6fd
Tint 70%#c4dafc
Tint 60%#b1cdfb
Tint 50%#9dc1fb
Tint 40%#89b4fa
Tint 30%#76a8f9
Tint 20%#629bf8
Tint 10%#4f8ff7
Base#3b82f6
Shade 10%#3575dd
Shade 20%#2f68c5
Shade 30%#295bac
Shade 40%#234e94
Shade 50%#1e417b
Shade 60%#183462
Shade 70%#12274a
Shade 80%#0c1a31
Shade 90%#060d19
Shade 100%#000000
Maelezo ya kiufundi

Jinsi Jenereta ya Tinti na Vivuli Inavyofanya Kazi

Zana Hii Hufanya Nini

Jenereta ya Tinti na Vivuli huunda tinti nyepesi (zilizochanganywa na nyeupe) na vivuli vyeusi (vilivyochanganywa na nyeusi) kutoka kwa rangi yoyote ya msingi. Weka rangi na uchague idadi ya hatua ili kuzalisha gradieni laini ya tofauti. Kila hatua huonyesha thamani za HEX, RGB na asilimia ya kuchanganya, na kufanya iwe rahisi kujenga mizani thabiti ya rangi kwa usanifu wa UI, ujenzi wa chapa, na uwasilishaji wa data.

Matumizi ya Kawaida kwa Wasanidi

Wasanidi hutumia jenereta za tinti na vivuli wanapojenga mizani ya design tokens (mfano, blue-100 hadi blue-900), kuunda hali za hover na active kwa vipengele vya mwingiliano, kubuni ngazi za rangi zinazofikika, na kuzalisha rangi thabiti za mandharinyuma na nyuso kwa mandhari ya mwanga na giza. Zana hii ni muhimu kwa kujenga paleti maalum za rangi za Tailwind CSS au mifumo ya rangi ya Material Design.

Jinsi Tinti na Vivuli Hufanya Kazi

Tinti huundwa kwa kuchanganya rangi na nyeupe, na kuongeza mwangaza wake. Kivuli huundwa kwa kuchanganya na nyeusi, na kupunguza mwangaza. Fomula ya tinti ni: new = base + (255 - base) × factor. Kwa vivuli: new = base × (1 - factor). Hatua husambazwa kwa usawa kati ya rangi ya msingi na nyeupe tupu (tinti) au nyeusi tupu (vivuli), na kutoa gradieni ya mstari ya thamani za rangi.

Mitego ya Kawaida na Matukio ya Pembeni

Kuchanganya kwa mstari na nyeupe au nyeusi kunaweza kutoa tinti zilizofifia au vivuli vyenye ukungu kwa baadhi ya hue. Njano zinaweza kuonekana za kijani zinapotiwa giza, na bluu zinaweza kupoteza uhai zinapotiwa mwanga. Kwa mizani iliyo sawa kimtazamo, zingatia kutumia nafasi za rangi za OKLCH au CIELAB. Daima hakikisha kuwa tinti zako nyepesi zaidi na vivuli vyako vyeusi zaidi vinadumisha utofautishaji wa kutosha dhidi ya mandharinyuma yaliyokusudiwa.

Wakati wa Kutumia Zana Hii dhidi ya Msimbo

Tumia zana hii ya kivinjari kwa uchunguzi wa haraka na kuzalisha mizani ya rangi wakati wa kazi ya usanifu. Kwa mifumo ya usanifu ya uzalishaji, zalisha tinti na vivuli kwa programu kwa kutumia maktaba za rangi kama chroma.js au culori zinazosaidia nafasi za rangi zilizo sawa kimtazamo na zinaweza kutoa design tokens katika umbizo lolote.