Share
LESS biedt een handvol functies die het definiëren en manipuleren van kleuren supereenvoudig maken. In deze tutorial zullen we een aantal van hen doorlopen, waarmee je kleuren kunt beheren, betere kleurcombinaties kunt maken en ze georganiseerd kunt houden.
De eerste is de draai () functie waarmee we een kleur rond het kleurenwiel kunnen bereiken. Deze functie komt bijvoorbeeld van pas bij het genereren van een kleurenschema. U hebt mogelijk gelezen over enkele veelvoorkomende kleurstructuren die harmonieuze kleurencombinaties zoals complementair, triade en verbinding formuleren. Er zijn een aantal hulpmiddelen, zoals Adobe Color CC (voorheen Kuler), waar u kleurenschema's kunt genereren om deze structuren in een oogwenk te volgen. Maar hoe zit het met het maken van ons eigen kleurenschema met LESS?
We beginnen met het genereren van de gemakkelijkste kleurstructuur, complementair. Deze koppeling bestaat uit twee kleuren die zich aan weerszijden van het kleurenwiel bevinden.
Aanvullend kleurdiagram.Ten eerste definiëren we de kleurenbasis als de referentie naar de tweede kleur. Kies een favoriet of een andere kleur die plotseling in je opkomt. Hier heb ik een blauwe kleur opgepikt-ish kleur, # 3bafdA, als voorbeeld:
Omdat we de tegenovergestelde kant van het wiel naar de kleurenbasis willen bereiken, stellen we de graadwaarde in op 180.
@ color-base: # 3bafdA; @ kleurentoevoeging: centrifuge (@ color-base, 180);
Dit geeft ons twee precieze, mooie kleuren die elkaar aanvullen.
Hier is een voorbeeld van deze kleuren toegepast op een prototype van een webontwerp:
Heel mooi, is het niet?We kunnen kleurenmodellen verder verkennen en een triadisch kleur structuur. Triadic, zoals de naam al aangeeft, bestaat uit drie kleuren. Daarom verdelen we ons wiel in derden en bepalen we de mate van rotatie binnen de draai () functie:
// Triadische structuur @ color-base: # 3bafdA; @ triadic-secondary: spin (@ color-base, - (360/3)); @ triadic-tertiary: spin (@ color-base, (360/3));
Het resultaat is evengoed:
Triadische kleurstructuurEen andere manier om kleurenschema's te maken is door twee kleuren te mengen; waarschijnlijk iets dat je lang geleden hebt geleerd in de kunstklas op de basisschool. Als we bijvoorbeeld rood met geel mengen, krijgen we een effen tint oranje. Met LESS kunnen we hetzelfde doen met de mengen() functie:
div color: mix (rood, geel);
De uitvoer van dit voorbeeld is # ff8000-de exacte Hex-code van het trefwoord 'oranje' in kleur:
div color: # ff8000;
Vermijd het mengen van kleuren uit hetzelfde spectrum. Gezien onze basiskleur, # 3bafdA, die zich ergens in de blues op het zichtbare spectrum bevindt, krijg je meer bevredigende resultaten door het te mengen met een tegenovergestelde kleur, bijvoorbeeld, mediumvioletred of lightseagreen.
@ color-base: # 3bafdA; @ color-primary: mix (@ color-base, mediumvioletred); @ kleur-secundair: mix (@ color-base, lightseagreen); @ color-tertiary: mix (@ color-base, mintcream);
Dit geeft ons een mooi kleurenschema; alle gegenereerde kleuren voelen harmonieus aan omdat ze dezelfde tint erven, # 3bafdA.
Als je geen idee hebt van de kleuren die je zou moeten toepassen, kies je favoriete kleur en probeer het te mengen ieder kleur met behulp van de mengen() functie. Het resultaat zal je hoogstwaarschijnlijk verrassen.
Hier is een (bekend) voorbeeld van het toepassen van dergelijke resultaten in een prototype van een mobiel ontwerp.
Laten we een paar andere manieren onderzoeken om kleur te manipuleren.
Schaduw definieert de lichte en donkere intensiteit van een kleur. In webontwerp, schaduw komt vaak in de praktijk om elementstaten te onderscheiden. Een knop kan bijvoorbeeld een iets donkerdere of lichtere achtergrondkleur hebben : hover of :focus. Met LESS kunnen we de donkerder () en verlichten() functie om een kleur respectievelijk donkerder en lichter te maken.
@ color-base: # 3bafdA; @ color-hover: lichter (@ color-primary, 10%); // # 9c84c1 @ color-focus: donkerder (@ color-primary, 10%); // # 684b94
Dit resulteert in:
Kleurstatus definiëren met de functie lichter () en donker ().Als alternatief kunnen we de kleur aanpassen verzadiging in plaats van de lichtheid. Verzadiging bepaalt de diepte van een kleur; een grotere verzadiging maakt een kleur levendiger, terwijl het laagste verzadigingsniveau grijs wordt.
Gezien het bovenstaande voorbeeld kunnen we de schaduwfuncties vervangen door verzadigen() en desaturate (), en definieer bovendien de kleur van de uitgeschakelde status.
@ color-base: # 3bafdA; @ color-hover: saturate (@ color-primary, 10%); @ color-focus: desaturate (@ color-primary, 10%); @ kleur uitschakel: lichtheid (desaturatie (@ color-primary, 100%), 30%);
Pas de kleurloosheid van de onverzadigde kleur verder aan, totdat deze goed past in uw ontwerpcontext.
Onze variabelen zijn nu stevig gebonden aan de kleurenbasis, wat ons een handvol tijd zal besparen bij het aanpassen van de knopstijlen; ze zullen overeenkomstig veranderen als u de kleurbasis aanpast.
Kleurstatus aanpassen met verzadiging.MINDER laat onze stijlen een beetje slimmer zijn. We kunnen onze stijlen bijvoorbeeld laten 'denken' en bepalen welke kleur onder bepaalde omstandigheden moet worden toegepast. Ervan uitgaande dat we een websitemalplaatje maken, is dit de knop voor de basisstijl en u wilt deze uitbreiden met verschillende kleuren en stijlen. Maar hoe kunnen we de kleuruitgangen besturen? We willen zeker niet dat de tekstkleur donker is op een donkere achtergrond, of andersom. We moeten ervoor zorgen dat de tekst contrast behoudt, zodat het gemakkelijker te lezen is, en dit is waar het contrast() functies komen om de hoek kijken.
@ body-bg: # 000; body achtergrondkleur: @ body-bg; kleur: contrast (@ body-bg);
In het bovenstaande voorbeeld hebben we de kleur door het contrast() functie. Dit zorgt ervoor dat de tekstkleur voldoende contrasteert met de achtergrondkleur. In dit geval moet de tekst terugkeren #fff aangezien de achtergrond # 000 is. Als u de achtergrond instelt op een lichte kleur, bijvoorbeeld wit, witte rook, of hemelsblauw, de kleur zou moeten terugkeren # 000.
body achtergrondkleur: # 000; kleur: #fff;
U kunt de kleur ook aanpassen voor een donker en licht contrast. In het volgende voorbeeld zal de kleur terugkeren # 999 of # 777 in plaats van #fff en # 000.
@ body-bg: # f0f0f0; @ color-light: # 999; @ color-dark: # 777; body achtergrondkleur: @ body-bg; kleur: contrast (@ body-bg, @ color-dark, @ color-light);
Vaak geef ik er ook de voorkeur aan geen stijlverklaring af te geven als de kleur transparant is, vooral voor de achtergrondkleur. Om dit te doen, kapselt u de achtergrond verklaring binnen LESS Mixin Guards.
@bg: transparant; .element & when not (@bg = transaprent) background: @bg;
Je zou ook hetzelfde kunnen doen om te verklaren grens en kleur eigenschappen en sla een paar regels op in uw stylesheet door onnodige regels te verwijderen.
Ik hoop dat een aantal van deze functies u zullen helpen om de kleurstelling in uw ontwerpen te verbeteren. Je kunt hier de complete lijst met MINDER kleurenfuncties vinden en beginnen met experimenteren. Ik zou het met Kezz Bracey eens moeten zijn. Er is geen betere manier om kleur te gebruiken dan vallen en opstaan:
"Pas nadat ik met zuivere vallen en opstaan begon met het maken van effen kleurenschema's begon alle kleurentheorie die ik had gelezen logisch te worden.
Accentsconagua