← Alle gereedskap

Kleurpaletgenerator

Genereer lukrake en harmonieuse kleurpalette aanlyn met kopieerbare HEX-, RGB- en HSL-kodes. Leer kleurteorie en toeganklike kontras in eenvoudige terme.
Klik 'n kleur om sy HEX te kopieer.

Waarom 'n Goeie Kleurpalet 'n Hele Ontwerp Dra

Kies die verkeerde kleure en mense voel dit voordat hulle dit kan benoem. 'n Bladsy lees goedkoop, 'n logo lyk modderig, 'n grafiek word geraas. Kies die regte een en die werk klik net: dit voel doelbewus, kalm, maklik om te lees. Kleur doen baie stille werk, dit stel stemming, lei die oog, en vertel 'n leser wat die belangrikste is. So 'n palet is nie versiering wat jy aan die einde vasbout nie. Dit is 'n besluit wat jy vroeg neem, en byna alles anders leun daarop.

Die goeie nuus is dat jy nie 'n kunsgraad nodig het om 'n solide skema te vind nie. Jy het 'n handjievol reëls uit kleurteorie nodig en 'n vinnige manier om idees te probeer. Dis presies waarvoor 'n generator is: dit laat jou tientalle kombinasies deurloop in die tyd wat dit voorheen geneem het om oor een te tob.

Gloeiende lint van harmonieuse kleurmonsters met heksadesimale kodes op 'n donker indigo agtergrond
'n Harmonieuse palet balanseer kontras en samehang sodat elke kleurstaal sy plek verdien.

Kleurteorie, Sonder die Vaktaal

Die meeste harmonieë kom van een eenvoudige idee: waar kleure relatief tot mekaar op die wiel sit. Leer vier patrone en jy kan byna enige skema lees of bou.

  • Komplementêr gebruik twee kleure direk teenoor mekaar, soos blou en oranje. Dit is hoogenergie en gewild om aandag te trek, alhoewel te veel van albei om fokus veg, so laat een lei en gebruik die ander as aksent.
  • Analoog gebruik drie kleure wat langs mekaar sit, soos rooi, oranje, en geel. Dit is laekontras, kalm, en die soort harmonie wat jy oral in die natuur sien. Maklik vir die oë, maar jy mag dalk êrens kontras moet byvoeg sodat dinge nie plat raak nie.
  • Triadies gebruik drie kleure eweredig versprei rondom die wiel, soos rooi, geel, en blou. Helder en gebalanseerd, dit werk die beste wanneer een kleur oorheers en die ander twee ondersteun.
  • Monochromaties hou by een tint en wissel sy ligtheid en versadiging. Dit is die feilloosste skema wat daar is, skoon en samehangend, en 'n goeie terugval wanneer niks anders reg voel nie.

'n Ewekansige generator is lekker vir inspirasie, maar die harmoniemodusse is waar die werklike waarde lê. Hulle hou jou kleure wiskundig verwant, sodat hulle lyk of hulle by mekaar hoort selfs voordat jy iets verander.

HEKS, RGB, en HSL in Eenvoudige Terme

Elke kleur wat jy kopieer, kom in 'n paar notasies, en hulle beskryf almal dieselfde ding anders.

HEKS is die sesteken-kode wat jy die meeste sien, soos #3A7BD5. Dit is net rooi, groen, en blou wat in een string gepak is, twee karakters elk. Dit is kompak en dis wat jy in CSS of 'n ontwerphulpmiddel sal plak.

RGB spel daardie selfde drie kanale uit as getalle van 0 tot 255, soos rgb(58, 123, 213). Dieselfde kleur, vriendeliker om te lees, en handig wanneer jy 'n alfakanaal vir deursigtigheid wil hê.

HSL beskryf kleur soos mense werklik dink: kleurtoon (watter kleur, 0 tot 360 grade rondom die wiel), versadiging (hoe lewendig), en ligtheid (hoe helder). Dit is die maklikste formaat om met die hand te verstel, aangesien om ligtheid of versadiging te skuif presies doen wat jy sou verwag sonder die raaiwerk. As jy ooit tussen formate moet beweeg, maak 'n vinnige HEKS na RGB-omskakeling dit moeiteloos.

Kleurwiel met harmonielyne wat komplementêre en triadiese tinte verbind in 'n ontwerperstudio-stemming
Die kleurwiel verander harmoniereëls in iets wat jy met een oogopslag kan sien.

