CSS-ում գույները սահմանելու 4 եղանակ

Անուններից մինչև hex մինչև rgb և hsl, հայտնաբերեք CSS-ի բազմաթիվ եղանակներ, որոնք թույլ են տալիս նկարագրել գույնը:

Հիմնական Takeaways

Գույները CSS-ի ամենատարածված ատրիբուտներից են, որոնք կենսական դեր են խաղում կայքի տեսողական ինքնության, տրամադրության և օգտագործողի փորձի ձևավորման գործում: CSS-ն առաջարկում է գույների օգտագործման ընտրության մի շարք, որոնցից յուրաքանչյուրը հարմարեցված է դիզայնի հատուկ կարիքներին և նախասիրություններին:

Թեև հեշտ է անտեսել գույնի սահմանման կարևորությունը, ձեր ընտրությունը կարող է զգալիորեն ազդել ձեր կայքի տեսքի և զգացողության վրա: Տարբեր մեթոդների միջև եղած տարբերությունների ուսումնասիրությունը և դրանք գործնականում կիրառելու և համատեղելու եղանակները կբարձրացնեն տեսողականորեն գրավիչ կայքեր ստեղծելու ձեր կարողությունը:

1. Օգտագործելով գույների անունները

CSS-ն առաջարկում է գույները անուններով սահմանելու հարմար եղանակ, և առկա է 145 տարբերակ: Այս գույների անունները տատանվում են պարզ «կարմիրից», «կանաչից» և «կապույտից» մինչև ավելի կոնկրետ երանգներ, ինչպիսիք են «մարջանը» կամ «նարդոսը»:

Անվանված գույների օգտագործումը պարզ է. դուք ընտրում եք գույնի անուն, ինչպիսին է «կարմիրը», և այն օգտագործում եք CSS հատկությունում, որն աջակցում է գունային արժեքներին: Նման հատկությունները ներառում են ակնհայտ գույնը և ֆոնի գույնը, ինչպես նաև սահմանի գույնը, ուրվագծային գույնը և text-shadow, ի թիվս այլոց:

Գույների անունները հարմար են, երբ նախատիպի ձևավորման համար ժամանակավոր գույնի կարիք ունեք կամ ցանկանում եք պահել ձեր կոդը հեշտ ընթեռնելի: Ահա շարահյուսությունը.

color_property: color_name;

Այս դեպքում պարզապես փոխարինեք color_name-ը այն հատուկ գույնով, որը ցանկանում եք օգտագործել: Օրինակ, եթե ցանկանում եք պարբերության գույնը դնել կարմիր, գրեք.

p {
  color: red;
}

Սա ձեր պարբերություններին կտա կարմիր տեքստի գույն.

Կողմ. դրանք հեշտ է կարդալ և հասկանալ ձեր CSS կոդը: Դրանք սկսնակների համար հարմար են, լավ են աշխատում բրաուզերների մեջ և հարմար են դիզայնի արագ գաղափարների համար:

Դեմ. նրանք ունեն սահմանափակ տարբերակներ և կարող են չառաջարկել ձեզ անհրաժեշտ ստույգ երանգներ՝ սահմանափակելով դիզայնի կրեատիվությունը: Բացի այդ, դրանք միշտ չէ, որ բավարարում են մատչելիության խիստ պահանջները, և հին համակարգերում աջակցությունը կարող է տարբեր լինել:

2. Hexadecimal Color Codes

Տասնվեցամյա գունային կոդերը, որոնք հաճախ կոչվում են «վեցանկյուն կոդեր», վեբ դիզայնում գույները նշելու ամենատարածված մեթոդներն են: Այս կոդերը բաղկացած են թվերի և տառերի վեց նիշանոց համակցություններից (0-9, A-F), որոնք ներկայացնում են կարմիր, կանաչ և կապույտ (RGB) բաղադրիչների խառնուրդը գույնի մեջ:

Թեև դրանք հեշտ է օգտագործել, հասկանալը, թե ինչպես են դրանք աշխատում, կարող է դժվար լինել: Դուք կարող եք խորը սուզվել վեցանկյուն կոդերի մեջ՝ ավելի լավ հասկանալու համար: Ահա մի հիմնական օրինակ, թե ինչպես կարող եք օգտագործել վեցանկյուն կոդերը CSS-ում.

color: #RRGGBB;

Այս ձևաչափով RR, GG և BB-ն ներկայացնում են համապատասխանաբար կարմիր, կանաչ և կապույտ բաղադրիչները: Յուրաքանչյուր բաղադրիչ կարող է տատանվել 00-ից (առանց ինտենսիվության) մինչև FF (առավելագույն ինտենսիվություն): Օրինակ, եթե ցանկանում եք վեբ կայքի վերնագրի ֆոնի գույնը սահմանել կապույտի որոշակի երանգի, կարող եք օգտագործել հետևյալ վեցանկյուն կոդ.

header {
  background-color: #336699;
}

Սա կստեղծի խորը կապույտ գույն.

