Kleuren formule

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Oracle Apex Developer

Dit ga je doen Jouw taken bestaan uit: Het bouwen maatwerk Oracle applicaties voor Europese business units; Het implementeren van de nieuwste technieken om te blijven innoveren; Actief meedenken en aandragen van verbetervoorstellen. Hier ga je werken Deze organisatie in de regio Veenendaal is een van wereld grootste retailers met ruim 16.000 winkels in 27 markten en jaarlijks ruim 5,3 miljard klanten die winkelen bij een van hun welbekende retailmerken. Binnen de organisatie is er een IT Group actief die dient als IT Service Provider voor de hele organisatie en waar dagelijks IT'ers werken aan state-of-the-art IT oplossingen. Dit doen

Bekijk vacature »

Full Stack Developer

Ben jij een kei van een full-stack developer? Heb je ambitie om te groeien en jezelf te ontwikkelen binnen een ambitieus bedrijf? Gaat jouw hart sneller kloppen van transpilers of frameworks zoals Angular, Vue of React? Dan ben jij de persoon die wij zoeken! Voor onze opdrachtgever zijn wij op zoek naar een full-stack developer om onderdeel te zijn van een team dat bestaat uit gedreven developers. Ieders met hun eigen specialiteiten en kennis van de projecten en behoeften vanuit de product owners. We zoeken iemand die met zijn/haar huidige competenties en domeinen dit team wil begeleiden, stimuleren en tevens

Bekijk vacature »

Database Developer

Functieomschrijving Heb jij ongeveer 3 jaar ervaring als Database Developer met MS SQL of een vergelijkbare database? Wil jij werken voor een ambitieuze werkgever in regio Tilburg waar jij volledig de mogelijkheid krijgt jezelf te ontwikkelen? Lees dan snel verder! Hoe ziet jouw takenpakket eruit? Je gaat projecten gedurende het hele proces begeleiden. Je sluit aan bij afspraken met klanten om hun processen helder te krijgen. Vervolgens voer jij het project uit en zorgt dat dit zo goed mogelijk verloopt; Je werkt aan nieuwe softwareoplossingen die de logistieke processen verbeteren of vernieuwen; Je houdt je bezig met het ontwikkelen van

Bekijk vacature »

Front-end React developer

Functie Het frontend team bestaat momenteel uit 4 dedicated front-enders en is hard aan het groeien! Ook werken er diverse designers waar je veel mee schakelt. Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren, jij bent hierin de schakel tussen de eindgebruiker en de slimme backend. Je werkt in het frontend team samen met de backend teams en product owners om te zorgen dat onze applicaties een fijne gebruikerservaring opleveren. Ze werken o.a. met: React, Atomic design, Styled components, JavaScript / TypeScript, NPM, Webpack Blade templates, HTML, SCSS, Git flow. Eisen • HBO

Bekijk vacature »

Randstad B.V.- Freelance Senior Fullstack Develope

Startdatum: 01.05.2023 Richttarief: € 75,00 - €85,00 Duur van de opdracht: 1 jaar Uren per week: 40 Werkmodel: Hybride, dinsdag en donderdag aanwezig op kantoor in Diemen en meer wanneer dit nodig is. Functieomschrijving: De ideale kandidaat gaat onderdeel uitmaken van een junior team binnen het foundation domein. Vanuit het foundation domein werkt dit team samen met andere foundation teams en teams uit het online domein (professionals B2B en B2C) voor het bouwen en integreren van HRM functionaliteiten (verlof en benefits) in de persoonlijke portal van Interim Professionals. Er is meer backend werk dan frontend, maar kandidaat moet beiden leuk

Bekijk vacature »

Software Ontwikkelaar

