Skip to main content
CheckTown
Generators

Color Shades Generator: Tints, Shades, and Tones

Gepubliceerd 5 min lezen
In dit artikel

Wat zijn kleurschakeringen, tinten en tonen?

Een schaduw wordt geproduceerd door een kleur te mengen met zwart, waardoor deze donkerder wordt. Een tint wordt geproduceerd door te mengen met wit, waardoor deze lichter wordt. Een toon wordt geproduceerd door te mengen met grijs, wat de kleur desatureert.

Het begrijpen van het verschil tussen schakeringen, tinten en tonen is fundamenteel in kleurentheorie. Ontwerpers gebruiken deze variaties om diepte, hiërarchie en visueel contrast te creëren.

Hoe de generatie van schakeringen werkt

Een kleurschakerincgsgenerator neemt een basiskleur (zoals #3b82f6) en produceert een reeks lichtere en donkerdere varianten door de lichtheidswaarde in de HSL-kleurruimte aan te passen.

  • HSL-manipulatie — de generator past de L-waarde (lichtheid) aan terwijl H (tint) en S (verzadiging) constant blijven
  • Stapberekening — het bereik van lichtst tot donkerst wordt verdeeld in gelijkmatig verdeelde intervallen
  • Kleurmenging — voor natuurlijkere resultaten gebruiken sommige generators echte kleurmenging

Probeer gratis — geen aanmelding vereist

Genereer kleurschakeringen →

Wanneer kleurschakeringen genereren

Kleurpalet schakeringen zijn essentieel voor het creëren van samenhangende, professionele ontwerpen.

  • Design systemen — genereer een complete kleurschaal (50 tot 950) uit de primaire kleur van uw merk
  • UI-theming — creëer hover-, actieve, focus- en uitgeschakelde staten met lichtere en donkerdere varianten
  • Toegankelijkheidscontrast — test kleurcombinaties tegen WCAG-contrastvereisten

Veelgestelde vragen

Wat is het verschil tussen een schaduw en een tint?

Een schaduw is een kleur gemengd met zwart (donkerder), terwijl een tint gemengd is met wit (lichter).

Hoeveel schakeringen moet een design systeem hebben?

De meeste gebruiken 10 stappen (50 tot 950) volgens de Tailwind CSS-conventie. De basiskleur zit meestal op 500.

Kan ik toegankelijke kleurcombinaties genereren?

Ja. Door een volledig palet te genereren, kunt u paren testen tegen WCAG-vereisten.

Gerelateerde Tools