Färg - Versionshistorik

PGJ den 31 oktober 2020 kl. 13.08

2020-10-31T13:08:12Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.08
Rad 38:		Rad 38:

	För CSS, så påbörjas varje färgvärde med ett <code>#</code>-tecken, så här skulle en svart bakgrundsfärg anges:		För CSS, så påbörjas varje färgvärde med ett <code>#</code>-tecken, så här skulle en svart bakgrundsfärg anges:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: #000000;		background-color: #000000;
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	medan helgrön skulle anges så här:		medan helgrön skulle anges så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: #00FF00;		background-color: #00FF00;
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Observera att man ''inte'' behöver skriva hexadecimala tal med versaler. Faktum är att man nästan jämt skriver dem med gemena (små bokstäver). Vi har bara skrivit dem med stora här för att de ska vara lättare att urskilja ifrån resten av texten. Det är alltså att föredra att skriva <code>ff</code> snarare än <code>FF</code>.		Observera att man ''inte'' behöver skriva hexadecimala tal med versaler. Faktum är att man nästan jämt skriver dem med gemena (små bokstäver). Vi har bara skrivit dem med stora här för att de ska vara lättare att urskilja ifrån resten av texten. Det är alltså att föredra att skriva <code>ff</code> snarare än <code>FF</code>.
	==== kortformat ====		==== kortformat ====
	Det finns även en variant där man bara anger tre hexadecimala siffror. Webbläsaren kommer att tolka det som om varje siffra står två gånger, dvs; <code>#000</code> tolkas som <code>#000000</code>, medan <code>#BAD</code> tolkas som <code>#BBAADD</code>. Det är alltså ett kort och koncist sätt att skriva vissa färger, men man kan inte blanda till precis vilken färg som helst. För att sätta svart bakgrundsfärg skulle vi göra så här;		Det finns även en variant där man bara anger tre hexadecimala siffror. Webbläsaren kommer att tolka det som om varje siffra står två gånger, dvs; <code>#000</code> tolkas som <code>#000000</code>, medan <code>#BAD</code> tolkas som <code>#BBAADD</code>. Det är alltså ett kort och koncist sätt att skriva vissa färger, men man kan inte blanda till precis vilken färg som helst. För att sätta svart bakgrundsfärg skulle vi göra så här;
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: #000;		background-color: #000;
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Ovanstående är för övrigt det kortaste sättet på vilket man kan ange en svart färg.		Ovanstående är för övrigt det kortaste sättet på vilket man kan ange en svart färg.

	=== Blanda RGB-färger, decimalt ===		=== Blanda RGB-färger, decimalt ===
	Man kan även ange färger med decimala siffror, det blir dock lite längre än det kompakta sätt vi såg ovan. Detta görs med <code>rgb()</code>-kommandot. Om vi vill sätta svart bakgrundsfärg med denna metod kommer det att se ut så här:		Man kan även ange färger med decimala siffror, det blir dock lite längre än det kompakta sätt vi såg ovan. Detta görs med <code>rgb()</code>-kommandot. Om vi vill sätta svart bakgrundsfärg med denna metod kommer det att se ut så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: rgb(0,0,0);		background-color: rgb(0,0,0);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Som man förväntar sig kan man sätta varje värde ovan mellan 0 och 255.		Som man förväntar sig kan man sätta varje värde ovan mellan 0 och 255.

Rad 72:		Rad 66:

	Vill du ha helvitt, kan du göra så här:		Vill du ha helvitt, kan du göra så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: rgb(100%,100%,100%);		background-color: rgb(100%,100%,100%);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Vill du ha en blågrå färg, kanske detta passar:		Vill du ha en blågrå färg, kanske detta passar:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: rgb(50%,50%,75%);		background-color: rgb(50%,50%,75%);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	=== HSL ===		=== HSL ===