Functieomschrijving In deze uitdagende functie als Software Developer ga je de volgende taken uitvoeren: Maatwerk back-end software programmeren; API koppelingen bouwen; Software optimaliseren voor klanten; Bouwen maatwerk applicaties; Werken met Microsoft stack zoals C#, .NET (Core) en Entity framework; Bedrijfsprofiel Je gaat werken bij een klein softwareontwikkelingsbureau, die maatwerk software bouwt voor klanten door heel Nederland. Dit doen zij al meer dan 20 jaar. Het is van oorsprong een familiebedrijf, opgezet door de eigenaar, die er nog steeds werkt. Het team bestaat vooral uit back-end developers en één systeembeheerder. Je krijgt veel kans om jezelf te ontwikkelen en krijgt tevens

Bekijk vacature »

Medior/Senior Python developer (Django)

Functie Je komt te werken in het IT-team bestaande uit de Lead developer en 4 (medior/senior) developers. Gezamenlijk werken jullie aan de verbetering en uitbreiding van de software. Binnen het development team is er veel vrijheid en zelfstandigheid, zonder dat ze hiermee afdoen aan de kwaliteit. Zo hebben ze elke ochtend een korte stand-up (10:00 uur) en werken ze met pair-programming sessies. Ook is er een hele professionele ontwikkelcyclus waarbij code altijd eerst door een collega wordt getest voordat het naar deployement gaat. Er is een kwaliteitsfocus en dan biedt ruimte om verbeteringen echt door te voeren binnen de gehele

Bekijk vacature »

.Net developer

Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Ga je bij ons als .Net Developer aan de slag? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Als developer bouw je in DevOps teams aan enterprise applicaties, nieuwe IOT, Chatbots of AI oplossingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Natuurlijk krijg jij de mogelijkheid je te certificeren in dit vakgebied. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling. Mede hierdoor zij wij vorig jaar Microsoft Partner of the year geworden.

Bekijk vacature »

Back-end programmeur

Functieomschrijving Heb jij kort geleden je MBO of HBO ICT in ontvangst mogen nemen? Of ben je klaar voor een nieuw hoofdstuk in jouw carrière? Voor een uitdagende werkgever in de regio van Tilburg zijn wij op zoek naar een ambitieuze back-end programmeur met affiniteit met MS Acess. Samen met een enthousiast team ben je verantwoordelijk voor het bouwen van maatwerk software voor hun klanten. Je hebt kennis of ervaring van SQL, Maar affiniteit met MS Acess is nog belangrijker. Je bent sociaal naar klanten en flexibel ingesteld. Je denkt altijd in kansen en gaat graag de uitdaging aan. Verder

Bekijk vacature »

Junior Software Developer

Functie omschrijving Wij zijn op zoek naar een Junior Software Developer .NET, C# voor een gaaf bedrijf in de omgeving van Utrecht! Sta jij aan het begin van je carrière en heb je net je HBO of WO-diploma in de richting van ICT of Techniek mogen ontvangen? En heb jij grote affiniteit met software development? Lees dan snel verder! Voor een opdrachtgever in de omgeving van Utrecht, zijn wij op zoek naar een Junior Software Developer. Werk jij graag aan verschillende projecten en ga je graag klanten op bezoek? Dan is dit de ideale functie voor jou! Binnen deze functie

Bekijk vacature »

Low Code Developer voor o.a. overheidsprojecten!

Bedrijfsomschrijving Wil jij ook behoren tot de specialist in Low Code? Dan zou ik zeker aanraden om verder te lezen. Deze organisatie is ooit opgericht door twee studenten en is inmiddels uitgegroeid tot een serieuze werkgever met een groot aanzien op Low Code projecten. De sfeer is echter niet veranderd, er heerst een informele sfeer met een open deuren beleid, en hierin mag de eigen bar natuurlijk niet ontbreken. Momenteel maakt deze organisatie een flinke groei door en hier kan jij natuurlijk niet bij ontbreken. Daarom ben ik op zoek naar Low Code Developers met een degelijke technische achtergrond. Kennis

Bekijk vacature »

SQL Database developer

