Kleurpaletgenerator
Genereer harmonieuze kleurpaletten op basis van een willekeurige basiskleur. Ondersteunt complementaire, analoge, triadische en monochromatische schema's.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FBHoe u deze tool gebruikt
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
Wat is de Kleurpaletgenerator?
De kleurentheorie definieert harmonische relaties op basis van de posities op de kleurencirkel. Complementaire kleuren bevinden zich op tegenovergestelde posities (180°). Analoge kleuren zijn aangrenzend (30°). Triadische schema's gebruiken drie gelijk verdeelde kleuren (120°). Deze tool berekent elk daarvan op basis van de basiskleur die u kiest en geeft u een vertrekpalet gefundeerd op beproefde kleurentheorie.
Veelvoorkomende toepassingen
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
Veelgestelde vragen
Welk schema is het beste voor websites?▼
Gerelateerde tools
Kleurconverter (HEX/RGB/HSL)
Zet kleuren om tussen de formaten HEX, RGB en HSL. Kies een kleur visueel of voer de waarden handmatig in.
CSS box-shadow-generator
Maak box-shadow-waarden in CSS op een visuele manier. Bekijk een realtime voorvertoning en kopieer de gegenereerde CSS.
CSS-verloopgenerator
Maak lineaire en radiale CSS-verlopen. Kies de kleuren op visuele wijze en kopieer de gegenereerde CSS.
Cubic-bezier-versnellingscurvegenerator
Maak cubic-bezier-versnellingscurves voor CSS. Inclusief standaard voorinstellingen.
CSS border-radius-generator
Maak complexe border-radius-waarden in CSS op een visuele manier. Onafhankelijke controle over elke hoek.
CSS clamp()-generator
Genereer vloeiende, responsieve CSS-waarden met clamp(). Schaalt soepel tussen minimum- en maximumformaten over de viewportbereiken heen.