Farger i CSS

Farger spiller en veldig viktig rolle i utformingen av en webside. I CSS -farger brukes hyppigst til å fargelegge bakgrunn, tekst og kant. Her er poenget hvordan du setter/definerer fargen i CSS?

Vi vil! I CSS kan farger defineres gjennom forskjellige metoder som å bruke forhåndsdefinerte fargenavn, heksadesimale verdier, etc. Denne oppskrivningen vil diskutere følgende metoder for å angi bakgrunnsfarge, tekstfarge og grensefarger:

• Forhåndsdefinerte fargenavn som rød, grønn, oransje osv.
• Heksadesimal fargeverdier som #RRGGBB, #00ff00, etc.
• RGB fargeverdier som RGB (255, 0, 0); RGB (0, 255, 255), etc.
• RGBA fargeverdier som RGB (255, 255, 0, 0.7), RGB (255, 0, 0, 0.1) osv.
• HSL -fargeverdier som HSL (0, 100%, 50%), HSL (240, 100%, 50%), etc
• HSLA -fargeverdier som HSL (0, 100%, 50%, 0.5), HSL (240, 100%, 50%, 0.2) osv

Alle de ovennevnte fargekonvensjoner vil bli diskutert med eksempler. Så la oss starte denne reisen med de forhåndsdefinerte fargenavnene.

CSS forhåndsdefinerte fargenavn

CSS gir mange forhåndsdefinerte fargenavn for eksempel rød, gul, grønn osv. Disse fargenavnene kan brukes til å style bakgrunnen, tekst osv.

La oss forstå konseptet med de forhåndsdefinerte fargenavnene ved å bruke det undergitte eksemplet

Eksempel

La oss si at vi har en

Element og vi vil style tekstfargen ved å bruke forhåndsdefinerte fargeverdier:

Html

Velkommen til Linuxhint.com

CSS

P
Farge: blå;

Bare tilordne fargenavnet til fargeegenskapen, og som et resultat vil du få følgende utdata:

CSS heksadesimal farge

De heksadesimale fargene er definert av en "#”Symbol med seks sifre kode. Det tar verdier fra 0 til 15, men de 10 vil være representert med A, 11 med B, og så videre opptil 15 som vil bli spesifisert med F.

Siden heksadesimal er en sekssifret kode i.E #E3E3E3, de to første sporene for den røde fargen, de to neste for grønt, og de to siste for blå farge. Kombinasjonen av disse seks sifrene spesifiserer en ny farge e.g. #FFFF00 representerer den gule fargen.

Eksempel

De undergitte linjene vil sette den grønne bakgrunnsfargen til

element ved bruk av heksadesimale verdier:

Html

Velkommen til Linuxhint.com

CSS

P
bakgrunnsfarge: #00ff00;

Over kode gir følgende utdata:

CSS RGB -farge

RGB -fargen er kombinasjon av rød, grønn og blå. RGB () -funksjonen tar verdier fra 0 til 255. Å spesifisere forskjellige verdier i RGB () -funksjonen resulterer i forskjellige kombinasjoner av farger. For eksempel vil RGB (255, 0, 0) generere den røde fargen.

Eksempel

Følgende kodestykke spesifiserer RGB -verdien for å angi den grå tekstfargen på avsnittet:

Html

Velkommen til Linuxhint.com

CSS

P
bakgrunnsfarge: RGB (128, 128, 128);

Utgangen angir den grå bakgrunnsfargen:

CSS RGBA -farge

Gjennomsiktighetsfaktoren kan legges til RGB -fargene ved å legge til alfaverdien i den. Alfa -parameteren tar verdiene mellom 0 og 1. Den lavere verdien gjør fargen gjennomsiktig mens den høyere verdien gjør fargen ugjennomsiktig. For eksempel å legge til 0.0 vil gjøre fargen gjennomsiktig, mens 1.0 vil gjøre fargen helt ugjennomsiktig.

Eksempel

La oss legge til alfa -parameteren i eksemplet ovenfor.

Html

Velkommen til Linuxhint.com

CSS

P
Bakgrunnsfarge: RGBA (128, 128, 128, 0.2);

I koden ovenfor 0.2 legges til som verdien av alfa -parameter som gjør bakgrunnsfargen gjennomsiktig:

CSS HSL -farge

HSL er et forkortelse av fargetone, metning og letthet.

• Begrepet fargetone definerer engelen inne i fargehjulet.
• Metning definerer fargens intensitet.
• Letthet spesifiserer letthetsnivået.

Letthet og metning vil bli representert med % tegn.

Eksempel

La oss fargelegge bakgrunnen til

element ved bruk av HSL -fargeverdier.

Html

Velkommen til Linuxhint.com

CSS

P
bakgrunnsfarge: HSL (334, 80%, 56%);

Ovennevnte kode vil angi den rosa bakgrunnen til

element.

CSS HSLA -farge

HSL -fargekonvensjonen kan utvides til HSLA. A representerer alfa -parameteren som brukes til å legge til gjennomsiktighetseffektene på fargen.

Eksempel

La oss utvide det forrige eksemplet litt og legge til alfa -parameteren også:

Html

Velkommen til Linuxhint.com

CSS

P
Bakgrunnsfarge: HSL (334, 80%, 56%, 0.3);

Ovennevnte kode vil vise følgende utdata:

Konklusjon

CSS gir flere farger og metoder for å angi fargen på et element som forhåndsdefinerte fargenavn, kombinasjonen av verdier mellom 0 til 255 i RGB (), eller verdiene for fargetone, metning og lys kan brukes. Videre kan en alfa -parameter brukes med RGB og HSL for å legge til gjennomsiktighetseffekten på fargen. Denne oppskrivningen presenterte en omfattende og utdypet oversikt over CSS-farger og forskjellige metoder for å stille inn fargene i CSS.