Functie omschrijving Wil jij meewerken aan het creëren van slimme software om magazijnen als een geoliede machine te laten lopen? Wij zoeken een zorgvuldig persoon, iemand die niet snel de hand omdraait voor complexe algoritmes. Denk jij dat jij de SQL ontwikkelaar bent die wij zoeken? Lees snel verder en wie weet zitten we binnenkort samen aan tafel! Jouw werkzaamheden zullen er als volgt uitzien: Je houdt je bezig met het ontwerpen en ontwikkelen van MS SQL server databases, dit doe je met T-SQL als programmeer laag. Je gaat aan high-end software oplossingen werken, dit doe je voor de optimalisatie

Bekijk vacature »

Database Developer

Functieomschrijving Wat ga je doen? Als developer ben jij samen met een gemotiveerd team van 10 collega’s verantwoordelijk voor het creëren van aangemeten software voor klanten. Je bent klantvriendelijk en oplossingsgericht ingesteld, omdat het essentieel is om de klanten zo goed mogelijk te helpen met hun uitdagingen. Het is mogelijk om vanuit huis je werkzaamheden uit te voeren, maar het is ook prettig als je in de omgeving van Tilburg woont om naar het kantoor te kunnen komen. Vind jij het leuk om jouw creatieve vaardigheden te benutten om complexe systemen te ontwikkelen? Lees dan snel verder! Bedrijfsprofiel Voor wie

Bekijk vacature »

C# Developer Research and Development - Delft

Vacature details Vakgebied: Software/IT Opleiding: Medior Werklocatie: Delft Vacature ID: 6307 Introductie C# Developer Research and Development - Delft - Onze klant is één van de meest innovatieve bedrijven in de region van Delft. Op dit moment zijn ze voor het innovatie centrum. In het innovatie centrum wordt gewerkt aan de nieuwste technieken voor navigatie software. R&D / C# / Pattern Recognition / Algorithms / 3d Data / DotNET Functieomschrijving Als C# Developer kom je te werken in een innovatief scrumteam. We ontwikkelen en door ontwikkelen de nieuwste technieken op het gebied van navigatie software. Deze software wordt onder andere

Bekijk vacature »

Senior Front-End Developer

Als Senior Front-End Developer bij Coolblue verbeter je de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Wat doe je als Senior Front-End Developer bij Coolblue? Als Senior Front-end Developer werk je aan de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Je vindt het leuk om samen te werken met de UX designer om stories op te pakken. Daarnaast ben je trots op je werk en verwelkomt alle feedback. Ook Senior Front-end Developer worden bij Coolblue? Lees hieronder of het bij je past. Dit vind je leuk om te doen Verbeteren van de gebruiksvriendelijkheid van onze webshop voor miljoenen klanten. Nadenken

Bekijk vacature »

Pagina: 1 2 volgende »

Mark Hogeveen

Mark Hogeveen

15/06/2013 13:01:52
Quote Anchor link
Hallo,

Je hebt veel javascript color chooser plugins.
Dat is bijvorbeeld een popup waar je een soort regenboog van kleuren hebt, en waarbij je vaak heel precies een kleur kunt kiezen. Zoals dit: http://johndyer.name/lab/colorpicker/
Ik wil ook zo iets maken, maar dan simpeler.
Ik wil gewoon een soort regenboog maken. Met javascript maak ik bijvoorbeeld 30 divs die ik 2x2 pixels groot maak en tegen elkaar aan zet.
Met javascript doe ik dan de css "rgb(rood, groen, blauw)"
het rood, groen en blauw kan 0 tot 255 zijn.
Dus het aantal kleuren die kunnen worden gemaakt is:
rood * groen * blauw = 255*255*255 = 16 581 375
Heel veel dus.
Daarom wil ik aan de zijkant een balkje waar je een kleur kiest, bijvoorbeeld rood.
Als je dan rood hebt gekozen kun je daaruit weer donkerder of lichter rood kiezen.
Javascript moet dus niet een paar miljoen divs gaan maken met elk een kleur.
Steeds hoeven er maar 30 te worden gemaakt in een bepaalde tint.

