Color Palette Generator

Paano gamitin ang color palette generator

1. Pumili ng Base na kulay gamit ang color swatch, o mag-type ng anumang code sa Color code ng base (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), pangalan sa CSS…).
2. Pumili ng Harmony: Complementary, Analogous, Triadic, Split complementary, Tetradic (parihaba), Parisukat o Monochromatic.
3. Piliin ang Color wheel: HSL (klasiko) o OKLCH (perceptual). Nag-a-update ang palette habang binabago mo ang anumang opsyon; nire-refresh din ito ng Gumawa ng palette.
4. Kopyahin ang isang kulay gamit ang button na Kopyahin sa ilalim ng swatch nito, o pumili ng format sa I-export bilang (Listahan ng HEX, Mga CSS variable, Mga SCSS variable, JSON array o Mga kulay sa Tailwind) at gamitin ang Kopyahin o I-download para sa buong palette.

Ipinapakita ng bawat swatch ang HEX code nito sa itim o puti, alinman ang mas mataas ang contrast, at ang posisyon nito kaugnay ng base na kulay (halimbawa +120°).

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

Ang mga color harmony

Ang mga color harmony ay mga nakapirming anggulo sa color wheel. Simula sa base na hue mo, iniikot ng tool ang hue at pinapanatili ang saturation at liwanag ng base.

• Complementary (0°, 180°): ang kabilang panig na kulay. Pinakamataas na contrast, mainam para sa call-to-action na button laban sa pangunahing kulay ng brand.
• Analogous (−60°, −30°, 0°, +30°, +60°): mga kapitbahay sa wheel. Kalmado at natural na kombinasyon na bagay sa mga background at ilustrasyon.
• Triadic (0°, 120°, 240°): tatlong hue na pantay ang pagitan. Masigla at balanse; kadalasang may isang nangingibabaw na kulay at dalawang accent.
• Split complementary (0°, 150°, 210°): ang dalawang kapitbahay ng complement. Malakas na contrast na mas kaunti ang tensyon kaysa sa purong complementary na pares.
• Tetradic (parihaba) (0°, 60°, 180°, 240°): dalawang complementary na pares. Mayayamang palette na nangangailangan ng isang nangingibabaw na kulay para manatiling magkakaugnay.
• Parisukat (0°, 90°, 180°, 270°): apat na hue na pantay ang pagitan.
• Monochromatic: isang hue sa limang antas ng liwanag, mula madilim hanggang maliwanag. Bagay para sa mga estado ng UI, chart at banayad na disenyo.

HSL o OKLCH na wheel?

Ang HSL (klasiko) na wheel ang tradisyonal na ginagamit ng karamihan ng design tool at tutorial. Ang kahinaan nito: hindi pare-parehong maliwanag ang magkakaparehong anggulo. Mas maliwanag ang dilaw sa 60° kaysa sa asul sa 240° kahit pareho ang HSL lightness.

Ang OKLCH (perceptual) na wheel ay umiikot ng hue sa Oklab color model, na dinisenyo para magmukhang pare-pareho ang liwanag. Ang mga palette na gawa rito ay may mga kulay na magkatulad ang biswal na bigat, na nakakatulong sa accessible na contrast. May mga iniikot na kulay na maaaring lumampas sa kayang ipakita ng screen; babawasan nang bahagya ng tool ang chroma ng mga ito para maipakita pa rin.

Paggamit ng na-export na palette

Ang Mga CSS variable ay gumagawa ng :root block na may --color-1, --color-2… na puwede mong i-paste sa stylesheet. Ang Mga SCSS variable ay nagbibigay ng mga linyang $color-1: …;, ang JSON array ay nagbibigay ng listahan ng mga HEX string para sa mga script, at ang Mga kulay sa Tailwind ay nagbibigay ng colors object na may mga key na 100, 200, 300… na ipapaste sa iyong Tailwind configuration.

Bago mo i-publish, suriin ang contrast ng text: ang harmony ay nagsisiguro ng kaaya-ayang mga hue, hindi ng nababasang text. Gumamit ng madilim o maliwanag na neutral para sa body copy at ilaan ang matitingkad na kulay ng palette sa mga accent, button at graphics.