:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}Wat is de kleurenpaletgenerator?
De Color Palette Generator verandert een enkele basiskleur in een gecoördineerde set kleuren met behulp van kleur-wiel harmonieregels Kies een startkleur en kies een modus - tinten en tinten, monochromatisch, complementair, analoog, triadisch of tetradisch - en de tool berekent een gebalanceerd palet met de HEX-, RGB- en HSL-waarde voor elke swatch.
Goede kleurencombinaties volgen voorspelbare relaties op het HSL-kleurenwiel: complementaire kleuren zitten tegenover elkaar, analoge kleuren zitten naast elkaar en triadische kleuren zijn gelijkmatig verdeeld. Deze met de hand uitwerken betekent jongleren met tinthoeken en lichtheidswaarden. Deze tool doet de wiskunde direct en toont het resultaat, zodat u een schema kunt kiezen dat werkt.
Alles draait in uw browser. Pas de basiskleur aan, schakel de modus, klik op een staal om de waarde ervan te kopiëren of exporteer het hele palet als aangepaste CSS-eigenschappen. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.
De harmoniemodi komen uit kleur-wielrelaties, waarbij de tint met vaste hoeveelheden rond de cirkel wordt gedraaid: 180 graden voor complementair, 120 voor triadisch, en kleine stappen voor analoog Dat wiskunde wordt gedaan in HSL, wat handig is en niet perceptueel uniform HSL-lichtheid behandelt geel en blauw met dezelfde waarde als even licht, en voor het oog zijn ze dat niet, daarom kan een triadische set er evenwichtig uitzien op papier en ongebalanceerd op het scherm Controleer elk palet dat u van plan bent te gebruiken voor tekst tegen een contrastcontrole in plaats van de cijfers te vertrouwen Schaduwen en tinten worden geproduceerd door lichtheid te bewegen terwijl u tint en verzadiging vasthoudt, waardoor een familie herkenbaar verwant is en wat ze nuttig maakt.
Hoe gebruik je de kleurenpaletgenerator?
Kies een basiskleur
Gebruik de kleurkiezer of typ een hexadecimale waarde om de kleur in te stellen waar je palet omheen is gebouwd.
Kies een Harmony-modus
Schakel tussen tinten en tinten, monochromatische, complementaire, analoge, triadische en tetradische om verschillende gecoördineerde schema's te zien.
Kopieer de kleuren die je nodig hebt
Elk staal toont zijn hex-, RGB- en HSL-waarde. Klik op een staal om het te kopiëren of kopieer het hele palet als CSS-aangepaste eigenschappen.
Pas het palet toe
Gebruik de gegenereerde kleuren voor achtergronden, accenten en tekst in uw ontwerp of stylesheet, zodat de harmonie consistent blijft in uw gebruikersinterface.
Belangrijkste kenmerken
Zes harmoniemodi
Shades en tinten, monochromatische, complementaire, analoge, triadische en tetradische schema's dekken elke gemeenschappelijke kleurrelatie
Hex, RGB en HSL
Elk staal toont alle drie de formaten, zodat u de juiste waarde rechtstreeks kunt laten vallen in CSS, ontwerptools of code
CSS-variabelen exporteren
Exporteer het hele palet als: root aangepaste eigenschappen, klaar om in uw stylesheet te plakken als een ontwerptokenschaal
Nauwkeurige kleurenwiel wiskunde
Harmonieën worden berekend in HSL, zodat de tinten gelijkmatig verdeeld blijven en de stappen van lichtheid zien er gebalanceerd uit, niet modderig
Frequently Asked Questions
Related Tools
Color Contrast Checker
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
Color Mixer
Blend two colors with adjustable ratio and blend modes, and build a gradient between them
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!