Mijn probleem is dat ik niet weet hoe ik de kleuren kan krijgen.
Ik zoek een soort formule of andere manier om ook paars te krijgen of geel.
Ik ging eerst met een loop de hoeveelheid rood laten oplopen, dan de hoeveelheid blauw, enz.
Maar je moet dus ook rood en blauw mengen ofzo.
Weet iemand hoe ik dit kan doen?
Gewijzigd op 15/06/2013 13:03:33 door Mark Hogeveen
 
PHP hulp

PHP hulp

15/07/2024 20:07:02
 
Erwin H

Erwin H

15/06/2013 13:10:54
Quote Anchor link
Binnen het RGB model is daar niet een eenvoudige formule voor. Check wikipedia http://en.wikipedia.org/wiki/HSL_and_HSV:
Quote:
Most televisions, computer displays, and projectors produce colors by combining red, green, and blue light in varying intensities – the so-called RGB additive primary colors. The resulting mixtures in RGB color space can reproduce a wide variety of colors (called a gamut); however, the relationship between the constituent amounts of red, green, and blue light and the resulting color is unintuitive, especially for inexperienced users, and for users familiar with subtractive color mixing of paints or traditional artists’ models based on tints and shades (fig. 4). Furthermore, neither additive nor subtractive color models define color relationships the same way the human eye does.[7]

For example, imagine we have an RGB display whose color is controlled by three sliders ranging from 0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful orange ?, with sRGB values R = 217, G = 118, B = 33, and want to reduce its colorfulness by half to a less saturated orange ?, we would need to drag the sliders to decrease R by 31, increase G by 24, and increase B by 59, as pictured below. Needless to say, these numbers seem mostly arbitrary.

Je zal dus over moeten stappen naar bijvoorbeeld HSL (hue, saturation, lightness) of HSV (hue, saturation, value). Dat is ook wat die colorpickers gebruiken. Meestal worden ook de RGB waardes vermeld omdat dat makkelijker te begrijpen is voor de meeste gebruikers, maar als je vanuit RGB gaat werken krijg je al snel kleuren die helemaal niet meer op elkaar lijken.

Zelf maken hierin lijkt misschien wel makkelijk, maar zonder gedegen kennis van kleuren en hoe je daar mee kunt werken is het vrij lastig. Beter dan om zo'n colorpicker te gebruiken. Er zijn er genoeg te vinden.
 
Mark Hogeveen

Mark Hogeveen

17/06/2013 18:15:08
Quote Anchor link
En als ik het toch gewoon in RGB doe? Dan krijg je dus het probleem dat het op het ene scherm andere kleuren worden dan op het andere scherm?
Dus rood wordt op het ene scherm iets donkerder/lichter dan op het andere scherm?
 
Erwin H

Erwin H

17/06/2013 18:41:10
Quote Anchor link
Nee, het gaat niet om kleurverschillen tussen schermen (dat krijg je wel door andere instellingen, maar dat heeft niets te maken met het kleursysteem dat je kiest). Het probleem is dat 30 tinten rood niet zo makkelijk te vinden zijn, in elk geval niet programmatisch. Neem een willekeurige kleur en ga dan een beetje heen en weer schuiven met de RGB waardes. Je zal zien dat de kleuren die je krijgt dan al snel niets meer met je startkleur te maken hebben.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

17/06/2013 19:00:47
Quote Anchor link
Harry hogeveen op 15/06/2013 13:01:52:
Dus het aantal kleuren die kunnen worden gemaakt is:
rood * groen * blauw = 255*255*255 = 16 581 375
Heel veel dus.


Mag ik je direct even corrigeren Harry?

van 0 t/m 255 zijn 256 mogelijkheden. 256 ^ 3 = 16777216.
 
Wouter J

Wouter J

17/06/2013 19:05:56
Quote Anchor link
Frank, harry is wel juist. Er zijn 255 mogelijkheden, het 256ste getal is namelijk 100 en dat is geen kleur meer. Je wilt 00 t/m ff en dat zijn er 255.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

