คุณพบสีที่สมบูรณ์แบบในรูปแบบ HEX แต่เครื่องมือออกแบบต้องการ RGB หรือลูกค้าส่งสีมาเป็น RGB แล้วคุณต้องการค่า HSL สำหรับ CSS การแปลงรูปแบบสีเป็นงานประจำวันของนักออกแบบและนักพัฒนา ตัวแปลงสี ทำให้ทันที
สิ่งที่ต้องใช้
- ค่าสีในรูปแบบใดก็ได้ (HEX, RGB, HSL หรืออื่นๆ)
- เว็บเบราว์เซอร์ (Chrome, Firefox, Safari หรือ Edge)
- ไม่ต้องมีบัญชีหรือติดตั้ง
คู่มือทีละขั้นตอน
ป้อนค่าสี
เปิดเครื่องมือ ตัวแปลงสี พิมพ์หรือวางค่าสีในรูปแบบที่รองรับ เช่น ป้อน #3B82F6 เป็น HEX, rgb(59, 130, 246) เป็น RGB หรือ hsl(217, 91%, 60%) เป็น HSL เครื่องมือจดจำรูปแบบโดยอัตโนมัติ
ดูการแปลงทุกรูปแบบ
เครื่องมือแสดงสีของคุณในทุกรูปแบบที่รองรับทันที: HEX, RGB, HSL และอื่นๆ คุณเห็นตัวอย่างสีสดพร้อมค่าเทียบเท่าทั้งหมด หากต้องการปรับสี ใช้ตัวเลือกสีเพื่อปรับแต่งทางสายตา
คัดลอกรูปแบบที่ต้องการ
คลิกปุ่มคัดลอกข้างรูปแบบใดก็ได้เพื่อคัดลอกค่าไปยังคลิปบอร์ด วางลงในไฟล์ CSS เครื่องมือออกแบบ หรือที่ใดก็ได้โดยตรง ไม่ต้องพิมพ์ใหม่
ควรรู้ ตัวแปลงสีทำงานทั้งหมดในเบราว์เซอร์ ใช้ได้แม้ไม่มีอินเทอร์เน็ตเมื่อโหลดแล้ว ไม่ต้องมีบัญชีหรือติดตั้ง
ทำความเข้าใจรูปแบบสี
เครื่องมือและบริบทต่างๆ ใช้รูปแบบสีต่างกัน นี่คือเมื่อไหร่ควรใช้แต่ละแบบ:
HEX
รูปแบบที่พบบ่อยที่สุดบนเว็บ สี HEX ขึ้นต้นด้วย # ตามด้วยอักขระหกตัว (ตัวอักษรและตัวเลข) เช่น #FF5733
- ใช้ใน: CSS, HTML, เครื่องมือออกแบบ (Figma, Sketch, Photoshop)
- รูปแบบ:
#RRGGBBโดยแต่ละคู่เป็นค่าฐานสิบหกจาก 00 ถึง FF - ตัวอย่าง:
#3B82F6(สีน้ำเงินปานกลาง)
RGB
อธิบายสีด้วยองค์ประกอบ Red, Green และ Blue แต่ละค่าตั้งแต่ 0 ถึง 255
- ใช้ใน: CSS (ฟังก์ชัน
rgb()), ภาษาโปรแกรม, ไฟ LED - รูปแบบ:
rgb(red, green, blue) - ตัวอย่าง:
rgb(59, 130, 246)
HSL
อธิบายสีด้วย Hue (0-360 องศาบนวงล้อสี), Saturation (0-100%) และ Lightness (0-100%)
- ใช้ใน: CSS (ฟังก์ชัน
hsl()), ทฤษฎีสี, ระบบการออกแบบ - รูปแบบ:
hsl(hue, saturation%, lightness%) - ตัวอย่าง:
hsl(217, 91%, 60%)
เคล็ดลับ HSL เป็นรูปแบบที่เข้าใจง่ายที่สุดสำหรับปรับสี ต้องการเฉดสว่างขึ้น? เพิ่มค่า lightness ต้องการโทนอ่อนลง? ลดค่า saturation ทำให้ HSL เหมาะอย่างยิ่งสำหรับสร้างระบบสีและตัวแปรของสีพื้นฐาน
เมื่อไหร่ใช้รูปแบบไหน
| สถานการณ์ | รูปแบบที่แนะนำ |
|---|---|
| เขียน CSS ด้วยมือ | HEX (สั้นและคุ้นเคย) หรือ HSL (ปรับง่าย) |
| สเปคเครื่องมือออกแบบ | HEX (มาตรฐานอุตสาหกรรม) |
| จัดการสีแบบไดนามิกในโค้ด | HSL (ปรับทางโปรแกรมง่ายที่สุด) |
| สื่อสารสีกับลูกค้า | HEX (เป็นที่รู้จักมากที่สุด) |
| การออกแบบสำหรับพิมพ์ | CMYK (แยกจากรูปแบบหน้าจอ) |
มากกว่าสีเดียว
เมื่อแปลงสีแล้ว คุณอาจต้องการสำรวจเครื่องมือที่เกี่ยวข้อง:
- ตัวสร้าง Gradient: สร้าง CSS gradient ราบรื่นด้วยสีของคุณ ป้อนสองสีขึ้นไปแล้วได้โค้ด gradient พร้อมวางใน stylesheet
- ตัวสร้างจานสี: สร้างจานสีที่ลงตัวจากสีเริ่มต้น ได้สีเสริม สีข้างเคียง สี triadic และโทนสีอื่นๆ อัตโนมัติ
เครื่องมือเหล่านี้ทำงานร่วมกับตัวแปลงสีเพื่อช่วยสร้างระบบสีที่สมบูรณ์สำหรับโปรเจกต์
สำคัญ สีอาจดูต่างกันบนจอแสดงผลต่างกันเนื่องจากการปรับเทียบจอ โปรไฟล์สี และค่าความสว่าง เมื่อความแม่นยำของสีสำคัญ (แบรนด์ การพิมพ์) ตรวจสอบสีบนสื่อเป้าหมายเสมอ ไม่ใช่แค่บนหน้าจอ
คำถามที่พบบ่อย
ความแตกต่างระหว่าง HEX กับ RGB คืออะไร?
แทนข้อมูลเดียวกันในสัญลักษณ์ที่ต่างกัน HEX ใช้ฐานสิบหก (base-16) และ RGB ใช้ฐานสิบ (base-10) #FF0000 และ rgb(255, 0, 0) เป็นสีแดงบริสุทธิ์ทั้งคู่
แปลงเป็น CMYK สำหรับพิมพ์ได้ไหม? รูปแบบสีหน้าจอ (HEX, RGB, HSL) และรูปแบบพิมพ์ (CMYK) เป็นโมเดลสีที่แตกต่างกันโดยพื้นฐาน มีสูตรแปลงทางคณิตศาสตร์ แต่สำหรับสีพิมพ์ที่แม่นยำควรใช้เครื่องมือจัดการสีระดับมืออาชีพ
แล้วความโปร่งใส (alpha) ล่ะ?
HEX รองรับ alpha ด้วยอักขระเพิ่มสองตัว (#3B82F680) RGB และ HSL รองรับเป็นฟังก์ชัน rgba() และ hsla() ตัวแปลงสีจัดการรูปแบบเหล่านี้ด้วย
ขั้นตอนถัดไป
เมื่อแปลงสีแล้ว ลอง ตัวสร้าง Gradient เพื่อสร้าง CSS gradient สวยๆ หรือใช้ ตัวสร้างจานสี เพื่อสร้างโทนสีครบจากสีที่เลือก