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ådana egenskaper inkluderar den uppenbara färgen och bakgrundsfärgen, men också kantfärg, konturfärg och textskugga, bland annat.

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 ersätter du helt enkelt color_name med den specifika färg du vill använda. Om du till exempel vill ställa in textfärgen för 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, AF), 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 för 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 finns verktyg för att hitta hex-koderna för färger du stöter på 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);

Ersätt 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 färgen vit:​​​​​

 .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 representerar rött_värde, grönt_värde och blått_värde 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: RGB och RGBA låter dig kontrollera färger exakt, vilket gör det lättare att välja exakta nyanser och skapa visuellt attraktiva mönster. 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-riktlinjerna kan hjälpa dig att säkerställa 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).

Ljushet: 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);

Med den här syntaxen ersätter du nyansvärde, saturation_procent och ljushetsprocent 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 ett div-element satt till 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 att 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.