Color Theory

ค่าสี

ความสว่างหรือความมืดสัมพัทธ์ของสี โดยไม่ขึ้นกับเฉดสีหรือความอิ่มตัว

Value is one of the three fundamental properties of color alongside hue and saturation. A high-value color is light (closer to white), while a low-value color is dark (closer to black). Artists use value to create contrast, depth, and the illusion of form in their work. In grayscale, value is the only property visible. Understanding value is crucial for ensuring readability and visual hierarchy in design, as strong value contrast draws the eye more effectively than hue contrast alone.

ลองใช้งาน

สร้างเฉดสี

สร้างสเกลเฉดสีแบบ Tailwind CSS (50–950) จากสีพื้นฐานใดก็ได้สำหรับระบบการออกแบบ

บทความที่เกี่ยวข้อง

สถาปัตยกรรมสีแบบ Multi-Brand: โค้ดเบสเดียว หลายธีม

สร้างสถาปัตยกรรมสีแบบ Multi-Brand ด้วย CSS custom properties และ design tokens รองรับการทำ white-label theming จากโค้ดเบสเดียวพร้อมการรวม Tailwind

สีแบรนด์ Fintech: สร้างความไว้วางใจผ่านสีน้ำเงิน

ทำไมบริษัท fintech ถึงเลือกสีน้ำเงิน: #635BFF ของ Stripe, #003087 ของ PayPal, ข้อยกเว้นสีเขียวของ Robinhood และจิตวิทยาสีในการออกแบบบริการทางการเงิน

การกำหนดธีมสีแบบไดนามิกใน React: เกินกว่า CSS Variables

ใช้การกำหนดธีมสีแบบไดนามิกใน React ด้วย CSS variables, context providers และ Tailwind CSS สร้างธีมที่ผู้ใช้ปรับแต่งได้ด้วยการสร้างสีแบบ runtime

Design Tokens สำหรับสี: จาก Figma สู่โค้ด

ใช้งาน color design tokens จาก Figma ไปยังโค้ด production ด้วย Style Dictionary เรียนรู้การตั้งชื่อ token การแปลง และ output หลายแพลตฟอร์ม

Color Theming ใน React: CSS Variables และ Context

สร้าง color theming ที่ขยายได้ใน React โดยใช้ CSS custom properties และ Context API ครอบคลุมสถาปัตยกรรมธีม, Tailwind CSS themes และกลยุทธ์ multi-brand

การสร้างระบบสีแบรนด์ตั้งแต่เริ่มต้น

คู่มือทีละขั้นตอนในการสร้างระบบสีแบรนด์: การเลือกสีหลัก สีรอง สีนิวทรัล สีเชิงความหมาย และเอกสารที่ขยายได้ตามทีม