CSS Fundamentals: Arbeta med färger

Det finns många faktorer att tänka på när du utformar en webbplats; typsnitt, UX -flöde och mycket mer. Ett mycket viktigt designelement är färg. Även enkla beslut som märkesfärg, kantfärg och bakgrundsfärg ger en bestämd och märkbar effekt.

I den här artikeln kommer vi att täcka grunderna i CSS-färger och lära oss hur man omvandlar en HTML-webbplats till en oklanderligt snygg webbplats.

Komma igång med CSS -färger

Det finns ett visst sätt att beskriva färger i CSS som en dator kan förstå. Det görs vanligtvis genom att bryta färgen i olika komponenter, beräkna en blandad uppsättning primära färger för att bilda önskad färg. Det finns flera olika sätt att beskriva en färg i CSS.

Använda färgnamn som nyckelord

Det finns cirka 140 CSS -färgnamn som de flesta moderna webbläsare stöder. Det kan vara så enkelt som röd eller cyan för färgnyckelordet. Även om det hjälper med ett måttligt utbud av färger, är du begränsad till några få färger med noll kontroll över nyanser och nyanser. Det är här du måste hoppa till det högre utbudet av CSS -färgalternativ.

/*Syntax*/
färgen röd;
färg: crimson;
färg: slateblue;

Använda RGB -värden

När du skapar en webbplats eller en app, kommer färgschema spelar stor roll - det borde definitivt inte vara det sista du tänker på. I CSS kan du använda tre metoder för att representera en RGB -färg. Dessa är hexadecimal strängnotation, RGB -funktionell notation och HSL -funktionell notation. Här är en närmare titt på var och en av dem.

Hexadecimal strängnotation

Hexadecimal strängnotation börjar alltid med tecknet #. Efter detta tecken anger du färgerna med hexadecimala siffror i en specifik färgkod. Strängen är inte skiftlägeskänslig, men det är vanligt att använda små bokstäver. Här är några användningsfall:

#rrggbb

Det är det vanligaste sättet att beskriva en numerisk färg. Det är en helt ogenomskinlig färg med röda, gröna och blå komponenter som 0xrr, 0xgg, och 0xbb respektive.

#rrggbbaa

Den följer RGB -kriterierna som beskrivs ovan med en alfakanal som hanterar färgens renhet. Ju lägre 0xaa värdet är, desto mer genomskinlig blir färgen.

#rgb

Om du har färg #556677, du kan helt enkelt skriva det som #567 eftersom det representerar 0xrr, 0xgg, och 0xbb respektive. Till exempel, #000 (eller #000000) är svart medan #fff (eller #ffffff) är vit.

#rgba

Den följer ovanstående kriterier med en alfakanal som anges av 0xaa för att kontrollera opacitet.

RGB funktionell notation

RGB -funktionell notation representerar färger med röda, gröna och blå komponenter. Det definieras med hjälp av rgb () -funktion som accepterar ingångsparametrar i form av primära röda, gröna och blåa komponenter (och en valfri alfakanal). De röda, gröna och blå värdena måste vara ett heltal mellan 0 till 255 (inklusive), eller en procentandel som varierar från 0% till 100%. Å andra sidan accepterar alfakanalen värden från 0,0 (helt transparent) till 1,0 (helt ogenomskinligt). Det accepterar också procentuellt värde från 0% (samma som 0,0) och 100% (samma som 1,0).

/*Syntax*/
färg: rgb (rr, gg, bb);
färg: rgba (rr, gg, bb, a);

HSL funktionell notation

HSL funktionell notation representerar färg med färgton, mättnad och ljusstyrka. Det är väldigt likt rgb () funktion när det gäller användning. Du kan enkelt hitta hexvärdet för valfri färg på din datorskärm. I denna färgmetod definierar nyansen den faktiska färgen enligt positionen på färghjulet. Mättnad är andelen grått med högsta möjliga nyans. Ljusstyrka övergår färgen från sitt mörkaste till ljusaste möjliga utseende när den ökar.

Nyansvärdet (H) specificeras av den vinklade enheten som stöds i CSS. Det inkluderar deg, rad, grad, och sväng. Mättnad (S) anger procentandelen av den slutliga färgen som består av nyans. Ljusstyrkan (L) -komponenten definierar grånivån.

/*Syntax*/
färg: hsl (XXdeg, XX%, XX%);
färg: hsl (XXturn, XX%, XX%);

Tillämpa färger på HTML -element

I CSS, Färg egenskap definierar förgrundsfärgen för innehållet och bakgrundsfärg definierar bakgrundsfärgen för innehållet strukturerat av HTML. När ett element återges kan du styra det med färgegenskaperna.

Färgfastighet för texter

De Färg egendom används när du ritar text och när du behöver någon form av textdekorationer. Du kan använda text-dekoration-färg egenskap för att göra under-, över- eller genomslagslinjer i olika färger. Du kan ändra bakgrundsfärgen på texten med bakgrundsfärg fast egendom. Du kan använda en skuggeffekt på text med text-skugga fast egendom. Du kan välja text-betoning-färg medan du ritar tonviktssymboler i textfält.

Färgfastighet för lådor

Som du vet följer allt på en webbsida boxmodellen. Varje element är således en låda med något slags innehåll och valfri vaddering, kant och marginalområde. Du kan använda bakgrundsfärg egendom när det inte finns något förgrundsinnehåll. När du ritar en linje för att separera kolumnerna i en text kan du använda kolumn-regel-färg egendom för det. Det är en konturfärg egenskap för att färga konturen. Observera att en kontur skiljer sig från gränsen - den fungerar som en fokusindikator.

Färgfastighet för gränser

Alla HTML -element kan ha en kant. Du kan ställa in gräns färg egendom som kant-topp-färg, kant-höger-färg, kant-botten-färg, och kant-vänster-färg för att ställa in kantfärgen på motsvarande sidor. Att använda shorthand -egenskapen är dock god praxis.

De border-inline-start-color med egenskapen kan du färga kanterna på gränsen som är närmast början. Å andra sidan, border-inline-end-color egenskap låter dig färga slutet på början av textraderna i en ruta. Även om det varierar beroende på din skrivläge, textorientering, och riktning.

Förpackning: Färg och tillgänglighet

Även om en vackert utformad webbplats påverkas starkt av färgen som används, bör du alltid se till att den är tillgänglig. Felaktig användning av färg kan resultera i förlust av betydande trafik på din webbplats.

Det är helt upp till dig att använda hexadecimala strängnotationer, färgnamn eller RGB -värden. Se bara till att du använder färger för att stärka befintlig text och låt den följa en bestämd visuell hierarki. Att lära dig mer om färgteori och skapa din egen palett är en enastående idé om du är en spirande webbutvecklare. Till dess, glad och färgstark kodning!

Hur man använder färgteori för att höja dina kreativa projekt

Genom att använda rätt färger på rätt sätt kan du ta dina kreativa projekt till en helt ny nivå.

Läs Nästa

Om författaren