Introduktion till färgnamn i HTML

Färgnamn i HTML spelar en mycket viktig roll i webb- och applikationsdesignprocessen. Det hjälper till att ändra utseendet på vår webbplats eller applikation. Förutom att det gör vår applikation mer attraktiv och interaktiv. Det finns olika sätt att definiera färgnamn i HTML till HTML-kodningsformatet. man kan använda ytterligare CSS-egenskaper för att använda det mer effektivt. Vi kan använda HTML-färgnamn på sidnivå genom att inkludera det i kroppsdelen och också kunna ställa in individuell färg till det specifika elementet. Färgnamn i HTML används avsiktligt för textfärg, bakgrundsfärg, kantfärg, skuggor, lutningar och många fler.

Syntax

  • Det finns olika sätt vi kan använda HTML-färger på. Låt oss se en efter en.
  • Den mycket grundläggande användningen av HTML-färg är att använda den på texten. helt enkelt använda som textfärg för att visa text i olika HTML-färger.

1. Syntax för textfärg

color : color_name;

Låt oss se hur denna syntax fungerar,

Welcome to EDUBCA

I exemplet ovan kommer det att visa texten Välkommen till EDUBCA i en blå färg som:

  • Med hjälp av HTML-färger är det också möjligt att lägga till dem som bakgrundsfärg.

2. Syntax för bakgrundsfärg

background-color:color_name;

Låt oss se hur denna syntax fungerar,

I kategorin finns all designinformation som sprids över många underkategorier i designkursen.

  • Det är också möjligt att lägga till en färgad kant runt text och element med hjälp av HTML-färg med följande syntax:

3. Syntax för kantfärg: kant

value color_name;

Låt oss se hur denna syntax fungerar,

EDUCBA free certification course

Typer av färgnamn i HTML

Det finns olika sätt att definiera färgnamn i HTML. Det är svårt att komma ihåg ett annat namn i olika färger. Så det är att besluta att ge vissa värden till olika färger. Låt oss se en efter en

1. RGB-värde

  • Det är ett av sätten att definiera HTML-färgnamn i kombinationen av röda, gröna och blå färgformatvärden. Vilket används för att definiera färgintensitet mellan siffran 0 till 255?
  • Anta att vi vill definiera en svart färg med RGB-kombination, då kommer den att gilla RGB (0, 0, 0). Här kommer alla färgparametrar att ställas in på 0. Så det visar en svart färg.
  • Liksom en annan RGB (0, 0255) kommer att visa färg blå, på grund av 255 är inställd som det högsta värdet till blått och den andra är 0.
  • Om vi ​​kommer till 3 lika stora RGB-värden kommer det att generera nyanser av en grå färg.

Exempel: RGB (0, 0, 0) för mörkaste färg där RGB (255, 255, 255) för ljusaste färger.

2. HEX-värde

  • Det är ett av de mest använda formatet för ett färgnamn i HTML där färgnamnet kommer att definieras i formatet för ett hexadecimalt värde.
  • #rrggbb-formatet innehåller värden från RR för rött, gg för grönt och bb för blått placeras i mellan 00 toff hexadecimalt värde.
  • Låt oss överväga ett exempel som definierar färg # 00ff00. så dessa värden kommer att genereras färggrönt på grund av grönt som innehåller det högsta värdet (ff) där den andra ska ställas in på 00.

3. HSL-värde

  • Ett annat format för att definiera HTML-färg i form av nyans, mättnad, ljushet.
  • Nu kommer vi att se alla termer en efter en. Nyans definieras som graden av färg som kommer mellan 0 och 360. där 0 för rött, 120 för grönt och 240 för blått.
  • Mättnad definierar färgens värde i procenten, där 0% säger gråtonen där 100% för fullfärg.
  • Ljushet fungerar också som den procentandel som definierar 0% för svart, 50% är varken ljus eller mörk där 100% är för vit.

4. RGBA-värde

  • Denna typ av HTML-färg definierar förlängning för RGB-färg inklusive alfavärde. Där alfa används för att definiera färgens opacitet.
  • Alfavärde kommer mellan 0, 0 (helt genomskinligt) till 1, 0 (inte alls alls)
  • Exempel är rgba (255, 99, 71, 0)

5. HSLA-värde

  • Det fungerar på samma sätt som HSL-färger värderar också alfavärde med det för att definiera färgens opacitet.
  • hsla (8.100%, 80%, 0) för helt transparent färg.
  • hsla (8.100%, 80%, 0.9) för inte så mycket transparent färg.

Exempel på färgnamn i HTML

Låt oss se hur färgnamn i HTML används med hjälp av några exempel som nämns nedan:

Exempel 1

Låt oss överväga ett generellt exempel som visar hur exempelfärgnamn i HTML kommer att användas:

HTML-kod:



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun



About Life…..
Creativity Is Intelligence Having Fun

Du lär dig mer om misslyckande än från framgång. Låt inte det stoppa dig. Fel bygger karaktär. Om du arbetar med något du verkligen bryr dig om, behöver du inte skjuts. Visionen drar dig

Produktion:

Exempel 2

Nu tar vi ett annat exempel som definierar alla typer av HTML-färg på följande sätt:

HTML-kod:



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade



RGB defines Red color
RGB same values define Gray shade
New color using Hex Value
Shade of Gray
hsl color shade
rgba color shade
hsla color shade

Produktion:

I exemplet ovan kan vi se användningen av olika HTML-färgtyper och hur de namnges i HTML.

Exempel 3

En ytterligare användning av HTML-färg är att definiera en gräns till elementet, som är följande:

I exempel här kan vi lägga till en ram till din kodkropp, ändra både bakgrunden och textfärgen också.

HTML-kod:

Självaktualiserande teori talar om inneboende belöningar som är förknippade med arbetsuppgifterna som tillfredsställelse av arbetet, känsla av prestation etc.

Produktion:

Slutsats

Vi kom över att HTML-färger definieras med olika namn, procentvärde, hexvärde, alfavärde och många fler. Färgnamn i HTML används för att göra färg för text, för bakgrund, för en gräns, för graderingar. Det finns olika typer att definiera HTML-färgnamn som RGB, hex, hsl, rgba, hsla.

Rekommenderade artiklar

Detta är en guide till färgnamn i HTML. Här diskuterar vi introduktionen, typer av färgnamn i HTML tillsammans med exempel, syntax och HTML-koder. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -

  1. HTML-stilattribut
  2. HTML-tabell taggar
  3. Bildlänk i HTML
  4. Skapa tabeller i HTML
  5. HTML-händelser

Kategori:

Verktyg för webbutveckling