วิธีใช้: ตัวสร้างสีคอนทราสต์

คำอธิบาย

Shades, tints and complementary schemes from one color.

• เครื่องมือสี
• ด้วยการคำนวณฝั่งไคลเอ็นต์ทั้งหมด ตัวสร้างสีคอนทราสต์ จึงปลอดภัยสำหรับข้อมูลที่ละเอียดอ่อน เช่น API key

วิธีใช้

ใช้ ตัวสร้างสีคอนทราสต์ ในสามขั้นตอน:

1. วางข้อมูลในช่องอินพุต (หรือโหลดตัวอย่าง)
2. ปรับตัวเลือกให้ตรงกับรูปแบบที่ต้องการ
3. คัดลอก ดาวน์โหลด หรือตรวจสอบเอาต์พุต — อัปเดตทันทีขณะพิมพ์

รัน

ตัวอย่าง

Shades + complements.

ข้อมูลเข้า

#0ea5b7

ข้อมูลออก

<div class="tb-inline" style="flex-wrap:wrap;gap:8px"><div class="tb-chip" style="background:#e7fbfd;color:#111;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#e7fbfd')">#e7fbfd</div><div class="tb-chip" style="background:#b8f3fa;color:#111;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#b8f3fa')">#b8f3fa</div><div class="tb-chip" style="background:#7ae9f5;color:#111;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#7ae9f5')">#7ae9f5</div><div class="tb-chip" style="background:#41dff1;color:#111;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#41dff1')">#41dff1</div><div class="tb-chip" style="background:#11cfe4;color:#111;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#11cfe4')">#11cfe4</div><div class="tb-chip" style="background:#0c97a6;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#0c97a6')">#0c97a6</div><div class="tb-chip" style="background:#085f68;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#085f68')">#085f68</div><div class="tb-chip" style="background:#043439;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer" title="click to copy" onclick="navigator.clipboard.writeText('#043439')">#043439</div></div><p class="tb-note">CSS: #e7fbfd #b8f3fa #7ae9f5 #41dff1 #11cfe4 #0c97a6 #085f68 #043439</p>

此输出由工具真实运行产生，并非人工编写。

กรณีใช้งาน

สถานการณ์ทั่วไปที่ ตัวสร้างสีคอนทราสต์ ช่วยได้:

• Shades, tints and complementary schemes from one color.

พารามิเตอร์

เครื่องมือนี้ไม่มีตัวเลือก ทำงานกับอินพุตโดยตรง

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

ข้อควรรู้

• 全部计算在浏览器端完成，因此超大输入受限于标签页内存，而非服务器上传限制。

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างสีคอนทราสต์ → · เครื่องมือสี →