Elk designsysteem dat ik ooit heb geleverd begon met een enkele merkkleur en had toen meteen een dozijn meer nodig Eén blauw is nooit genoeg Je hebt een lichter blauw nodig voor een zweeftoestand, een veel lichter blauw voor een geselecteerde rij achtergrond, een donkerder blauw voor tekst die op een bleek oppervlak zit, en een gedempt blauw voor een uitgeschakelde knop die niet mag schreeuwen Toen ik de interface aan het bouwen was voor [Toolz.dev] (/, ik bleef een kleurenkiezer openen, de lichtheidsschuifknop aanstoten, kijken of het resultaat er nog steeds uitzag als dezelfde familie, en hexadecimale codes in mijn stylesheet plakken per keer Het werkte, maar het was traag, en de resultaten waren inconsistent omdat & het niet juist is;n-herhalingsproces.
Dus bouwde ik de Color Shades Generator. Je geeft het één kleur en het geeft je drie volledige schalen, berekend in de kleurruimte CSS Color Module Level 4 definieert in plaats van door hex cijfers te nudgen: tinten die naar wit stappen, tinten die naar zwart stappen en tonen die naar grijs toe stappen Deze gids legt uit wat die drie woorden eigenlijk betekenen, hoe de wiskunde werkt en hoe je van een enkele merkkleur een samenhangend palet kunt maken dat je rechtstreeks in CSS kunt laten vallen.
tl;dr: Een tint is je kleur gemengd met wit, een tint is je kleur gemengd met zwart, en een toon is je kleur gemengd met grijs Elke kleur behoudt de originele tint en verandert alleen hoe licht, donker of gedempt de kleur eruit ziet Plak een HEX, RGB, of HSL waarde, kies hoeveel stappen je wilt, en de generator bouwt alle drie de schalen in één keer, elke swatch kopieerbaar als HEX, RGB, of HSL. Alles draait in je browser.
Wat is het verschil tussen een tint, een tint en een toon?
Deze drie woorden komen uit de traditionele kleurentheorie, en ze beschrijven drie verschillende manieren om een kleur te veranderen zonder te veranderen welke kleur het fundamenteel is Het onderscheid is de moeite waard om goed te krijgen, omdat ontwerpers, en steeds vaker tokens ontwerpen, de woorden precies gebruiken.
Een tint is een kleur gemengd met wit Het toevoegen van wit verhoogt de lichtheid en verzacht de kleur Roze is een tint rood, en babyblauw is een tint van een sterker blauw Tinten zijn waar je naar reikt als je bleke achtergronden, subtiele vullingen en de lichtste oppervlakken in een interface nodig hebt.
Een tint is een kleur gemengd met zwart Het toevoegen van zwart verlaagt de lichtheid en verdiept de kleur Maroon is een tint rood, en marine is een tint blauw Tinten geven je het donkerdere uiteinde van een schaal: tekstkleuren, staten met ingedrukte knoppen en randen die meer gewicht nodig hebben dan de basis.
Een toon is een kleur vermengd met grijs Toevoeging van grijs vermindert de kleur' s intensiteit zonder het dramatisch lichter of donkerder te maken Tonen zijn de meest onderbenutte van de drie, en ze zijn het geheim achter paletten die verfijnd voelen in plaats van opzichtig Een afgezwakte kleur leest als rustiger en professioneler, daarom domineren gedempte paletten serieus productontwerp.
Het belangrijkste dat ze alle drie delen is dat ze de tint behouden Een tint blauw is nog steeds blauw, een tint blauw is nog steeds blauw en een tint blauw is nog steeds blauw. Dat is wat een reeks tinten, tinten en tonen op één familie laat lijken in plaats van op een willekeurig assortiment.
Hoe wordt elke schaal eigenlijk berekend?
Onder de kap is elke swatch een straight-line mix tussen twee kleuren in RGB ruimte De generator neemt je basiskleur als een rode, groene, en blauwe triple, en het neemt een doelkleur, dan loopt het van de ene naar de andere in even stappen Voor tinten is het doel wit, dat is (255, 255, 255). Voor tinten is het doelwit zwart, (0, 0, 0). Voor tonen is het doel middengrijs, (128, 128, 128).
De mix voor elk enkel kanaal is eenvoudig rekenen Om een swatch te krijgen die dertig procent van de weg van de basis naar het doel is, bereken je base + (target - base) * 0.30 voor het rode kanaal, dan het groene kanaal, dan het blauwe kanaal, en rond naar hele getallen Een tien-stap tintschaal voert die berekening uit op tien procent, twintig procent, enzovoort tot honderd procent, waarbij de kleur zuiver wit is geworden De basiskleur zelf is opgenomen als de nul-percentage swatch bovenaan elke schaal, zodat je altijd kunt zien waar je begon.
Omdat de mix per kanaal in RGB gebeurt, blijft de tint in wezen vast voor tinten en tinten Mengen naar puur wit of puur zwart verandert hoeveel licht de kleur reflecteert maar niet het onderliggende karakter, dus een tint en een tint van dezelfde basis lezen als dezelfde kleur bij verschillende helderheid Tonen kunnen de waargenomen tint van een haar verschuiven, omdat grijs in het neutrale midden zit en er naar toe trekt, desatureert elk kanaal enigszins, maar in de praktijk leest de hele schaal nog steeds als één kleur Als je precies wilt inspecteren hoe een bepaald staal over formaten heen terechtkomt, dan is de Color Converter zal u de HEX, RGB, HSL, en HWB waarden naast elkaar tonen.
Waarom niet gewoon de lichtheid in HSL veranderen?
Een redelijke vraag is waarom het gereedschap zich vermengt met RGB in plaats van simpelweg de L waarde in HSL Beide benaderingen produceren een monochromatische toonladder, en beide zijn geldig Mengen naar wit en zwart in RGB is de klassieke schilder' s model van tinten en tinten, en het komt netjes in kaart op de woorden die ontwerpers al gebruiken Het houdt de eindpunten ook eerlijk: een tint van honderd procent is precies wit en een tint van honderd procent is precies zwart, wat niet altijd waar is als je alleen HSL-lichtheid manipuleert vanwege de manier waarop verzadiging ermee interageert De generator geeft je tonen als een derde schaal, specifiek om de "less intens" as te dekken die een pure lichtheidsverandering niet aanpakt.
Hoeveel stappen moet ik genereren?
Met de generator kunt u kiezen tussen twee tot twintig stappen per schaal, en het juiste aantal hangt af van wat u bouwt. Voor een ontwerpsysteem waarbij u een genoemde helling wilt blue-50 doorgaand blue-900, een grotere stapentelling geeft je een fijne gradiënt waaruit je kunt samplen Voor een snel paar hover en actieve toestanden is drie of vier stappen voldoende Mijn standaard is tien, omdat tien tinten, tien tinten en tien tonen vanaf één basis mij een volledig werkend palet geven zonder een overweldigende muur van stalen.
Meer stappen betekenen kleinere sprongen tussen aangrenzende kleuren, wat je wilt als aangrenzende tinten visueel verschillend maar dichtbij moeten zijn, zoals de afwisselende banden van een gegevenstabel. Minder stappen betekenen krachtigere sprongen, wat past bij een compact palet waarbij elke kleur een duidelijk ander werk heeft. Er is geen verkeerd antwoord, en omdat het gereedschap onmiddellijk opnieuw berekent, kunt u het aantal stappen op en neer schuiven totdat de afstand er goed uitziet.
Hoe verschillen tinten van het verlagen van de dekking?
Een val waar ik vroeg in viel was het gebruik van dekking om een tint te faken Het lijkt gelijkwaardig: laat een blauwe knop vallen tot vijftig procent dekking over een witte pagina en het ziet eruit als een lichter blauw Het probleem is dat dekking geen kleur is, het is een compositie-instructie, en het hangt volledig af van wat er achter het element zit Datzelfde vijftig procent blauw over een donker oppervlak wordt modderig donkerblauw, en over een foto wordt het onvoorspelbaar Uw & quot;lichtblauw" verandert de identiteit afhankelijk van de achtergrond, wat het tegenovergestelde is van wat een ontwerpsysteem nodig heeft.
Een tint lost dit op door de lichtheid in een echte, ondoorzichtige kleur te bakken, De swatch die de generator je geeft is een vaste hex-waarde die er hetzelfde uitziet, ongeacht wat erachter zit, omdat het volledig ondoorzichtig is Wanneer je een consistente lichtere versie nodig hebt van een kleur die zich voorspelbaar gedraagt over elk oppervlak in je product, gebruik dan een tint in plaats van een transparantie De dekking reserveren voor echte transparantie-effecten, zoals overlays en scrims, waarbij je eigenlijk wilt dat de achtergrond zichtbaar wordt Het gescheiden houden van die twee ideeën is een van de stille gewoonten die ervoor zorgen dat een palet vast aanvoelt in plaats van toevallig.
Hoe maak ik van deze schalen een bruikbaar palet?
Een palet is niet zomaar een stapel kleuren, het is een set opdrachten Hier is de workflow die ik gebruik als ik begin vanuit een enkele merkkleur Neem de basis als je primaire actiekleur, die op je hoofdknoppen en links Bereik in de tinten voor achtergronden: een zeer lichte tint voor pagina - of kaartoppervlakken, een iets sterkere tint voor de zweefstatus van een lichtelement Bereik in de tinten voor tekst en nadruk: een diepe tint voor lichaamsexemplaar die contrast nodig heeft tegen een bleke tint, een medium tint voor de ingedrukte staat van je primaire knop Gebruik een toon wanneer je de aanwezige maar stille kleur nodig hebt, zoals een gehandicapte bediening of een secundaire badge.
De enige regel die je niet kunt overslaan is contrast Een tint die er mooi uitziet als een knopachtergrond is nutteloos als de labeltekst erop niet voldoet aan de vereisten voor toegankelijkheidscontrasten Als je eenmaal de kleurenparen hebt gekozen die op elkaar zullen zitten, voer je ze door de Kleurcontrast checker om te bevestigen dat ze de WCAG drempels leegmaken Mooie tinten plukken is het makkelijke gedeelte Zorg ervoor dat de tekst erop leesbaar is, is het gedeelte dat een echt palet van een moodboard scheidt.
De onderstaande tabel laat zien hoe ik doorgaans een schaal van tien stappen in kaart breng op interfacerollen.
| Swatchbron | Typische rol | Voorbeeld gebruik |
|---|---|---|
| Lichtste tinten | Oppervlakken en achtergronden | Pagina achtergrond, kaart vullen, geselecteerde rij |
| Lichttinten | Beweeg toestanden op lichte elementen | Knop zweven, lijst-item zweven |
| Basiskleur | Primaire actie | Hoofdknop, actieve link, merkaccent |
| Middelzware tinten | Gedrukte en actieve toestanden | Knop actieve, gerichte grens |
| Donkere tinten | Tekst en hoge nadruk | Lichaamstekst op lichte oppervlakken, kopjes |
| Tones | Gedempte secundaire elementen | Gehandicapte bedieningselementen, secundaire badges |
Hoe past dit naast andere kleurgereedschappen?
De tintengenerator is één instrument in een klein orkest Het beantwoordt de vraag & quot; geef me meer van deze ene kleur, & quot; maar echt paletwerk raakt ook een paar aangrenzende vragen Wanneer je harmonieuze kleuren nodig hebt die niet dezelfde tint hebben, zoals een complementaire of analoge set, de kleurenpalet generator bouwt die relaties op Wanneer u een startkleur bemonstert uit een afbeelding of een ontwerp en de exacte waarde ervan moet lezen, wordt de kleurenkiezer geeft je de hex code En wanneer je tinten bestemd zijn voor een CSS achtergrond die vervaagt van de ene naar de andere, de Gradiëntgenerator verandert twee ervan in een kant-en-klare linear-gradient.
De natuurlijke pijplijn ziet er als volgt uit: kies of plak een basiskleur, genereer de tinten, tinten en tonen, verifieer de paren die u van plan bent te stapelen tegen de contrastcontrole en kopieer de winnaars naar uw stylesheet of ontwerptokens. Elk van die tools draait volledig in de browser, dus een merkkleur die u nog niet hebt aangekondigd, reist nooit naar iemand's server. Als local-first tooling een waarde is die u deelt, wordt het stuk ingeschakeld Gegevensprivacy en online tools verklaart waarom ik alles op die manier bouw, en de Webontwikkelaar Toolkit verzamelt de rest van de hulpprogramma's die in mijn dagelijkse workflow leven.
Een snel uitgewerkt voorbeeld
Begin met het merk blauw #4466EE. Stel het aantal stappen in op tien en laat het kopieerformaat op HEX staan De generator geeft drie kolommen terug.
De kolom met tinten begint bij #4466EE en klimt naar wit, gaat door steeds bleker blauw totdat het laatste deel is #FFFFFF. Ergens in het midden krijg je een zachte maagdenpalm die een uitstekende geselecteerde rij achtergrond maakt De tinten kolom begint op hetzelfde #4466EE en daalt af naar zwart, waardoor je diepe indigo's krijgt die geschikt zijn voor tekst en ingedrukte toestanden, eindigend op #000000. De tonenkolom begint bij #4466EE en beweegt zich richting grijs, waarbij gedempte leistenen blauwtinten worden geproduceerd die lezen als kalm en ingetogen, eindigend op #808080.
Van die ene ingang heb je nu een achtergrond (een lichte tint), een hover fill (een iets donkerdere tint), een primaire kleur (de basis), een tekstkleur (een donkere tint), en een uitgeschakelde kleur (een toon) Klik op een willekeurige swatch om deze te kopiëren, schakel het kopieerformaat over naar RGB of HSL als je project dat liever heeft, en plak Wat vroeger twintig trips waren naar een kleurenkiezer is nu één pasta en een handvol klikken, en omdat de wiskunde deterministisch is, is het palet elke keer consistent.
Veelgestelde vragen
Wat is het verschil tussen een tint, een tint en een toon?
Een tint is een kleur vermengd met wit, waardoor deze lichter is Een tint is een kleur vermengd met zwart, waardoor deze donkerder wordt Een toon is een kleur vermengd met grijs, die hem dempt zonder te veranderen of hij licht of donker is Alle drie houden ze de oorspronkelijke tint en veranderen alleen hoe licht, donker of verzadigd de kleur lijkt.
Hoe genereer ik tinten van een kleur?
Voer uw basiskleur in en lees vervolgens de kolom Tinten, die de kleur mengt met toenemende hoeveelheden zwart. Elke rij is een donkerdere versie van het origineel in een gelijkmatige stap, en u kunt ze allemaal kopiëren als HEX, RGB of HSL. Verhoog het aantal stappen voor een vloeiender bereik aan donkere waarden.
Hoe worden de lichtere en donkerdere kleuren berekend?
Elke schaal is een lineaire mix van de basiskleur naar een doel Tinten gaan over in de richting van wit (255, 255, 255), tinten gaan over in de richting van zwart (0, 0, 0) en tonen gaan over in de richting van middengrijs (128, 128, 128). Een tint van 30% verplaatst bijvoorbeeld elk rood, groen en blauw kanaal 30% van de weg van de basis naar wit.
In welke kleurformaten kan ik plakken?
U kunt een HEX-code (3 of 6 cijfers, met of zonder een leidende hash), een rgb () waarde, een hsl () waarde, of een gemeenschappelijke CSS-kleurnaam zoals karmozijnrood of steelblue invoeren De tool converteert uw invoer naar RGB intern en rapporteert elke swatch in HEX, RGB, en HSL.
Hoeveel tinten kan ik genereren?
Per schaal kan men tussen de 2 en 20 stappen instellen Elke schaal bevat ook de originele basiskleur, dus een 10-stappen instelling geeft je de basis plus tien tinten, tien tinten, en tien tonen Minder stappen geven gewaagde sprongen tussen waarden, terwijl meer stappen een fijn verloop geven.
Kan ik met deze tool een monochromatisch palet bouwen?
Ja. Een monochromatisch palet gebruikt één tint op verschillende niveaus van lichtheid en verzadiging, en dat is precies wat de tinten, tinten en tonen produceren Kies een basismerkkleur en gebruik de tinten voor achtergronden, de basis voor primaire elementen en de tinten voor tekst- of zweeftoestanden.
Behouden de gegenereerde kleuren dezelfde tint?
Tinten en tinten houden de tint vrijwel precies, omdat vermenging met zuiver wit of zwart eerder lichtheid dan tint verandert Tonen kunnen heel licht verschuiven omdat grijs in het midden van de kleurruimte zit, maar voor praktisch ontwerpwerk leest de hele schaal als één familie van dezelfde kleur.
Is de kleurschakeringen generator gratis en privé?
Ja. Het is volledig gratis zonder aanmelding en zonder limieten. Alle parsering en kleurenwiskunde worden in uw browser uitgevoerd met behulp van JavaScript aan de clientzijde, dus de kleuren die u invoert verlaten uw apparaat nooit en de tool blijft offline werken zodra de pagina is geladen.
