:root {
--color-100: #d0d9fb;
--color-200: #8aa0f4;
--color-300: #4466ee;
--color-400: #4466ee;
--color-500: #0f2da3;
--color-600: #0a1c67;
--color-700: #050f38;
}De kleurenpaletgenerator maakt van een enkele basiskleur een gecoördineerde set kleuren met behulp van de harmonieregels voor de kleurwielen. Kies een startkleur en kies een modus - tinten en tinten, monochromatische, complementaire, analoge, triadische of tetradische - en de tool berekent een uitgebalanceerd palet met de hex-, RGB- en HSL-waarde voor elk staal.
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.
Gebruik de kleurkiezer of typ een hexadecimale waarde om de kleur in te stellen waar je palet omheen is gebouwd.
Schakel tussen tinten en tinten, monochromatische, complementaire, analoge, triadische en tetradische om verschillende gecoördineerde schema's te zien.
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.
Gebruik de gegenereerde kleuren voor achtergronden, accenten en tekst in uw ontwerp of stylesheet, zodat de harmonie consistent blijft in uw gebruikersinterface.
Shades en tinten, monochromatische, complementaire, analoge, triadische en tetradische schema's dekken elke gemeenschappelijke kleurrelatie
Elk staal toont alle drie de formaten, zodat u de juiste waarde rechtstreeks kunt laten vallen in CSS, ontwerptools of code
Exporteer het hele palet als: root aangepaste eigenschappen, klaar om in uw stylesheet te plakken als een ontwerptokenschaal
Harmonieën worden berekend in HSL, zodat de tinten gelijkmatig verdeeld blijven en de stappen van lichtheid zien er gebalanceerd uit, niet modderig
Pick colors and convert between HEX, RGB, and HSL formats
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.
Create beautiful CSS gradients with live preview
0 comments
No comments yet. Be the first to share your thoughts!