Generator ng Tints at Shades
21 mga kulay
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Mga teknikal na detalye
Paano Gumagana ang Tints & Shades Generator
Ano ang Ginagawa ng Tool
Gumagawa ang Tints & Shades Generator ng mas mapuputing tints (hinahalo sa puti) at mas madidilim na shades (hinahalo sa itim) mula sa anumang base color. Maglagay ng kulay at piliin ang bilang ng steps upang makabuo ng makinis na gradient ng mga variation. Ipinapakita ng bawat step ang HEX, RGB values at ang porsiyento ng paghahalo, kaya madaling bumuo ng pare-parehong mga color scale para sa UI design, branding, at data visualization.
Mga Karaniwang Gamit ng Developer
Gumagamit ang mga developer ng mga tint at shade generator kapag gumagawa ng mga design token scale (hal., blue-100 hanggang blue-900), lumilikha ng hover at active states para sa mga interactive element, nagdidisenyo ng accessible na color hierarchies, at gumagawa ng pare-parehong background at surface colors para sa light at dark themes. Mahalaga ang tool na ito para sa pagbuo ng Tailwind CSS custom color palettes o mga Material Design color system.
Paano Gumagana ang Tints at Shades
Nabubuo ang tint sa pamamagitan ng paghahalo ng kulay sa puti, na nagpapataas ng lightness nito. Nabubuo ang shade sa pamamagitan ng paghahalo sa itim, na nagpapababa ng lightness. Ang formula para sa tints ay: new = base + (255 - base) × factor. Para sa shades: new = base × (1 - factor). Pantay na ipinapamahagi ang mga step sa pagitan ng base color at purong puti (tints) o purong itim (shades), na lumilikha ng linear gradient ng mga color value.
Mga Karaniwang Pagkakamali at Edge Case
Ang linear na paghahalo sa puti o itim ay maaaring magbunga ng mga tint na maputla o mga shade na maputik para sa ilang hue. Maaaring magmukhang medyo berde ang mga dilaw kapag pinadilim, at maaaring mawalan ng vibrancy ang mga asul kapag pinapaliwanag. Para sa mga scale na pantay ang persepsyon, isaalang-alang ang paggamit ng OKLCH o CIELAB color spaces. Palaging tiyakin na ang iyong pinakamaputing tints at pinakamadilim na shades ay may sapat na contrast laban sa mga nilalayong background.
Kailan Gagamitin ang Tool na Ito kumpara sa Code
Gamitin ang browser tool na ito para sa mabilis na pag-explore at pagbuo ng mga color scale habang nagdidisenyo. Para sa production design systems, bumuo ng tints at shades sa paraang programmatic gamit ang mga color library tulad ng chroma.js o culori na sumusuporta sa perceptually uniform color spaces at kayang maglabas ng design tokens sa anumang format.