Վլադ Մերժևիչ
HTML-ում գույնը նշվում է երկու եղանակներից մեկով՝ օգտագործելով տասնվեցական կոդ և որոշակի գույների անուններով: Հիմնականում կիրառվում է տասնվեցական թվային համակարգի վրա հիմնված մեթոդը, քանի որ այն ամենահամընդհանուրն է։
Hexadecimal գույներ
HTML-ն օգտագործում է տասնվեցական թվեր՝ գույները նշելու համար: Տասնվեցական համակարգը, ի տարբերություն տասնորդական համակարգի, հիմնված է, ինչպես իր անունն է հուշում, 16 թվի վրա: Թվերը կլինեն հետևյալը՝ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. 10-ից 15 թվերը փոխարինվում են լատինական տառերով: Աղյուսակում 6.1-ը ցույց է տալիս տասնորդական և տասնվեցական թվերի համապատասխանությունը:
15-ից մեծ թվերը տասնվեցական համակարգում ձևավորվում են երկու թվերի մեկում միավորելով (Աղյուսակ 6.2): Օրինակ, 255 թիվը տասնորդականում համապատասխանում է FF թվին տասնորդական:
Թվային համակարգի սահմանման հարցում խառնաշփոթությունից խուսափելու համար տասնվեցական թվին նախորդում է հեշ նշանը #, օրինակ՝ #aa69cc: Այս դեպքում գործը նշանակություն չունի, ուստի թույլատրելի է գրել #F0F0F0 կամ #f0f0f0:
HTML-ում օգտագործվող տիպիկ գույնն այսպիսի տեսք ունի.
Այստեղ վեբ էջի ֆոնի գույնը դրված է #FA8E47: Թվի դիմաց # հեշ նշանը նշանակում է, որ այն տասնվեցական է: Առաջին երկու թվանշանները (FA) սահմանում են գույնի կարմիր բաղադրիչը, երրորդից չորրորդ թվանշանները (8E) սահմանում են կանաչ բաղադրիչը, իսկ վերջին երկու թվանշանները (47) սահմանում են կապույտ բաղադրիչը: Վերջնական արդյունքը կլինի այս գույնը:
Ֆ.Ա. | + | 8E | + | 47 | = | FA8E47 |
Երեք գույներից յուրաքանչյուրը՝ կարմիր, կանաչ և կապույտ, կարող են ընդունել 00-ից մինչև FF արժեքներ, ինչը հանգեցնում է ընդհանուր 256 երանգների: Այսպիսով, գույների ընդհանուր թիվը կարող է լինել 256x256x256 = 16,777,216 համակցություն: Կարմիր, կանաչ և կապույտ բաղադրիչների վրա հիմնված գունային մոդելը կոչվում է RGB (կարմիր, կանաչ, կապույտ; կարմիր, կանաչ, կապույտ): Այս մոդելը հավելում է (ավելացնել - ավելացնելից), որում բոլոր երեք բաղադրիչների ավելացումը կազմում է սպիտակ գույնը:
Տասնվեցական գույներով նավարկելու համար ավելի հեշտ դարձնելու համար հաշվի առեք որոշ կանոններ.
- Եթե գունային բաղադրիչների արժեքները նույնն են (օրինակ՝ #D6D6D6), ապա արդյունքը կլինի մոխրագույն երանգ: Որքան մեծ է թիվը, այնքան ավելի բաց է գույնը, որի արժեքները տատանվում են #000000 (սև) մինչև #FFFFFF (սպիտակ):
- Վառ կարմիր գույնը ձևավորվում է, եթե կարմիր բաղադրիչը դարձվի առավելագույնը (FF), իսկ մնացած բաղադրիչները սահմանվեն զրոյի: #FF0000 արժեք ունեցող գույնը կարմիրի հնարավոր ամենակարմիր երանգն է: Նույնը վերաբերում է կանաչին (#00FF00) և կապույտին (#0000FF):
- Դեղինը (#FFFF00) ստացվում է կարմիրն ու կանաչը խառնելով: Սա հստակ տեսանելի է գունային անիվի վրա (նկ. 6.1), որը ներկայացնում է հիմնական գույները (կարմիր, կանաչ, կապույտ) և լրացնող կամ լրացուցիչ: Դրանք ներառում են դեղին, ցիան և մանուշակագույն (նաև կոչվում են մանուշակագույն): Ընդհանրապես ցանկացած գույն կարելի է ստանալ՝ դրան մոտ գույները խառնելով։ Այսպիսով, ցիան (#00FFFF) ստացվում է կապույտն ու կանաչը համադրելով։
Բրինձ. 6.1. Գունավոր շրջան
Գույները, որոնք հիմնված են տասնվեցական արժեքների վրա, պարտադիր չէ, որ էմպիրիկ կերպով ընտրվեն: Այդ նպատակով հարմար է գրաֆիկական խմբագրիչը, որը կարող է աշխատել տարբեր գունային մոդելների հետ, օրինակ՝ Adobe Photoshop-ը։ Նկ. Նկար 6.2-ում ներկայացված է այս ծրագրում գույնի ընտրության պատուհանը, որի արդյունքում ստացված վեցանկյուն արժեքը ուրվագծված է գծով: Դուք կարող եք պատճենել և տեղադրել այն ձեր կոդի մեջ:
Բրինձ. 6.2. Photoshop-ում գույների ընտրության պատուհան
Վեբ գույներ
Եթե դուք սահմանել եք մոնիտորի գույնի մատուցման որակը 8 բիթ (256 գույն), ապա նույն գույնը կարող է տարբեր կերպ ցուցադրվել տարբեր բրաուզերներում: Դա պայմանավորված է գրաֆիկայի ցուցադրման ձևով, երբ բրաուզերն աշխատում է իր սեփական գունապնակով և չի կարող ցույց տալ գույն, որը չկա իր ներկապնակում: Այս դեպքում գույնը փոխարինվում է իրեն մոտ գտնվող այլ գույների պիքսելների համադրությամբ, որոնք ընդօրինակում են տվյալը։ Ապահովելու համար, որ գույնը նույնը մնա տարբեր բրաուզերներում, ներկայացվեց այսպես կոչված վեբ գույների գունապնակ: Վեբ գույներն այն գույներն են, որոնց համար յուրաքանչյուր բաղադրիչ՝ կարմիր, կանաչ և կապույտ, դրված է վեց արժեքներից մեկի վրա՝ 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Այս բաղադրիչի տասնվեցական արժեքը նշված է փակագծերում: Բոլոր հնարավոր համակցություններից գույների ընդհանուր թիվը տալիս է 6x6x6 - 216 գույն: Վեբ գույնի օրինակ է #33FF66:
Վեբ գույնի հիմնական առանձնահատկությունն այն է, որ այն նույնն է հայտնվում բոլոր բրաուզերներում: Այս պահին վեբ գույների արդիականությունը շատ փոքր է՝ մոնիտորների որակի բարելավման և դրանց հնարավորությունների ընդլայնման պատճառով։
Գույներն ըստ անունների
Թվերի մի շարք հիշելուց խուսափելու համար կարող եք փոխարենը օգտագործել սովորաբար օգտագործվող գույների անունները: Աղյուսակում 6.3-ը ցույց է տալիս հանրաճանաչ գույների անունները:
Գույնի անունը | Գույն | Նկարագրություն | Տասնվեցական արժեք |
---|---|---|---|
Սեվ | Սեվ | #000000 | |
Կապույտ | Կապույտ | #0000FF | |
ֆուքսիա | Բաց - Մանուշակագույն | #FF00FF | |
մոխրագույն | Մուգ մոխրագույն | #808080 | |
կանաչ | Կանաչ | #008000 | |
կրաքարի | Բաց կանաչ | #00FF00 | |
շագանակագույն | Մուգ կարմիր | #800000 | |
նավատորմ | Մուգ կապույտ | #000080 | |
ձիթապտղի | Ձիթապտղի | #808000 | |
մանուշակագույն | Մուգ մանուշակագույն | #800080 | |
կարմիր | Կարմիր | #FF0000 | |
արծաթ | Բաց մոխրագույն | #C0C0C0 | |
շագանակագույն | Կապույտ կանաչ | #008080 | |
սպիտակ | Սպիտակ | #FFFFFF | |
դեղին | Դեղին | #FFFF00 |
Կարևոր չէ՝ գույնը նշեք իր անունով, թե տասնվեցական թվերով: Այս մեթոդներն իրենց ազդեցությամբ հավասար են։ Օրինակ 6.1-ը ցույց է տալիս, թե ինչպես սահմանել վեբ էջի ֆոնի և տեքստի գույները:
Օրինակ 6.1. Ֆոնի և տեքստի գույնը
Օրինակ տեքստ
Այս օրինակում ֆոնի գույնը սահմանվում է՝ օգտագործելով պիտակի bgcolor հատկանիշը
, և տեքստի գույնը տեքստի հատկանիշի միջոցով: Բազմազանության համար տեքստի հատկանիշը սահմանվում է տասնվեցական թվով, իսկ bgcolor հատկանիշը՝ վերապահված հիմնաբառի teal:Գույների աղյուսակ (գունապնակ) htmlհնարավորություն է տալիս ինքնուրույն ընտրել ձեզ անհրաժեշտ տոնը: Գույնի արժեքը ցուցադրվում է երեք ձևաչափով՝ Hex, RGB և HSV:
- Hex-ը բաղկացած է երեք երկու նիշանոց արժեքներից տասնվեցական թվային համակարգում: Օրինակ՝ #ff00b3, որտեղ թվերի առաջին զույգը կարմիր է, երկրորդը՝ կանաչ, իսկ երրորդը՝ կապույտ։
- RGB (RedGreenBlue) ունի «200,100,255» ձևը, որը ցույց է տալիս ստացված գույնի համապատասխան տոնայնության քանակը (կարմիր, կանաչ, կապույտ):
- HSV (Hue, Saturation, Value - տոն, հագեցվածություն, արժեք) - գունային մոդել, որում կոորդինատներն են.
- Գույն - գունային երանգ, կարող է տատանվել 0°-ից մինչև 360°:
- Հագեցվածություն - հագեցվածություն, տատանվում է 0-100 կամ 0-1: Որքան բարձր է այս պարամետրը, այնքան ավելի «մաքուր» է գույնը, այդ իսկ պատճառով այս պարամետրը երբեմն կոչվում է գույնի մաքրություն: Եվ որքան այս պարամետրը մոտ է զրոյին, այնքան գույնը մոտ է չեզոք մոխրագույնին:
- Արժեք (գույնի արժեք) - սահմանում է պայծառությունը, արժեքը կարող է տատանվել նաև 0-100 կամ 0-1 միջև:
Մուտքագրեք գունային ծածկագիրը. ԳՆԱՑԵՔ
Գույների ցուցակ անուններով
Աղյուսակում ներկայացված են բոլոր բրաուզերների կողմից աջակցվող անգլերեն գույների անունները (որոնք կարող են օգտագործվել որպես արժեքներ) և դրանց տասնվեցական արժեքները: Թվարկված բոլոր գույները «անվտանգ» են, ինչը նշանակում է, որ դրանք նույնը կհայտնվեն բոլոր բրաուզերներում:
Գույնի անունը | HEX | Գույն |
---|---|---|
Սեվ | #000000 | |
Նավատորմ | #000080 | |
Մուգ կապույտ | #00008B | |
Միջին կապույտ | #0000CD | |
Կապույտ | #0000FF | |
Մուգ կանաչ | #006400 | |
Կանաչ | #008000 | |
Շագանակագույն | #008080 | |
DarkCyan | #008B8B | |
DeepSkyBlue | #00BFFF | |
Մուգ փիրուզագույն | #00CED1 | |
MediumSpringGreen | #00FA9A | |
Լայմ | #00FF00 | |
SpringGreen | #00FF7F | |
Aqua | #00FFFF | |
Cyan | #00FFFF | |
Midnight Blue | #191970 | |
Dodger Blue | #1E90FF | |
LightSeaGreen | #20B2AA | |
ForestGreen | #228B22 | |
SeaGreen | #2E8B57 | |
DarkSlateGray | #2F4F4F | |
LimeGreen | #32CD32 | |
MediumSeaGreen | #3CB371 | |
Փիրուզագույն | #40E0D0 | |
Արքայական կապույտ | #4169E1 | |
SteelBlue | #4682B4 | |
DarkSlateBlue | #483D8B | |
Միջին փիրուզագույն | #48D1CC | |
Ինդիգո | #4B0082 | |
Մուգ ձիթապտղի կանաչ | #556B2F | |
CadetBlue | #5F9EA0 | |
CornflowerBlue | #6495ԵԴ | |
MediumAquaMarine | #66CDAA | |
DimGray | #696969 | |
Slate Blue | #6A5ACD | |
OliveDrab | #6B8E23 | |
Slate Grey | #708090 | |
LightSlateGray | #778899 | |
MediumSlateBlue | #7B68EE | |
LawnGreen | #7CFC00 | |
Chartreuse | #7FFF00 | |
Ակվամարին | #7FFFD4 | |
Շագանակագույն | #800000 | |
Մանուշակագույն | #800080 | |
Ձիթապտղի | #808000 | |
Մոխրագույն | #808080 | |
Երկնագույն | #87CEEB | |
LightSkyBlue | #87ՍԵՖԱ | |
Կապույտ Վիոլետ | #8A2BE2 | |
Մուգ կարմիր | #8B0000 | |
DarkMagenta | #8B008B | |
SaddleBrown | #8B4513 | |
DarkSeaGreen | #8FBC8F | |
Բաց կանաչ | #90EE90 | |
Միջին Մանուշակագույն | #9370D8 | |
Մուգ Վիոլետ | #9400D3 | |
Գունատ կանաչ | #98FB98 | |
Dark Orchid | #9932CC | |
ԴեղինԿանաչ | #9ACD32 | |
Սիեննա | #A0522D | |
Շագանակագույն | #A52A2A | |
Մուգ մոխրագույն | #A9A9A9 | |
Բաց կապույտ | #ADD8E6 | |
ԿանաչԴեղին | #ADFF2F | |
Գունատ փիրուզագույն | #AFEEEE | |
LightSteelBlue | #B0C4DE | |
Փոշի Կապույտ | #B0E0E6 | |
FireBrick | #B22222 | |
DarkGoldenRod | #B8860B | |
Միջին խոլորձ | #BA55D3 | |
Ռոզի Բրաուն | #BC8F8F | |
Մուգ խակի | #BDB76B | |
Արծաթե | #C0C0C0 | |
Միջին ՎիոլետԿարմիր | #C71585 | |
Հնդկական կարմիր | #CD5C5C | |
Պերու | #CD853F | |
Շոկոլադ | #D2691E | |
Թան | #D2B48C | |
Բաց մոխրագույն | #D3D3D3 | |
PaleVioletRed | #D87093 | |
տատասկափուշ | #D8BFD8 | |
Խոլորձ | #DA70D6 | |
GoldenRod | #DAA520 | |
Բոսորագույն | #DC143C | |
Գեյնսբորո | #DCDCDC | |
Սալոր | #DDA0DD | |
BurlyWood | #DEB887 | |
LightCyan | #E0FFFF | |
Նարդոս | #E6E6FA | |
Մուգ սաղմոն | #E9967A | |
Մանուշակ | #EE82EE | |
PaleGoldenRod | #EEE8AA | |
LightCoral | #F08080 | |
Խակի | #F0E68C | |
ԱլիսԲլյու | #F0F8FF | |
HoneyDew | #F0FFF0 | |
Լազուր | #F0FFFF | |
Սենդի Բրաուն | #F4A460 | |
Ցորեն | #F5DEB3 | |
Բեժ | #F5F5DC | |
Սպիտակ Ծուխ | #F5F5F5 | |
MintCream | #F5FFFA | |
GhostWhite | #F8F8FF | |
Սաղմոն | #FA8072 | |
AntiqueWhite | #FAEBD7 | |
Սպիտակեղեն | #FAF0E6 | |
LightGoldenRodYellow | #FAFAD2 | |
Old Lace | #FDF5E6 | |
Կարմիր | #FF0000 | |
Ֆուքսիա | #FF00FF | |
Մագենտա | #FF00FF | |
DeepPink | #FF1493 | |
OrangeRed | #FF4500 | |
Լոլիկ | #FF6347 | |
HotPink | #FF69B4 | |
Մարջան | #FF7F50 | |
Մուգ գույնի | #FF8C00 | |
LightSalmon | #FFA07A | |
Նարնջագույն | #FFA500 | |
Բաց վարդագույն | #FFB6C1 | |
Վարդագույն | #FFC0CB | |
Ոսկի | #FFD700 | |
PeachPuff | #FFDAB9 | |
Նավախո Սպիտակ | #FFDEAD | |
Մոկասին | #FFE4B5 | |
Բիսկու | #FFE4C4 | |
MistyRose | #FFE4E1 | |
Սպիտակած նուշ | #FFBCD | |
PapayaWhip | #FFFD5 | |
LavenderBlush | #FFF0F5 | |
SeaShell | #FFF5EE | |
Եգիպտացորենի մետաքս | #FFF8DC | |
Լիմոն Շիֆոն | #FFFACD | |
Ծաղկային Սպիտակ | #FFFFAF0 | |
Ձյուն | #FFFAFA | |
Դեղին | #FFFF00 | |
Բաց դեղին | #FFFFE0 | |
Փղոսկր | #FFFFFF0 | |
Սպիտակ | #FFFFFF |
CSS-ում գույնը կարող է սահմանվել տարբեր ձևերով.
- անունով,
- տասնվեցական արժեքով,
- RGB և RGBA ձևաչափերով,
- HSL և HSLA ձևաչափերով:
Սահմանեք գույնը անունով
Բրաուզերներն աջակցում են տարրերի որոշ գույների անուններով նշելուն: Այս աղյուսակը պարունակում է որոշ հիմնաբառեր (անգլերեն գույների անուններ), որոնք օգտագործվում են գունային հատկությունները, RGB կոդը, տասնվեցական ծածկագիրը (HEX) և HSL կոդը նշելու համար:
Անուն | Գույն | RGB | HEX | HSL | Նկարագրություն |
---|---|---|---|---|---|
սպիտակ | rgb(255, 255, 255) | #ffffff կամ #fff | hsl (0, 0%, 100%) | Սպիտակ | |
արծաթ | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Մոխրագույն | |
մոխրագույն | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Մուգ մոխրագույն | |
Սեվ | rgb (0, 0, 0) | #000000 կամ #000 | hsl(0, 0%, 0%) | Սեվ | |
շագանակագույն | rgb (128, 0, 0) | #800000 | hsl (0, 100%, 25%) | Մուգ կարմիր | |
կարմիր | rgb (255, 0, 0) | #ff0000 կամ #f00 | hsl (0, 100%, 50%) | Կարմիր | |
նարնջագույն | rgb(255, 165, 0) | #ffa500 | hsl (38.8, 100%, 50%) | Նարնջագույն | |
դեղին | rgb(255, 255, 0) | #ffff00 կամ #ff0 | hsl (60, 100%, 50%) | Դեղին | |
ձիթապտղի | rgb(128, 128, 0) | #808000 | hsl (60, 100%, 25%) | Ձիթապտղի | |
կրաքարի | rgb (0, 255, 0) | #00ff00 կամ #0f0 | hsl (120, 100%, 50%) | Բաց կանաչ | |
կանաչ | rgb (0, 128, 0) | #008000 | hsl (120, 100%, 25%) | Կանաչ | |
ջրային | rgb (0, 255, 255) | #00ffff կամ #0ff | hsl (180, 100%, 50%) | Կապույտ | |
Կապույտ | rgb (0, 0, 255) | #0000ff կամ #00f | hsl (240, 100%, 50%) | Կապույտ | |
նավատորմ | rgb (0,0,128) | #000080 | hsl (240, 100%, 25%) | Մուգ կապույտ | |
շագանակագույն | rgb (0, 128, 128) | #008080 | hsl (180, 100%, 25%) | Կապույտ կանաչ | |
ֆուքսիա | rgb (255, 0, 255) | #ff00ff կամ #f0f | hsl (300, 100%, 50%) | Վարդագույն | |
մանուշակագույն | rgb(128, 0, 128) | #800080 | hsl (300, 100%, 25%) | Մանուշակ |
Սա գույների անունների օգտագործման օրինակ է, գույների անունները վերցված են ընդլայնված աղյուսակից:
Ահա թե ինչպես է աշխատում այս կոդը.
Գույնի կարգավորում RGB-ի միջոցով
RGB-ն հավելյալ գունային մոդել է: Անգլերեն հավելում- լրացում. RGB-ն անգլերեն բառերի հապավումն է՝ Red, Green, Blue - red, green, blue): Այստեղից պարզ է դառնում, որ RGB մոդելում գույները սինթեզվում են՝ ավելացնելով երեք գույն (կարմիր, կանաչ, կապույտ) տարբեր քանակությամբ։
Կարմիրը, կանաչը և կապույտը խառնելով կարող եք ստանալ մի քանի միլիոն երանգներ։ Բոլոր հնարավոր համակցությունները պահվում են համակարգչային հիշողության մեջ:
Անցեք կետին:
Այս ձևաչափով հատկություններ սահմանելու համար օգտագործեք rgb(r, g, b) նշումը, որտեղ r, g, b երեք ալիքներն են յուրաքանչյուր գույնի համար (կարմիր, կանաչ, կապույտ): Յուրաքանչյուր ալիքի համար արժեքները սահմանվում են 0-ից 255 միջակայքում:
Օրինակ կոդ.
Որպեսզի ամեն ինչ պարզ լինի, ահա կոդի օրինակ.
Այս օրինակը պետք է աշխատի այսպես.
Նկ.1. Գույները RGB-ում:Բացատրություններ, օրինակ.
Էջի սկզբում մենք ստեղծում ենք div.rgb դասը, այն անհրաժեշտ է պիտակի կողմից ստեղծված բլոկների համար
Հաջորդը, կոդում մենք սահմանում ենք բլոկի ֆոնի գույնը
Փորձեք խմբագրել այս օրինակը և նշել ձեր սեփական արժեքները, օրինակ rgb(100, 100, 100):
Գույնի կարգավորում RGBA-ի միջոցով
CSS3-ն ունի գույնի հետ աշխատելու նոր գործիք՝ RGBA ձևաչափը: Այն կարելի է անվանել RGB մոդելի էվոլյուցիա, բայց մեկ նոր ալիքի ավելացմամբ՝ A կամ ալֆա ալիքով: Այս ալիքը սահմանում է գույնի թափանցիկությունը: Դրա արժեքները սահմանվում են 0-ից 1 միջակայքում: 0 արժեքը համապատասխանում է ամբողջական թափանցիկությանը, 1-ը՝ լրիվ անթափանցիկությանը (գույնը կլինի նույնը, ինչ նշված է առաջին երեք RGB ալիքներում) և միջանկյալ արժեքներին . ինչպես 0.4 կամ 0.6 - կիսաթափանցիկությունը տարբեր աստիճաններով:
Օրինակ կոդ.
Ահա թե ինչպես այն կաշխատի.
Այս կոդը տեսողականորեն նման է հետևյալին, որն օգտագործում է RGB մոդելը՝ գունային արժեք նշելու համար.
Ահա նրա արդյունքը.
Ալֆա ալիքի արժեքը, որը հավասար է զրոյի, դարձնում է ցանկացած գույն անտեսանելի. rgba(255,0,0,1.0) հատկությունը ցույց է տալիս կարմիր գույնը rgb(255, 0, 0):
Ըստ տասնվեցական արժեքի (HEX կոդ)
Առօրյա կյանքում մենք օգտագործում ենք տասնորդական հաշվման համակարգը: Դրա ծագումը շատ պարզ է՝ մենք մեր ձեռքերին տասը մատ ունենք, իսկ մատների վրա հաշվելը կյանքում հարմար է եղել։ Եթե տասնորդական համակարգը ունի տասը նիշ՝ 0-ից 9-ը, իսկ 10 թիվը հաջորդ նիշն է, ապա տասնվեցական թվային համակարգը ունի 16 նիշ, իսկ հաջորդ նիշը 16 թիվն է։
Գունավոր կոդերը նշելու համար սովորական տասնորդական թվերը 0-ից 9-ն օգտագործվում են որպես տասնվեցական թվեր, իսկ լատինատառերը՝ A-ից F-ը՝ 10-ից 15-ը նշելու համար, այսինքն՝ (0, 1, 2, 3, 4, 5): , 6, 7, 8, 9, A, B, C, D, E, F): Պարզության համար եկեք սա դնենք աղյուսակում.
F-ից մեծ վեցանկյուն թվեր գրելու համար (տասնորդական համակարգում՝ 15), ինչպես տասնորդական համակարգում, նրանք նույնպես օգտագործում են երկու նիշերի համակցություն, բայց արդեն տասնվեցական, ինչը ակնհայտ է։ Այսպիսով, 255 տասնորդական թիվը տասնվեցական նշումով գրելու համար օգտագործեք FF նշում:
Տասնվեցամյա համակարգն ավելի հասկանալի է համակարգչին, և այն ավելի արագ է մշակում տասնվեցական արժեքով սահմանված արժեքները:
Գույնը տասնվեցականում նշելու համար թվային արժեքին նախորդեք «#» նշանով, օրինակ՝ #FFC0CB: #FFC0CB արժեքը ինքնին բաղկացած է երեք տասնվեցական FF, C0 և CB թվերից: Այս մուտքի իմաստը նույնն է, ինչ գույնը RGB ձևաչափով սահմանելը (rgb(r, g, b)) - HEX կոդի յուրաքանչյուր տասնվեցական թվանշան ցույց է տալիս RGB մոդելի իր ալիքի գույնի հագեցվածությունը:
Այս կոդը կցուցադրի հետևյալ տարրերը.
Եվ ահա վերևի այս էջի «Գույների կարգավորումը օգտագործելով RGB» բաժնի արդյունքը պատկեր է:
Նկ.1. Գույները RGB-ում:Մենք տեսնում ենք, որ գույները նույնական են։
Թույլատրվում է HEX գունային կոդի կրճատված նշում. 6 նիշանոց թիվը կարող է գրվել որպես եռանիշ թիվ: Սա վավեր է միայն այն դեպքում, երբ կրկնվում են մեկ ալիքի գունային արժեքի երկու նիշ:
Այսինքն՝ ընդունելի է հետևյալ հապավումը.
Օրինակ՝ #ff22aa գույնը կարող է գրվել որպես #f2a, կամ #44aa22 գույնը՝ #4a2։
Գույնի կարգավորում՝ օգտագործելով HSL
CSS3-ն ունի գույները նշելու նոր ձևաչափ:
HSL ձևաչափը անգլերեն բառերի հապավումն է՝ Hue (երանգ), Saturate (հագեցվածություն) և Lightness (թեթևություն):
Hue-ը HSL-ում գույնի արժեքն է հատուկ գունային անիվի վրա (Նկար 2) և նշված է աստիճաններով: Եթե անալոգիաներ նկարենք RGB մոդելի հետ, ապա 0°-ը համապատասխանում է կարմիրին, 120°-ը՝ կանաչին, իսկ 240°-ը՝ կապույտին։
Երանգի արժեքը կփոխվի 0-ից մինչև 359:
Նկար 2. HSL գունավոր անիվ:
Երկրորդ արժեքը՝ հագեցվածությունը (Saturate) սահմանվում է որպես տոկոս: 100% հագեցվածության դեպքում գույնը հնարավորինս «հյութալի» է, քանի որ հագեցվածության ցուցիչը շարժվում է դեպի 0%, գույնը դառնում է ավելի մռայլ և գլորվում է մոխրագույն:
Երրորդ արժեքը՝ Lightness, նույնպես սահմանվում է որպես տոկոս: Որքան բարձր է տոկոսը, այնքան ավելի վառ կլինի գույնը: 0% և 100% ծայրահեղ արժեքները ցույց կտան համապատասխանաբար սև (առանց լույսի) և սպիտակ (չափազանց բացված) գույները, և կարևոր չէ, թե գունային անիվի որ գույնն է ընտրվել առաջին ալիքում: Գույնի պայծառության օպտիմալ արժեքը 50% է:
Գույնի կարգավորում՝ օգտագործելով HSLA
HSLA ձևաչափը կապված է HSL-ի հետ, ճիշտ այնպես, ինչպես RGB-ը՝ RGBA-ին: HSLA ձևաչափում, ինչպես RGBA-ում, ավելացվում է ալֆա ալիք, որը պատասխանատու է գունային թափանցիկության համար։
HSL ձևաչափով նշված գույնն ավելի հեշտ է կարդալ: Կարելի է ասել, որ դա ինտուիտիվ է։ Օրինակ, hsl կոդը (120,60%, 50%) կարող է ներկայացնել վերջնական գույնը, եթե հիշողության մեջ կա HSL գունային անիվի նկար: Նույնը չի կարելի ասել RGB և HEX ձևաչափերի մասին, այս ձևաչափերում նշված գունային ծածկագիրը պարզ է դառնում միայն այն բանից հետո, երբ այն տեսանելի է մոնիտորի վրա:
CSS3-ի նոր ձևաչափերը (HSL, HSLA և RGBA) աշխատում են բրաուզերներում՝ սկսած տարբերակներից՝ IE 9.0, Opera 10.0 Firefox 3.0: Ինչպե՞ս կարող եմ ոճերն աշխատել ավելի հին բրաուզերների վրա:
Somebloсk (ֆոնի գույնը՝ rgb (255,50,50); ֆոնի գույնը՝ rgba (255,50,50,0,85))
Հին բրաուզերներում այս կոդը օգտագործելիս .somebloсk դասի ֆոնի գույնը, թեև այն չի օգտագործի ալֆա ալիք, կցուցադրվի RGB ձևաչափով:
Վեբ դիզայնում գույնը ներկայացնելու մի քանի եղանակ կա:
HEX-ը 16-րդ հիմքի վրա հիմնված գունային ներկայացման տասնվեցական համակարգ է: Այս համակարգի համար արաբական տասնորդական թվանշանները 0-ից 9-ը և լատինատառերը A-ից F-ն օգտագործվում են 16-ի թվային թիվը լրացնելու համար: Վեբ դիզայնի համար՝ 16 հիմնական (հիմնական) գույներ: օգտագործվում են, այսպես կոչված, տասնվեցական գունային ծածկագիրը #RRGGBB, որտեղ յուրաքանչյուր զույգ պատասխանատու է գույնի իր մասնաբաժնի համար՝ RR – կարմիր, GG – կանաչ և BB – կապույտ: Յուրաքանչյուր գունային բաժին տատանվում է 00-ից մինչև FF:
Գույնի երկու այլ ներկայացում վեբ դիզայնում են՝ RGB (*,*,*) ձևով, որտեղ գույնի յուրաքանչյուր «*» բաժինը ներկայացված է տասնորդական թվերով 0-ից մինչև 255-ը և գունային անուններով անգլերենում:
Գունավոր պատկեր ստեղծելիս հիմնական խնդիրը տարբեր տեսակի համակարգիչների, մոնիտորների և բրաուզերների վրա գույների ճիշտ վերարտադրումն է։ Եթե զննարկիչը չի կարողանում ճիշտ ցուցադրել գույնը, այն ընտրում է նույնը կամ խառնում է մի քանի գույներ: Եվ երբեմն այն կարող է փոխարինվել բոլորովին այլ գույնով:
Աղյուսակ 16 հիմնական գույներ, որոնք օգտագործվում են բոլոր բրաուզերներում
Անուն | Գույն | Hex | (RGB) |
Ակվա (ծովի ալիք) | #00FFFF | (000,255,255) | |
Սեվ | #000000 | (000,000,000) | |
Կապույտ | #0000FF | (000,000,255) | |
Ֆուքսիա (magenta) | #FF00FF | (255,000,255) | |
Մոխրագույն | #808080 | (128,128,128) | |
Կանաչ | #008000 | (000,128,000) | |
Լայմ (վառ կանաչ) | #00FF00 | (000,255,000) | |
Շագանակագույն (մուգ բորդո) | #800000 | (128,000,000) | |
Ծովային (մուգ կապույտ) | #000080 | (000,000,128) | |
Ձիթապտղի | #808000 | (128,128,000) | |
Մանուշակագույն | #800080 | (128,000,128) | |
Կարմիր | #FF0000 | (255,000,000) | |
Արծաթե | #C0C0C0 | (192,192,192) | |
Թեյլ (մոխրագույն-կանաչ) | #008080 | (000,128,128) | |
Սպիտակ | #FFFFFF | (255,255,255) | |
Դեղին | #FFFF00 | (255,255,000) |
Աղյուսակ մանուշակագույնգույները և դրա երանգները
Անուն | Գույն | Hex | (RGB) |
Մագենտա (magenta) | #FFCBDB | (255,203,219) | |
Մագենտա (magenta) | #FF0099 | (255,000,153) | |
Մագենտա | #F95A61 | (249,090,097) | |
Ֆուքսիա (ֆուքսիա) | #FF00FF | (255,000,255) | |
Mauvein (անիլին մանուշակագույն) | #EF0097 | (239,000,151) | |
Սաղմոնի վարդագույն (նարնջագույն վարդագույն) | #FF91A4 | (255,145,164) | |
Սենիզ (մանուշակագույն երանգ) | #DE3163 | (153,149,140) | |
Բադրիջան սմբուկ (սմբուկ) | #990066 | (153,000,132) | |
Նարդոսի կարմրաներկ (վարդագույն նարդոս) |  #FFF0F5 | (255,240,245) | |
յասաման (յասաման) | #C8A2C8 | (200,162,200) | |
Մագենտա | #FF008F | (255,000,143) | |
Խոլորձ (խոլորձ) | #DA70D6 | (218,112,214) | |
Կարմիր-մանուշակագույն (մանուշակագույն-կարմիր) | #C71585 | (199,021,133) | |
Սանգվինիկ (սանգվինիկ) | #92000A | (146,000,010) | |
տատասկափուշ (մանուշակագույնի երանգ) | #D8BFD8 | (185,211,238) | |
Վիոլետ-սմբուկ (մանուշակագույնի երանգ) | #991199 | (153,017,153) | |
Rosa vivo (խորը վարդագույն) | #FF007F | (255,000,127) | |
Նարդոս-վարդ (մանուշակագույն երանգ) | #FBA0E3 | (108,123,139) | |
Mountbatten վարդագույն | #997ABD | (153,122,141) |
Աղյուսակ մոխրագույնգույները և դրա երանգները
Անուն | Գույն | Hex | (RGB) |
Մոխրագույն | #808080 | (128,128,128) | |
Մոխրագույն | #bebebe | (190,190,190) | |
(Մոխրագույն երանգ) | #858585 | (133,133,133) | |
Մոխրագույն33 | #545454 | (084,084,084) | |
(մոխրագույն սալաքար) | #708090 | (112,128,144) | |
(քվարց) | #99958ս | (153,149,140) | |
(Բաց մոխրագույն) | #bbbbbb | (187,187,187) | |
(Արծաթ) | #c0c0c0 | (192,192,192) | |
(մոխրագույն-սպիտակ) | #f0f0f0 | (240,240,240) | |
(Աբդել-Քերիմի մորուքները) | #e0e0e0 | (224,224,224) | |
Բաց մոխրագույն (բաց մոխրագույն) | #d3d3d3 | (211,211,211) | |
LightStateGray () | #778899 | (119,136,153) | |
StateGray-1 (գունատ եգիպտացորենի կապույտ1) | #c6e2ff | (198,226,255) | |
StateGray-2 (գունատ եգիպտացորենի կապույտ2) | #b9d3ee | (185,211,238) | |
StateGray3 () | #9fb6cd | (159,182,205) | |
StateGray4 () | #6c7b8b | (108,123,139) |
Գույները նշելու համար օգտագործվում են տասնվեցական թվեր: Տասնվեցական համակարգը, ի տարբերություն տասնորդական համակարգի, հիմնված է, ինչպես իր անունն է հուշում, 16 թվի վրա: Թվերը կլինեն հետևյալը՝ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A. , B, C , D, E, F. 10-ից 15 թվերը փոխարինվում են լատինական տառերով: 15-ից մեծ թվերը տասնվեցական համակարգում ձևավորվում են երկու թվերը մեկի մեջ միավորելով: Օրինակ, 255 թիվը տասնորդականում համապատասխանում է FF թվին տասնորդական: Թվային համակարգը որոշելիս շփոթությունից խուսափելու համար տասնվեցական թվից առաջ տեղադրվում է հեշ նշան #, օրինակ՝ #666999: Երեք գույներից յուրաքանչյուրը՝ կարմիր, կանաչ և կապույտ, կարող են արժեքներ ընդունել 00-ից մինչև FF: Այսպիսով, գույնի խորհրդանիշը բաժանվում է երեք բաղադրիչի #rrggbb, որտեղ առաջին երկու նշանները ցույց են տալիս գույնի կարմիր բաղադրիչը, միջին երկուսը `կանաչ, իսկ վերջին երկուսը` կապույտ: Թույլատրվում է օգտագործել #rgb կրճատ ձևը, որտեղ յուրաքանչյուր նիշ պետք է կրկնապատկվի։ Այսպիսով, #fe0 մուտքը պետք է համարվի #ffee00:
Անունով
Internet Explorer | Chrome | Օպերա | Սաֆարի | Firefox | Android | iOS |
4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Բրաուզերներն աջակցում են որոշ գույների իրենց անունով: Աղյուսակում 1-ը ցույց է տալիս անունները, տասնվեցական ծածկագիրը, RGB, HSL արժեքները և նկարագրությունը:
Անուն | Գույն | Կոդ | RGB | HSL | Նկարագրություն |
---|---|---|---|---|---|
սպիտակ | #ffffff կամ #fff | rgb (255,255,255) | hsl (0.0%, 100%) | Սպիտակ | |
արծաթ | #c0c0c0 | rgb (192,192,192) | hsl (0.0%, 75%) | Մոխրագույն | |
մոխրագույն | #808080 | rgb (128,128,128) | hsl (0.0%, 50%) | Մուգ մոխրագույն | |
Սեվ | #000000 կամ #000 | rgb (0,0,0) | hsl (0.0%, 0%) | Սեվ | |
շագանակագույն | #800000 | rgb (128,0,0) | hsl (0.100%, 25%) | Մուգ կարմիր | |
կարմիր | #ff0000 կամ #f00 | rgb (255,0,0) | hsl (0,100%, 50%) | Կարմիր | |
նարնջագույն | #ffa500 | rgb (255,165,0) | hsl (38.8,100%, 50%) | Նարնջագույն | |
դեղին | #ffff00 կամ #ff0 | rgb (255,255,0) | hsl (60,100%, 50%) | Դեղին | |
ձիթապտղի | #808000 | rgb (128,128,0) | hsl (60,100%, 25%) | Ձիթապտղի | |
կրաքարի | #00ff00 կամ #0f0 | rgb (0,255,0) | hsl (120,100%, 50%) | Բաց կանաչ | |
կանաչ | #008000 | rgb (0,128,0) | hsl (120,100%, 25%) | Կանաչ | |
ջրային | #00ffff կամ #0ff | rgb (0,255,255) | hsl (180,100%, 50%) | Կապույտ | |
Կապույտ | #0000ff կամ #00f | rgb (0,0,255) | hsl (240,100%, 50%) | Կապույտ | |
նավատորմ | #000080 | rgb (0,0,128) | hsl (240,100%, 25%) | Մուգ կապույտ | |
շագանակագույն | #008080 | rgb (0,128,128) | hsl (180,100%, 25%) | Կապույտ կանաչ | |
ֆուքսիա | #ff00ff կամ #f0f | rgb (255,0,255) | hsl (300,100%, 50%) | Վարդագույն | |
մանուշակագույն | #800080 | rgb (128,0,128) | hsl (300,100%, 25%) | Մանուշակ |
Օգտագործելով RGB
Internet Explorer | Chrome | Օպերա | Սաֆարի | Firefox | Android | iOS |
5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Դուք կարող եք գույնը սահմանել՝ օգտագործելով կարմիր, կանաչ և կապույտ արժեքները տասնորդական տերմիններով: Երեք գունային բաղադրիչներից յուրաքանչյուրը ստանում է արժեք 0-ից մինչև 255: Նաև թույլատրվում է գույնը նշել որպես տոկոս՝ 100%-ով, որը համապատասխանում է 255 թվին: Նախ նշեք rgb հիմնաբառը, այնուհետև նշեք գույնի բաղադրիչները փակագծերում: , բաժանված ստորակետերով, օրինակ rgb(255 , 128, 128) կամ rgb(100%, 50%, 50%)։
RGBA
Internet Explorer | Chrome | Օպերա | Սաֆարի | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
RGBA ձևաչափը շարահյուսությամբ նման է RGB-ին, բայց ներառում է ալֆա ալիք, որը նշում է տարրի թափանցիկությունը։ 0-ի արժեքը լիովին թափանցիկ է, 1-ը անթափանց է, իսկ 0,5-ի նման միջանկյալ արժեքը կիսաթափանցիկ է:
RGBA-ն ավելացվել է CSS3-ին, ուստի CSS կոդը պետք է վավերացվի այս տարբերակի համեմատ: Հարկ է նշել, որ CSS3 ստանդարտը դեռ մշակման փուլում է, և որոշ առանձնահատկություններ կարող են փոխվել: Օրինակ, RGB ձևաչափով գույնը, որն ավելացվել է ֆոնի գույնի հատկությանը, վավերացվում է, բայց ֆոնային հատկությանը ավելացվածն այլևս վավեր չէ: Միևնույն ժամանակ, բրաուզերները բավականին ճիշտ են հասկանում գույնը երկու հատկությունների համար:
HSL
Internet Explorer | Chrome | Օպերա | Սաֆարի | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL ձևաչափի անվանումը առաջացել է Hue (երանգ), Saturate (հագեցվածություն) և Lightness (թեթևություն) տառերի համակցությունից: Գույնը գույնի արժեքն է գունային անիվի վրա (նկ. 1) և տրված է աստիճաններով: 0°-ը համապատասխանում է կարմիրին, 120° կանաչին, իսկ 240° կապույտին: Երանգի արժեքը կարող է տատանվել 0-ից մինչև 359:
Բրինձ. 1. Գունավոր անիվ
Հագեցվածությունը գույնի ինտենսիվությունն է և չափվում է որպես տոկոս 0%-ից մինչև 100%: 0% արժեքը ցույց է տալիս գույնի բացակայությունը և մոխրագույնի երանգը, 100% -ը հագեցվածության առավելագույն արժեքն է:
Թեթևությունը նշում է, թե որքան վառ է գույնը և նշվում է որպես տոկոս 0% -ից մինչև 100%: Ցածր արժեքները գույնը դարձնում են ավելի մուգ, իսկ բարձր արժեքները դարձնում են ավելի բաց՝ 0% և 100% ծայրահեղ արժեքները համապատասխանում են սևին և սպիտակին:
HSLA
Internet Explorer | Chrome | Օպերա | Սաֆարի | Firefox | Android | iOS |
9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA ձևաչափը շարահյուսությամբ նման է HSL-ին, բայց ներառում է ալֆա ալիք՝ տարրի թափանցիկությունը նշելու համար: 0-ի արժեքը լիովին թափանցիկ է, 1-ը անթափանց է, իսկ 0,5-ի նման միջանկյալ արժեքը կիսաթափանցիկ է:
RGBA, HSL և HSLA գունային արժեքները ավելացվել են CSS3-ին, ուստի խնդրում ենք ստուգել ձեր ծածկագիրը տարբերակի վավերականության համար այս ձևաչափերն օգտագործելիս:
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Զգուշացում
Կայքում թվարկված առյուծ բռնելու բոլոր մեթոդները տեսական են և հիմնված են հաշվողական մեթոդների վրա: Հեղինակները չեն երաշխավորում ձեր անվտանգությունը դրանք օգտագործելիս և հրաժարվում են արդյունքների համար պատասխանատվությունից: Հիշեք, որ առյուծը գիշատիչ է և վտանգավոր կենդանի։
Այս օրինակի արդյունքը ներկայացված է Նկ. 2.
Բրինձ. 2. Գույները վեբ էջում