CodeKitHubMikä tämä työkalu on?
Sävyskaala on sarja yhden värin muunnelmia eri vaaleustasoilla. Sitä käytetään käyttöliittymäsuunnittelussa esimerkiksi hover-tiloihin, poissa käytöstä -tiloihin, reunuksiin ja taustoihin, joiden pitää liittyä brändin väriin olematta kuitenkaan identtisiä sen kanssa.
Tämä työkalu muuntaa perusvärisi HSL-muotoon, pitää sävyn ja kylläisyyden muuttumattomana ja säätää vaaleutta noin 95 %:sta (lähes valkoinen vivahde) noin 10 %:iin (lähes musta sävy), ja alkuperäinen värisi sijoittuu luonnollisesti skaalan keskivaiheille.
Miksi käyttää sitä?
- Luo suunnittelujärjestelmätyylisen skaalan (kuten Tailwindin 50/100/200…900-asteikko) mistä tahansa yksittäisestä väristä, ei vain kiinteästä valmispaletista.
- Valitse 7, 9 tai 11 askelta sen mukaan, kuinka hienojakoisen skaalan tarvitset.
- Jokainen askel näyttää tarkan HEX-koodinsa ja vaaleusprosenttinsa — kopioi napsauttamalla.
- Pitää sävyn ja kylläisyyden vakiona koko skaalan ajan, jolloin kaikki sävyt näyttävät selvästi liittyvän perusväriin sen sijaan, että ne muuttuisivat harmaiksi.
- Ilmainen, välitön ja täysin paikallinen.
Käyttöohje
- Valitse perusvärisi väripaletilla tai kirjoittamalla HEX-koodi.
- Valitse, kuinka monta askelta haluat skaalaan (7, 9 tai 11).
- Lue jokaisen sävyn HEX-koodi ja vaaleusprosentti suoraan sen värilaatasta.
- Napsauta mitä tahansa värilaattaa kopioidaksesi sen HEX-koodin.
Esimerkki
Syöte
#3B82F6 (keskisininen), 9 askeltaTuloste
9 sävyä lähes valkoisesta vivahteesta (~95 % vaaleus) lähes mustaan sävyyn (~10 % vaaleus), ja #3B82F6 itse sijoittuu keskimmäiseksi askeleeksiSävy ja kylläisyys pysyvät muuttumattomina kaikissa 9 askeleessa — vain vaaleus muuttuu — joten jokainen sävy näyttää selvästi kuuluvan samaan väriperheeseen.
Usein kysytyt kysymykset
Onko tämä sama järjestelmä, jota Tailwind CSS käyttää värisikaaloissaan?
Perusidea on sama (kiinteä sävy/kylläisyys, vaihteleva vaaleus), mutta se ei ole tarkka kopio Tailwindin omasta paletista — Tailwindin 50–900-skaalat on hienosäädetty käsin suunnittelijoiden toimesta, ei luotu yhdellä kaavalla. Tämä työkalu antaa vastaavan rakenteen mistä tahansa valitsemastasi väristä, mikä on hyödyllistä, kun perusvärisi ei ole yksi Tailwindin valmisväreistä.
Miksi väri näyttää lähes samalta kahdessa vierekkäisessä askeleessa?
Näin voi käydä skaalan hyvin vaaleassa tai hyvin tummassa päässä, jossa koettu vaaleus muuttuu hitaammin kuin numeerinen prosentti antaa ymmärtää (tämä on ihmisen värihavainnon tunnettu ominaisuus, ei tähän työkaluun liittyvä ilmiö). Pienemmän askelmäärän valitseminen (7 sijaan 11) levittää vaaleusarvot kauemmas toisistaan ja vähentää lähes identtisiä värilaattoja.
Voinko käyttää näitä sävyjä suoraan CSS-mukautettuina ominaisuuksina?
Kyllä — kopioi jokainen HEX-koodi ja liitä se CSS-muuttujiisi (esim. --color-brand-100...--color-brand-900), sovittaen skaalan sijainnin projektisi käyttämään nimeämisasteikkoon.
Pitäisikö minun käyttää tätä vai Värisekoitinta?
Jos teet vaaleampia ja tummempia versioita yhdestä väristä — hover-tiloja, hienovaraisia taustoja, brändin väriin liittyviä reunuksia — käytä tätä sävygeneraattoria. Jos taas tarvitset väriä kahden eri värin väliltä (esimerkiksi askeleen ensisijaisen sinisesi ja toissijaisen oranssisi väliltä), käytä Värisekoitinta, joka interpoloi kahden värin RGB-kanavat missä tahansa suhteessa yhden värin vaaleuden muuttamisen sijaan.
Mitä tapahtuu, jos perusväriseni on jo hyvin vaalea tai hyvin tumma?
Perusväri asettuu aina keskimmäiselle riville, ja vivahteet etenevät ylöspäin noin 95 %:n vaaleuteen sen yläpuolella, kun taas sävyt etenevät alaspäin noin 10 %:iin sen alapuolella. Jos perusvärisi on jo lähes valkoinen, skaalan vivahdepuolisko puristuu kapealle vaaleusalueelle (lähes identtiset rivit), kun taas sävypuolisko levittäytyy laajasti — ja päinvastoin hyvin tummalla perusvärillä. Tasaisimmin jakautuvan skaalan saat aloittamalla keskivaalean version väristäsi (suunnilleen 40–60 % vaaleutta).
Voiko se luoda myös sävytettyjä värejä (harmaan kanssa sekoitettuja)?
Ei — tämä työkalu muuttaa vain vaaleutta pitäen kylläisyyden kiinteänä, mikä tuottaa vivahteita ja sävyjä mutta ei harmaasekoitteisia värisävyjä. Jos haluat vaimeamman skaalan, poista väristäsi kylläisyyttä ensin (valitse harmaampi versio siitä väripaletissa) ja luo skaala siitä; jokainen askel perii alemman kylläisyyden.