Kleuren formule

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carrière. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

Consultant Low Code Developer

Functie omschrijving Heb jij verstand van datamodellering, NO CODE Platformen en kun jij het aan om projecten te leiden? Ben jij toe aan een nieuwe uitdaging en ben jij HBO afgestudeerd in de richting van IT? Voor een mooie opdrachtgever in omgeving Delft zijn wij op zoek naar een No Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten. Onderdelen functie Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform, je kunt denken aan Mendix of Betty Blocks. Je bent verantwoordelijk voor

Bekijk vacature »

Back-end Developer

Functieomschrijving Heb jij kort geleden je HBO ICT Informatica diploma in ontvangst mogen nemen? Of heb je een aantal jaar ervaring als Software Developer en ben je klaar voor een nieuw hoofdstuk in jouw carrière? Voor een gewaardeerde werkgever in de regio van Goirle zijn wij op zoek naar een junior/medior Back-end Developer met affiniteit met MS Acess. Samen met een vooruitstrevend team ben je verantwoordelijk voor het ontwikkelen van maatwerk software voor hun klanten. Je hebt kennis of ervaring van SQL en affiniteit met MS Acess. Je bent klantvriendelijk en flexibel ingesteld en vindt het leuk om klanten te

Bekijk vacature »

.NET developer

Functie Heb jij veel kennis van ASP.NET Webforms en wil jij juist de overstap maken naar ASP.NET Core? Wij zijn per direct op zoek naar een ervaren .NET Webdeveloper die met ons samen ons platform wilt herschrijven van ASP.NET Webforms naar ASP.NET Core. Voor jou de unieke kans om met ons samen te innoveren en kennis op te doen van de nieuwste technieken binnen de Microsoft Stack. Wij hebben een development team met 10 IT specialisten bestaande uit onder andere 4 backend .NET developers en twee front-end developers. Wij zijn continu bezig om ons als team en bedrijf te blijven

Bekijk vacature »

Java developer

Als Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze klanten. Geen werkdag is hetzelfde, je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliënt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken: KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Arval en de Politie. Werken bij Sogeti Nieuwe ontwikkelingen volgen we op de voet en delen we binnen de

Bekijk vacature »

Software Ontwikkelaar C# .NET

Functie omschrijving C# .NET Developer gezocht. Ben jij een full stack developer die op zoek is naar een nieuwe uitdaging binnen een leuk snel groeiend bedrijf? Lees dan snel verder! Wij zijn op zoek naar een Developer met ervaring op het gebied van .NET die een organisatie in de regio Amersfoort gaat versterken. Jij gaat je binnen dit bedrijf vooral bezighouden met het verbeteren van de functionaliteiten van hun dataplatform. Samen met andere ontwikkelaars denk je mee in oplossingsrichtingen, architectuur en nieuwe technologieën. Bedrijfsprofiel De organisatie waar je voor gaat werken heeft een onafhankelijk dataplatform ontwikkelt voor de agrarische sector.

Bekijk vacature »

Back-end PHP Software Developer - Juniorfunctie

Functieomschrijving Wij zijn op zoek naar een PHP Software Developer om ons team te versterken en mee te werken aan de ontwikkeling van eigen IOT-oplossingen. In deze functie ben je verantwoordelijk voor het bouwen van webapplicaties, apps en dashboards voor het uitlezen en managen van sensoren in machines. Je werkt nauw samen met een team van ontwikkelaars en engineers om de beste software-oplossingen te creëren. Jouw werkzaamheden zien er als volgt uit: Je bent in deze rol verantwoordelijk voor het ontwerpen, ontwikkelen en onderhouden van webapplicaties en softwaretoepassingen voor in-house ontwikkelde IOT oplossingen. Je werkt aan complexe databases en back-end

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collega’s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

Senior Front-end Developer

Wordt jij de nieuwe Front end specialist / developer? Dan werk je dagelijks met collega’s aan de mooiste IT-projecten. Sogeti is een organisatie met een goede werksfeer en zo min mogelijk hiërarchische verhoudingen. Deze snelgroeiende groep collega’s krijgt energie van hun vak en dat merk je op de werkvloer. Onze klantenkring is groot en divers, dat vraagt om flexibiliteit van jou. Tegelijkertijd betekent dit dagelijks nieuwe dingen leren én dat geen werkdag hetzelfde is. Natuurlijk krijg jij de mogelijkheid je te certificeren. We organiseren regelmatig technische Meet-ups en doen we veel aan kennisdeling waarbij iedereen welkom is, zowel binnen als