Moenie Kontras en Toeganklikheid Vergeet Nie

'n Palet kan pragtig lyk en steeds misluk die oomblik wanneer iemand probeer om teks daarop te lees. Kontras is waar mooi ontmoet bruikbaar. Die Web Content Accessibility Guidelines stel 'n duidelike standaard: normale liggaamsteks moet 'n kontrasverhouding van minstens 4.5:1 teen sy agtergrond bereik, en groot teks minstens 3:1. Dit is nie rooi lint nie, dit is die verskil tussen 'n leser wat moeiteloos deur jou bladsy gaan en een wat tuur, opgee, en vertrek.

Die praktiese stap is om jou voorgrond- en agtergrondpare te toets terwyl jy bou, nie daarna nie. Ligte grys op wit mag elegant lyk in 'n voorbeeldontwerp en onsigbaar word op 'n foon in daglig. Wanneer 'n kombinasie misluk, hoef jy gewoonlik net een kleur donkerder of ligter te maak, nie die hele skema weg te gooi nie. Hou jou helder aksentkleure vir knoppies, skakels, en hoogtepunte eerder as lang stukke teks, en jy sal die meeste kontrasprobleme vermy voordat hulle begin.

'n Praktiese Werkvloei

Hier is 'n vloei wat oor projekte heen standhou. Begin met een ankerkleur waarvan jy seker is, dikwels 'n handelsmerkkleur of 'n tint wat by die stemming pas wat jy wil hê. Sluit dit toe, en laat die generator 'n harmonie daaromheen bou. Wissel deur komplementêr, analoog, en triadies totdat iets reg voel, en moenie te veel dink oor die eerste probeerslag nie; jy jag 'n rigting, nie die finale antwoord nie.

Sodra jy 'n kandidaat het, ken rolle toe. Kies 'n dominante kleur vir agtergronde en groot areas, 'n sekondêre vir struktuur, en een pittige aksent vir die stukkies wat moet uitstaan. 'n Los 60-30-10-verdeling, dominant tot sekondêr tot aksent, hou dinge gebalanseerd sonder om styf te voel. Kontroleer dan kontras op elke teksparing, kopieer die heksadesimale kodes, en jy is klaar. Stoor die wat werk, want 'n palet wat jy vir een projek reggekry het, is dikwels die saad vir die volgende. Wanneer jy gereed is om verder te bou, kan die res van ons alle generators-versameling die ander stukke hanteer.

Gereelde vrae

Is hierdie kleurpalet-generator gratis om te gebruik?

Ja. Dit loop heeltemal in jou blaaier, daar is geen registrasie nie, en jy kan soveel palette genereer as wat jy wil, sonder koste.

Wat is die verskil tussen 'n ewekansige palet en 'n harmonieuse een?

'n Ewekansige palet gee jou vyf onverwante kleure vir inspirasie. 'n Harmonieuse skema, soos komplementêr of triadies, hou die kleure wiskundig verwant op die kleurwiel, sodat hulle gebalanseerd en doelbewus saam lyk.

Hoe kopieer ek 'n kleurkode?

Klik op die heksadesimale kode onder enige kleurstaal en dit kopieer na jou knipbord. Jy kan dit dan reguit in CSS, 'n ontwerphulpmiddel, of enige plek anders plak waar jy dit nodig het.

Wat beteken WCAG-kontras en waarom moet ek omgee?

WCAG is die webtoeganklikheidstandaard. Dit vra vir 'n kontrasverhouding van minstens 4.5:1 tussen normale teks en sy agtergrond sodat mense jou inhoud gemaklik kan lees, insluitend diegene met lae visie.

Watter kleurharmonie moet ek kies?

Dit hang van die stemming af. Komplementêr is vrymoedig en hoogenergie, analoog is kalm en natuurlik, triadies is lewendig en gebalanseerd, en monochromaties is skoon en feilloos. Probeer 'n paar en kyk watter een by jou projek pas.

Kan ek die kleure na RGB of HSL omskakel?

Ja. Elke kleur karteer na HEKS, RGB, en HSL aangesien hulle almal dieselfde waarde beskryf. Gebruik ons HEKS na RGB-hulpmiddel as jy vinnig tussen formate moet wissel.