Kleuren- en webkleurenschema's begrijpen
Er zijn vier basiskleurenschema's die u voor een website kunt gebruiken. Elke pagina van dit artikel toont een afbeelding van het kleurenschema en hoe u een vergelijkbaar schema kunt genereren in Photoshop.
- monochromatischKleuren van dezelfde tint gebruiken. Ze kunnen verschillende tinten of tinten hebben, afhankelijk van hoeveel wit of zwart er is toegevoegd.
- analoogHierbij worden kleuren gebruikt die dicht bij elkaar op het kleurenwiel liggen.
- complementairDit wordt vaak als "tegengesteld" gezien omdat de twee kleuren in een complementair kleurenschema tegenover elkaar staan op het kleurenwiel.
- triadischDeze kleuren zijn gelijk verdeeld over het kleurenwiel.
Alle kleurenschema's gebruiken deze geel als basiskleur.
02 van 10Monochromatisch webkleurenschema
Dit kleurenschema gebruikt het mosterdgele geel van mijn basiskleur en voegt wat wit en zwart toe om het schema dienovereenkomstig te verduisteren.
- linksboven - de basiskleur # ffe500
- rechtsboven - een vulling van 50% wit toegevoegd om # fff280 te krijgen
- linksonder - een vulling van 75% wit toegevoegd om # fff8bf te krijgen
- rechtsonder - een vulling van 50% zwart toegevoegd om # 7f7200 te krijgen
Monochromatische kleurenschema's zijn vaak het gemakkelijkst voor alle kleuren. De zachte veranderingen in tint en schaduw zorgen ervoor dat de kleuren beter in elkaar overvloeien. Gebruik dit kleurenschema om uw site meer vloeiend en verzameld te maken.
03 of 10Meer monochromatisch webkleurenschema
Een vierkant van 20% zwart toegevoegd om meer kleuren in het schema te krijgen. Als u zwart of wit aan uw kleuren toevoegt, kunt u een nieuwe kleur aan uw palet toevoegen zonder de toon van de pagina te beschadigen.
04 van 10Analoog kleurenschema
Dit kleurenschema neemt de gele basiskleur en voegt toe en trekt 30 graden af van de tint in het kleurenpalet van Photoshop.
- linksboven - de basiskleur # ffe500
- rechtsboven - +30 graden om # 99ff00 te krijgen
- linksonder - -30 graden om # ff6600 te krijgen
- rechtsonder - 100% wit #ffffff
Analoge kleuren kunnen heel goed samenwerken, maar soms kunnen ze slecht botsen. Probeer deze schema's uit met meer mensen dan uzelf, uw familie en vrienden. Wanneer ze werken, creëren ze een site die kleuriger is dan het monochromatische schema, maar bijna net zo vloeiend.
05 van 10Meer analoog kleurenschema
Een vierkant van 20% zwart toegevoegd om meer kleuren in het schema te krijgen.
06 van 10Aanvullende webkleurenschema
Complementaire kleurenschema's hebben, in tegenstelling tot andere kleurenschema's, meestal slechts twee kleuren. De basiskleur en het tegenovergestelde op het kleurenwiel. Met Photoshop is het eenvoudig om de complementaire kleur te krijgen - selecteer eenvoudig het kleurgebied dat u als complement wilt gebruiken en druk op Ctrl-I. Photoshop zal het voor u omkeren. Zorg ervoor dat je dit op een dubbele laag doet, zodat je je basiskleur niet verliest.
- links - de basiskleur # ffe500
- rechts - het complement # 001aff
Aanvullende kleurenschema's zijn vaak veel opvallender dan andere kleurenschema's, dus gebruik ze met zorg. Ze worden het meest gebruikt op stukken die op moeten vallen.
07 van 10Meer complementaire webkleurenschema
Om deze versie te krijgen, heb ik 50% wit toegevoegd aan de onderste helft van de kleuren en 30% zwart aan het middenvierkant. Zoals je ziet, geeft het je een paar meer opties, maar het is nog steeds een complementair kleurenschema.
08 van 10Triadic Web Color Scheme
Triadische kleurenschema's zijn opgebouwd uit 3 kleuren min of meer gelijk verdeeld rond het kleurenwiel. Omdat een kleurenwiel 360 graden is, heb ik opnieuw de tintvakjes in de kleurkiezer gebruikt om 120 graden toe te voegen en af te trekken van de basiskleur.
- linksboven - de basiskleur # ffe500
- rechtsboven - +120 graden om # e500ff te krijgen
- linksonder - -120 graden om # 00ffe6 te krijgen
- rechtsonder - 100% wit #ffffff
Triadische kleurenschema's produceren vaak zeer levendige webpagina's. Maar net als complementaire kleurenschema's kunnen ze mensen anders beïnvloeden. Zorg dat je test.
U kunt ook vierkleuren- of vierkleurenkleurenschema's maken, waarbij de kleuren zich op gelijke afstand van elkaar rondom het kleurenwiel bevinden.
09 van 10Meer Triadic Web Color Scheme
Net als bij de andere voorbeelden heb ik een zwart vierkant van 30% toegevoegd aan de kleuren om de extra tinten te krijgen.
10 van 10Tegenstrijdige webkleurenschema's
Schoonheid is in het oog van de toeschouwer, maar het is een ongelukkig feit dat niet alle kleuren samengaan. Discordante kleuren zijn kleuren die verder dan ongeveer 30 graden uit elkaar staan op het kleurenwiel en zijn niet complementair of onderdeel van een triade.
Onverschillige kleurenschema's kunnen zeer schokkend zijn en moeten alleen worden gebruikt om aandacht te genereren. Vergeet niet dat, omdat deze kleuren vaak botsen, de aandacht die u krijgt mogelijk niet precies is wat u zoekt.