17/06/2013 19:10:22
Quote Anchor link
Wouter van 00 t/m FF zijn er bij mij 256. (hoeveel is 16 * 16 ?)
als we wit en zwart geen kleur willen noemen dan zijn het er twee minder maar dat is een andere discussie
 
Wouter J

Wouter J

17/06/2013 19:11:34
Quote Anchor link
Nee, frank je hebt het nog niet helemaal door. Bekijk eens dit filmpje: http://net.tutsplus.com/tutorials/other/quick-tip-what-the-heck-is-a-hex-value-anyway/
 
Frank Nietbelangrijk

Frank Nietbelangrijk

17/06/2013 19:20:34
Quote Anchor link
Wouter,

filmpje gekeken. en het is precies zoals ik zeg.

ik geef je een ander voorbeeld. Op je telefoon heb je de cijfers 0 t/m 9. hoeveel toetsen zijn dat? 10.


Toevoeging op 17/06/2013 19:40:01:

Op http://en.wikipedia.org/wiki/RGB_color_model kun je het volgende lezen:

By using an appropriate combination of red, green, and blue intensities, many colors can be displayed. Current typical display adapters use up to 24-bits of information for each pixel: 8-bit per component multiplied by three components (see the Digital representations section below). With this system, 16,777,216 (256^3 or 2^24) discrete combinations of R, G and B values are allowed, providing millions of different (though not necessarily distinguishable) hue, saturation, and lightness shades.
Gewijzigd op 17/06/2013 19:41:21 door Frank Nietbelangrijk
 
Erwin H

Erwin H

17/06/2013 19:55:17
Quote Anchor link
Wouter J op 17/06/2013 19:05:56:
Frank, harry is wel juist. Er zijn 255 mogelijkheden, het 256ste getal is namelijk 100 en dat is geen kleur meer. Je wilt 00 t/m ff en dat zijn er 255.

Maar gelukkig zijn we geen Romeinen meer. Wij kennen wel de 0, of in dit geval, de 000. Van 000 t/m 255 zijn 256 mogelijkheden. Frank heeft gelijk wat dat betreft.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

17/06/2013 20:16:21
Quote Anchor link
Erwin H op 17/06/2013 19:55:17:
Maar gelukkig zijn we geen Romeinen meer.

Al hebben we nog wel een Obelix en Idefix hier :-)
Gewijzigd op 17/06/2013 20:17:33 door Frank Nietbelangrijk
 
Erwin H

Erwin H

17/06/2013 20:24:33
Quote Anchor link
Ok, ik zal mijn uitspraak aanpassen:
Quote:
Maar gelukkig zijn de meeste van ons geen Romeinen meer.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/06/2013 21:33:35
Quote Anchor link
Frank, waren de bijdehandjes in de aanbieding bij de Appie? ;-)
Btw, Idefix is een hond en bij mijn weten doen Obelix cs hun uiterste best om niet tot de Romeinen te behoren.

@Harry
Misschien is dit iets
 
Mark Hogeveen

Mark Hogeveen

18/06/2013 11:54:57
Quote Anchor link
Ik wil toch een beetje weten hoe het werkt.
En als ik het met HSL en HSV ga doen, moet er weer een browser worden gebruikt die dit in css ondersteunt.
Van dit soort dingen word ik echt chagrijnig:
http://www.browsersupport.net/CSS/hsl()
Gewijzigd op 18/06/2013 12:01:23 door Mark Hogeveen
 
Wouter J

Wouter J

18/06/2013 11:58:11
Quote Anchor link
gelukkig doen 87% van de browsers dat...

Het is gewoon heel simpel, rgb is hier niet voor gemaakt en kan hier dus niet voor gebruikt worden. Zelfde is alsof je een spijker met een schroevendraaier in de muur wilt krijgen, kan niet, gaat niet en doet niemand.
 
