Color Palette Generator
Generate color palettes
Generate color palettes Wordt lokaal uitgevoerd in uw browser
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
De Kleurenpaletgenerator neemt één basiskleur en leidt daaruit de standaardharmonieschema's af: complementair, analoog, triadisch, gesplitst complementair en tetradisch, plus een helling van tinten richting wit en tinten richting zwart. Harmonieën worden in HSL berekend door de tint te draaien terwijl de verzadiging en lichtheid behouden blijven. Daarom blijven de resultaten gerelateerd aan uw basis in plaats van te drijven. De helling is het onderdeel dat de meeste paletten eigenlijk nodig hebben, omdat een werkinterface verschillende waarden van dezelfde tint nodig heeft voor hover-, actieve en uitgeschakelde statussen, en niet slechts één accentkleur.
Where people use the
- Een palet bouwen rond één merkkleur.
- Het produceren van hover-, actieve en uitgeschakelde varianten vanuit één accent.
- Alternatieven onderzoeken voor een kleur die niet door de contrastcontrole kwam.
- Het genereren van een neutrale helling voor oppervlakken en randen.
How to use the
- 1
Kies een basiskleur
Voer een hexadecimale waarde in, zoals 4ECDC4, of gebruik de kiezer. Al het andere is afgeleid van deze ene kleur.
- 2
Lees de harmonieschema's
Elk schema heeft een andere tintrotatie. Complementair is 180 graden, triadisch is 120 en 240, enzovoort.
- 3
Neem de tint- en schaduwhelling
Vijf tinten richting wit en vijf tinten richting zwart geven je de toestanden en verhogingen die je nodig hebt in een echte interface.
- 4
Kopieer de waarden
De volledige lijst met gegenereerde hexadecimale waarden bevindt zich in één blok, klaar om in een stylesheet of een ontwerptokenbestand te plakken.
- 5
Controleer het contrast vóór verzending
Voer elk tekst- en achtergrondpaar uit het palet door de Contrast Checker. Harmonieus is niet hetzelfde als leesbaar.
Tips en beste praktijken
- Kies de basiskleur van het merk en pas de lichtheid alleen aan voor de staat.
- Reserveer de complementaire kleur voor de enige actie die u wilt laten opvallen.
- Voer vóór verzending altijd de laatste koppeling door een contrastcontrole.
Veelgestelde vragen
Wat is het verschil tussen de regelingen?
Complementair gebruikt de tegenovergestelde tint, die het sterkste contrast geeft en past bij een oproep tot actie. Analoog gebruikt buren 30 graden aan weerszijden, wat kalm en veilig is. Triadic verspreidt drie tinten gelijkmatig, wat levendig en moeilijker te controleren is. Gesplitst complementair verzacht de complementaire botsing door de twee tinten aan weerszijden van de tegenovergestelde te gebruiken. Tetradic gebruikt vier tinten in een rechte hoek, wat past bij complexe dashboards.
Waarom delen de gegenereerde kleuren dezelfde verzadiging en lichtheid?
Omdat het roteren van alleen de tint ervoor zorgt dat ze herkenbaar verbonden blijven. Door de lichtheid te variëren, ontstaan tegelijkertijd kleuren die niets met elkaar te maken hebben, waardoor de essentie van een palet teniet wordt gedaan.
Zijn tinten alleen de kleur gemengd met wit?
In feite ja, maar berekend in HSL door de lichtheid te verhogen terwijl de tint en verzadiging behouden blijven. Dat houdt de tint stabiel, terwijl naïeve menging in RGB naar grijs afdrijft.
Hoeveel kleuren moet een palet hebben?
Voor de meeste interfaces zijn twee of drie tinten plus een neutrale helling voldoende. Een schema met vijf verzadigde tinten is moeilijk consistent te gebruiken en ziet er meestal toevallig uit.
Controleert het de toegankelijkheid?
Nee, het genereert alleen kleuren. Gebruik de Contrast Checker voor elke koppeling die u voor tekst wilt gebruiken.