Rad 95:		Rad 85:

	Så här sätter du svart bakgrundsfärg med <code>hsl()</code>.		Så här sätter du svart bakgrundsfärg med <code>hsl()</code>.
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: hsl(0,0%,0%);		background-color: hsl(0,0%,0%);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Kolla in artikeln om HSV/HSL på Wikipedia om du vill veta mer; [https://www.wikiwand.com/sv/HSV_(f%C3%A4rgsystem) HSV färgsystem].		Kolla in artikeln om HSV/HSL på Wikipedia om du vill veta mer; [https://www.wikiwand.com/sv/HSV_(f%C3%A4rgsystem) HSV färgsystem].
Rad 109:		Rad 97:

	För att ange en halvgenomskinlig, svart bakgrund kan man göra så här:		För att ange en halvgenomskinlig, svart bakgrund kan man göra så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: rgba(0,0,0,0.5);		background-color: rgba(0,0,0,0.5);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	eller så här;		eller så här;
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	background-color: hlsa(0,0%,0%,0.5);		background-color: hlsa(0,0%,0%,0.5);
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Lägg märke till att alfakanalen använder punkt istället för kommatecken.		Lägg märke till att alfakanalen använder punkt istället för kommatecken.

PGJ: /* Alfakanaler */

2019-04-09T13:09:07Z

Alfakanaler

← Äldre version		Versionen från 9 april 2019 kl. 13.09
Rad 122:		Rad 122:
	</div>		</div>

	Lägg märke till att ~~man~~ använder ~~"<code>.</code>"~~ istället för kommatecken.		Lägg märke till att alfakanalen använder punkt istället för kommatecken.

	== Bra verktyg ==		== Bra verktyg ==

PGJ: /* kortformat */

2019-04-09T13:07:13Z

kortformat

← Äldre version		Versionen från 9 april 2019 kl. 13.07
Rad 51:		Rad 51:
	Observera att man ''inte'' behöver skriva hexadecimala tal med versaler. Faktum är att man nästan jämt skriver dem med gemena (små bokstäver). Vi har bara skrivit dem med stora här för att de ska vara lättare att urskilja ifrån resten av texten. Det är alltså att föredra att skriva <code>ff</code> snarare än <code>FF</code>.		Observera att man ''inte'' behöver skriva hexadecimala tal med versaler. Faktum är att man nästan jämt skriver dem med gemena (små bokstäver). Vi har bara skrivit dem med stora här för att de ska vara lättare att urskilja ifrån resten av texten. Det är alltså att föredra att skriva <code>ff</code> snarare än <code>FF</code>.
	==== kortformat ====		==== kortformat ====
	Det finns även en variant där man bara anger tre hexadecimala siffror. Webbläsaren kommer att tolka det som om varje siffra står två gånger, dvs; <code>#000</code> tolkas som <code>#000000</code>, medan <code>#BAD</code> tolkas som <code>#BBAADD</code>. Det är alltså ett kort och koncist sätt att skriva vissa färger, men man kan inte blanda till precis vilken färg som helst. För att sätta svart bakgrundsfärg skulle vi göra så här;'		Det finns även en variant där man bara anger tre hexadecimala siffror. Webbläsaren kommer att tolka det som om varje siffra står två gånger, dvs; <code>#000</code> tolkas som <code>#000000</code>, medan <code>#BAD</code> tolkas som <code>#BBAADD</code>. Det är alltså ett kort och koncist sätt att skriva vissa färger, men man kan inte blanda till precis vilken färg som helst. För att sätta svart bakgrundsfärg skulle vi göra så här;
	<div class="well well-cyanide-light">		<div class="well well-cyanide-light">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">

PGJ: /* Blanda RGB-färger, hexadecimalt */

2019-04-09T13:06:25Z

Blanda RGB-färger, hexadecimalt

← Äldre version		Versionen från 9 april 2019 kl. 13.06
Rad 35:		Rad 35:
	I webbutveckling så är det vanligaste sättet att blanda färger att man anger RGB-färgernas intensitet med [[hexadecimal]]a tal. Hexadecimala tal är bra för att man kan beskriva åttabitars-värden med två siffror, ifrån 00 till FF (dvs, 0 - 255). (Här kan du lära dig mer om det [https://sv.wikipedia.org/wiki/Hexadecimala_talsystemet hexadecimala talsystemet])		I webbutveckling så är det vanligaste sättet att blanda färger att man anger RGB-färgernas intensitet med [[hexadecimal]]a tal. Hexadecimala tal är bra för att man kan beskriva åttabitars-värden med två siffror, ifrån 00 till FF (dvs, 0 - 255). (Här kan du lära dig mer om det [https://sv.wikipedia.org/wiki/Hexadecimala_talsystemet hexadecimala talsystemet])

	För att beskriva en RGB-färg med denna metod, ~~lägger~~ man samman färgvärdena som ett långt sexsiffrigt hexadecimalt tal. De första två siffrorna anger hur mycket rött som ska ingå, nästa två siffror anger hur mycket grönt som ska ingå och de sista två siffrorna anger hur mycket blått som ska ingå.		För att beskriva en RGB-färg med denna metod, slår man samman färgvärdena som ett långt sexsiffrigt hexadecimalt tal. De första två siffrorna anger hur mycket rött som ska ingå, nästa två siffror anger hur mycket grönt som ska ingå och de sista två siffrorna anger hur mycket blått som ska ingå.

	För CSS, så påbörjas varje färgvärde med ett <code>#</code>-tecken, så här skulle en svart bakgrundsfärg anges:		För CSS, så påbörjas varje färgvärde med ett <code>#</code>-tecken, så här skulle en svart bakgrundsfärg anges:

PGJ: /* Namngivna färger */

2019-04-09T13:05:35Z

Namngivna färger

← Äldre version		Versionen från 9 april 2019 kl. 13.05
Rad 28:		Rad 28:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående skulle färga alla<code>[[p]]</code>-element så att deras bakgrund blir gul och deras textfärg blir svart.		Ovanstående skulle färga alla <code>[[p]]</code>-element så att deras bakgrund blir gul och deras textfärg blir svart.

	Att ange namngivna färger är det enklaste sättet att sätta färg på webben.		Att ange namngivna färger är det enklaste sättet att sätta färg på webben.

PGJ: /* Namngivna färger */

2019-04-09T13:05:17Z

Namngivna färger

← Äldre version		Versionen från 9 april 2019 kl. 13.05
Rad 28:		Rad 28:
	</syntaxhighlight>		</syntaxhighlight>
	</codepen>		</codepen>
	Ovanstående skulle färga ~~ett~~ <code>[[p]]</code>-element så att ~~dess~~ bakgrund blir ~~gult~~ och ~~dess~~ textfärg ~~bli~~ svart.		Ovanstående skulle färga alla<code>[[p]]</code>-element så att deras bakgrund blir gul och deras textfärg blir svart.

	Att ange namngivna färger är det enklaste sättet att sätta färg på webben.		Att ange namngivna färger är det enklaste sättet att sätta färg på webben.

PGJ: /* Webbfärger */

2019-04-09T13:03:55Z

Webbfärger

← Äldre version		Versionen från 9 april 2019 kl. 13.03
Rad 8:		Rad 8:
	På webben anger vi färgerna med åtta bitar per färgkanal. Åtta bitar ger oss 256 möjliga värden, ifrån 0 till 255.		På webben anger vi färgerna med åtta bitar per färgkanal. Åtta bitar ger oss 256 möjliga värden, ifrån 0 till 255.

	Vi har tre färgkanaler och varje kanal styr en av primärfärgerna; <span style="color:red">rött</span>, <span style="color:green">grönt</span> och <span style="color:blue">blått</span>. Dessa primärfärger blandas samman för att åstadkomma alla andra färger. Åtta bitar per kanal och tre färgkanaler, gör att vi kan visa 256^3 färger. Vilket ger cirka 16,8 miljoner färger.		Vi har tre färgkanaler och varje kanal styr en av primärfärgerna; <span style="color:red">rött</span>, <span style="color:green">grönt</span> och <span style="color:blue">blått</span>. Dessa primärfärger blandas samman för att åstadkomma alla andra färger. Åtta bitar per kanal och tre färgkanaler, gör att vi kan visa 256<sup>3</sup> färger. Vilket ger cirka 16,8 miljoner färger.

	I vissa fall anger vi även en så kallad [[alfakanal]]. Denna kanal anger hur genomskinligt något är. Detta är användbart om vi ska mixa samman olika bilder och vill att de olika bilderna ska vara mer eller mindre genomskinliga.		I vissa fall anger vi även en så kallad [[alfakanal]]. Denna kanal anger hur genomskinligt något är. Detta är användbart om vi ska mixa samman olika bilder och vill att de olika bilderna ska vara mer eller mindre genomskinliga.

	== Att ange färger ==		== Att ange färger ==
	Det finns lite olika sätt på vilket vi kan ange färger.		Det finns lite olika sätt på vilket vi kan ange färger.

PGJ: /* RGB */

2019-04-09T13:02:49Z

RGB

← Äldre version		Versionen från 9 april 2019 kl. 13.02
Rad 3:		Rad 3:

	== RGB ==		== RGB ==
	När man jobbar med RGB-färgsystemet, så har man tre grundfärger; <span style="color:red">rött</span>, <span style="color:green">grönt</span> och <span style="color:blue">blått</span>. Genom att blanda de olika grundfärgerna med varierande intensitet får man fram andra färger. Med RGB kan du återge alla de färger som finns i regnbågen.		När man jobbar med RGB-färgsystemet, så har man tre grundfärger; <span style="color:red">rött</span>, <span style="color:green">grönt</span> och <span style="color:blue">blått</span>. Genom att blanda de olika grundfärgerna med varierande intensitet får man fram andra färger. Med RGB kan du återge alla de färger som finns i regnbågen. Vilket väl egentligen inte är den fulla sanningen, olika skärmar, kan återge olika delmängder av regnbågens färger. Få eller inga skärmar klarar av att visa dem alla.

	== Webbfärger ==		== Webbfärger ==

PGJ: /* Bra verktyg */

2019-01-14T13:50:17Z

Bra verktyg

← Äldre version		Versionen från 14 januari 2019 kl. 13.50
Rad 124:		Rad 124:

	== Bra verktyg ==		== Bra verktyg ==
	Ett bra verktyg för att blanda färger och skapa paletter är [https://color.adobe.com/sv/create/color-wheel/ Adobe Color]. Lek runt med det verktyget för att lära dig mer om hur färger blandas. Alla ~~färger~~ du ~~får~~ fram i verktyget går att få som hexvärden ~~som~~ du kan använda direkt i din webbsida.		Ett bra verktyg för att blanda färger och skapa paletter är [https://color.adobe.com/sv/create/color-wheel/ Adobe Color CC]. Lek runt med det verktyget för att lära dig mer om hur färger blandas. Alla färgkombinationer du tar fram i verktyget går att få ut som hexvärden. Vilka du kan använda direkt i din webbsida.

	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[Att lägga till CSS]]		[[Att lägga till CSS]]

PGJ: /* Alfakanaler */

2019-01-14T13:49:16Z

Alfakanaler

← Äldre version		Versionen från 14 januari 2019 kl. 13.49
Rad 103:		Rad 103:

	== Alfakanaler ==		== Alfakanaler ==
	Alfakanaler möjliggör att vi kan sätta hur genomskinlig en färg ska vara. Vi kommer alltså att kunna se igenom färgen och se vad som finns bakom. Det här kanske man vill göra på bakgrundfärgen på en box, så att man kan se igenom till en bild som ligger bakom.		Alfakanaler möjliggör att vi kan sätta hur genomskinlig en färg ska vara. Vi kommer alltså att kunna se igenom färgen och se vad som finns bakom. Det här kanske man vill göra med bakgrundfärgen på en box, så att man t.ex. kan se igenom till en bild som ligger bakom.

	För att ange en alfakanal kan du antingen använda <code>rgba()</code> eller <code>hsla()</code>. Som du förstår av namngivningen på funktionerna, så anger man fyra värden, varav det sista är alfavärdet. Detta värde är mellan <code>0</code> och <code>1</code>. Noll betyder att färgen är helt genomskinlig, dvs den syns inte alls. Medan ett betyder att färgen är helt ogenomskinlig och man inte ser någonting av det som eventuellt finns bakom.		För att ange en alfakanal kan du antingen använda <code>rgba()</code> eller <code>hsla()</code>. Som du förstår av namngivningen på funktionerna, så anger man fyra värden, varav det sista är alfavärdet. Detta värde är mellan <code>0</code> och <code>1</code>. Noll betyder att färgen är helt genomskinlig, dvs den syns inte alls. Medan ett betyder att färgen är helt ogenomskinlig och man inte ser någonting av det som eventuellt finns bakom.
Rad 120:		Rad 120:
	</syntaxhighlight>		</syntaxhighlight>
	</div>		</div>

			Lägg märke till att man använder "<code>.</code>" istället för kommatecken.

	== Bra verktyg ==		== Bra verktyg ==