Bekijk vacature »

Junior .NET developer

Functie Wij zijn bezig met het ontwikkelen van een nieuw product en wij hebben jouw hulp hierbij nodig! Als junior .NET ontwikkelaar krijg jij de kans om samen met ons deze nieuwe uitdaging aan te gaan! Momenteel bestaat ons team uit drie interim Software Engineers. Twee hiervan zijn zeer ervaren .NET specialisten die inmiddels hun strepen in dit vakgebied al hebben behaald. Ook hebben wij een junior als onderdeel van ons team die zich op dit moment nog bezig houdt met de Front-end (Angular/TypeScript), maar zich nu ook meer gaat verdiepen in de backend. Wij willen ons team graag verder

Bekijk vacature »

Front end developer

Functie Jij als ervaren Front end developer bent een expert het gebied van Javascript en React. Je wordt onderdeel van een multidisciplinair team bestaande uit een PO, twee Front end developers, een DevOps/Back end developer, een UX/UI designer en een projectmanager. Verder is er iemand verantwoordelijk voor de HR en is de algemeen directeur nauw betrokken bij alle projecten. Dagelijks hou jij je bezig met de verschillende projecten die zijn opgenomen in de sprint. Daarnaast denk je mee over mogelijke oplossingen om de behoefte van de klant op de beste manier in te vullen. Verder spar jij intern met collega’s

Bekijk vacature »

Full-stack Developer

As a Full-stack developer at KUBUS, you will develop the (web)applications and services of BIMcollab. You will work on both the front- and back-end. As a software company, KUBUS is in a unique position. We build our own products that are used by tens of thousands of users worldwide. Our company is just the right size: big enough to make a real impact in the market, but small enough that as an individual developer you can have an impact and really make a difference. Our development team consists of over 40 developers, testers, scrum masters and product owners, divided over

Bekijk vacature »

Cymer Patch Server Developer

Vacature details Vakgebied: Software/IT Opleiding: Senior Werklocatie: Veldhoven Vacature ID: 12919 Introductie This new patch server will be built on Python and Django ReST and GraphQL services with a React frontend, it will consist of several microservices and run on a Kubernetes cluster. It will be supported by several middleware applications such as ElasticSearch, Redis, RabbitMQ, Oracle and Artifactory. Functieomschrijving The Patch Admin team always aim to deliver software at a high quality, we avoid sacrifices here to maintain our velocity. Practically this means that we practice test driven development and perform end-to-end automated testing on our software. This means

Bekijk vacature »

Delphi Programmeur

Functie omschrijving Onze opdrachtgever is gespecialiseerd in kantoor-bedrijfssoftware en zit gevestigd in omgeving Numansdorp. Als programmeur ben jij bij dit bedrijf met het volgende bezig; Je vertaalt technische en functionele ontwerpen naar kwalitatieve software. Je ontwikkelt, ontwerpt en test software. Je maakt daarbij veel gebruik met de volgende tools & technologieën: Delphi 10.3 (Rio), QuickReport 6. Je krijgt in deze rol veel vrijheid en verantwoordelijkheid. Je levert projecten van A - Z op, en werkt daarbij projectmatig en gestructureerd. Bedrijfsprofiel Dit bedrijf richt zich op maatwerk software oplossingen. Deze software oplossingen worden ingezet in de financiële branche. Het betreft een

Bekijk vacature »

Frontend Developer

Dit ga je doen Door ontwikkelen van het online platform Deel uitmaken van verschillende ontwikkelteams Meedenken over UI/UX vraagstukken Uitdragen van Front-end binnen de organisatie Hier ga je werken Deze organisatie, gevestigd in de omgeving van Amsterdam, is een grote onderwijs instelling met meerdere vestigingen en een groot aantal studenten. Zo telt deze organisatie +/- 35.000 gebruikers. Bij deze organisatie staat jouw ontwikkeling centraal en is er veel ruimte voor eigen initiatieven. In samenwerking met jouw team ga jij de online omgeving verder ontwikkelen. In de rol van Front end Developer zal jij 50% van jouw tijd werken in het

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

29/03/2024 05:45:27
 
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.