HTML Color Codes

ตัวเลือกสี HTML สำหรับรูปแบบ RGB HEX HSL

รับโค้ดสี HTML CSS สำหรับเว็บไซต์ของคุณได้อย่างง่ายดายโดยใช้ตัวเลือกสี แปลงรูปแบบสีระหว่าง HEX, RGB, HSL, HSV

เลือกสี

ใส่ค่าของสี

หรือใช้ตัวเลือก HTML5

สีที่เลือก

สีแดง: 0
สีเขียว: 255
สีน้ำเงิน: 255
HUE (องศา): 180
ความสว่าง: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
กลุ่มสี: Cyan
แชร์:
ตัวอย่างสี CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
สไตล์ที่มืดที่สุดและสว่างที่สุด

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

รับสีจากภาพ

get pixel color from pic

เลือกสีและสร้างพาเลต

select color and create palette

โค้ดสี HTML คืออะไร?

โค้ดสี HTML เป็นวิธีหนึ่งในการระบุสีในการออกแบบเว็บ โค้ดเหล่านี้ถูกใช้ใน HTML และ CSS เพื่อกำหนดสีขององค์ประกอบต่าง ๆ เช่น ข้อความ พื้นหลัง เส้นขอบ และอื่น ๆ ความเข้าใจในโค้ดสี HTML เป็นสิ่งสำคัญในการสร้างหน้าเว็บที่ดึงดูดสายตาและสม่ำเสมอ

ตัวอย่างเช่น สีแดงสามารถระบุตัวตนได้โดยใช้รูปแบบต่อไปนี้:

ประเภทของโค้ดสี HTML


โค้ดสีฐานสิบหก (Hexadecimal):
  • วิธีที่ใช้มากที่สุดในการระบุสีใน HTML และ CSS คือการใช้โค้ดสีฐานสิบหก (hex) โค้ดสี hex เป็นการรวมกันของตัวเลขและตัวอักษรหกหลักที่ถูกกำหนดโดยการผสมกันของส่วนประกอบสีแดง เขียว และน้ำเงิน (RGB)
  • รูปแบบ: #RRGGBB
  • ตัวอย่าง: #FF5733 แทนเฉดสีส้ม
  • แต่ละคู่ของตัวเลขสอดคล้องกับความเข้มของสีแดง เขียว และน้ำเงินตามลำดับในสเกลจาก 00 (ไม่มีความเข้ม) ถึง FF (ความเข้มเต็ม)
โค้ดสี RGB:
  • โค้ดสี RGB กำหนดสีตามส่วนประกอบของสีแดง เขียว และน้ำเงิน
  • รูปแบบ: rgb(แดง, เขียว, น้ำเงิน)
  • ตัวอย่าง: rgb(255, 87, 51) เป็นค่า RGB ที่เทียบเท่ากับ #FF5733
  • แต่ละส่วนประกอบ (แดง, เขียว, น้ำเงิน) จะถูกระบุเป็นตัวเลขระหว่าง 0 ถึง 255
โค้ดสี RGBA:
  • คล้ายกับ RGB แต่มีส่วนประกอบ alpha สำหรับความทึบแสง
  • รูปแบบ: rgba(แดง, เขียว, น้ำเงิน, alpha)
  • ตัวอย่าง: rgba(255, 87, 51, 0.5) กำหนดสีเดียวกันด้วยความทึบแสง 50%
โค้ดสี HSL:
  • HSL ย่อมาจาก Hue, Saturation, และ Lightness
  • รูปแบบ: hsl(hue, saturation%, lightness%)
  • ตัวอย่าง: hsl(9, 100%, 60%) เป็นอีกวิธีหนึ่งในการแทนสี #FF5733
  • Hue เป็นองศาบนวงล้อสี (จาก 0 ถึง 360) ความอิ่มตัวเป็นเปอร์เซ็นต์ (0% เป็นสีเทา 100% เป็นสีเต็ม) และความสว่างก็เป็นเปอร์เซ็นต์เช่นกัน (0% เป็นสีดำ 100% เป็นสีขาว)
โค้ดสี HSLA:
  • คล้ายกับ HSL แต่มีส่วนประกอบ alpha สำหรับความทึบแสง
  • รูปแบบ: hsla(hue, saturation%, lightness%, alpha)
  • ตัวอย่าง: hsla(9, 100%, 60%, 0.5) กำหนดสีเดียวกันด้วยความทึบแสง 50%
การใช้โค้ดสี HTML:

โค้ดสี HTML สามารถใช้ในคุณสมบัติ CSS ต่างๆ เพื่อกำหนดสไตล์ขององค์ประกอบเว็บ ตัวอย่างเช่น:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

ในตัวอย่างนี้ ข้อความ พื้นหลัง และขอบถูกกำหนดสไตล์โดยใช้โค้ดสี HTML ต่างๆ ทั้งหมดแสดงเฉดสีส้มเดียวกัน

โค้ดสี HTML เป็นส่วนสำคัญของการออกแบบเว็บ ที่ช่วยให้ผู้พัฒนากำหนดและจัดการสีได้อย่างแม่นยำ โดยการเข้าใจโค้ดสี hex, RGB, RGBA, HSL, และ HSLA คุณสามารถสร้างหน้าเว็บที่สวยงามและสอดคล้องทางสายตา ที่ช่วยปรับปรุงประสบการณ์ผู้ใช้

  • เพื่อดูชื่อสี css ทั้งหมด ให้ดูที่ส่วน ชื่อสี HTML
  • เพื่อดูกลุ่มสีทั้งหมด ให้ดูที่ส่วน กลุ่มสี
  • เพื่อดูแผนภูมิสี ให้ดูที่ส่วน แผนภูมิสี HTML
  • เพื่ออ่านเพิ่มเติมเกี่ยวกับสี html, Wikipedia มีแหล่งข้อมูลที่ดีเกี่ยวกับสีเว็บ: https://en.wikipedia.org/wiki/Web_colors.