Atspalvių ir tonų generatorius

Kaip naudotis atspalvių generatoriumi

1. Pasirink Pagrindinė spalva pavyzdžiu arba įrašyk reikšmę į Spalvos kodas: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) arba CSS pavadinimą, pvz., teal.
2. Pasirink Žingsnis: 5 %, 10 %, 20 % arba 25 %. Su 10 % gausi šviesesnius atspalvius ties 10 %, 20 % … 100 % ir tiek pat tamsesnių.
3. Pasirink, kaip Maišyti erdvėje: OKLCH (suvokimo) ar sRGB (klasikinė). Abi eilutės atsinaujina vienu metu: Šviesesni atspalviai (maišoma su balta) ir Tamsesni atspalviai (maišoma su juoda), kiekviena prasideda nuo pagrindinės spalvos.
4. Spustelėk Kopijuoti po bet kuriuo pavyzdžiu, kad nukopijuotum jo HEX kodą.
5. Skiltyje Eksportuoti kaip pasirink CSS kintamieji, „Tailwind“ konfigūracija (v3), „Tailwind“ @theme (v4), SCSS kintamieji arba JSON, nustatyk Pavadinimas, pvz., primary ar brand, tada Kopijuoti arba Atsisiųsti kodą.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Šviesesni atspalviai, tamsesni atspalviai ir tonai

Spalvų teorijoje tint (šviesesnis atspalvis) yra spalva, sumaišyta su balta, shade (tamsesnis atspalvis) – spalva, sumaišyta su juoda, o tone (tonas) – spalva, sumaišyta su pilka. Procentas nurodo, kiek baltos ar juodos pridėta: 30 % šviesesnis atspalvis yra 70 % pagrindinės spalvos ir 30 % baltos. Ties 100 % pasiekiama gryna balta arba gryna juoda, todėl paskutinis kiekvienos eilutės pavyzdys visada yra #FFFFFF arba #000000; jis žymi skalės pabaigą.

Šviesesni ir tamsesni atspalviai yra greičiausias būdas sukurti nuoseklią skalę iš vienos prekės ženklo spalvos: šviesūs fonai ir užvedimo būsenos iš šviesesnių atspalvių, rėmeliai, paspaudimo būsenos ir tamsus tekstas iš tamsesnių.

OKLCH ar sRGB maišymas?

sRGB (klasikinė) tiesiogiai maišo raudonos, žalios ir mėlynos reikšmes. Taip daro dauguma senesnių generatorių, tai atitinka CSS color-mix(in srgb, …). Šviesesnio atspalvio formulė paprasta: kanalas + (255 − kanalas) × p, o tamsesnio – kanalas × (1 − p). Ji nuspėjama, bet žingsniai nėra suvokimu tolygūs: šviesėjant mėlyna linkusi slinkti į purpurinę, o tamsūs atspalviai dažnai atrodo purvini.

OKLCH (suvokimo) maišo Björno Ottossono 2020 m. sukurtoje OKLCH spalvų erdvėje, kaip CSS color-mix(in oklch, …). Šviesumas, sodrumas (chroma) ir atspalvis interpoliuojami atskirai. Balta ir juoda neturi atspalvio, todėl pagrindinis atspalvis išlaikomas iki pat galo, o kiekvienas žingsnis keičia šviesumą vizualiai panašiu dydžiu. Spalvos, kurios nepatektų į sRGB gamą, grąžinamos sumažinant sodrumą, o ne nukerpant kanalus, todėl atspalvis išlieka stabilus. Dizaino sistemoms tai paprastai duoda švaresnes ir tolygesnes skales.

Eksporto naudojimas

• CSS kintamieji sukuria :root bloką, pavyzdžiui, --primary-tint-20 ir --primary-shade-40, paruoštą įklijuoti į stilių lentelę.
• „Tailwind“ konfigūracija (v3) pateikia colors objektą theme.extend.colors; tada rašai klases, pvz., bg-primary-tint-20 ar text-primary-shade-60. DEFAULT talpina pagrindinę spalvą, todėl veikia ir bg-primary.
• „Tailwind“ @theme (v4) pateikia --color-… kintamuosius „Tailwind“ 4 CSS pirmumo konfigūracijai.
• SCSS kintamieji ir JSON tinka kitiems kūrimo įrankiams ir dizaino žetonams.

Pavadinimai paverčiami mažosiomis raidėmis, o tarpai – brūkšneliais, todėl „Brand Blue“ tampa brand-blue.