ตัวผสมสี: คู่มือเริ่มต้นอย่างรวดเร็ว
ทุกสิ่งที่คุณต้องใช้สำหรับการรันครั้งแรกที่สำเร็จ: วางอะไร ตัวเลือกใดสำคัญจริง และอ่านผลลัพธ์อย่างไร
วิธีใช้
- เปิดเครื่องมือแล้ววางข้อมูลในช่องซ้าย
- ปรับเฉพาะตัวเลือกที่งานของคุณต้องการจริง — ค่าเริ่มต้นถูกต้องสำหรับข้อมูลส่วนใหญ่
- อ่านผลลัพธ์ที่ช่องขวา ซึ่งอัปเดตขณะพิมพ์
- ใช้ คัดลอก เพื่อนำผลลัพธ์ไปใช้ หรือ ดาวน์โหลด เพื่อบันทึกเป็นไฟล์
ตัวอย่าง
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.
เครื่องมือที่เกี่ยวข้อง
ตัวเลือกฐานสิบสีInteractive picker with HEX, RGB and HSL output.ตัวแปลงสี CodeConvert between HEX, RGB, HSL and named colors.สีชื่อตัวตรวจสอบ(WCAG)Verify text contrast ratios against WCAG AA/AAA.ตัวสร้างสีคอนทราสต์Shades, tints and complementary schemes from one color.ตัวสร้างอายุสีBatch random colors with copyable codes.ตารางอ้างอิง CSS ที่มีชื่อสีAll 148 CSS color names with codes and previews.