Sävyjen ja varjostusten generaattori
21 väriä
#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)Tekniset tiedot
Miten sävyjen ja varjojen generaattori toimii
Mitä työkalu tekee
Sävyjen ja varjojen generaattori luo vaaleampia sävyjä (sekoitettuna valkoiseen) ja tummempia varjoja (sekoitettuna mustaan) mistä tahansa perusväristä. Syötä väri ja valitse askelten määrä luodaksesi tasaisen liukuman variaatioita. Jokainen askel näyttää HEX- ja RGB-arvot sekä sekoitusprosentin, mikä helpottaa yhtenäisten väriskaalojen rakentamista UI-suunnitteluun, brändäykseen ja datavisualisointiin.
Yleiset kehittäjien käyttötapaukset
Kehittäjät käyttävät sävy- ja varjogeneraattoreita suunnittelutoken-asteikkojen rakentamisessa (esim. blue-100–blue-900), hover- ja active-tilojen luomisessa interaktiivisille elementeille, saavutettavien värhierarkioiden suunnittelussa sekä yhtenäisten tausta- ja pintavärien tuottamisessa vaaleisiin ja tummiin teemoihin. Työkalu on olennainen Tailwind CSS:n mukautettujen väripalettien tai Material Design -värijärjestelmien rakentamisessa.
Miten sävyt ja varjot toimivat
Sävy syntyy sekoittamalla väriä valkoiseen, jolloin sen vaaleus kasvaa. Varjo syntyy sekoittamalla mustaan, jolloin vaaleus vähenee. Sävyjen kaava on: new = base + (255 - base) × factor. Varjoille: new = base × (1 - factor). Askeleet jaetaan tasaisesti perusvärin ja puhtaan valkoisen (sävyt) tai puhtaan mustan (varjot) välille, jolloin syntyy lineaarinen liukuma väriarvoista.
Yleiset sudenkuopat ja reunatapaukset
Lineaarinen sekoitus valkoiseen tai mustaan voi tuottaa joillekin sävyille haalistuneita sävyjä tai sameita varjoja. Keltaiset voivat näyttää vihertäviltä tummennettaessa, ja siniset voivat menettää eloisuutta vaalennettaessa. Havaintoon perustuvien, tasavälisten asteikkojen luomiseksi harkitse OKLCH- tai CIELAB-väriavaruuksien käyttöä. Varmista aina, että vaaleimmat sävysi ja tummimmat varjosi säilyttävät riittävän kontrastin aiottuja taustojaan vasten.
Milloin käyttää tätä työkalua vs. koodia
Käytä tätä selainpohjaista työkalua nopeaan tutkimiseen ja väriskaalojen luomiseen suunnittelutyön aikana. Tuotantokäyttöön tarkoitetuissa suunnittelujärjestelmissä generoi sävyt ja varjot ohjelmallisesti värikirjastoilla kuten chroma.js tai culori, jotka tukevat havaintoon perustuvia, tasaväisiä väriavaruuksia ja voivat tuottaa suunnittelutokeneita missä tahansa muodossa.