raylard.pages.dev






Kan man få hexesot utav färg

Du besitter säkert blivit förbryllad från hur dem hexadecimala färgkoderna inom webbdesign samt webbutveckling fungerar samt detta tänkte jag förklara inom detta inlägget.

Hexadecimala färger existerar egentligen ganska enkla då man väl begripet grundkoncepten likt bygger upp dem.

Ett från dessa grundkonceptet existerar för att dem hexadecimala färgerna bygger vid färgprincipen RGB.

Vilket innebär för att man anger en typ från ”del-värde” likt förmå liknas nära enstaka procentuell intensitet till varenda färgpott likt är:

Mer inom detalj således står ”hexa” för en talsystem var basen existerar 16. vad oss menar tillsammans detta existerar för att talsystemet liksom används på grund av hexadecimala färgkoder skiljer sig ifrån detta oss existerar vana nära (det decimala talsystemet var basen existerar 10) samt likaså talsystem såsom detta binära var basen existerar 2.

För dig likt ej existerar således vän tillsammans hur talsystem fungerar sålunda kunna ni titta nedan ett omfattande översyn samt förklaring:

Matematiska Talsystem förklarat ytterligare på grund av ökad förståelse

I en talsystem därför besitter oss ”x” antal siffror liksom utgör valfritt tal.

T ex.

5 siffror inom nästa följd: 12500 utgör talet tolv tusen fem hundra inom vårt decimala talsystem.

Man är kapabel titta dessa siffervärden gå ifrån motsats till vänster mot vänster.

Där talet längst bort mot motsats till vänster även kunna tecknas upphöjt tillsammans med 0 (^0), var sedan till varenda siffra man rör sid inom sidled åt vänster sålunda ökar exponenten (upphöjt-med-talet)med +1 (^0+1 t ex.

till nästa siffra till vänster ifall siffran längst bort mot höger).

Det är detta vilket avgör olika siffrors ”värde” samt innebörd såsom sen inom sin tur utgör en visst tal.

Ta mot modell det decimala talet 11. eftersom talsystemet existerar från typen ”decimal” därför äger oss basen 10.

Om oss då följer ovan logik tillsammans med för att siffran längst bort mot motsats till vänster ->, existerar något som är lyft eller höjt över omgivningen tillsammans 0 (^0)- då får 1:an längst bort mot motsats till vänster inom talet 11 värdet 1*10^0.

För dig likt ej kommit hit inom matematiken ännu således funkar detta liksom således för att angående en anförande existerar upphöjt tillsammans med 0, oavsett vilket anförande detta existerar, så får oss värdet 1.

Så 10^0 = 1, noggrann likt 12345^0 = 1.

Vi tog 1* 10^0 då vårt maximalt högra värde inom talet 11 plats 1.

ägde oss haft talet 12 ägde oss tagit 2 * 10^0 istället samt då fått talvärdet 2, då uträkningen på grund av 10^0 ännu blir 1 samt oss då får 2*1=2.

Nu då oss äger lite koll vid hur talsystem allmänt fungerar, sålunda är kapabel oss ta ett närmare titt vid vilket vilket sker när vår bas till talsystemet förändras.

Hittills äger oss enbart kollat vid talsystem från den decimala typen var basen existerar 10, det talsystem oss använder mot vardags samt existerar vana vid.

Men inom datatekniken t ex.

då pratar oss ifall bitar, liksom existerar baserade vid det ”binära” talsystemet, var basen istället existerar 2.

För våra hexadecimala färger, använder oss oss istället av en talsystem var basen existerar 16, därav ”hexa”.

Summerat kunna oss yttra att:

Basen upphöjs tillsammans med en steg till varenda bit/siffra såsom representerar vårt anförande ifrån motsats till vänster (->) mot vänster (<-).

För för att förtydliga detta ytterligare kunna oss visa detta tillsammans med en enkelt binärt modell  (då detta existerar enkel för att räkna med) vid 4 bitar likt ser ut likt följer:
0    0    0    0 <- var värdena till vardera bit existerar vilket följer:
23 22   21   20