Mark Hogeveen

Mark Hogeveen

18/06/2013 12:00:20
Quote Anchor link
Okee
In hsl / hsv dus.
 
Erwin H

Erwin H

18/06/2013 15:10:41
Quote Anchor link
Harry hogeveen op 18/06/2013 11:54:57:
En als ik het met HSL en HSV ga doen, moet er weer een browser worden gebruikt die dit in css ondersteunt.

Of je rekent de HSL/HSV waardes gewoon om naar RGB als je de kleuren wilt tonen. Daar zijn gewoon formules voor (zie mijn eerdere wikipedia link).
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/06/2013 15:31:49
Quote Anchor link
Of nog makkelijker met een kant en klaar javascript: http://snipplr.com/view/14590
 
Kris Peeters

Kris Peeters

18/06/2013 16:23:35
Quote Anchor link
Zeg, ik weet niet of dit nog relevant is, ik zeg het toch maar.

Je kan inderdaad geen duizenden divs maken van 2 op 2 px (ik zou het toch afraden).
Je kan bv. wel 360 divs naast mekaar leggen, met de 360° hue. Dat geeft dus een strook van rood, oranje, geel, groen,...


Ik heb lang geleden nog een color picker gemaakt.

- De basis daarvan was een transparante .png
Bovenaan helemaal transparant; onderaan zwart, met geleidelijke slope. een aantal seconden werk in photoshop.
Een andere versie was onderaan zwart, boven-links wit, boven-rechts transparant.

Zet die png bovenop die 360 divs; dan krijg je het zelfde beeld als dat gekleurde vierkant van in jouw eerste post (die link). Horizontaal vang je de kleur op (hue), verticaal de lichtsterkte (value).
Voor de saturation moet je nog iets apart maken. 2 dimensies, 2 waarden.
Afhankelijk van de actieve radio button (h, b of s), zie je ongeveer het zelfde als wat ik had.


Geeft dat je inspiratie?

---

Hier wat code waarmee je die regenboog-strook kan maken. Ongetwijfeld niet de meest efficiënte code, maar het vertelt je iets over hoe "hue" werkt.

