CSS 合法颜色值

CSS အရောင်

CSS 中的颜色可以通过以下方法指定：

  • 十六进制颜色
  • 带透明度的十六进制颜色
  • RGB 颜色
  • RGBA အရောင်
  • HSL အရောင်
  • HSLA 颜色
  • 预定义/跨浏览器的颜色名称
  • အသုံးပြုပါ: currentcolor 关键字

十六进制颜色

用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。

例如，＃0000ff 值呈现为蓝色，因为蓝色分量设置为最高值（ff），其他分量设置为 00。

အကျိုးသတ္တု

定义不同的 HEX 颜色：

#p1 {background-color: #ff0000;}   /* 红色 */
#p2 {background-color: #00ff00;}   /* 绿色 */
#p3 {background-color: #0000ff;}   /* 蓝色 */

ကိုယ်တိုင် ကြိုးစားလမ်း

带透明度的十六进制颜色

用 #RRGGBB 规定十六进制颜色。如需增加透明度，请在 00 和 FF 之间添加两个额外的数字。

အကျိုးသတ္တု

定义带透明度的 HEX 颜色：

#p1a {background-color: #ff000080;}   /* 带透明度的红色 */
#p2a {background-color: #00ff0080;}   /* 带透明度的绿色 */
#p3a {background-color: #0000ff80;}   /* 带透明度的蓝色 */

ကိုယ်တိုင် ကြိုးစားလမ်း

RGB 颜色

RGB 颜色值由 rgb() 函数အသုံးပြုပါ:

rgb(red, green, blue)

每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。

例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。

အခြားတွင် အောက်ပါ အမှတ်အရာများသည် အတူတူအရောင်ကို အသုံးပြုပါ: rgb(0,0,255) နှင့် rgb(0%,0%,100%)。

အကျိုးသတ္တု

အမျိုးမျိုးသော RGB အရောင်ကို အသုံးပြုပါ:

#p1 {background-color: rgb(255, 0, 0);}   /* အပြင်းအသားရောင် */
#p2 {background-color: rgb(0, 255, 0);}   /* သစ်သားရောင် */
#p3 {background-color: rgb(0, 0, 255);}   /* ကြေးပြာရောင် */

ကိုယ်တိုင် ကြိုးစားလမ်း

RGBA အရောင်

RGBA အရောင်သည် RGB အရောင်အမှတ်ကို အပိုကောင်းများစွာ ဖွဲ့စည်းထားပြီး အောက်ဆီး (Alpha) ခွဲအား ထိန်းချုပ်သည် - အရာတစ်ခု၏ အမှီအမဲကို အသုံးပြုပါ。

RGBA အရောင်သည် RGBA အရောင်အမှတ်ကို ထုတ်ပြန်သည်: rgba() သတ္တိပုံအသုံးပြုပါ:

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

အကျိုးသတ္တု

အမျိုးမျိုးသော အောက်ဆီးအရောင်ကို အသုံးပြုပါ:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* အပြင်းအသားရောင်နှင့် အမှီအမဲ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* သစ်သားရောင်နှင့် အမှီအမဲ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* ကြေးပြာရောင်နှင့် အမှီအမဲ */

ကိုယ်တိုင် ကြိုးစားလမ်း

HSL အရောင်

HSL သည် အရောင်အသတ္တိ (hue)、အောက်ဆီး (saturation) နှင့် အရောင်သတ္တိ (lightness) ဖြစ်ပြီး အရောင်ကို ဆိုင်းအရာအမှတ်အရာအရည်ပုံဖြစ်သည်。

အသုံးပြုပါ: hsl() သတ္တိပုံHSL အရောင်အမှတ်ကိုအသုံးပြုပါ:

hsl(hue, saturation, lightness)

အရောင်သတ္တိသည် အရောင်ရာသီဓိတွင် အဆင်းအတိုင်းဖြစ်သည် (0 မှ 360 ထိ) - 0 (သို့မဟုတ် 360) သည် အပြင်းအသားဖြစ်ပြီး 120 သည် သစ်သားဖြစ်ပြီး 240 သည် ဂါဖြစ်သည်。

အောက်ဆီးအရောင်သည် ရာခိုင်နှုန်းတစ်ခုဖြစ်သည်; 0% သည် ဂါဇာအရောင်ဖြစ်ပြီး 100% သည် အရောင်အလွန်အပြည့်အဝင်ဖြစ်သည်。

အရောင်သတ္တိသည် ရာခိုင်နှုန်းတစ်ခုဖြစ်သည်; 0% သည် ရှားစေးရောင်ဖြစ်ပြီး 100% သည် ဘိုးဖြစ်သည်。

အကျိုးသတ္တု

အမျိုးမျိုးသော HSL အရောင်အထောက်အချက်များကိုလိုက်နာပါ:

#p1 {background-color: hsl(120, 100%, 50%);}   /* ဂါ */
#p2 {background-color: hsl(120, 100%, 75%);}   /* သစ်သားဂါ */
#p3 {background-color: hsl(120, 100%, 25%);}   /* သစ်သားဖြူ */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

ကိုယ်တိုင် ကြိုးစားလမ်း

HSLA 颜色

HSLA 颜色值是 HSL 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

HSLA 颜色值由 hsla() 函数指定，该函数的语法如下：

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

အကျိုးသတ္တု

定义带有不透明度的不同 HSL 颜色：

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* 带不透明度的柔绿色 */

ကိုယ်တိုင် ကြိုးစားလမ်း

预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

အကျိုးသတ္တု

定义不同的颜色名：

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

ကိုယ်တိုင် ကြိုးစားလမ်း

所有预定义名称的列表都可以在我们的 颜色名称参考手册 中找到。

currentcolor အကြောင်း

currentcolor အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ အကြောင်းကို လက်ခံကြည့်တဲ့ စာအုပ်

အကျိုးသတ္တု

အောက်ပါ <div> အရာ၏ နည်းပြားပြောင်း အသား အကြောင်း သည် ပုံစံဖော်ပြ ဖြစ်ပါသည်။ မည်သည့် <div> အရာ၏ နည်းပြားပြောင်း သည် ကြယ်စင်ကဲ့သို့ ဖြစ်လာသည်ကို သိရှိနိုင်သည်ဖြစ်သည်။

#myDIV {
  color: blue; /* ကြယ်စင်ကဲ့သို့ နည်းပြားပြောင်း */
  border: 10px solid currentcolor; /* ကြယ်စင်ကဲ့သို့ နည်းပြားပြောင်း */
}

ကိုယ်တိုင် ကြိုးစားလမ်း