Lv.11 HTML สี(colors)

HTML สี ในบทความนี้ครอบคลุมถึงวิธีการใช้งานสีบนเว็บไซต์ด้วยวิธีที่ง่ายและสะดวกมากๆ สีมีบทบาทสำคัญในการสร้างเว็บไซต์ให้ดูสวยงาม สะอาด ดูเป็นมิตรกับผู้ใช้งาน HTML ไม่มีแท็กเรียกใช้งานสีตรงๆในตัวเอง แต่จะใช้แอตทริบิวต์ style เรียก Property color และ Value (ค่าสี) ของ CSS มาใช้งาน สีจะถูกฝังอยู่ในอิลิเมนต์ของ HTML ส่วนมากจะใช้ Cascading Style Sheet (CSS) เป็นตัวกำหนดค่าสีให้ HTML

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

HTML สี การกำหนดแบบชื่อสีตรงๆเลย

เราสามารถใส่ค่าชื่อสีลงไปตรงๆ ได้เลย เช่น 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