Tints and Shades Generator

Paano gamitin ang tints and shades generator

1. Pumili ng Base na kulay gamit ang swatch, o mag-type ng halaga sa Color code: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) o pangalan sa CSS gaya ng teal.
2. Pumili ng Hakbang: 5 %, 10 %, 20 % o 25 %. Sa 10 %, makakakuha ka ng mga tint sa 10 %, 20 % … 100 % at kasing-daming shade.
3. Piliin kung paano Paghaluin sa: OKLCH (perceptual) o sRGB (klasiko). Sabay na nag-a-update ang dalawang hilera: Mga tint (hinaluan ng puti) at Mga shade (hinaluan ng itim), bawat isa ay nagsisimula sa base.
4. I-click ang Kopyahin sa ilalim ng anumang swatch para kopyahin ang HEX code nito.
5. Sa ilalim ng I-export bilang, piliin ang Mga CSS variable, Tailwind config (v3), Tailwind @theme (v4), Mga SCSS variable o JSON, magtakda ng Pangalan gaya ng primary o brand, saka Kopyahin o I-download ang code.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Mga tint, shade at tone

Sa teorya ng kulay, ang tint ay kulay na hinaluan ng puti, ang shade ay kulay na hinaluan ng itim, at ang tone ay kulay na hinaluan ng abo. Sinasabi ng porsyento kung gaano karaming puti o itim ang idinagdag: ang 30 % na tint ay 70 % base na kulay at 30 % puti. Sa 100 %, aabot ka sa purong puti o purong itim, kaya laging #FFFFFF o #000000 ang huling swatch ng bawat hilera; ito ang tanda ng dulo ng scale.

Ang mga tint at shade ang pinakamabilis na paraan para bumuo ng pare-parehong scale mula sa iisang kulay ng brand: mga maliwanag na background at hover state mula sa mga tint, mga border, pressed state at madilim na text mula sa mga shade.

OKLCH o sRGB na paghahalo?

Ang sRGB (klasiko) ay direktang naghahalo ng mga halaga ng pula, berde at asul. Ito ang ginagawa ng karamihan ng mas lumang generator at tumutugma sa CSS na color-mix(in srgb, …). Ang pormula ng tint ay simpleng channel + (255 − channel) × p, at ng shade ay channel × (1 − p). Predictable ito, pero hindi pantay sa paningin ang mga hakbang: kadalasang lumilihis tungo sa lila ang mga asul habang lumiliwanag, at madalas mukhang maputik ang madidilim na shade.

Ang OKLCH (perceptual) ay naghahalo sa OKLCH color space na dinisenyo ni Björn Ottosson noong 2020, tulad ng CSS na color-mix(in oklch, …). Hiwalay na ini-interpolate ang lightness, chroma at hue. Walang hue ang puti at itim, kaya pinananatili ang base na hue hanggang dulo, at bawat hakbang ay nagbabago ng liwanag nang magkatulad sa paningin. Ang mga kulay na lalampas sa sRGB gamut ay ibinabalik sa pamamagitan ng pagbabawas ng chroma, hindi sa pag-clip ng mga channel, kaya nananatiling matatag ang hue. Para sa mga design system, kadalasang nagbibigay ito ng mas malinis at mas pantay na scale.

Paggamit ng export

• Ang Mga CSS variable ay gumagawa ng :root block gaya ng --primary-tint-20 at --primary-shade-40, handa nang i-paste sa stylesheet.
• Ang Tailwind config (v3) ay nagbibigay ng colors object para sa theme.extend.colors; saka ka magsusulat ng mga class gaya ng bg-primary-tint-20 o text-primary-shade-60. Hawak ng DEFAULT ang base, kaya gumagana rin ang bg-primary.
• Ang Tailwind @theme (v4) ay nagbibigay ng mga variable na --color-… para sa CSS-first na configuration ng Tailwind 4.
• Ang Mga SCSS variable at JSON ay bagay sa ibang build tool at design token.

Nagiging lowercase ang mga pangalan at nagiging gitling ang mga espasyo, kaya ang “Brand Blue” ay nagiging brand-blue.