De meeste paletten beginnen met één kleur die iemand al leuk vindt: een merk blauw, het groen van een logo, een stoffen swatch voor een bruiloft. Het moeilijke deel is alles na die eerste keuze. Welke kleuren passen erbij, hoeveel heb je nodig en waarom valt een set die er evenwichtig uitziet in een ontwerptool uit elkaar zodra er tekst bovenop zit?
Kleurharmonie beantwoordt de eerste twee vragen met eenvoudige geometrie op een kleurenwiel Contrast beantwoordt de derde, en het is degene die mensen overslaan Deze gids behandelt beide, met echte HEX-waarden die u kunt controleren, en laat zien hoe de gratis kleurenpalet generator verandert één basiskleur in zes soorten palet.
tl;dr: Een kleurenpaletgenerator draait een basiskleur & # 39; S tint rond het HSL-kleurenwiel door vaste hoeken (180 graden voor complementair, 120 voor triadisch, 90 voor tetradisch, 30 en 60 voor analoog) of beweegt de lichtheid om tinten, tinten en monochromatische sets te maken De Toolz-kleurenpaletgenerator doet deze clientzijde, gratis, geen aanmelding: kies een basis, klik op een swatch om de HEX-code te kopiëren, of kopieer de hele set als aangepaste CSS-eigenschappen HSL is niet perceptueel uniform, dus controleer eventuele tekst en achtergrondcombinaties tegen WCAG-contrastverhoudingen voordat u het verzendt.
Wat is een kleurenpalet generator?
Een kleurenpaletgenerator is een hulpmiddel dat één startkleur neemt en daaraan gerelateerde kleuren berekent met behulp van vaste regels, zodat de set er zonder vallen en opstaan gecoördineerd uitziet De regels komen van het kleurenwiel: kleuren tegenover elkaar contrasteren, kleuren naast elkaar mengen zich, en kleuren gelijkmatig verdeeld rond de wielbalans.
De Toolz generator werkt in HSL, die een kleur beschrijft als tint, verzadiging en lichtheid, Tint is een hoek van 0 tot 360 graden rond het wiel (rood bij 0, groen bij 120, blauw bij 240) Verzadiging is hoe levendig de kleur is, van 0% grijs tot 100% full colour Lichtheid loopt van 0% zwart tot 100% wit HSL is gedefinieerd voor het web in de CSS Color Module Level 4 specificatie, en elke browser converteert het naar dezelfde RGB-waarden.
Werken in HSL maakt harmonieregels makkelijk uit te drukken Een complementaire kleur is dezelfde verzadiging en lichtheid met 180 toegevoegd aan de tint Dat is één toevoeging in plaats van veel gehannes met RGB-schuifregelaars.
Wat zijn de zes harmoniemodi?
Elke modus is een recept om afstand te nemen van de basiskleur. Hier is precies wat de Toolz-generator in elke modus doet, ontleend aan de broncode.
| manier | Wat verandert? | Swatches | Tintposities |
|---|---|---|---|
| Tinten & amp; Tinten | Alleen lichtheid, ingesteld op 90, 75, 60, de basiswaarde, 35, 22 en 12 | 7 | Basistint |
| eenkleurig | Lichtheid en verzadiging samen | 5 | Basistint |
| aanvullend | Tint draait 180 graden, met een lichtere basis en een donkerder complement | 4 | Basis, basis + 180 |
| overeenkomstig | Tintstappen 30 graden in elke richting | 5 | -60, -30, basis, +30, +60 |
| triadisch | Hue plaatste een derde van de cirkel uit elkaar | 3 | Basis, +120, +240 |
| Tetradic | Hue stond een kwart van de cirkel uit elkaar | 4 | Basis, +90, +180, +270 |
Twee details zijn in de praktijk van belang Analoog, triadisch en tetradisch houden de basiskleur' s verzadiging en lichtheid op elke swatch, zodat ze alleen van tint veranderen Tinten & amp; Tinten en Monochromatisch behouden de tint en veranderen de lichtheid, zodat ze lichte en donkere versies van één kleur produceren.
Een uitgewerkt voorbeeld: elke modus van #4466ee
De generator opent met #4466ee, een medium blauw Omgerekend naar HSL is het tint 228, verzadiging 83%, lichtheid 60% Hier is wat elke modus voor die basis retourneert Dit zijn de HEX-codes die het gereedschap afdrukt, en u kunt ze reproduceren met de standaard HSL naar RGB conversie in de CSS specificatie.
triadisch voegt 120 en 240 toe aan de tint: 228, dan 348, dan 108 (468 wikkelt zich rond tot 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Let op het patroon Bij dezelfde verzadiging en lichtheid herschikt het draaien met precies een derde van het wiel dezelfde drie RGB-kanaalwaarden: 44, 66 en ee-handelsplaatsen.
aanvullend voegt 180 toe, die op tint 48 komt, een warm geel De modus bevat ook een lichtere versie van de basis en een donkerdere versie van het complement, zodat je vier swatches krijgt: #8aa0f4, #4466ee, #eecc44 en #d2ac14.
overeenkomstig stappen 30 graden tegelijk van 168 tot 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee Het leest als een band van blauwgroen via blauw tot violet.
Tetradic voegt 90, 180 en 270 toe: #4466ee, #ee44bb, #eecc44, #44ee77.
eenkleurig houdt tint 228 en ruilt verzadiging in voor lichtheid in beide richtingen: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Tinten & amp; Tinten stelt de lichtheid in op 90, 75, 60, de basiswaarde, 35, 22 en 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
De laatste toont een gril die het weten waard is De schaduwschaal maakt gebruik van vaste lichtheidsstappen plus de basis's eigen lichtheid Wanneer de basis toevallig precies op 90, 75, 60, 35, 22 of 12 procent lichtheid zit, zoals #4466ee doet bij 60, komen twee stalen identiek uit Duw de basislichtheid met één stap als je zeven verschillende kleuren wilt.
Hoe kies je de juiste harmonie voor een baan?
Kies de harmonie op basis van hoeveel contrast de ontwerpbehoeften hebben. Contrastarme schema's voelen kalm aan en zijn gemakkelijk consistent te houden; contrastrijke schema's trekken de aandacht en zijn gemakkelijk te overdrijven.
| doelwit | Goede startmodus | waarom |
|---|---|---|
| Een UI-kleurschaal (100 tot 700) | Tinten & amp; Tinten | Eén tint, voorspelbare licht-naar-donker stappen |
| Een minimaal, samenhangend merk | eenkleurig | Alles deelt een tint, niets botst |
| Een call-to-action die opvalt | aanvullend | De tegenovergestelde tint is het sterkste contrast |
| Een zachte, natuurlijke uitstraling | overeenkomstig | Naburige tinten mengen |
| Een speelse, evenwichtige set | triadisch | Drie gelijkmatig verdeelde tinten, geen enkele dominant |
| Grafieken met verschillende series | Tetradic | Vier verschillende tinten die nog steeds met elkaar verband houden |
Een veel voorkomende vuistregel voor lay-outs is om één kleur het grootste deel van het gebied te laten bedekken, een tweede een kleiner aandeel te laten nemen en een accent spaarzaam te laten verschijnen. Het werkt goed met complementaire en triadische paletten, waarbij het geven van alle kleuren gelijke ruimte de neiging heeft er luid uit te zien.
Waarom ziet een palet er evenwichtig uit, maar leest het slecht?
Een palet kan er in HSL gebalanceerd uitzien en toch falen op het scherm omdat HSL lichtheid niet is hoe helder een kleur eruit ziet voor een persoon HSL behandelt elke tint bij 60% lichtheid als even licht Menselijk zicht niet.
Het aanvullende voorbeeld hierboven maakt dit concreet. #4466ee en #eecc44 hebben beide een HSL-lichtheid van 60%. Hun relatieve luminantie, de maatstaf die de Web Content Accessibility Guidelines gebruiken voor waargenomen helderheid, is heel anders: ongeveer 0,17 voor het blauw en ongeveer 0,62 voor het geel. Het geel is meerdere keren helderder voor het oog.
Die kloof komt naar voren als contrast. Met behulp van de WCAG-formule is de contrastverhouding = (L1 + 0,05) /(L2 + 0,05), waarbij L1 de lichtere kleur is en#39;s luminantie:
| Pair | Contrastverhouding | WCAG AA voor normale tekst (4,5:1) |
|---|---|---|
| Witte tekst op #4466ee | ongeveer 4,77:1 | Passes |
| Witte tekst op #eecc44 | ongeveer 1,57:1 | het mislukken |
| Zwarte tekst op #eecc44 | ongeveer 13.4:1 | Passes |
De generator zelf reageert hier al op: elke swatch kiest donkere of witte labeltekst uit een helderheidsschatting, daarom krijgen de gele swatches donkere labels Voor echte ontwerpen voert u de tekst - en achtergrondparen die u van plan bent te gebruiken uit via een kleurcontrastcontrole. De drempels komen van WCAG 2.2: 4,5:1 voor normale tekst en 3:1 voor grote tekst op niveau AA. De kleur contrast gids loopt stap voor stap door de luminantiewiskunde.
Hoe exporteert u een palet als CSS-variabelen?
Klik op CSS kopiëren en de generator zet het huidige palet op uw klembord als aangepaste CSS-eigenschappen :root. De namen zijn genummerd in stappen van 100 in swatchvolgorde Voor het triadische voorbeeld
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Plak dat bovenaan een stylesheet en verwijs overal naar de kleuren:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
De nummering volgt de volgorde van de swatch, niet de lichtheid. In tinten & amp; Tintenmodus die toevallig licht naar donker draait, dus --color-100 is de lichtste tint In triadische of analoge modus zijn de getallen slechts posities Hernoem de variabelen naar iets betekenisvols zoals --brand, --accent en --surface als je eenmaal hebt gekozen, omdat --color-200 betekent niets voor de volgende persoon die uw CSS leest.
Om in plaats daarvan een enkele kleur te kopiëren, klikt u op de swatch. De HEX-code gaat naar het klembord en de swatch toont "Copied" voor een moment.
Kun je er een bruiloft of pastel palet mee maken?
Ja, zolang je de startkleur maar meeneemt Er zijn geen trouwpresets of samengestelde thema's, dus het palet is slechts zo goed als de basis die je kiest.
Neem voor een bruiloft een kleur van iets echts: de bloemen, de voorraad uitnodigingskaarten, een jurkstof voor bruidsmeisjes Voer de HEX-code in en probeer elke modus Uitgaande van een saliegroen, #9caf88, Aanvullende retourneert #c2ceb6, #9caf88, een stoffige lavendel #9b88af en een diepere #755e8d Die lavendel tegen salie is een klassieke combinatie, en de wiskunde vond het met één klik.
Voor pastelkleuren, begin van een bleke, zacht verzadigde basis zoals #a7c7e7 Analoog, Triadisch en Tetradisch houden die lichtheid en verzadiging op elke swatch, zodat de hele set zacht blijft Tinten & amp; Tinten en Monochromatisch bewegen opzettelijk lichtheid, dus voegen ze donkere kleuren toe, tot #0d1f30 voor dat blauw Er is geen aparte lichtheidsschuif; de basiskleur is de controle.
Schermkleuren en gedrukte kleuren verschillen Een monitor mengt rood, groen en blauw licht, terwijl een printer cyaan, magenta, gele en zwarte inkt op papier legt, en sommige heldere schermkleuren hebben geen exact inktequivalent Als een palet op briefpapier gaat, bestel dan een gedrukt proefdruk vóór een volledige run.
Wat zijn de veelvoorkomende fouten en foutgevallen?
De meeste paletproblemen komen voort uit de invoer of uit het te ver vertrouwen op de wiskunde.
Het palet wordt blauw terwijl je typt. Totdat het tekstvak een geldige HEX-code bevat, valt de generator terug naar #4466ee. Een halfgetypte waarde zoals #9c of #9caf8 toont het standaard blauwe palet Het veld accepteert drie of zes hex cijfers, met of zonder de #, dus #9ca op weg naar #9caf88 toont kort een palet voor #99ccaa.
De basisstaal is een stap verwijderd. Kleuren worden afgerond op hele HSL-nummers voordat ze weer worden omgezet, dus sommige bases gaan niet precies heen en terug. #c08081 komt bijvoorbeeld terug als #c18182. Het verschil is één eenheid per kanaal en onzichtbaar, maar het maakt uit of u een merkcode exact matcht: bewaar de officiële HEX voor de basis en gebruik de gegenereerde voor de rest.
Elke kleur overal gebruiken. Een vijfkleuren analoog palet is een bereik om uit te kiezen, niet vijf kleuren die allemaal een baan nodig hebben.
Contrast overslaan. Zoals hierboven getoond kunnen twee kleuren bij dezelfde HSL lichtheid meer dan drievoudig verschillen in luminantie Tekstparen controleren.
Perceptuele gelijkmatigheid verwachten. Schaduwstappen zijn zelfs in HSL-lichtheid, niet in hoe licht ze eruit zien Als je een schaal nodig hebt die er gelijk uitziet, pas dan individuele stappen met het oog aan of werk in een perceptuele ruimte zoals OKLCH, die CSS Color 4 ook definieert.
Hoe verhoudt dit zich tot andere kleurentools?
Paletgeneratie is één stap in een langere workflow De tabel laat zien welke tool bij elke stap past.
| Task | kwast | Wat het je geeft |
|---|---|---|
| Zoek of proef een startkleur | Kleurkiezer | HEX, RGB en HSL voor elke kleur |
| Bouw een gecoördineerde set | Kleurpaletgenerator | Zes harmoniemodi, CSS-export |
| Maak een fijnkorrelige schaal van één kleur | Kleurschakeringen generator | Een speciale tint- en schaduwhelling |
| Meng twee kleuren | Kleurenmixer | Tussenliggende kleuren tussen twee ingangen |
| Controleer de leesbaarheid van tekst | Kleurcontrastcontrole | WCAG-verhouding en passeren of falen |
Als de schaal er meer toe doet dan de harmonie, dan is de gids voor het genereren van tinten en tinten gaat dieper op het bouwen van 50 tot 900 hellingen Elke kleur tool staat vermeld op de hub voor kleurgereedschap.
Is de generator privé en werkt deze offline?
Ja. alle HSL wiskunde en rendering draaien in uw browser met JavaScript Niets dat u typt wordt geüpload, en nadat de pagina laadt de paletgenerator blijft werken zonder netwerkverbinding Kopiëren van een swatch of de CSS telt mee voor een dagelijkse gebruikslimiet, die de modus registreert waarin je zat, niet je kleuren.