hsv2rgb en rgb2hsv converters kunnen hier zeer nuttig zijn. Je vindt die wel (zie bv. de post boven deze)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html>
  <head>
    <style>
      .pixel {
        width: 1px;
        height: 100px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="colors"></div>
    <script>
      window.onload = function() {
        var content = '';
        for (var i=0; i<360; i++) {
          content += '<div class="pixel" style="background-color: ' + h2color(i) + ';"></div>'
        }
        document.getElementById('colors').innerHTML = content;
      }
    
      /*
       @param h (0 -> 360 degrees).  0-> red; 30-> orange; 60-> yelow; ...
      */
      function h2color(h) {
        var state = Math.floor(h / 60);             //  0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ;  60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
        var val = Math.floor(255 * (h % 60) / 60);  // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
        switch(state) {
          case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
          case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break;  // in odd states, the variable part decreases from 255 to 0
          case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
          case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
          case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
          case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
          default: var a = 0;
        }
      }
      /**
      *  vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
      */
      function decimalToHex(d, padding) {
        var hex = Number(d).toString(16);
        padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
        while (hex.length < padding) {
          hex = "0" + hex;
        }
        return hex;
      }
    </script>
  </body>
</html>
Gewijzigd op 18/06/2013 16:32:46 door Kris Peeters
 
Mark Hogeveen

Mark Hogeveen

18/06/2013 21:14:22
Quote Anchor link
Dit is wat ik nu ervan heb gemaakt. Het hangt in elkaar van snippets die ik op het internet heb gezocht, maar het is een aardige widget geworden.
(Met dank aan het stukje code van Kris Peters)
Live demo: http://htmlpaste.com/f767bad51984b17322f1fbc7106fbc49d7019b6f
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html>
<head>
<style>
.pixel {
width: 1px;
height: 100px;
float: left;
}
.color-chooser {
width: 360px;
border: 1px solid gray;
border-radius: 4px;
padding: 10px;
}
.color-chooser .color-pointer {
height: 10px;
}
.color-chooser .color-pointer div {
width: 0px;
border-top: 8px solid black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 0px solid transparent;
position: relative;
left: -4px;
}
.color-chooser #colors {
height: 100px;
cursor: crosshair;
}
.color-chooser-fields {
width: 200px;
background-color: #f2f2f2;
border: 1px solid #d3d3d3;
margin: 5px 0px 0px 0px;
padding: 5px;
float: left;
}
.color-chooser label {
display: block;
padding: 2px 0px 2px 0px;
}
.color-chooser label input {
width: 140px;
float: right;
}
.color-editing {
float: left;
margin: 5px 0px 0px 5px;
}
#current-color {
width: 100px;
height: 30px;
}
#previous-color {
width: 100px;
height: 30px;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="color-chooser" id="color-chooser">
    <div class="color-pointer"><div id="color-arrow"></div></div>
    <div id="colors"></div>
    <div class="color-chooser-fields">
        <label>Hex:<input type="text" /></label>
        <label>Rood:<input type="text" /></label>
        <label>Groen:<input type="text" /></label>
        <label>Blauw:<input type="text" /></label>
        <label>Tint:<input type="text" /></label>
    </div>
    <div class="color-editing">
        <div id="current-color" title="Gekozen kleur">
        </div>
        <div id="previous-color" title="Vorige kleur">
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<script>
    window.onload = function() {
        var colors = document.getElementById('colors');
        var content = '';
        for(var i=0; i<360; i++) {
            px = document.createElement("div");
            px.className = "pixel";
            px.style.backgroundColor = h2color(i);
            (function(index) { px.onclick = function() {
                selectColor(this, index);
            }})(i);
            colors.appendChild(px);
        }
    }
    
    /*
    @param h (0 -> 360 degrees).  0-> red; 30-> orange; 60-> yelow; ...
    */
    function h2color(h) {
        var state = Math.floor(h / 60);             //  0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ;  60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
        var val = Math.floor(255 * (h % 60) / 60);  // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
        switch(state) {
            case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
            case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break;  // in odd states, the variable part decreases from 255 to 0
            case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
            case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
            case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
            case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
            default: var a = 0;
        }
    }
    /**
    *  vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
    */
    function decimalToHex(d, padding) {
        var hex = Number(d).toString(16);
        padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
        while (hex.length < padding) {
            hex = "0" + hex;
        }
        return hex;
    }
    function selectColor(clickedPx, index) {
        bg = clickedPx.style.backgroundColor;
        inputs = document.getElementById("color-chooser").getElementsByTagName("input");
        inputs[0].value = "#" + rgbToHex(bg);
        bg = bg.match(/[0-9]{1,3}/g);
        inputs[1].value = bg[0];
        inputs[2].value = bg[1];
        inputs[3].value = bg[2];
        inputs[4].value = rgbToHsl(bg[0], bg[1], bg[2])[0] * 360;
        
        document.getElementById("color-arrow").style.left = index - 4 + "px"; // -4 for the half arrow width
        document.getElementById("previous-color").style.backgroundColor = document.getElementById("current-color").style.backgroundColor;
        document.getElementById("current-color").style.backgroundColor = clickedPx.style.backgroundColor;
    }
    function rgbToHex(c) {
        var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
        return m ? (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
    }
    function rgbToHsl(r, g, b){
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min){
            h = s = 0; // achromatic
        }else{
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return [h, s, l];
    }
</script>
</body>
</html>
Gewijzigd op 18/06/2013 21:16:03 door Mark Hogeveen
 
Wouter J

Wouter J

18/06/2013 21:15:57
Quote Anchor link
Je wilt iets zelf maken omdat je er iets van wilt leren en vervolgens maak je een script die uit losse copy/past scriptje samenhangt, wat gaat er mis?
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.