Som då motsvarar:

8   4   2   1    <- uträknat.

I detta decimala därför fick oss inom grundskolan lära oss för att första talet längst bort mot höger fanns s.k.

”ental” dock dem gav oss inte någonsin den bakomliggande (lite mer avancerade) matematiska anledningen, detta existerar den oss besitter lärt oss nu.

Så för tillfället vet oss för att detta helt enkelt fanns till för att vårt talsystem äger basen 10 samt talet längst bort mot motsats till vänster ständigt får upphöjt tillsammans 0, medan efterföljande anförande åt vänster ökas exponenten tillsammans +1 alltså blir nästa anförande 100+1

osv.

:)

Visst existerar matematik roligt då man väl förstår detta samt får förklaringar på baksidan saker man använt läka sitt liv utan för att äga enstaka ”riktig” bakomliggande förklaring på grund av varför detta plats så? :P

Hursomhelst, för tillfället borde ni förstå hexadecimala färgvärden förbättrad, testa gärna egen samt återkom gärna angående ni skulle äga ämnen ^^


Och eftersom oss förmå ange varenda s.k.

”färgpott” tillsammans med 2 bitar därför (se #RRGGBB <- två färgvärde till plats färgpott) innebär detta för att oss använder oss från en fullt färgpotts-värde på 16^2.

Detta då ^2 motsvarar våra 2 bitar, 16 då varenda bit äger basen 16 inom en hexadecimalt talsystem, 16^2 ger oss 256 tänkbara värden vid 2 bitars lagringskapacitet tillsammans med hexadecimala värde.

Och eftersom man inom datatekniken alltid beräknar med/inklusive 0:an(såvida inget annat specificerats) således kommer oss för att behärska ange värden ifrån 0-255 – då detta inkluderar nollan samt resulterar inom 256 värden!

Så för tillfället då oss besitter detta konceptet uppenbart på grund av oss existerar detta dags för att vandra vidare.

Alla tänkbara hexadecimala färgpotts-värden presenterade

Varje färgpott består alltså från 2 bitar inom hexadecimala värden/2 hexadecimala värden, samt då bör oss kolla vid hur hexadecimala värden från olika typer skrivs samt vilket dessa representationer motsvarar samt innebär, titta nedan:

Hexadecimala värdeDecimala värde
1=1
2=2
3=3
4=4
5=5
6=6
7=7
8=8
9=9

Sen kommer oss mot den intressanta delen – eftersom oss bara är kapabel företräda 1 värde till varenda 1 bit, sålunda kommer talet samt värdet 10 på grund av varenda bit för att orsaka bekymmer på grund av oss, då detta inom detta decimala talsystemet tar upp 2 värden/2 tal/2 bitar.

Som detta då funkar inom hexadecimalt talsystem, då oss måste fortsätta upp mot 16 värden per bit/per värde, således kommer talen ifrån 10-15 för att representeras från bokstäver istället!

(Notera för att jag säger upp mot 15 såsom maxvärde då man ständigt beräknar tillsammans nollan! förmå ses ovan).

Se nedan inventering från återstående hexadecimala värde ifrån 10 upp mot samt tillsammans 15:

Hexadecimala värdeDecimala värde
A=10
B=11
C=12
D=13
E=14
F=15

Som ni för tillfället säkert kunna förstå ifall ni någon gång experimenterat lite egen tillsammans med hexadecimala färger sålunda är kapabel ni titta för att bokstaven F är kapabel tolkas liksom ”fullvärde”.

Detta då F existerar detta högsta värdet varenda bit är kapabel äga inom ett färgpott.

Har oss då 2x F således borde detta då alltså innebära absolut fullt värde på grund av hela färgpotten, alltså 255 inom vårt decimala talsystem då oss får 16^2.

16^2  blir 256, dock inom samt tillsammans för att oss beräknar tillsammans 0:an därför får oss 255 på grund av våra 2 värden/bitar tillsammans med vardera hexadecimalt tal!

Och då förstår ni säkert även för att 2 st.

0:or motsvarar ett ”tom” färgpott vilket då borde leda mot ”avsaknad från färg till den färgpotten”.

Bra liknelser på grund av för att hjälpa tillsammans förståelsen på grund av RGB-färger hämtat ifrån fysiken samt vardagen

Ljus inom fysiken hjälper oss förstå ljus färg inom webbdesign samt webbutveckling

En grymt god jämförelse ifrån fysiken liksom redogör väldigt utmärkt hur RGB fungerar, existerar liknelsen till hur Ljus existerar uppbyggt samt hänger ihop ifall man studera detta närmare.

Ett god praktiskt modell liksom visar vid liknelsen existerar då man tar den ”vita” egenskap som beskriver ett objekts utseende i olika nyanser ifrån vilken belysning likt helst, samt belyser denne genom ett spektrum, sålunda kommer man behärska titta vid andra sidan från spektrumet hur ljuset äger delats upp inom dess olika våglängder.

Detta visar klockrent hur varenda färgerna (i webbdev kontext färgpotterna) bidrar mot för att producera vitt ljus (vit färg inom webbdev sammanhang).

För detta existerar ju identisk såsom gäller på grund av webbdesign samt webbutveckling var då fulla färgpotterna på grund av varenda färgpotter såsom finns – skarlakansröd, smaragdgrön såväl vilket Blå, behövs till för att producera ljus färg!

T ex.

angående man önskar äga vit textfärg blir hexadecimala färgkoden: #FFFFFF.

Svarta kläders ljusabsorption – en vardagsexempel vilket hjälper förklaring från mörk färg inom RGB till webbdesign

På identisk fysiklektion vilket läraren delade insikter likt gav ovan medvetande till detta vita ljuset, därför nämnde läraren även för att detta oss upplever såsom ”svart färg” egentligen existerar avsaknad från färg.

Och för att detta existerar orsaken mot för att svarta plagg blir varma vid sommaren då solen existerar framme.

Detta då den svarta egenskap som beskriver ett objekts utseende i olika nyanser egentligen likt sagt existerar avsaknad från färg/våglängder (för ljus), vilket fullfölja för att den absorberar alla färger (våglängder) såsom solen förser den tillsammans på grund av för att försöka kompensera till dess avsaknad från färg.

Vilket inom sin tur då bildar värmen vi upplever beneath sommarens soliga dagar :)

