[alg] color picker, algoritme(s) voor ronde uitvoering

[Verwijderd]

Ik ben al een ruime tijd bezig om een intranet site te maken voor een bedrijf. Het komt nu op het fine-tunen aan en vraag me niet waarom maar de gebruiker wil met een GUI wijzigingen in de vormgeving- en dus de kleuren van het front-end wijzigen. En dan kom je al gauw terecht bij een color-picker.

Er zijn er genoeg te vinden op het web, dat is het probleem niet. Maar.
Deze color pickers hebben nagenoeg altijd dezelfde structuur. Veelal wordt gebruik gemaakt van RGB in de doseringen 0, 20, 40, 60, 80 en 100% verzadiging (in hex waarden hebben we het dan over respectievelijk F, C, 9, 6, 3 en 0).

Als je die kleuren als strings gaat behandelen en als dusdanig sorteert; dit vervolgens in een HTML tabel vertaalt dan krijg je een resultaat te zien dat nagenoeg iedere color-picker laat zien. Een resultaat met 6 verschillende `groepen`, namelijk alle kleuren die beginnen met F, alle kleuren die beginnen met C, etc.

Ik ben weer lekker op dreef met uitleggen- maar mijn vraag is of er een algoritme bestaat die mij uit kan leggen hoe men een ronde color picker toont en dan met name de theorie die hierachter schuilt qua logica. Werken met kleuren is namelijk altijd te relateren aan logica.

Ik ben al een poosje aan het zoeken, maar ik heb het gevoel dat er genoeg mensen zijn hier die me een duw in den goede richting kunen geven..

Ik ben op zoek naar de logische theorie van de kleuren in dit voorbeeld (JPG).
(waarbij er in de theorie wellicht uitgegaan wordt van een horizontale vervolgens verticale opbouw?)

[ Voor 8% gewijzigd door Verwijderd op 19-01-2005 09:35 ]

[Janoz]

Als eerste kun je je verdiepen in het omrekenen van/naar RGB naar/van HSV (of HSB). Bij de tweede methode maak je gebruik van een hue (welke kleur) saturation (van grijs naar velle kleur) en de value/brightness (de licht/donkerheid van de kleur).

De kleuren circel die je daar tekent heeft bij lange na niet alle kleuren. Zwart zit er niet tussen bijvoorbeeld. Waarschijnlijk is in die circel de hoek de saturation en de straal de brightness.

Een echt twee dimensionaal plaatje kun je niet krijgen omdat je nu eenmaal 3 variabelen hebt. Je zit dus altijd vast aan een 3D weergave wat op een scherm alleen maar benaderd kan worden met 3x een 1D (een slider bv) of 1x een 2D plus 1x 1D (zoals de collorpicker in windows werkt).

[ Voor 25% gewijzigd door Janoz op 19-01-2005 09:45 ]

[BtM909]

Heb wel een aantal werkende JS versies gevonden. Heb nog niet naar de code gekeken

http://www.geocities.com/bodiles/colorwheel.html
http://js-x.com/javascript/?view=956 (plaatje is stoek)

[VyperX]

Ok, hier is mijn "theorie"...

We beginnen met een standaard saturatie van 240.

Het idee is nu dat van het middelpunt naar buiten, alleen de luminantie veranderd, waarbij het middelpunt luminantie 240 heeft, en de buitenste ring slechts luminantie 120 (ongeveer).

De hoek bepaalt hierbij de hue, oftewel de "kleur"

Welke hoek (hue) je ook kiest, met luminantie 240, krijg je altijd wit (het middelpunt).

Doordat we de saturatie vast hebben gezet, hebben we nu echter geen "grijs" achtige kleuren.

Anyway, gewoon een theorie... Als iemand een betere heeft...

[Verwijderd]

Janoz schreef op woensdag 19 januari 2005 @ 09:43:
Een echt twee dimensionaal plaatje kun je niet krijgen omdat je nu eenmaal 3 variabelen hebt. Je zit dus altijd vast aan een 3D weergave wat op een scherm alleen maar benaderd kan worden met 3x een 1D (een slider bv) of 1x een 2D plus 1x 1D (zoals de collorpicker in windows werkt).

Ik dank u vriendelijk; bovenstaand was hetgeen ik eigenlijk naar opzoek was besef ik nu. Ik was zelf bezig om de theorie te bedenken en kon maar niet bevatten waarom het niet mogelijk leek te zijn.

Oplossing:
Het heeft dus inderdaad te maken met drie variabelen en daarvoor moet gebruik worden gemaakt van minimaal 1 variabele setting als het op weergeven aankomt. Helemaal top, dank voor het opstapje- ik weet zeker dat ik nu verder kan.

[.oisyn]

VyperX schreef op woensdag 19 januari 2005 @ 09:46:
Ok, hier is mijn "theorie"...

We beginnen met een standaard saturatie van 240.

Het idee is nu dat van het middelpunt naar buiten, alleen de luminantie veranderd, waarbij het middelpunt luminantie 240 heeft, en de buitenste ring slechts luminantie 120 (ongeveer).

De hoek bepaalt hierbij de hue, oftewel de "kleur"

Welke hoek (hue) je ook kiest, met luminantie 240, krijg je altijd wit (het middelpunt).

Doordat we de saturatie vast hebben gezet, hebben we nu echter geen "grijs" achtige kleuren.

Anyway, gewoon een theorie... Als iemand een betere heeft...

Ik denk dat je luminantie en saturatie door elkaar haalt. Het plaatje dat ivy in z'n startpost heeft staan heeft een constante brightness. Een kleur met maximale brightness en minimale saturatie is niet wit maar gewoon die kleur. Pas als je de saturatie omhoog laat gaan gaat het richting wit. Grijs maak je met een willekeurige hue, maximale saturatie en de brightness ergens in het midden.