4 sätt att definiera färger i CSS

Viktiga takeaways

• Använda färgnamn: CSS tillhandahåller 145 färgnamn för enkelt och nybörjarvänligt färgval, men alternativen är begränsade och kanske inte uppfyller exakta designbehov.
• Hexadecimala färgkoder: Hexkoder erbjuder ett brett utbud av färgalternativ och exakt anpassning, även om de kan vara mindre intuitiva att använda och komma ihåg.
• RGB- och RGBA-färgvärden: RGB tillåter exakt färgkontroll med numeriska värden, medan RGBA tillför transparens. Att säkerställa tillgängliga färgkombinationer är viktigt.

Färger är bland de mest använda CSS-attributen och spelar en avgörande roll för att forma en webbplatss visuella identitet, humör och användarupplevelse. CSS erbjuder en rad alternativ för att använda färg, var och en skräddarsydd för specifika designbehov och preferenser.

Även om det är lätt att förbise vikten av färgdefinition, kan dina val avsevärt påverka din webbplats utseende och känsla. Att utforska skillnaderna mellan olika metoder och hur man praktiskt tillämpar och kombinerar dem kommer att förbättra din förmåga att skapa visuellt tilltalande webbplatser.

1. Använda färgnamn

CSS ger ett praktiskt sätt att definiera färger med hjälp av namn, och det finns 145 tillgängliga alternativ. Dessa färgnamn sträcker sig från enkla "röda", "gröna" och "blå" till mer specifika nyanser som "korall" eller "lavendel".

Att använda namngivna färger är enkelt: du väljer ett färgnamn som "röd" och använder det i en CSS-egenskap som stöder färgvärden. Sådan egenskaper inkluderar det uppenbara Färg och bakgrundsfärg, men också gräns färg, konturfärg, och text-skugga, bland andra.

Färgnamn är praktiska när du behöver en tillfällig färg för prototyper eller vill hålla din kod lätt att läsa. Här är syntaxen:

color_property: color_name;

I det här fallet är det bara att byta ut färgnamn med den specifika färg du vill använda. Till exempel om du vill ställa in texten Färg av ett stycke till röd, skriv:

p {
color: red;
}

Detta kommer att ge dina stycken en röd textfärg:

Fördelar: De är lätta att läsa och förstå i din CSS-kod. De är nybörjarvänliga, fungerar bra i alla webbläsare och är praktiska för snabba designidéer.

Nackdelar: De har begränsade alternativ och kanske inte erbjuder de exakta nyanser du behöver, vilket begränsar designkreativiteten. Dessutom kanske de inte alltid uppfyller strikta tillgänglighetskrav, och stödet i äldre system kan variera.

2. Hexadecimala färgkoder

Hexadecimala färgkoder, ofta kallade "hex-koder", är de vanligaste metoderna för att specificera färger i webbdesign. Dessa koder består av sex-teckenkombinationer av siffror och bokstäver (0-9, A-F), som representerar blandningen av röda, gröna och blå (RGB) komponenter i en färg.

Även om de är enkla att använda kan det vara svårt att förstå hur de fungerar. Du kan ta en djupdykning i hex-koder att förstå bättre. Här är ett grundläggande exempel på hur du kan använda hex-koder i CSS:

color: #RRGGBB;

I detta format representerar RR, GG och BB de röda, gröna respektive blå komponenterna. Varje komponent kan variera från 00 (ingen intensitet) till FF (maximal intensitet). Om du till exempel vill ställa in bakgrundsfärgen för en webbplatsrubrik till en specifik nyans av blått, kan du använda en hexadecimal kod så här:

header {
background-color: #336699;
}

Detta ger en djupblå färg:

​​​​​

Du kan också använda en stenografi om var och en av de tre komponenterna upprepar samma tecken två gånger. Du kan skriva exemplet ovan som:

header {
background-color: #369;
}

Fördelar: Hexadecimala färgkoder ger ett brett utbud av färgalternativ, så att du kan skapa detaljerade och anpassade nyanser. De erbjuder smidig kontroll över färgval, vilket gör dem idealiska för komplexa designkrav.

Nackdelar: Även om hex-koder är kraftfulla kan de vara mindre intuitiva än namngivna färger. Du kan också stöta på utmaningen att komma ihåg specifika färgvärden. Lyckligtvis, verktyg för att hitta färgernas hexadecimala koder du stöter på är tillgängliga, vilket gör processen mer hanterbar.

3. RGB- och RGBA-färgvärden

Precis som hexadecimala koder låter det här formatet dig specificera färger efter deras röda, gröna och blåa komponenter. Den här gången kan du dock använda vänligare heltal.

RGB-färgvärden

RGB-färgvärden är den näst vanligaste metoden för att definiera färger i CSS. "RGB" representerar rött, grönt och blått, uttryckt som en CSS-funktion med parenteser efter den. Inom parentesen tilldelar du värden till varje färgkanal, från 0 till 255. Detta låter dig styra intensiteten av rött, grönt och blått i den färg du vill använda.

Här är syntaxen:

