Rgb 240 40 ինչ գույն. HTML ձեռնարկ. RGB գույներ. Անվտանգ պալիտրա գույներ: Օրինակ՝ գույնի նշում RGB-ի միջոցով

Վլադ Մերժևիչ

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-ը ցույց է տալիս հանրաճանաչ գույների անունները:

Աղյուսակ 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 կոդը նշելու համար:

Աղյուսակ 1. Գույների անունները, դրանց 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 CSS-ում

Միջին փիրուզագույն
շագանակագույն
բոսորագույն
կապույտ մանուշակագույն
ռուլիդռաբ

Ահա թե ինչպես է աշխատում այս կոդը.

Գույնի կարգավորում RGB-ի միջոցով

RGB-ն հավելյալ գունային մոդել է: Անգլերեն հավելում- լրացում. RGB-ն անգլերեն բառերի հապավումն է՝ Red, Green, Blue - red, green, blue): Այստեղից պարզ է դառնում, որ RGB մոդելում գույները սինթեզվում են՝ ավելացնելով երեք գույն (կարմիր, կանաչ, կապույտ) տարբեր քանակությամբ։

Կարմիրը, կանաչը և կապույտը խառնելով կարող եք ստանալ մի քանի միլիոն երանգներ։ Բոլոր հնարավոր համակցությունները պահվում են համակարգչային հիշողության մեջ:

Անցեք կետին:

Այս ձևաչափով հատկություններ սահմանելու համար օգտագործեք rgb(r, g, b) նշումը, որտեղ r, g, b երեք ալիքներն են յուրաքանչյուր գույնի համար (կարմիր, կանաչ, կապույտ): Յուրաքանչյուր ալիքի համար արժեքները սահմանվում են 0-ից 255 միջակայքում:

Օրինակ կոդ.

Որպեսզի ամեն ինչ պարզ լինի, ահա կոդի օրինակ.

RGB CSS-ում

rgb (255, 0, 0)
rgb (0, 255, 0)
rgb (0, 0, 255)

Այս օրինակը պետք է աշխատի այսպես.

Նկ.1. Գույները RGB-ում:

Բացատրություններ, օրինակ.

Էջի սկզբում մենք ստեղծում ենք div.rgb դասը, այն անհրաժեշտ է պիտակի կողմից ստեղծված բլոկների համար

ցուցադրվել են պահանջվող չափերով՝ 240px 40px: Մենք տողերի բարձրության հատկությանը վերագրում ենք 40px արժեք, այսինքն՝ հավասար բլոկի բարձրությանը, դա թույլ կտա տեքստը ցուցադրել բլոկում։
ուղղահայաց կենտրոնում: Մենք տեքստը կենտրոնացնում ենք հորիզոնական՝ օգտագործելով կանոնը ( տեքստի հավասարեցում: կենտրոն ;).

Հաջորդը, կոդում մենք սահմանում ենք բլոկի ֆոնի գույնը

օգտագործելով style հատկանիշը, օգտագործելով ֆոնային հատկությունը և արժեքներ վերագրելով rgb(255, 0, 0), rgb(0, 255, 0) և rgb(0, 0, 255): Այսինքն, մենք հերթափոխով մեկ ալիք ենք դարձնում հնարավորինս հագեցած, իսկ մնացած ալիքները չեն օգտագործվում սինթեզի համար, քանի որ դրանց արժեքը զրո է:

Փորձեք խմբագրել այս օրինակը և նշել ձեր սեփական արժեքները, օրինակ rgb(100, 100, 100):

Գույնի կարգավորում RGBA-ի միջոցով

CSS3-ն ունի գույնի հետ աշխատելու նոր գործիք՝ RGBA ձևաչափը: Այն կարելի է անվանել RGB մոդելի էվոլյուցիա, բայց մեկ նոր ալիքի ավելացմամբ՝ A կամ ալֆա ալիքով: Այս ալիքը սահմանում է գույնի թափանցիկությունը: Դրա արժեքները սահմանվում են 0-ից 1 միջակայքում: 0 արժեքը համապատասխանում է ամբողջական թափանցիկությանը, 1-ը՝ լրիվ անթափանցիկությանը (գույնը կլինի նույնը, ինչ նշված է առաջին երեք RGB ալիքներում) և միջանկյալ արժեքներին . ինչպես 0.4 կամ 0.6 - կիսաթափանցիկությունը տարբեր աստիճաններով:

Օրինակ կոդ.

RGBA CSS3-ում

Ահա թե ինչպես այն կաշխատի.

Այս կոդը տեսողականորեն նման է հետևյալին, որն օգտագործում է RGB մոդելը՝ գունային արժեք նշելու համար.

RGBA CSS3-ում

Ահա նրա արդյունքը.

Ալֆա ալիքի արժեքը, որը հավասար է զրոյի, դարձնում է ցանկացած գույն անտեսանելի. 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 մոդելի իր ալիքի գույնի հագեցվածությունը:

HEX կոդը CSS-ում

#FF0000
#00FF00
#0000FF

Այս կոդը կցուցադրի հետևյալ տարրերը.

Եվ ահա վերևի այս էջի «Գույների կարգավորումը օգտագործելով 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 արժեքները և նկարագրությունը:

Աղյուսակ 1. Գույների անուններ
Անուն Գույն Կոդ 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. Գույները վեբ էջում