Hoe werkt de HSB Kleurenmodus?
De volgende pagina legt het uitstekend uit:
The HSB Color System: A Practitioner’s Primer – Learn UI Design
Welke website gaat je helpen?
Op Paletton.com kun je een kleurenpalet samenstellen met meerdere kleuren die bij elkaar passen. Om de HSB-waarde aan te passen, moet je bij Paletton op FineTune klikken. Je krijgt niet de hele HSB in beeld, alleen de Hue.
De mogelijke waardes in de HSB (Hue/Saturation/Brightness) kleurmodus zijn: H: [0, 360], S: [0, 100], B: [0, 100].
De Opdracht: Je lievelingskleur
Probeer met de tools van Paletton om je lievelingskleur zo ver mogelijk te benaderen. Maak minstens 3 varianten: kleuren die erg op elkaar lijken. Met FineTune regel je dit zo. Zorg wel dat je het verschil tussen de kleuren nog ziet.
Maak nu een P5JS sketch waarin je speelt met de HSB van je lievelingskleur. De Hue is al snel gegeven door Paletton. De S en de V ga jij mee variëren. Probeer S en V elk met 0; 50 en 100. H hou je op je eigen keuze.
Voorbeeld Lievelingskleur
Deze toffe paarse kleur zit op Hue 317. De S en V laten we allebei variëren op 100,60,30 en 0.
function setup() {
createCanvas(500, 250);
colorMode(HSB);
}
function draw() {
background(220);
// Cirkel 1 bovenste rij: S varieert.
fill(317, 100, 100)
circle(100, 50, 50);
// Cirkel 2
fill(317, 60, 100)
circle(200, 50, 50);
// Cirkel 3
fill(317, 30, 100);
circle(300, 50, 50);
// Cirkel 4
fill(317, 0, 100);
circle(400, 50, 50);
// Tweede rij: V varieert
fill(317, 100, 100);
circle(100, 150, 50);
fill(317, 100, 60);
circle(200, 150, 50);
fill(317, 100, 30);
circle(300, 150, 50);
fill(317, 100, 0);
circle(400, 150, 50);
}