rgb(red_value, green_value, blue_value);

Byta ut rött_värde, grönt_värde, och blått_värde med sina respektive numeriska värden. Du kan till exempel få vita, svarta och röda färger som de som visas i den här bilden:

När du ställer in alla tre färgkanalerna (röd, grön och blå) till deras maximala värde på 255, resulterar det i den högsta intensiteten för varje kanal, vilket skapar den vita färgen:

.white-box {
 color: rgb(255, 255, 255);
}

När du ställer in alla tre färgkanalerna till deras lägsta värde på 0, representerar det frånvaron av färg i varje kanal, vilket resulterar i svart.

.black-box {
color: rgb(0, 0, 0);
}

Om du ställer in den röda kanalen till dess maximala värde på 255, medan de andra kanalerna hålls på sitt lägsta värde på 0, produceras färgen röd:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA-färgvärden

RGBA fungerar på samma sätt som RGB, den enda skillnaden är inkluderingen av ett alfavärde. "A" i RGBA står för alfa, vilket bestämmer graden av transparens eller opacitet för den valda färgen. Värdet 0 representerar fullständig genomskinlighet, vilket gör färgen helt osynlig, medan värdet 1 representerar full opacitet, vilket gör färgen helt synlig.

RGBA är särskilt användbart när du vill skapa element med olika nivåer av genomskinlighet, till exempel genomskinliga bakgrunder eller bleka text. Den fullständiga syntaxen är:

color: rgba(red_value, green_value, blue_value, alpha_value);

Här, rött_värde, grönt_värde, och blått_värde representerar färgkanalerna som i RGB, och alfa_värde anger graden av transparens.

div {
background-color: rgba(0, 128, 0, 0.5);
}

I det här exemplet tilldelar alfavärdet 0,5 50 % genomskinlighet till den gröna färgen, vilket gör att innehållet under den syns genom:

Fördelar: Med RGB och RGBA kan du kontrollera färger exakt, vilket gör det lättare att välja exakta nyanser och skapa visuellt tilltalande design. De är kompatibla med olika webbläsare, vilket säkerställer att dina valda färger ser konsekventa ut.

Nackdelar: Utmaningen ligger i att säkerställa tillgängliga färgkombinationer. Det är avgörande att vara uppmärksam på kontrastförhållanden, främst när man arbetar med transparens i RGBA. WCAG: s riktlinjer kan hjälpa du säkerställer att din design är tillgänglig.

4. HSL och HSLA färgvärden

HSL – förkortning för Hue, Saturation och Lightness – är en annan CSS-funktion som definierar färger. Ungefär som RGB använder HSL numeriska värden för att representera färger, men det gör det annorlunda. Du kanske är bekant med HSL-värden från UI-komponenter i designappar och på andra ställen.

Nyans: Detta representerar själva färgen med hjälp av grader på ett färghjul, från 0 till 360. Föreställ dig det som att du väljer en punkt på en cirkel, där varje grad motsvarar en annan färg. Till exempel 0 och 360 grader för rött, 120 grader för grönt och 240 grader för blått.

Mättnad: Mättnad bestämmer färgens livlighet eller intensitet. Den definierar färgens förhållande till grått, där 0 % är helt gråskala (omättad) och 100 % är helt mättad (vibrerande och ren).

Lätthet: Ljushet representerar hur ljus eller mörk färgen ser ut. Det är relaterat till färgens position på spektrumet mellan svart (0 %) och vit (100 %). Ett värde på 50 % representerar den normala färgen, medan värden under 50 % gör färgen mörkare och värden över 50 % gör den ljusare.

Förutom HSL finns det HSLA, där "A" står för "alfa". Detta liknar "A" i RGBA och betyder transparens.

Här är syntaxen:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Använd denna syntax, ersätt nyansvärde, saturation_procent, och lightness_procent med de specifika värden du vill ha för varje komponent. Till exempel:

div {
background-color: hsl(120, 100%, 50%);
}

I det här exemplet är bakgrundsfärgen för a div element är inställt på en livlig grön med HSL-värden. 120 representerar nyansen (grön), 100 % är för full mättnad och 50 % ställer in ljusheten till en balanserad nivå.

Fördelar: HSL och HSLA erbjuder mångsidiga färgberäkningar med anpassade CSS-egenskaper. De är mycket kompatibla med moderna webbläsare och möjliggör enkla justeringar av färgens ljushet.

Nackdelar: Att lära sig HSL innebär förstå färgvetenskap, såsom nyanser och mättnad, vilket kan vara mer utmanande än de välbekanta RGB-färgerna.

Omfamna kraften i CSS-färger

Det finns fler metoder du kan kontrollera, och medan du utforskar de olika formaten för att definiera färger i CSS, kom ihåg att du har makten att forma din webbplats utseende, humör och användarupplevelse.

Ditt val av färgformat – oavsett om det är enkla färgnamn, hexadecimala koder, RGB eller HSL – kan påverka hur din publik uppfattar din webbplats. Så experimentera, lär dig och hitta de färgdefinitioner som bäst passar dina designmål.