คู่มือเครื่องมือ
How-to guides for using ColorFYI tools including the converter, contrast checker, and palette generator.
Figma Color Styles vs Variables: ควรใช้แบบไหน?
เปรียบเทียบ Figma color styles และ variables เรียนรู้ความแตกต่างหลัก เส้นทางการย้ายและแนวทางปฏิบัติที่ดีสำหรับทีมที่จัดการ color tokens ใน design system
อัปเดตแล้ว ก.พ. 20, 2026
วิธีตรวจสอบคอนทราสต์สีตาม WCAG
เรียนรู้วิธีตรวจสอบอัตราส่วนคอนทราสต์สีสำหรับการปฏิบัติตาม WCAG AA และ AAA คู่มือทีละขั้นตอนพร้อมตัวอย่างรหัส hex จริงและข้อผิดพลาดที่ควรหลีกเลี่ยง
อัปเดตแล้ว ก.พ. 13, 2026
คอนทราสต์สี WCAG: คู่มือฉบับสมบูรณ์สำหรับนักพัฒนา
เชี่ยวชาญข้อกำหนดคอนทราสต์สี WCAG 2.1 เรียนรู้ระดับ AA และ AAA วิธีการทดสอบ เครื่องมืออัตโนมัติ และวิธีแก้ไขการละเมิดคอนทราสต์ในโค้ดของคุณ
อัปเดตแล้ว ก.พ. 07, 2026
OKLCH Color Picker: เหตุใดนักออกแบบจึงเปลี่ยนมาใช้
ค้นพบว่าเหตุใด OKLCH color pickers จึงให้ผลลัพธ์ดีกว่า HSL เรียนรู้ perceptual lightness, uniform chroma และวิธีสร้างพาเลตใน OKLCH color space
อัปเดตแล้ว ม.ค. 31, 2026
Adobe Color (color.adobe.com): คู่มือฉบับสมบูรณ์
เชี่ยวชาญ Adobe Color สำหรับการสร้างพาเลต ดึงสีจากภาพ ทดสอบการเข้าถึง และเชื่อมต่อกับ CC Library คู่มือครบถ้วนสำหรับ color.adobe.com
อัปเดตแล้ว ม.ค. 24, 2026
การบันทึกสีใน Storybook: รูปแบบและ Add-ons
บันทึกระบบสีใน Storybook ด้วย palette stories, การตรวจสอบการเข้าถึง และเอกสารที่สร้างอัตโนมัติ Add-ons และรูปแบบที่ดีที่สุดสำหรับเอกสารสี
อัปเดตแล้ว ม.ค. 18, 2026
shadcn/ui Color Customization: การตั้งธีมด้วย CSS Variables
ปรับแต่งสีของ shadcn/ui ด้วย CSS variables แบบ HSL สร้างธีมกำหนดเอง รวม dark mode และซิงค์กับ Tailwind CSS สำหรับการจัดรูปแบบ component ที่สม่ำเสมอ
อัปเดตแล้ว ม.ค. 11, 2026
วิธีหาสีตรงข้ามที่สมบูรณ์แบบ
เรียนรู้วิธีหาสีตรงข้ามโดยใช้วงล้อสี สูตรคณิตศาสตร์ และเครื่องมือสร้างพาเลต รวมถึงรูปแบบการออกแบบและตัวอย่างรหัส hex
อัปเดตแล้ว ม.ค. 04, 2026
การทดสอบการเข้าถึงสีใน Figma: ปลั๊กอินและขั้นตอนการทำงาน
ทดสอบการเข้าถึงสีใน Figma ด้วย Stark, ปลั๊กอิน A11y และตัวจำลองการบกพร่องทางสี สร้างขั้นตอนการออกแบบที่เข้าถึงได้ด้วยการตรวจสอบแบบแบตช์และการส่งมอบงาน
อัปเดตแล้ว ธ.ค. 29, 2025
คู่มือ CSS Gradient: Linear, Radial และ Conic Gradients
เชี่ยวชาญ CSS gradients: syntax ของ linear, radial และ conic พร้อมตัวอย่างปฏิบัติ color stops, มุม และเคล็ดลับการใช้เครื่องมือสร้าง gradient
อัปเดตแล้ว ธ.ค. 22, 2025
การแก้ไขสีใน Photoshop: Curves, Levels และ HSL
เชี่ยวชาญการแก้ไขสีใน Photoshop ด้วย Curves, Levels และการปรับ HSL เรียนรู้การอ่าน histogram, white balance และเทคนิค color grading ระดับมืออาชีพ
อัปเดตแล้ว ธ.ค. 16, 2025
วิธีใช้ตัวจำลองการมองเห็นสีเพื่อการออกแบบที่เข้าถึงได้
เรียนรู้วิธีใช้ตัวจำลองการมองเห็นสีเพื่อออกแบบอินเทอร์เฟซที่เข้าถึงได้ ครอบคลุม deuteranopia, protanopia, tritanopia และแนวทางการออกแบบเชิงปฏิบัติพร้อมตัวอย่างจริง
อัปเดตแล้ว ธ.ค. 11, 2025
Figma Color Variables: คู่มือฉบับสมบูรณ์สำหรับ Design Systems
เชี่ยวชาญ Figma color variables สำหรับ design systems เรียนรู้การสร้าง จัดระเบียบ และซิงค์ color tokens ระหว่าง Figma และโค้ดเพื่อการตั้งธีมที่สม่ำเสมอ
อัปเดตแล้ว ธ.ค. 05, 2025
Tailwind Shade Generator: สร้างสเกลสีกำหนดเองได้ง่าย
สร้างสเกลสี Tailwind CSS กำหนดเองจากรหัส hex ใดๆ ก็ได้ เรียนรู้วิธีการทำงานของระบบเฉด 50-950 วิธีตั้งค่า tailwind.config.js และสร้างสเกล dark mode
อัปเดตแล้ว ธ.ค. 01, 2025
วิธีดึงพาเลตสีจากรูปภาพ
เรียนรู้วิธีดึงพาเลตสีจากรูปภาพโดยใช้อัลกอริทึม quantization เครื่องมือออนไลน์ และวิธีการแบบโปรแกรม สร้างพาเลตจากภาพถ่าย
อัปเดตแล้ว พ.ย. 26, 2025
คู่มือแปลงรหัสสี: HEX เป็น RGB เป็น HSL และอื่นๆ
เชี่ยวชาญการแปลงรูปแบบสี: HEX, RGB, HSL, CMYK และ OKLCH เรียนรู้ว่าควรใช้รูปแบบไหนเมื่อไหร่ และวิธีแปลงทันทีด้วยเครื่องมือแปลงสีของ ColorFYI
อัปเดตแล้ว พ.ย. 21, 2025
วิธีสร้างพาเลตสีสมบูรณ์จากสีเดียว
เรียนรู้วิธีสร้างพาเลตสีที่กลมกลืนและสมบูรณ์จากสีเริ่มต้นเพียงสีเดียว ครอบคลุม complementary, analogous, triadic และการสร้างเฉดพร้อมตัวอย่าง hex
อัปเดตแล้ว พ.ย. 16, 2025