เครื่องมือสร้างเฉดสี — สไตล์ Tailwind
เลือกสีพื้นฐานเพื่อสร้างพาเลตสี 11 ระดับครบชุด (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) ที่ตรงกับมาตราส่วนของ Tailwind CSS และ Material Design ทันที แต่ละเฉดแสดงคะแนนความคมชัด WCAG เทียบกับข้อความสีขาวหรือสีดำ คลิก swatch ใดก็ได้เพื่อคัดลอก hex หรือคลิก คัดลอก CSS เพื่อส่งออกทั้งหมดเป็น CSS custom properties
วิธีการทำงาน
มาตราส่วนเฉดสีทำงานอย่างไร
มาตราส่วนเฉดสีคือชุดของสีที่อ่อนกว่าและเข้มกว่าสีพื้นฐานอย่างเป็นระบบ ใช้เพื่อสร้างลำดับชั้นทางสายตาและความคมชัดที่เข้าถึงได้ในการออกแบบ UI โดย Tailwind CSS ใช้ 11 ขั้นตอนที่มีหมายเลข 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 และ 950 ตัวเลขน้อยหมายถึงสีอ่อนกว่า (ความสว่างสูงกว่าใน HSL) ส่วนตัวเลขมากหมายถึงสีเข้มกว่า ขั้นที่ 500 มักอยู่ใกล้กับสีพื้นฐานที่ป้อนเข้าไป
เครื่องมือนี้สร้างเฉดสีโดยแปลง hex ที่ป้อนเป็น HSL (Hue, Saturation, Lightness) โดยรักษา hue และ saturation ไว้ในขณะที่แมปแต่ละขั้นกับค่าความสว่างที่กำหนดไว้ล่วงหน้า ขั้นที่ 50 แมปกับความสว่างประมาณ 97% (เกือบขาว) ขั้น 500 ประมาณ 52% (กลาง) และขั้น 950 ประมาณ 12% (เกือบดำ) แนวทางนี้สร้างพาเลตที่สม่ำเสมอทางสายตาซึ่งรักษาลักษณะของสีในทุกระดับความสว่าง
คะแนน WCAG contrast ในพาเลต
แต่ละเฉดในพาเลตจะแสดงคะแนน WCAG contrast (Web Content Accessibility Guidelines) เทียบกับข้อความสีดำหรือสีขาว แล้วแต่ว่าอ่านง่ายกว่า คะแนนได้แก่ AAA (อัตราส่วน contrast ≥ 7:1 การเข้าถึงดีที่สุด), AA (≥ 4.5:1 จำเป็นสำหรับข้อความปกติ), AA Large (≥ 3:1 ยอมรับได้เฉพาะข้อความขนาดใหญ่และส่วนประกอบ UI) และ Fail (< 3:1 ไม่เพียงพอสำหรับข้อความ) การปฏิบัติตาม WCAG 2.1 AA เป็นข้อกำหนดทางกฎหมายขั้นต่ำสำหรับการเข้าถึงในหลายประเทศ
เมื่อสร้าง UI ด้วยพาเลตสี ให้ใช้เฉดที่มีคะแนน AA หรือ AAA สำหรับข้อความบนพื้นหลังนั้น โดยทั่วไปเฉดสี 50–300 มีความคมชัดสูงกับข้อความสีเข้ม ขณะที่เฉด 700–950 มีความคมชัดสูงกับข้อความสีขาว เฉดกลาง (400–600) มักอยู่ในหมวด AA Large หรือ Fail สำหรับข้อความขนาดเล็ก จึงเหมาะสำหรับองค์ประกอบตกแต่ง กรอบ หรือพื้นหลังหลังข้อความขาวขนาดใหญ่ แต่ไม่เหมาะสำหรับข้อความเนื้อหาขนาดเล็ก
การใช้พาเลตใน CSS และระบบการออกแบบ
ปุ่ม คัดลอก CSS จะส่งออกพาเลตของคุณเป็น CSS custom properties (CSS variables) ในบล็อก :root พร้อมวางลงใน stylesheet ของคุณ ตัวอย่างเช่น ตัวแปร blue-500 จะกลายเป็น --color-500: #3b82f6 (หรือสีที่คุณเลือก) คุณสามารถเปลี่ยนชื่อ prefix ของตัวแปรให้ตรงกับโปรเจ็กต์: --brand-500, --primary-500, --blue-500 เป็นต้น CSS custom properties มีคุณสมบัติ cascade และสามารถ override ได้ต่อ component หรือ theme
ระบบการออกแบบอย่าง Tailwind CSS, Material Design, Ant Design และ Chakra UI ล้วนใช้มาตราส่วนเฉดสีที่มีหมายเลขสำหรับระบบสีของตน การมีมาตราส่วนที่สม่ำเสมอช่วยให้เลือกได้อย่างมั่นใจ ใช้ 50 สำหรับพื้นหลัง hover, 100 สำหรับสถานะ active ใน theme สว่าง, 500 สำหรับปุ่มหลัก, 700 สำหรับสถานะ hover บนปุ่ม และ 900 สำหรับพื้นหลังสีเข้ม การรักษาสีแบรนด์ทั้งหมดบนมาตราส่วนหมายเลขเดียวกันสร้างความสามารถในการคาดเดาและลดการตัดสินใจด้านการออกแบบในระดับ component
คำถามที่พบบ่อย
›หมายเลขเฉดสี (50–950) หมายความว่าอะไร?
หมายเลขเป็นไปตามแบบแผนมาตราส่วนสีของ Tailwind CSS ตัวเลขน้อยหมายถึงสีอ่อนกว่า: 50 เกือบขาว 100 สว่างมาก 200 และ 300 เป็นสีอ่อน กลาง (500) เป็นค่ากลางใกล้เคียงกับสีดั้งเดิม ตัวเลขมากหมายถึงสีเข้มกว่า: 700 เข้ม 900 เข้มมาก 950 เกือบดำ มาตราส่วนไม่ใช่เส้นตรง แต่ปรับให้ขนาดขั้นตอนรู้สึกสม่ำเสมอตลอดช่วง
›ความแตกต่างระหว่าง tint และ shade คืออะไร?
Tint คือสีที่ผสมกับสีขาวทำให้สว่างขึ้น Shade คือสีที่ผสมกับสีดำทำให้เข้มขึ้น ในแง่ HSL tint มีค่าความสว่างสูงกว่าและ shade มีค่าต่ำกว่าในขณะที่รักษา hue เดิมไว้ หมายเลข 50–400 ในมาตราส่วนนี้เป็น tint (สว่างกว่าสีพื้นฐาน) ในขณะที่ 600–950 เป็น shade (เข้มกว่าสีพื้นฐาน) ขั้นที่ 500 คือสีพื้นฐานโดยประมาณ
›เครื่องมือนี้สร้างเฉดสีอย่างไร?
เครื่องมือแปลงสี hex ของคุณเป็น HSL (Hue, Saturation, Lightness) รักษา hue และ saturation ให้คงที่ในขณะที่แมปหมายเลขขั้นแต่ละขั้นกับค่าความสว่างเป้าหมาย: ขั้น 50 → 97% ความสว่าง ขั้น 500 → 52% ขั้น 950 → 12% ผลลัพธ์จะถูกแปลงกลับเป็น hex วิธีนี้รักษาลักษณะของสี (ความอบอุ่น ความเย็น ความสดใส) ในทุกเฉด
›WCAG คืออะไร และทำไมเฉดถึงแสดงคะแนน?
WCAG (Web Content Accessibility Guidelines) กำหนดอัตราส่วน contrast ขั้นต่ำสำหรับข้อความที่อ่านได้ AA ต้องการ 4.5:1 สำหรับข้อความปกติ AAA ต้องการ 7:1 คะแนน contrast ของแต่ละเฉดแสดงว่าข้อความสีดำหรือขาวบนพื้นหลังนั้นตรงตามมาตรฐาน AA หรือ AAA หรือไม่ ช่วยให้คุณเลือกว่าเฉดใดปลอดภัยสำหรับข้อความและเฉดใดควรใช้เฉพาะองค์ประกอบตกแต่ง
›จะใช้พาเลตนี้ใน Tailwind CSS อย่างไร?
Tailwind ให้คุณกำหนดสีที่กำหนดเองใน tailwind.config.js เพิ่มเฉดใต้ theme.extend.colors: colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } } จากนั้นคุณสามารถใช้ class เช่น bg-brand-100, text-brand-700, border-brand-300 สำหรับ Tailwind v4 ที่ใช้การกำหนดค่า CSS-first ให้วาง CSS variable output ไว้ในนิยาม theme ของคุณ
›ทำไมเฉดสีที่เลือกถึงไม่เหมือนกับ input ของฉันทุกประการ?
เครื่องมือกำหนดเป้าหมายค่าความสว่างเฉพาะสำหรับแต่ละขั้น ขั้นที่ 500 กำหนดเป้าหมายความสว่าง HSL ประมาณ 52% หาก input สีของคุณมีความสว่างต่างกัน (เช่น 70% สำหรับสีอ่อนกว่า) เฉดที่ขั้น 500 จะถูกปรับไปทาง 52% ซึ่งสร้างมาตราส่วนที่สม่ำเสมอแต่หมายความว่าขั้น 500 อาจไม่เหมือนกับ input เดิมของคุณ เพื่อให้ได้สีแน่นอนที่ขั้น 500 คุณสามารถปรับ hex ด้วยตนเอง มาตราส่วนจะสร้างขึ้นตามสิ่งที่คุณป้อน
›สามารถใช้กับ CSS custom properties ได้ไหม?
ได้ คลิก คัดลอก CSS เพื่อรับบล็อก :root ที่พร้อมใช้งานพร้อมเฉด 11 ระดับทั้งหมดเป็น custom properties ใน CSS ของคุณ อ้างอิงเป็น var(--color-500), var(--color-50) เป็นต้น คุณสามารถเปลี่ยน prefix --color- เป็นชื่ออื่นที่เหมาะกับโปรเจ็กต์ (--brand-, --primary-, --blue-) Custom properties มีคุณสมบัติ cascade และสามารถกำหนดขอบเขตให้กับ component หรือ override ใน media query สำหรับ dark mode
›เฉดเหล่านี้แตกต่างจากฟังก์ชัน CSS color-mix() อย่างไร?
ฟังก์ชัน CSS color-mix() (รองรับใน browser สมัยใหม่) ผสมสองสีตามเปอร์เซ็นต์ คล้ายกับการผสมสี เครื่องมือนี้ใช้มาตราส่วนความสว่างที่กำหนดไว้ล่วงหน้า (อิงตาม HSL) ซึ่งสร้างมาตราส่วนระบบการออกแบบที่ควบคุมได้และคาดเดาได้มากกว่า color-mix() เหมาะสำหรับการผสมครั้งเดียว (เช่น ผสมสีแบรนด์กับขาว 20%) ในขณะที่เครื่องมือนี้สร้างพาเลตระบบการออกแบบที่ครบถ้วนและเป็นระบบ ทั้งสองแนวทางมีที่ใช้งานขึ้นอยู่กับกรณีการใช้งาน
เครื่องมือที่เกี่ยวข้อง
อัปเดตล่าสุด: