แก้ไขแล้ว: javascript hex เป็น rgb

ปัญหาหลักในการแปลงค่าสีเลขฐานสิบหกเป็น RGB คือไม่มีการโต้ตอบแบบหนึ่งต่อหนึ่งระหว่างสองรูปแบบ ตัวอย่างเช่น สี #FF0000 จะแสดงเป็น RGB เป็น 255, 0, 0 แต่ในฐานสิบหก สีจะเท่ากับสี #F0 ซึ่งหมายความว่าสีที่ต่างกันสองสีสามารถมีค่า RGB เท่ากันได้หากประกอบด้วยส่วนประกอบแต่ละสีในปริมาณที่แตกต่างกัน

"use strict";

function hexToRgb(hex) {
    var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

“ ใช้อย่างเข้มงวด”;

โค้ดบรรทัดนี้เปิดใช้งานโหมดเข้มงวด ซึ่งเป็นวิธีการเขียน JavaScript ที่ดีขึ้น ในโหมดเข้มงวด คุณไม่สามารถใช้ตัวแปรที่ไม่ได้ประกาศได้ โค้ดบรรทัดนี้ต้องอยู่ด้านบนสุดของไฟล์ JavaScript เพื่อให้โหมดเข้มงวดทำงานได้

ฟังก์ชัน hexToRgb (เลขฐานสิบหก) {
ผลลัพธ์ var = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
ส่งคืนผลลัพธ์ ? {
r: parseInt(ผลลัพธ์[1], 16),
g: parseInt(ผลลัพธ์[2], 16),
b: parseInt(ผลลัพธ์[3], 16)
} : โมฆะ;
}

นี่คือฟังก์ชันที่แปลงค่าสีฐานสิบหกเป็นค่าสี RGB ฟังก์ชันใช้พารามิเตอร์เดียว ซึ่งเป็นค่าสีฐานสิบหกที่คุณต้องการแปลง ฟังก์ชันใช้นิพจน์ทั่วไปเพื่อจับคู่รูปแบบของค่าสีฐานสิบหก และถ้าพบการจับคู่ ก็จะส่งคืนวัตถุที่มีค่าสีแดง สีเขียว และสีน้ำเงิน หากไม่พบรายการที่ตรงกัน ระบบจะคืนค่าเป็น null

การแปลงระหว่างสี

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

หากต้องการแปลงสีจากปริภูมิสีหนึ่งไปยังอีกสีหนึ่ง คุณสามารถใช้ฟังก์ชัน rgb() และ hsl() ฟังก์ชันเหล่านี้รับอาร์กิวเมนต์สามค่า: ค่าสีแดง สีเขียว และสีน้ำเงิน ตามลำดับ อาร์กิวเมนต์แรกระบุปริภูมิสีพื้นฐาน (เช่น RGB) ในขณะที่อาร์กิวเมนต์ที่สองและสามระบุปริภูมิสีเป้าหมาย (เช่น HSL)

หากต้องการแปลงสีจากรูปแบบพิกเซลหนึ่งเป็นอีกรูปแบบหนึ่ง คุณสามารถใช้ฟังก์ชัน css() ฟังก์ชันนี้ใช้สองอาร์กิวเมนต์: สตริงที่แสดงชื่อคุณสมบัติ CSS (เช่น "สี") และตัวเลขที่แสดงค่าที่ต้องการสำหรับคุณสมบัตินั้น (เช่น "50")

รูปแบบสี

มีรูปแบบสีต่างๆ สองสามรูปแบบที่คุณใช้ใน JavaScript ได้

RGB – แดง เขียว น้ำเงิน

เลขฐานสิบหก – #RRGGBB

HSL – สี ความอิ่มตัว ความสว่าง