Կարող եք նաև օգտագործել սղագրություն, եթե երեք բաղադրիչներից յուրաքանչյուրը կրկնում է նույն նիշը երկու անգամ: Դուք կարող եք գրել վերը նշված օրինակը հետևյալ կերպ.

header {
  background-color: #369;
}

Կողմ. տասնվեցական գունային կոդերը ապահովում են գունային տարբերակների լայն տեսականի, ինչը թույլ է տալիս ստեղծել մանրամասն և հարմարեցված երանգներ: Նրանք առաջարկում են սահուն հսկողություն գունային ընտրության վրա՝ դարձնելով դրանք իդեալական դիզայնի բարդ պահանջների համար:

Դեմ. չնայած վեցանկյուն կոդերը հզոր են, դրանք կարող են ավելի քիչ ինտուիտիվ լինել, քան անվանված գույները: Դուք կարող եք նաև բախվել գունային հատուկ արժեքներ հիշելու դժվարության հետ: Բարեբախտաբար, ձեր հանդիպած գույների վեցանկյուն կոդերը գտնելու գործիքները հասանելի են՝ գործընթացը դարձնելով ավելի կառավարելի:

3. RGB և RGBA գունային արժեքներ

Ինչպես տասնվեցական կոդերը, այս ձևաչափը թույլ է տալիս գույները նշել իրենց կարմիր, կանաչ և կապույտ բաղադրիչներով: Այս անգամ, սակայն, կարող եք օգտագործել ավելի բարեկամական ամբողջ թվեր:

RGB գույնի արժեքներ

RGB գունային արժեքները CSS-ում գույների սահմանման երկրորդ ամենատարածված մեթոդն են: «RGB»-ն ներկայացնում է կարմիրը, կանաչը և կապույտը, որոնք արտահայտվում են որպես CSS ֆունկցիա՝ դրան հաջորդող փակագծերով: Փակագծերի ներսում դուք արժեքներ եք հատկացնում յուրաքանչյուր գունային ալիքին՝ 0-ից մինչև 255: Սա թույլ է տալիս վերահսկել կարմիրի, կանաչի և կապույտի ինտենսիվությունը այն գույնի մեջ, որը ցանկանում եք օգտագործել:

Ահա շարահյուսությունը.

rgb(red_value, green_value, blue_value);

Փոխարինեք կարմիր_արժեքը, կանաչ_արժեքը և կապույտ_արժեքը իրենց համապատասխան թվային արժեքներով: Օրինակ, դուք կարող եք ձեռք բերել սպիտակ, սև և կարմիր գույներ, ինչպիսիք են այս նկարում ներկայացվածները.

Երբ դուք սահմանում եք բոլոր երեք գունավոր ալիքները (կարմիր, կանաչ և կապույտ) իրենց առավելագույն արժեքին՝ 255, դա հանգեցնում է ամենաբարձր ինտենսիվության յուրաքանչյուր ալիքի համար՝ ստեղծելով սպիտակ գույնը.

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

Երբ բոլոր երեք գունային ալիքները սահմանում եք 0-ի նվազագույն արժեքի վրա, այն ներկայացնում է գույնի բացակայությունը յուրաքանչյուր ալիքում, որի արդյունքում սև է:

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

Կարմիր ալիքը դնելով իր առավելագույն արժեքին՝ 255, մինչդեռ մյուս ալիքները պահելով իրենց նվազագույն արժեքի 0-ում, ստացվում է կարմիր գույնը.

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

RGBA գունային արժեքներ

RGBA-ն գործում է նույն կերպ, ինչ RGB-ն, միակ տարբերությունը ալֆա արժեքի ընդգրկումն է: RGBA-ում «A»-ն նշանակում է ալֆա, որը որոշում է ընտրված գույնի թափանցիկության կամ անթափանցիկության մակարդակը: 0 արժեքը ներկայացնում է ամբողջական թափանցիկություն՝ գույնը լիովին անտեսանելի դարձնելով, մինչդեռ 1 արժեքը ներկայացնում է ամբողջական անթափանցություն՝ գույնը լիովին տեսանելի դարձնելով:

RGBA-ն հատկապես օգտակար է, երբ ցանկանում եք թափանցիկության տարբեր մակարդակներով տարրեր ստեղծել, օրինակ՝ կիսաթափանցիկ ֆոն կամ խունացած տեքստ: Ամբողջական շարահյուսությունը հետևյալն է.

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

Այստեղ կարմիր_արժեքը, կանաչ_արժեքը և կապույտ_արժեքը ներկայացնում են գունային ալիքները, ինչպես RGB-ում, իսկ ալֆա_արժեքը սահմանում է մակարդակը: թափանցիկություն։

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

Այս օրինակում 0.5 ալֆա արժեքը կանաչ գույնին վերագրում է 50% թափանցիկություն՝ թույլ տալով, որ դրա տակ գտնվող բովանդակությունը ցուցադրվի հետևյալով.