Detta existerar även varför man existerar vilket svalast i vita textilier vid sommaren.

Av identisk anledning likt på grund av mörk färgs avsaknad från våglängder/färger därför till ljus färg gäller istället motsatsen.

Att ljus färg redan innehåller fulla spektrumet från färger så därför stöter den vita egenskap som beskriver ett objekts utseende i olika nyanser försvunnen samtliga våglängder istället på grund av den existerar redan ”mättad” (skulle man behärska säga) från våglängder.

Sammanfattat därför är kapabel man titta för att vit färg reflekterar/stöter försvunnen allt ljus, då detta redan existerar mättat, samt tar därmed ej heller upp någon värmeenergi inom solen.

Medan det svarta saknar färg samt därför gärna suger åt sig solljusets våglängder samt därmed absorberar värmeenergi.

Primära färgerna liksom utgör våra hexadecimala färgkoder

När detta gäller våra huvudsakliga färger:

Som RGB metoden representerar sålunda är kapabel oss då säkert även förstå för att #FF0000 resulterar inom enstaka skarlakansröd färg då vi fyller år Enbart* den röda färgpotten.

Medan istället #00FF00 resulterar inom enstaka smaragdgrön färg då oss fyller år den färgpotten mot fullo.

Och slutligen då #0000FF ger oss enstaka azurblå färg då denna färgpott existerar fylld mot fullo.

Alternativa färggivningsmetoder inom webbdesign samt webbutveckling

Det fanns ju ganska enkelt!

Dock således blir detta lite mer komplicerat då oss bör försöka producera t ex.

”hälften således full färgpott” inom hexadecimala anförande, etc.

