เครื่องมือเลือกและแปลงสี Hex (RGB, HSL, HSV, CMYK, OKLCH)

แปลงสีใดก็ได้เป็น HEX, RGB, HSL, HSV, CMYK และ OKLCH ตรวจคอนทราสต์ คัดลอกสวอตช์ความกลมกลืน และส่งออก CSS หรือ JSON—ตรงในเบราว์เซอร์

จำเป็นต้องมี JavaScript สำหรับคุณลักษณะเชิงโต้ตอบ โปรดเปิดใช้งาน JavaScript ในเบราว์เซอร์ของคุณเพื่อใช้เครื่องมือนี้

ค่าสี

ป้อน hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() หรือชื่อสี CSS ค่าที่ไม่ถูกต้องจะคงการแปลงครั้งล่าสุดที่ถูกต้องไว้

ชื่อ CSS ที่ใกล้เคียงที่สุด: royalblue

ความทึบ100%

การแปลง

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

CMYKcmyk(76%, 47.2%, 0%, 3.5%)

OKLCHoklch(0.623 0.188 259.815)

คอนทราสต์ WCAG

บนพื้นหลังสีขาว

3.68:1

ผ่าน WCAG AA (ข้อความใหญ่เท่านั้น)

บนพื้นหลังสีดำ

5.71:1

ผ่าน WCAG AA (ข้อความปกติ)

สวอตช์ความกลมกลืน

ประเภทความกลมกลืน

จำนวนสวอตช์

แถบเฉดสี/เงา

ขั้นตอนเฉดสี/เงา

ส่งออกสวอตช์

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "alpha": 1,
  "namedColor": "royalblue",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7,
  "contrast": {
    "onWhite": 3.68,
    "onBlack": 5.71
  }
}

เลือกหรือวางรูปแบบสีใดก็ได้ แปลงเป็น HEX, RGB, HSL, HSV, CMYK และ OKLCH ตรวจคอนทราสต์ WCAG สร้างสวอตช์ความกลมกลืน คัดลอกค่า และส่งออก CSS หรือ JSON ฟรี รวดเร็ว และทำงานทั้งหมดในเบราว์เซอร์

วิธีใช้ตัวเลือกสีนี้

พิมพ์หรือวางรูปแบบสีที่รองรับ ปรับความทึบ หรือใช้ตัวเลือกของระบบ หน้านี้แปลงเป็น HEX, RGB, HSL, HSV, CMYK และ OKLCH ทันที แสดงคอนทราสต์ WCAG บนสีขาวและดำ สร้างสวอตช์ความกลมกลืนและแถบเฉดสี/เงา และเตรียมทุกอย่างให้พร้อมคัดลอก แชร์การตั้งค่าผ่าน URL—สถานะจัดเก็บในสตริงคิวรี

อ้างอิง HEX, RGB, HSL, HSV, CMYK และ OKLCH

Hex คือการเข้ารหัส RGB แบบกะทัดรัด RGB อธิบายช่องสีแดง/เขียว/น้ำเงิน HSL แสดงเฉดสี ความอิ่มตัว และความสว่าง HSV ใช้เฉดสี ความอิ่มตัว และค่า (ความสว่าง) CMYK จำลองเปอร์เซ็นต์หมึกพิมพ์ OKLCH เป็นพื้นที่สี CSS ที่สม่ำเสมอตามการรับรู้ เครื่องมือนี้ใช้การคำนวณแบบกำหนดได้ในเบราว์เซอร์ ไม่มีการอัปโหลดและไม่มี API ภายนอก

สีตรงข้าม ใกล้เคียง สามสี ตรงข้ามแยก สี่สี และโมโนโครม

สีตรงข้ามหมุนเฉดสี 180° สีใกล้เคียงก้าวเฉดสีด้วยมุมคงที่รอบสีฐาน สามสีใช้ออฟเซ็ต 120° สีตรงข้ามแยกเพิ่มสองเฉดใกล้สีตรงข้าม สี่สีใช้ออฟเซ็ตสี่เหลี่ยม 90° โมโนโครมคงเฉดสีและเปลี่ยนความสว่าง การควบคุมจำนวนใช้กับโหมดใกล้เคียงและโมโนโครม

ตัวแปร CSS และการส่งออก JSON

การส่งออกสร้างคุณสมบัติ :root ที่กำหนดเองด้วยชื่อคงที่ (เช่น --color-base, --color-analogous-1) และ JSON พร้อม baseHex, alpha, namedColor, โหมดความกลมกลืน อัตราส่วนคอนทราสต์ และรายการสวอตช์สำหรับสคริปต์หรือโทเค็นการออกแบบ

ตัวตรวจคอนทราสต์ WCAG

อัตราส่วนคอนทราสต์คำนวณจากความสว่างสัมพัทธ์ตาม WCAG 2.x AA ต้องการ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความใหญ่ AAA ต้องการ 7:1 ใช้ตัวอย่างเมื่อเลือกสีข้อความหรือ UI บนพื้นหลังสว่างหรือมืด

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

ฉันสามารถป้อนรูปแบบสีใดได้บ้าง?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb()/rgba(), hsl()/hsla(), hsv(), cmyk(), oklch() และชื่อสี CSS มาตรฐานทั้งหมด เช่น cornflowerblue หรือ rebeccapurple

#ABC ขยายเป็นหกหลักหรือไม่?

ใช่ hex สามหลักจะขยายต่อคู่หลัก ดังนั้น #ABC จึงกลายเป็น #AABBCC

จะเกิดอะไรขึ้นหากสีของฉันไม่ถูกต้อง?

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

ตัวตรวจคอนทราสต์ WCAG ทำงานอย่างไร?

คำนวณอัตราส่วนคอนทราสต์ระหว่างสีของคุณกับสีขาวหรือดำบริสุทธิ์โดยใช้ความสว่างสัมพัทธ์ ผลลัพธ์แสดงว่าสีผ่านเกณฑ์ AA หรือ AAA สำหรับข้อความปกติหรือใหญ่หรือไม่

สีความกลมกลืนคำนวณอย่างไร?

เป็นแบบกำหนดได้: สีตรงข้ามคือการเลื่อนเฉด 180° สีใกล้เคียงใช้ขั้นเฉดคงที่ สามสีใช้ออฟเซ็ต 120° สีตรงข้ามแยกใช้เฉดใกล้สีตรงข้าม สี่สีใช้ออฟเซ็ตสี่เหลี่ยม 90° โมโนโครมเปลี่ยนความสว่างโดยคงเฉดและความอิ่มตัวจากสีฐาน

การส่งออก JSON มีอะไรบ้าง?

คีย์คงที่: baseHex, alpha, namedColor, harmony, harmonyCount เมื่อใช้ได้, harmonySwatches, tintShadeStrip, stripCount และอัตราส่วนคอนทราสต์—เหมาะสำหรับเครื่องมือหรือเอกสาร

ฉันสามารถแชร์สีของฉันได้หรือไม่?

ได้ URL อัปเดตด้วย hex, alpha, โหมดความกลมกลืน จำนวน และขนาดแถบ เพื่อให้คุณบุ๊กมาร์กหรือแชร์การตั้งค่าที่แน่นอนได้