Առավոտներ. RGB-ն և RGBA-ն թույլ են տալիս ճշգրիտ կառավարել գույները՝ հեշտացնելով ճշգրիտ երանգներ ընտրելը և տեսողականորեն գրավիչ ձևավորումներ ստեղծելը: Դրանք համատեղելի են տարբեր վեբ բրաուզերների հետ՝ ապահովելով ձեր ընտրած գույների համահունչ տեսքը:

Դեմ. մարտահրավերը մատչելի գունային համակցություններ ապահովելն է: Շատ կարևոր է ուշադրություն դարձնել հակադրության գործակիցներին, հիմնականում RGBA-ում թափանցիկության հետ աշխատելիս: WCAG ուղեցույցները կարող են օգնել ձեզ ապահովել, որ ձեր դիզայնը հասանելի է:

4. HSL և HSLA գունային արժեքներ

HSL-ը` Hue, Saturation և Lightness բառերի կրճատումը, մեկ այլ CSS ֆունկցիա է, որը սահմանում է գույները: RGB-ի նման, HSL-ն օգտագործում է թվային արժեքներ՝ գույները ներկայացնելու համար, բայց դա անում է այլ կերպ: Դուք կարող եք ծանոթ լինել HSL արժեքներին UI բաղադրիչներից դիզայնի հավելվածներում և այլուր:

Երանգ. սա ներկայացնում է գույնն ինքնին, օգտագործելով աստիճաններ գունային անիվի վրա, տատանվում է 0-ից մինչև 360: Պատկերացրեք, որ այն ընտրում է շրջանագծի մի կետ, որտեղ յուրաքանչյուր աստիճանը համապատասխանում է մեկ այլ գույնի: Օրինակ, 0 և 360 աստիճան կարմիրի համար, 120 աստիճան կանաչի համար և 240 աստիճան կապույտի համար:

Հագեցվածություն. հագեցվածությունը որոշում է գույնի վառությունը կամ ինտենսիվությունը: Այն սահմանում է գույնի փոխհարաբերությունը մոխրագույնի հետ, որտեղ 0%-ը ամբողջությամբ մոխրագույն է (չհագեցած) և 100%-ը՝ լիովին հագեցած (աշխույժ և մաքուր):

Թեթևություն. Թեթևությունը ցույց է տալիս, թե որքան վառ կամ մուգ է հայտնվում գույնը: Դա կապված է գույնի դիրքի հետ սև (0%) և սպիտակ (100%) սպեկտրի վրա: 50% արժեքը ներկայացնում է նորմալ գույնը, մինչդեռ 50% -ից ցածր արժեքները մգացնում են գույնը, իսկ 50% -ից բարձր արժեքները բացում են այն:

Բացի HSL-ից, կա HSLA, որտեղ «A»-ն նշանակում է «ալֆա»: Սա նման է RGBA-ի «A»-ին և նշանակում է թափանցիկություն:

Ահա շարահյուսությունը.

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Օգտագործելով այս շարահյուսությունը՝ փոխարինեք hue_value, saturation_percentage և lightness_percentage յուրաքանչյուր բաղադրիչի համար ձեր ուզած հատուկ արժեքներով: Օրինակ:

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

Այս օրինակում div տարրի ֆոնի գույնը դրված է վառ կանաչի վրա՝ օգտագործելով HSL արժեքները: 120-ը ներկայացնում է երանգը (կանաչ), 100%-ը լրիվ հագեցվածության համար է, իսկ 50%-ը սահմանում է թեթևությունը հավասարակշռված մակարդակի:

Կողմ. HSL-ը և HSLA-ն առաջարկում են բազմակողմանի գունային հաշվարկներ՝ օգտագործելով CSS հատուկ հատկությունները: Դրանք շատ համատեղելի են ժամանակակից բրաուզերների հետ և թույլ են տալիս հեշտ ճշգրտումներ կատարել գունային թեթևության վրա:

Դեմ. HSL սովորելը ներառում է գունային գիտության ըմբռնումը, ինչպիսիք են երանգները և հագեցվածությունը, որոնք կարող են ավելի դժվար լինել, քան ծանոթ RGB գույները:

Ընդգրկելով CSS գույների ուժը

Կան ավելի շատ մեթոդներ, որոնք կարող եք ստուգել, և մինչ դուք ուսումնասիրում եք CSS-ում գույները սահմանելու տարբեր ձևաչափեր, հիշեք, որ դուք կարող եք ձևավորել ձեր կայքի տեսքը, տրամադրությունը և օգտագործողի փորձը:

Գույնի ձևաչափի ձեր ընտրությունը՝ լինի դա պարզ գունային անուններ, տասնվեցական կոդեր, RGB կամ HSL, կարող է ազդել, թե ինչպես է ձեր լսարանը ընկալում ձեր կայքը: Այսպիսով, փորձեք, սովորեք և գտեք գունային սահմանումներ, որոնք լավագույնս համապատասխանում են ձեր դիզայնի նպատակներին: