Nakakasayang ng oras sa design ang basta-basta paghula kung anong mga kulay ang magkatugma. Ginagamit ng generator na ito ang klasikong color-wheel harmonies - yung parehong hue relationships na itinuturo sa color theory - kaya bawat palette ay mathematically coordinated, hindi basta tinantiya lang. I-click ang kahit anong swatch para kopyahin ang hex code nito, o kopyahin ang buong palette bilang ready-to-paste CSS custom properties. Fully client-side ito: walang account, walang upload, walang tracking ng brand colors mo.
Libreng Color Palette Generator
Tumatakbo nang buo sa iyong browser - walang upload, walang sign-up.
Harmony
CSS variables
Ano ang color palette generator?
Ang color palette generator ay gumagawa ng magkatugmang color scheme mula sa isang base color gamit ang color-wheel theory. Pumili o mag-type ng hex color, pumili ng harmony tulad ng complementary, analogous, triadic o monochromatic, at agad nitong kinakalkula ang mga kulay na magkatugma - bawat isa ay may kopyahin na hex code. Lahat ito ay tumatakbo sa browser mo.
Paano gamitin
- 1I-set ang base color mo. I-click ang color well para pumili nang visual, mag-type ng hex code tulad ng #6366f1, o pindutin ang Random para sa bagong starting point.
- 2Pumili ng harmony. Lumipat-lipat sa complementary, split-complementary, analogous, triadic, tetradic, monochromatic, shades at tints. Agad ma-rerecompute ang palette.
- 3Kopyahin ang mga kulay. I-click ang kahit anong swatch para kopyahin ang hex code nito, o gamitin ang Copy button para makuha ang buong palette bilang CSS variables.
Para kanino ito
- Web designers na nagsisimula ng site gamit ang isang brand color: gumawa ng analogous o split-complementary na kasamang kulay para sa backgrounds, buttons at accents.
- Front-end developers na kailangan ng design-token starter: kopyahin ang palette bilang CSS variables at i-drop agad sa stylesheet.
- Marketers at gumagawa ng slides na tinutugma ang charts, social media graphics o presentations sa kulay ng logo nang walang design tool.
- Illustrators at hobbyists na nag-eexplore ng shades at tints ng isang hue para makagawa ng depth, highlights at shadows sa isang piece.
FAQ
Libre ba ang color palette generator na ito?
Oo - 100% libre, walang sign-up, walang watermark at walang limit. Gumawa at kumopya ng kahit ilang palette na gusto mo, para sa personal o commercial na proyekto.
Ino-upload ba kung saan ang color data ko?
Hindi. Kinakalkula ang palette nang buo sa loob ng browser mo gamit ang plain JavaScript. Ang mga brand color, input at click mo ay hindi kailanman ipinapadala sa kahit anong server.
Ano ang complementary color?
Ang complementary color ay nasa direktang kabilang panig ng base color mo sa color wheel - 180-degree hue rotation. Ang complementary pairs tulad ng blue at orange ay nagbibigay ng pinakamalakas na contrast, kaya popular ito para sa call-to-action buttons laban sa brand background.
Ano ang pagkakaiba ng analogous at triadic palettes?
Gumagamit ang analogous palettes ng magkakalapit na hue (mga 30 degrees mula sa base), kaya kalmado at cohesive ang dating. Ang triadic palettes naman ay kumukuha ng tatlong hue na 120 degrees ang layo sa isa't isa, na nagbibigay ng vibrant at balanced na scheme na may mas matinding contrast sa pagitan ng mga kulay.
Ano ang shades at tints?
Pinapadilim ng shades ang base color mo sa pamamagitan ng pagbaba ng lightness papunta sa black; ang tints naman ay pinapaliwanag ito papunta sa white. Pareho itong nagpapanatili ng parehong hue at saturation, kaya ideal ito para sa hover states, borders at background layers ng isang brand color.
Ilang kulay ba dapat mayroon ang palette ng isang website?
Karaniwang rule ay ang 60-30-10: isang dominant color para sa mga 60% ng interface, isang secondary color para sa 30%, at isang accent para sa 10%. Magsimula sa 3-5 color harmony dito, tapos magdagdag ng shades at tints ng bawat isa para sa states at surfaces.
Bakit halos hindi nagbabago ang palette para sa gray o black?
Ang gray, black at white ay may zero saturation, kaya walang hue na maaapektuhan ng harmony rotations - kahit i-rotate mo ang wala, parehong neutral pa rin ang lalabas. Gumawa na lang ng neutral ladder gamit ang lightness modes: tints para sa black o dark grays, shades para sa white o light grays, at monochromatic para sa mid grays.