ตัวผสมสี: คู่มือเริ่มต้นอย่างรวดเร็ว

ทุกสิ่งที่คุณต้องใช้สำหรับการรันครั้งแรกที่สำเร็จ: วางอะไร ตัวเลือกใดสำคัญจริง และอ่านผลลัพธ์อย่างไร

ข้อมูลเข้า ตัวผสมสี ข้อมูลออก ทำงาน 100% ในเบราว์เซอร์ของคุณ — ข้อมูลไม่ออกจากอุปกรณ์
ตัวผสมสี — ข้อมูลเข้า → ข้อมูลออก. ทำงาน 100% ในเบราว์เซอร์ของคุณ — ข้อมูลไม่ออกจากอุปกรณ์

วิธีใช้

  1. เปิดเครื่องมือแล้ววางข้อมูลในช่องซ้าย
  2. ปรับเฉพาะตัวเลือกที่งานของคุณต้องการจริง — ค่าเริ่มต้นถูกต้องสำหรับข้อมูลส่วนใหญ่
  3. อ่านผลลัพธ์ที่ช่องขวา ซึ่งอัปเดตขณะพิมพ์
  4. ใช้ คัดลอก เพื่อนำผลลัพธ์ไปใช้ หรือ ดาวน์โหลด เพื่อบันทึกเป็นไฟล์
วิธีใช้ · ตัวผสมสี 1 วางข้อมูลในช่องอินพุต(หรือโหลดตัวอย่าง) 2 ปรับตัวเลือกให้ตรงกับรูปแบบที่… 3 คัดลอก ดาวน์โหลดหรือตรวจสอบเอาต์พุต —อัปเดตทันทีขณะพิมพ์
วิธีใช้ — 3

ตัวอย่าง

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

ข้อมูลเข้า

#0ea5b7

ข้อมูลออก — ผลลัพธ์

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

รัน

คำอธิบาย

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

ตัวผสมสี → · วิธีใช้ → · เครื่องมือสี →

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