CSS ranglar

Rang nomlari

Unsurni rangning nomidan foydalanib bo'yasa bo'ladi:

<div style="background-color: red">Ezgulik</div>
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

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

Brauzerda ko'ramiz

Ezgulik

Orqa rangi qizil bo'lib qoldi.

Shunday qilib yozsamchi

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

Brauzerda ko'ramiz

Ezgulik

Orqa rangi yashil bo'lib qoldi.

Shunday qilib yozsamchi.

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

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?

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

Brauzerda ko'ramiz.

Ezgulik

Sariq rang chiqdi.

Boshqa ranglarni aralashtirib ko'ramiz.

<div style="background-color: rgb(50, 100, 200)">Ezgulik</div>
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.

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

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

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

Va hammasini 255 qilsanglar oq chiqadi.

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

O'n oltilik sonlar

Shunday narsalarni ham saytlarda ko'rasiz.

<div style="background-color: #ff0000">Ezgulik</div>
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.

<div style="background-color: #faf0e6">Ezgulik</div>
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.

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

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.

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

Brauzerda ko'ramiz.

Ezgulik

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

Lekin oxirgi sonni 1 deb yozsak.

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

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
<div style="background-color: rgb(255, 0, 0); position: relative; top: -8px;">Ezgulik</div>

Brauzerda ko'ramiz.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
Ezgulik

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

Ammo div ning rangini yarim shaffof qilsam.

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

Brauzerda ko'ramiz.

Assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum assalomu alaykum
Ezgulik

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

O'n oltilik yarim shaffof rang

Misol.

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

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.

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

Brauzerda ko'ramiz.

Ezgulik

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

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

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

Brauzerda ko'ramiz.

Ezgulik

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