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

แปลงเลขฐานสิบหกเป็น RGB, HSL และ HSV คัดลอกตัวอย่างฮาร์โมนี่ และส่งออก CSS หรือ JSON จากเบราว์เซอร์ของคุณโดยตรง

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

สีฐานสิบหก

ป้อน #RGB หรือ #RRGGBB (มีหรือไม่มี #) ค่าที่ไม่ถูกต้องจะเก็บ Conversion ที่ดีครั้งสุดท้ายไว้

การแปลง

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

ตัวอย่างความสามัคคี

ประเภทความสามัคคี

จำนวนสวอตช์

แถบสี/เฉดสี

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

ส่งออกตัวอย่าง

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",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

เลือกหรือวางสีฐานสิบหก แปลงเป็น RGB, HSL และ HSV สร้างสวอตช์เสริม/อะนาล็อก/ไตรอะดิก/ขาวดำ คัดลอกค่า และส่งออก CSS หรือ JSON ฟรี รวดเร็ว และทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ของคุณ

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

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

การอ้างอิง Hex, RGB, HSL และ HSV

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

ส่วนเติมเต็ม อะนาล็อก ไตรอะดิก และเอกรงค์

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

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

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

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

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

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

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

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

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

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

มีอะไรอยู่ในการส่งออก JSON

ปุ่มที่เสถียร: baseHex, Harmony, HarmonCount หากมี, HarmonySwatches (สตริงฐานสิบหก), TintShadeStrip และ StripCount เหมาะสำหรับเครื่องมือหรือเอกสารประกอบ

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

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