หมุนค่าโทนสีและปรับความสว่างในพื้นที่ OKLCH ที่มีความสม่ำเสมอทางการรับรู้ — ใช้กฎการประสานสีเดียวกัน แต่จานสีจะดูดีกว่า HSL อย่างง่ายดาย ตัวอย่างสีที่สร้างขึ้นทั้งหมดสามารถปรับแต่งได้อย่างอิสระ พร้อมการตรวจสอบความคมชัดตามมาตรฐาน WCAG แบบเรียลไทม์
:root {
--harmony-1: #2b9d8f;
--harmony-2: #957abc;
--harmony-3: #b47b44;
}[
{
"hex": "#2b9d8f",
"oklch": "oklch(63.0% 0.101 183.0)",
"role": "base"
},
{
"hex": "#957abc",
"oklch": "oklch(63.0% 0.101 303.0)",
"role": "harmony-2"
},
{
"hex": "#b47b44",
"oklch": "oklch(63.0% 0.101 63.0)",
"role": "harmony-3"
}
]Harmonies ที่สม่ำเสมอในการรับรู้ พร้อมคอนทราสต์สดและการจับคู่ gamut ในทุกขั้นตอน
พิมพ์หรือสุ่ม HEX แล้วเลือก complementary, split-complementary, triadic, tetradic, analogous หรือ monochromatic
ตัวอย่างสีที่ได้มาทุกอันมีแถบเลื่อน L/C/H ใน OKLCH space; ค่าที่เกิน gamut จะแมปไปยังสีที่แสดงผลได้ใกล้ที่สุด
ดูคอนทราสต์กับสีขาว/ดำสด คัดลอก CSS variables หรือ JSON หรือส่งชุดทั้งหมดไปยัง palette board
คำถามทั่วไป 3 ข้อเกี่ยวกับ OKLCH harmonies
ดำเนินต่อไปจากที่นี่และนำสีไปใช้งาน
ลากวงล้อเพื่อเลือกสีหลัง รับชุดความสอดคล้อง 6 แบบสด เปิดในแผงหรือส่งออกเป็น PNG
ปรับแต่ง L / C / H ในพื้นที่สี OKLCH ที่สม่ำเสมอตามการรับรู้ พร้อมตัวอย่างสด และผลลัพธ์ oklch() / HEX / RGB
ป้อนสีแบรนด์หนึ่ง ส่งออก primary / secondary / success / warning / danger เป็น Tailwind config และ CSS variables
ใช้ Spacebar เพื่อสุ่ม ล็อก ลากเพื่อจัดเรียงใหม่ แชร์ผ่าน URL — ทุกอย่างที่แผงจานสีควรมี