tigtools

ตัวแปลงสี

พิมพ์หรือวางค่าสีในรูปแบบที่รองรับ หรือเลือกสี แล้วรูปแบบอื่นทั้งหมดจะอัปเดตทันที

ทำงานในเบราว์เซอร์ของคุณ ไม่ต้องสมัคร

อ่านค่าเป็น HEX

HEX
#336699
RGB
rgb(51, 102, 153)
HSL
hsl(210, 50%, 40%)
HWB
hwb(210 20% 40%)
OKLCH
oklch(49.93% 0.0987 250.43)
CMYK
cmyk(66.7%, 33.3%, 0%, 40%)

CMYK ในเครื่องมือนี้คำนวณด้วยสูตรอย่างง่าย ไม่ได้จัดการสี สำหรับงานพิมพ์ ให้แปลงสีโดยใช้โปรไฟล์ ICC ที่เครื่องพิมพ์ของคุณให้มา

วิธีใช้งาน

  1. พิมพ์หรือวางค่าสี เช่น #1e90ff, rgb(30 144 255) หรือ oklch(65% 0.18 250) หรือคลิกตัวเลือกสี
  2. ตรวจดูตัวอย่างสีเพื่อยืนยันว่าสีตรงตามที่ต้องการ
  3. คัดลอกรูปแบบที่ต้องการจากรายการ ค่าที่มีความโปร่งใสจะคงค่าอัลฟาไว้

วิธีการทำงาน

รูปแบบอินพุตที่รองรับ: HEX แบบ 3, 4, 6 หรือ 8 หลัก (หลักที่ 4 และ 8 คือค่าอัลฟา), rgb() และ rgba() ที่ใช้ตัวเลขหรือเปอร์เซ็นต์, hsl() และ hsla(), hwb(), oklch() และ cmyk() ที่ใช้เปอร์เซ็นต์หรือตัวเลขตั้งแต่ 0 ถึง 100 รองรับทั้งไวยากรณ์แบบเดิมที่คั่นด้วยจุลภาค และไวยากรณ์แบบใหม่ที่ใช้ช่องว่างร่วมกับ “/ alpha” ค่าเฉดสีรองรับ deg, turn, rad และ grad ไม่รองรับชื่อสี เช่น “tomato” ให้ใช้ตัวเลือกสีหรือป้อนรหัสสีแทน

การแปลงทั้งหมดใช้ sRGB เป็นพื้นฐาน HSL และ HWB เป็นเพียงการปรับรูปแบบค่า RGB จึงแปลงกลับได้ตรงกัน ส่วน OKLCH เป็นปริภูมิสีเชิงการรับรู้ โดยระดับความสว่างที่เพิ่มเท่ากันจะดูแตกต่างกันใกล้เคียงกัน จึงมีประโยชน์สำหรับสร้างชุดสี คำนวณด้วยเมทริกซ์ OKLab ที่เผยแพร่ไว้ สี OKLCH บางสีอยู่นอกขอบเขตสีที่ sRGB แสดงได้ เครื่องมือจะแจ้งให้ทราบและแสดงสีที่ใกล้เคียงที่สุดซึ่งหน้าจอแสดงได้

CMYK คำนวณด้วยสูตรพื้นฐานที่ใช้กันทั่วไป (K = 1 − ช่องสี RGB ที่มีค่าสูงสุด) ผลลัพธ์การพิมพ์จริงขึ้นอยู่กับกระดาษ หมึก และโปรไฟล์ ICC จึงควรใช้ตัวเลขเหล่านี้เป็นจุดเริ่มต้น ไม่ใช่ข้อกำหนดสำหรับการพิมพ์

ตัวอย่าง

แปลงรหัส HEX ของแบรนด์เป็น CSS

คู่มือสไตล์ระบุรหัส HEX เป็น #0b5d1e วางรหัสนี้เพื่อรับค่า rgb(11, 93, 30) สำหรับ CSS รุ่นเก่า, hsl(133.9, 78.8%, 20.4%) สำหรับปรับความสว่างด้วยตนเอง และค่า oklch() สำหรับฟังก์ชันสี CSS สมัยใหม่

อ่านค่าสีที่มีความโปร่งใส

rgba(0, 0, 0, 0.5) จะแปลงเป็น #00000080 เลข HEX สองหลักสุดท้าย (80) คือค่าอัลฟา: 128 จาก 255 หรือประมาณ 50 %

ตรวจสอบค่า OKLCH จากไฟล์ออกแบบ

oklch(70% 0.4 150) เป็นสีเขียวที่อิ่มตัวมาก ซึ่งหน้าจอ sRGB แสดงผลไม่ได้ เครื่องมือจะแจ้งให้ทราบและแสดงสี sRGB ที่ใกล้เคียงที่สุด เพื่อให้คุณทราบว่าสีในการออกแบบจะดูแตกต่างกันบนจอแสดงผลส่วนใหญ่

คำถามที่พบบ่อย

ทำไมแปลงเป็น HSL แล้วแปลงกลับ บางครั้งค่า HEX จึงเปลี่ยนไปหนึ่งค่า?

HEX เก็บค่าแต่ละช่องเป็นจำนวนเต็มตั้งแต่ 0 ถึง 255 ส่วนค่าในรูปแบบอื่นจะถูกปัดเศษตอนแสดงผล (HSL ปัดเป็นทศนิยมหนึ่งตำแหน่ง) เมื่อนำค่าที่ปัดแล้วกลับมาแปลงอีกครั้ง ผลลัพธ์อาจคลาดเคลื่อนไปหนึ่งขั้น หากต้องการค่าเดิมที่ถูกต้อง ให้คัดลอกค่า HEX

ค่า CMYK ใช้สำหรับงานพิมพ์ได้ถูกต้องหรือไม่?

ไม่ถูกต้องเสมอไป เพราะค่านี้ใช้สูตรพื้นฐานที่ไม่มีโปรไฟล์สี เครื่องพิมพ์ใช้โปรไฟล์ เช่น FOGRA หรือ GRACoL ซึ่งให้ค่าต่างกัน โปรดสอบถามร้านพิมพ์หรือแปลงสีในแอปพลิเคชันที่จัดการสีได้

OKLCH คืออะไร และใช้ใน CSS ได้หรือไม่?

OKLCH อธิบายสีด้วยความสว่างที่รับรู้ได้ โครมา (ความสดของสี) และเฉดสี เบราว์เซอร์หลักเวอร์ชันปัจจุบันรองรับ oklch() ใน CSS หากต้องรองรับเบราว์เซอร์รุ่นเก่า ให้เตรียมค่า HEX หรือ rgb() สำรองไว้

รหัส HEX 8 หลักหมายถึงอะไร?

#RRGGBBAA: ตัวเลขสองหลักสุดท้ายคือค่าความทึบ ตั้งแต่ 00 (โปร่งใสทั้งหมด) ถึง ff (ทึบแสงทั้งหมด) รูปแบบ 4 หลัก #RGBA ทำงานแบบเดียวกัน โดยใช้หนึ่งหลักต่อช่องสี

ความเป็นส่วนตัว

แปลงสีในเบราว์เซอร์ของคุณ ข้อมูลที่ป้อนไม่ถูกส่งไปที่ใดหรือจัดเก็บไว้