Lv.18 CSS Colors

CSS Color ค่าสีที่ใช้ในภาษา CSS ใช้ได้ทั้งแบบกำหนดชื่อสีตรงๆ หรือ RGB, RGBA HEX, HSL, และ HSLA

CSS color กับการกำหนดชื่อสีตรงๆ

เราสามารถใส่ค่าชื่อสีลงไปตรงๆ ได้เลย เช่น red, black, yellow, white, green, Violet เป็นต้น

ตัวอย่างสีพื้นหลัง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background-color: blue;">
	
	</body>
</html>

ตัวอย่างสีอักษร

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body>
		<h1 style="color:red;">หัวเรื่อง</h1>
		<p style="color:green;">ย่อหน้า</p>
	</body>
</html>

การกำหนดค่าสีแบบ RGB

ค่าสี RGB แสดงถึงแหล่งกำเนิดแสง RED, GREEN และ BLUE นั่นเอง ส่วนค่าสีของ Red Green Blue นั้น เริ่มที่ 0 – 255 ครับ

Syntax:

rgb(red(สีแดง), green(สีเขียว), blue(สีฟ้า));

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background-color:rgb(0,0,255);">
		<h1 style="color:rgb(255,0,0);">หัวเรื่อง</h1>
		<p style="border:10px solid rgb(255,165,0);">ย่อหน้า</p>
	</body>
</html>

กำหนดพื้นหลังสีฟ้า h1 อักษรสีแดง p เส้นขอบสีเหลือง

การกำหนดค่าสีแบบ RGBA

การกำหนดค่าสีแบบ RGBA นั้น ก็ใช้แบบเดียวกันกับการกำหนดค่าสีแบบ RGB แต่จะเพิ่มอีก1ค่าขึ้นมา คือค่าความทึบแสง(Alpha)นั่นเอง ส่วนค่า Alpha(ความทึบแสง)นั้น มีค่าเริ่มที่ 0.0(ไม่มีสี) – 1.0(สีปกติ)

Syntax:

rgba(red(สีแดง), green(สีเขียว), blue(สีฟ้า), alpha(ความทึบแสง));

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background-color:rgba(255,0,0,0.1);">
	
	</body>
</html>

เปลี่ยนสีพื้นหลังเป็นสีแดงและมีค่าความทึบแสงอ่อนที่สุด แต่ถ้ากำหนดค่าความทึบแสงเท่ากับ 1 มันก็จะเป็นสีแดงปกติ โดยที่ไม่มีค่าความทึบแสงเลย และถ้ากำหนดค่าความทึบแสงเท่ากับ 0 มันก็จะไม่มีสี(Transparent)

การกำหนดค่าสีแบบ HEX

การกำหนดค่าสีแบบ HEX นั้น ก็คือการกำหนดค่าสีแบบเลขฐานสิบหกครับ

สามารถระบุสีได้โดยใช้ค่าเลขฐานสิบหกในรูปแบบ (#rrggbb)
โดย rr(สีแดง) gg(สีเขียว) bb(สีฟ้า)

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background:blue;">
		<p style="color:#ff0000;">อักษรสีแดง</p>
		<p style="color:#00ff00;">อักษรสีเขียว</p>
		<p style="color:#00000;">อักษรสีดำ</p>
		<p style="color:#ffffff;">อักษรสีขาว</p>
	</body>
</html>

การกำหนดค่าสีแบบ HSL

HSL ย่อมาจาก hue, saturation และ lightness

hue ค่าสีเริ่มที่ 0 – 360 เช่น 0 คือสีแดง, 120 คือสีเขียว, 240 คือสีฟ้า
saturation คือ การไล่เฉดสี เริ่มจาก 0%(สีเทา) – 100%(สีแดง)
lightness คือ ความสว่างเป็นเปอร์เซ็นต์ เริ่มจาก 0%(สีดำ) – 100%(สีขาว)

Syntax:

hsl(hue(สี), saturation(เฉดสี), lightness(ความสว่าง));

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background:hsl(0,100%,0%);">
		<p style="color:hsl(0, 100%, 50%);">อักษรสีแดง</p>
	</body>
</html>

การกำหนดค่าสีแบบ HSLA

การกำหนดค่าสีแบบ HSLA นั้น ก็ใช้แบบเดียวกันกับการกำหนดค่าสีแบบ HSL แต่จะเพิ่มอีก1ค่า คือค่าความทึบแสง(Alpha) และค่าความทึบแสงนี้ ก็ใช้งานเหมือนกันกับค่าทึบแสงใน RGBA ด้วย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | HTML Colors</title>
	</head>
	<body style="background:hsla(255,100%,40%,0.5);">
		<p style="color:hsl(255, 100%, 40%, 0.9);">อักษรสีน้ำเงิน</p>
	</body>
</html>
Top