nicetool.dev logo

แปลงสี

พิมพ์สี CSS ใดก็ได้ (HEX, rgb(), hsl(), oklch(), cmyk() หรือชื่อสี)

#3B82F6
รูปแบบ
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

คอนทราสต์ WCAG

Aa 123

ข้อความบนพื้นขาว

3.68:1

AAAA ตัวใหญ่AAA
Aa 123

ข้อความบนพื้นดำ

5.71:1

AAAA ตัวใหญ่AAA

เฉดสี

คลิกเฉดสีเพื่อใช้งาน

ทำไมต้องแปลงรูปแบบสี?

นักออกแบบและนักพัฒนาใช้สีหลายรูปแบบ: HEX ในเครื่องมือออกแบบ, rgb() และ hsl() ใน CSS, OKLCH ในระบบออกแบบสมัยใหม่อย่าง Tailwind CSS v4 และ CMYK สำหรับงานพิมพ์ เครื่องมือนี้แปลงระหว่างทั้งหมดได้ทันที

คุณสมบัติ

  • • แสดงผล HEX, RGB, HSL, HSV, HWB, OKLCH และ CMYK
  • • ตัวเลือกสีและแถบปรับความทึบ
  • • อัตราส่วนคอนทราสต์ WCAG 2 กับสีขาวและดำ
  • • สร้างพาเลตเฉดอ่อน-เข้มอัตโนมัติ

ทันทีและในเครื่อง

การแปลงทั้งหมดคำนวณในเบราว์เซอร์โดยไม่มีการเรียกเครือข่าย

สีที่อ่านง่าย ไม่มีการติดตาม

วิธีใช้ แปลงสี

  1. 1

    พิมพ์สีในรูปแบบ CSS ใดก็ได้ เช่น #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) หรือชื่อสีอย่าง tomato หรือเลือกด้วยตัวเลือกสีก็ได้

  2. 2

    ปรับแถบความทึบหากต้องการความโปร่งใส ทุกรูปแบบอัปเดตพร้อมกัน รวมถึง HEX 8 หลักและ rgba

  3. 3

    คัดลอกรูปแบบที่ต้องการ HEX สำหรับส่งต่องานออกแบบ rgb() หรือ hsl() สำหรับ CSS, OKLCH สำหรับ design token สมัยใหม่ และ CMYK เป็นจุดเริ่มต้นสำหรับงานพิมพ์

  4. 4

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

ตัวอย่างการใช้งานจริง

จากงานออกแบบสู่โค้ด

นักออกแบบส่ง #0EA5E9 จาก Figma มา แปลงเป็น hsl() เพื่อสร้างสถานะ hover และ active โดยเปลี่ยนเฉพาะความสว่าง

ตรวจการเข้าถึง

ข้อความเนื้อหาต้องมีอัตราคอนทราสต์อย่างน้อย 4.5:1 ตาม WCAG AA ตรวจสีแบรนด์ก่อนใช้เป็นพื้นหลังปุ่มที่มีตัวอักษรสีขาว

สร้างสเกลสี

ใช้เฉดสีที่สร้างขึ้นเป็นจุดเริ่มต้นของพาเลตต์ 50 ถึง 900 ใน Tailwind CSS หรือ design system ของคุณ

สื่อสิ่งพิมพ์

แปลงสีบนหน้าจอเป็น CMYK เพื่อคุยกับโรงพิมพ์ ให้ถือเป็นค่าโดยประมาณ สีพิมพ์ที่แม่นยำขึ้นกับกระดาษและโปรไฟล์ของเครื่องพิมพ์

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

RGB กับ HSL ต่างกันอย่างไร?+

ทั้งสองอธิบายสีเดียวกัน RGB ผสมแสงสีแดง เขียว และน้ำเงิน ส่วน HSL ใช้เฉดสี ความอิ่มตัว และความสว่าง ซึ่งคนปรับได้ง่ายกว่า เช่น ทำให้สว่างขึ้น 10%

ทำไมต้องใช้ OKLCH?+

OKLCH สม่ำเสมอตามการรับรู้ การเปลี่ยนความสว่างเท่ากันจะดูต่างกันเท่ากันในสายตา ต่างจาก HSL เบราว์เซอร์สมัยใหม่ทุกตัวรองรับ และช่วยให้สร้างสเกลสีและธีมมืดที่สม่ำเสมอได้ง่ายขึ้น

ต้องการอัตราคอนทราสต์เท่าไร?+

WCAG AA กำหนด 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (ราว 24 px หรือ 19 px ตัวหนา) ระดับ AAA เพิ่มเป็น 7:1 และ 4.5:1

ค่า CMYK แม่นยำหรือไม่?+

ไม่ การแปลง RGB บนหน้าจอเป็น CMYK โดยไม่มีโปรไฟล์สีให้ค่าประมาณทางคณิตศาสตร์ สำหรับงานพิมพ์ที่สำคัญต่อแบรนด์ ควรขอปรู๊ฟจากโรงพิมพ์หรืออ้างอิง Pantone