CSS ranglar

Rang nomlari

Unsurni rangning nomidan foydalanib bo'yasa bo'ladi:

<h5 style="background-color: red">Ezgulik</h5>
Ezgulik

red dan tashqari boshqa ranglar bor.

Rang nomlarining ro'yxati

black (#000000)
silver (#C0C0C0)
gray (#808080)
grey (#808080)
white (#FFFFFF)
maroon (#800000)
red (#FF0000)
purple (#800080)
fuchsia (#FF00FF)
green (#008000)
lime (#00FF00)
olive (#808000)
yellow (#FFFF00)
navy (#000080)
blue (#0000FF)
teal (#008080)
aqua (#00FFFF)
darkblue (#00008B)
mediumblue (#0000CD)
darkgreen (#006400)
darkcyan (#008B8B)
deepskyblue (#00BFFF)
darkturquoise (#00CED1)
mediumspringgreen (#00FA9A)
springgreen (#00FF7F)
cyan (#00FFFF)
midnightblue (#191970)
dodgerblue (#1E90FF)
lightseagreen (#20B2AA)
forestgreen (#228B22)
seagreen (#2E8B57)
darkslategray (#2F4F4F)
darkslategrey (#2F4F4F)
limegreen (#32CD32)
mediumseagreen (#3CB371)
turquoise (#40E0D0)
royalblue (#4169E1)
steelblue (#4682B4)
darkslateblue (#483D8B)
mediumturquoise (#48D1CC)
indigo (#4B0082)
darkolivegreen (#556B2F)
cadetblue (#5F9EA0)
cornflowerblue (#6495ED)
rebeccapurple (#663399)
mediumaquamarine (#66CDAA)
dimgray (#696969)
dimgrey (#696969)
slateblue (#6A5ACD)
olivedrab (#6B8E23)
slategray (#708090)
slategrey (#708090)
lightslategray (#778899)
lightslategrey (#778899)
mediumslateblue (#7B68EE)
lawngreen (#7CFC00)
chartreuse (#7FFF00)
aquamarine (#7FFFD4)
skyblue (#87CEEB)
lightskyblue (#87CEFA)
blueviolet (#8A2BE2)
darkred (#8B0000)
darkmagenta (#8B008B)
saddlebrown (#8B4513)
darkseagreen (#8FBC8F)
lightgreen (#90EE90)
mediumpurple (#9370DB)
darkviolet (#9400D3)
palegreen (#98FB98)
darkorchid (#9932CC)
yellowgreen (#9ACD32)
sienna (#A0522D)
brown (#A52A2A)
darkgray (#A9A9A9)
darkgrey (#A9A9A9)
lightblue (#ADD8E6)
greenyellow (#ADFF2F)
paleturquoise (#AFEEEE)
lightsteelblue (#B0C4DE)
powderblue (#B0E0E6)
firebrick (#B22222)
darkgoldenrod (#B8860B)
mediumorchid (#BA55D3)
rosybrown (#BC8F8F)
darkkhaki (#BDB76B)
mediumvioletred (#C71585)
indianred (#CD5C5C)
peru (#CD853F)
chocolate (#D2691E)
tan (#D2B48C)
lightgray (#D3D3D3)
lightgrey (#D3D3D3)
thistle (#D8BFD8)
orchid (#DA70D6)
goldenrod (#DAA520)
palevioletred (#DB7093)
crimson (#DC143C)
gainsboro (#DCDCDC)
plum (#DDA0DD)
burlywood (#DEB887)
lightcyan (#E0FFFF)
lavender (#E6E6FA)
darksalmon (#E9967A)
violet (#EE82EE)
palegoldenrod (#EEE8AA)
lightcoral (#F08080)
khaki (#F0E68C)
aliceblue (#F0F8FF)
honeydew (#F0FFF0)
azure (#F0FFFF)
sandybrown (#F4A460)
wheat (#F5DEB3)
beige (#F5F5DC)
whitesmoke (#F5F5F5)
mintcream (#F5FFFA)
ghostwhite (#F8F8FF)
salmon (#FA8072)
antiquewhite (#FAEBD7)
linen (#FAF0E6)
lightgoldenrodyellow (#FAFAD2)
oldlace (#FDF5E6)
magenta (#FF00FF)
deeppink (#FF1493)
orangered (#FF4500)
tomato (#FF6347)
hotpink (#FF69B4)
coral (#FF7F50)
darkorange (#FF8C00)
lightsalmon (#FFA07A)
orange (#FFA500)
lightpink (#FFB6C1)
pink (#FFC0CB)
gold (#FFD700)
peachpuff (#FFDAB9)
navajowhite (#FFDEAD)
moccasin (#FFE4B5)
bisque (#FFE4C4)
mistyrose (#FFE4E1)
blanchedalmond (#FFEBCD)
papayawhip (#FFEFD5)
lavenderblush (#FFF0F5)
seashell (#FFF5EE)
cornsilk (#FFF8DC)
lemonchiffon (#FFFACD)
floralwhite (#FFFAF0)
snow (#FFFAFA)
lightyellow (#FFFFE0)
ivory (#FFFFF0)

RGB ranglar

Shu misolni ko'raylik

<h5 style="background-color: rgb(255, 0, 0)">Ezgulik</h5>

Brauzerda ko'ramiz

Ezgulik

Orqa rangi qizil bo'lib qoldi.

Shunday qilib yozsamchi

<h5 style="background-color: rgb(0, 255, 0)">Ezgulik</h5>

Brauzerda ko'ramiz

Ezgulik

Orqa rangi yashil bo'lib qoldi.

Shunday qilib yozsamchi.

<h5 style="background-color: rgb(0, 0, 255)">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Orqa rangi ko'k bo'lib qoldi.

Balki birinchi son qizilni, ikkinchisi yashilni, uchunchisi ko'kni belgilaydi? Shunday bo'lishi kerak, chunki rgb da birinchi harf "red" so'ziga, ikkinchi harf "green" so'ziga, uchinchi hafr "blue" so'ziga o'xshayapti.

Qizil bilan yashilni aralashtirsak nima bo'lar ekan?

<h5 style="background-color: rgb(255, 255, 0)">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Sariq rang chiqdi.

Boshqa ranglarni aralashtirib ko'ramiz.

<h5 style="background-color: rgb(50, 100, 200)">Ezgulik</h5>
Ezgulik

Yuqoridagi misolni qanday chunsa bo'ladi. Tasavvur qiling siz 50 qoshiq qizil, 100 qoshiq yashil va 200 qoshiq ko'k bo'yoqni chelakka soldingiz va aralashtirndingiz.

Yana misol.

<h5 style="background-color: rgb(128, 32, 76)">Ezgulik</h5>
Ezgulik

Rangning eng katta qiymati 255, eng kichkinasi esa 0.
Hammasini 0 qilsanglar qora rang chiqadi.

<h5 style="background-color: rgb(0, 0, 0)">Ezgulik</h5>
Ezgulik

Va hammasini 255 qilsanglar oq chiqadi.

<h5 style="background-color: rgb(255, 255, 255)">Ezgulik</h5>
Ezgulik

O'n oltilik sonlar

Shunday narsalarni ham saytlarda ko'rasiz.

<h5 style="background-color: #ff0000">Ezgulik</h5>
Ezgulik

Qizil rang chiqdi. Nimaga? Chunki ff 255 ga teng, 00 0 ga teng, va oxirgi 00 0 ga teng. 255 soni o'n oltilik tizimdaa ff deb yoziladi.

Yana misol.

<h5 style="background-color: #faf0e6">Ezgulik</h5>
Ezgulik

Yuqoridagi #faf0e6 rangi rgb(250, 240, 230) ga teng, chunki 250 o'n oltilik tizimda fa deb yoziladi, 240 f0 deb yoziladi, 230 e6 deb yoziladi.

RGBA - yarim shaffof ranglar

Shunday yozamiz.

<h5 style="background-color: rgba(255, 0, 0, 0.5)">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Nimani ko'ryapmiz? Yarim shaffof qizil rangni. Oxirgi 0.5 soni yarim shaffoflikni beradi. O'sha sonni 0 qilsanglar, mutlaqo shaffof rang chiqar edi, bu degani umuman ko'rinmaydigan.

<h5 style="background-color: rgba(255, 0, 0, 0)">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Mana, orqa rang umuman ko'rinmayapti, chunki u mutlaqo shaffof.

Lekin oxirgi sonni 1 deb yozsak.

<h5 style="background-color: rgba(255, 0, 0, 1)">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Oddiy qizil rang chiqyapti, shaffoflik yo'q. rgb(255, 0, 0) yozganimizda xuddi shu rang chiqar edi.

Yarim shaffof ranglardan foyda

Yarim shaffoflik nimaga kerak? Mana sizlarga misol.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
<h5 style="background-color: rgb(255, 0, 0); position: relative; top: -8px;">Ezgulik</h5>

Brauzerda ko'ramiz.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
Ezgulik

Yuqoridagi misolda h5 ning orqasida matn bor, lekin u matn faqat qisman ko'rinyapti.

Ammo h5 ning rangini yarim shaffof qilsam.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
<h5 style="background-color: rgba(255, 0, 0, 0.5); position: relative; top: -8px;">Ezgulik</h5>

Brauzerda ko'ramiz.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
Ezgulik

Engi h5 ning orqasidagi narsalar ko'rinyapti. Shu uchun yarim shaffof ranglar kerak.

O'n oltilik yarim shaffof rang

Misol.

<h5 style="background-color: #ff000080">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Yarim shaffof qizil chiqdi. Oxirgi 80 rangni yarim shaffof qiladi. Yuqoridagi rang rgba(255, 0, 0, 0.5) ga teng.

Mutlaqo shaffoflik kerak bo'lsa #ff000000 yozsa bo'ladi.

<h5 style="background-color: #ff000000">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Yuqoridagi rang rgba(255, 0, 0, 0) ga teng.

Shaffoflik kerak bo'lmasa #ff0000ff yozsa bo'ladi.

<h5 style="background-color: #ff0000ff">Ezgulik</h5>

Brauzerda ko'ramiz.

Ezgulik

Yuqoridagi rang rgba(255, 0, 0, 1) ga va rgb(255, 0, 0) ga teng.