För då man måste räkna vid detta – såvida man ej använder den lite mer ”raka” formen till färggivning inom CSS: rgb(0,0,0) alternativt rgba(0,0,0,0);

Se CanIUse.com på grund av Webbläsarstöd till RGB() samt RGBA() funktionerna inom CSS(3).

existerar enstaka färggivningsmetod inom CSS såsom låter dig ange dem decimala talen på grund av färgpotterna istället på grund av hexadecimalt – alltså från 0-255 färgvärde på grund av varenda färgpott.

existerar enstaka ytterligare färggivningsmetod inom CSS3 såsom låter dig ange även enstaka alpha-kanal på grund av transparens/genomskinlighet(sista värdet inom parentesen).

Genomgång från Hex-Dec värdekonvertering till för att erhålla medvetande till ”hur fulla” dem olika färgpotterna verkligen är

Sådär ja, då vet oss vilket varenda tänkbara bokstavs- samt sifferkombinationer motsvarar.

Vi besitter även lite ”lättsmälta” liknelser på grund av för att anlända minnas hur samt varför mörk, vitt såväl likt dem huvudsakliga (röd, smaragdgrön, blå) färgerna skapas/genereras/byggs upp.

Börja smått – Dela upp hexadecimala färgkoden inom dess 3 beståndsdelar skarlakansröd, smaragdgrön samt Blå

För detta exemplets skull bör oss nyttja oss utav färgkoden #2D9FF0 (notera för att hexadecimala färgkoder är kapabel tecknas både tillsammans med stora såväl likt små tecken (versaler/gemener) väl inom koden – egen föredrar jag för att notera tillsammans med små tecken, dock valt för att nedteckna tillsammans med stora tecken på grund av tydlighetens skull inom detta inlägget).

Om oss bör dela upp #2D9FF0 inom dess tre beståndsdelar får oss likt följer:

2D = skarlakansröd färgpott 9F = smaragdgrön färgpott F0 = azurblå färgpott

Nästa steg – Räkna ut färgpotterna fanns till sig- ifrån hexadecimala mot decimala värden

Vi börjar tillsammans den inledande färgpotten (röd):
2 existerar första angripen inom färgpotten, samt D existerar den andra samt sista angripen inom färgpotten.

Den inledande angripen (längst mot vänster) inom ett färgpott multipliceras tillsammans med 16 då man bör räkna ut detta decimala värdet, samt då möjligen ni fråga varför detta är?

Se foto nedan likt visar varför:

Hexadecimal mot decimal bitvärdes konvertering

Som ni då kunna titta ovan sålunda existerar hexadecimal -> decimal värdekonvertering ganska straight-forward :)

Hexadecimal kortform förklarad

Men innan detta inlägget existerar ovan bör jag även bara liksom hastigast nämna för att hexadecimala färgkoder kan tecknas vid ett s.k.

”kortform” var man bara använder 1 bit per färgpott istället till 2.

Detta går dock Endast* för att utföra angående båda färgpottens värden existerar Identiska* t ex:

Har oss den full-röda färgen: #FF0000 <- sålunda är färgpottens värden identiska – F & F – samt kan därför även tecknas såsom #F00 <- liksom ni säkert noterar existerar även Gröna samt blå färgpotternas värden identiska samt kan även dessa därför förkortas mot 1 bits hexadecimalt färgvärde ;) vilket jag gjorde direkt inom ovan exempel.

Hoppas ni känner för att ni äger fått förbättrad medvetande på grund av hur saker samt domstol ligger mot samt fungerar, samt varför samt för att ni besitter nytta från kunskaperna ni nyss lärt dig.

Tills nästa gång :)

Kategorier:Allmänt utmärkt kunskaper på grund av webbutvecklingCSSCSS3Design & UXDesignverktygGrafisk DesignMatematikTips & TricksWebbläsarkompatibilitetWebbutveckling liksom yrke

Taggar:Användbar insiktBakomliggande förståelseDesigna på grund av webbenFörklaringFront-EndGenomgångHexadecimala färgerSpara bandbreddSpara BytesWebbfärgerWebbkoncept Förklarat