Palette

Color Palette Generator

พาเลตต์แบรนด์บนพื้นฐาน OKLCH เลือกสีหลัก รับชุดความกลมกลืนคลาสสิกครบทุกแบบ พร้อม tonal scale 50–950 ล็อก สุ่มใหม่ และส่งออกเป็น CSS / Tailwind v4 / SCSS / JSON

Color Palette Generator — TL;DR

พาเลตต์แบรนด์บนพื้นฐาน OKLCH เลือกสีหลัก รับชุดความกลมกลืนคลาสสิกครบทุกแบบ พร้อม tonal scale 50–950 ล็อก สุ่มใหม่ และส่งออกเป็น CSS / Tailwind v4 / SCSS / JSON

Color Picker & Converter ของเราเหมาะกับสีทีละสี — เลือก / แปลง / คัดลอก ส่วนเครื่องมือนี้เหมาะสำหรับ พาเลตต์: ใส่สีหลักเข้าไป ได้ระบบสีพร้อมใช้สำหรับแบรนด์ทั้งระบบ (ความกลมกลืน + tonal scale) ในคลิกเดียว เปรียบเสมือนความต่างระหว่างซื้อเสื้อหนึ่งตัวกับได้ทั้งตู้เสื้อผ้า

HSL กระจายเฉดสีไม่สม่ำเสมอ (สีเหลืองที่ 60° รู้สึกสว่างกว่าสีน้ำเงินที่ 240° มากแม้จะมีค่า lightness เท่ากัน) พาเลตต์ triadic ใน HSL จะมีสว็อตช์หนึ่งที่สว่างหรือทึบกว่าสีอื่นชัดเจน OKLCH สม่ำเสมอเชิงการรับรู้ — สว็อตช์สามตัวที่มี lightness OKLCH เท่ากัน มอง เห็นว่าสว่างเท่ากันจริง ๆ นี่คือเหตุผลที่ design system สมัยใหม่ทุกระบบ (Apple HI, Tailwind v4, IBM Carbon) เปลี่ยนมาใช้ OKLCH สำหรับความกลมกลืนและ scale

สีแบรนด์ของคุณไม่เคยออกจากอุปกรณ์ เปิด DevTools → Network แล้วคุณจะเห็น 0 request ออกไปข้างนอกระหว่างการทำงานทุกอย่าง

เคล็ดลับ: กด Space เพื่อสุ่มสว็อตช์ที่ไม่ได้ล็อกใหม่

Tonal scale (50 → 950)
CSS
Tailwind v4
SCSS
JSON

สร้างมาเพื่อ design system ไม่ใช่แค่ภาพสวย ๆ

ความกลมกลืนแบบ OKLCH, tonal scale, lock-and-reroll, การส่งออก design token — และรายละเอียดเล็ก ๆ ที่ทำให้ใช้งานสนุกจริง ๆ

ชุดความกลมกลืน OKLCH หกแบบ

Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — คำนวณทั้งหมดใน OKLCH ดังนั้นพาเลตต์ triadic ของสีสดสามสีจึงสว่างสม่ำเสมอกัน ไม่มีความขุ่นมัวแบบ HSL

Tonal scale 50 → 950

ใส่สีแบรนด์ของคุณ ได้ tonal scale รูปทรงแบบ Tailwind 50, 100, 200, … 900, 950 สร้างจากการเดิน lightness ตามเส้นโค้ง OKLCH ส่วน chroma จะถูกบีบที่ปลายทั้งสองข้างเพื่อให้สีอยู่ในขอบเขต sRGB

Lock + re-roll (สไตล์ Coolors)

ปักหมุดสว็อตช์ใดก็ได้ (ไอคอนรูปกุญแจ) แล้วกด สุ่มใหม่ (หรือเพียงกด Space) เพื่อเปลี่ยนที่เหลือภายในความกลมกลืนที่เลือก ลองซ้ำได้เร็ว เก็บสิ่งที่คุณชอบไว้

การส่งออกระดับโปรดักชันสี่แบบ

CSS custom properties (--brand-500), บล็อก @theme ของ Tailwind v4, SCSS map, และ JSON design tokens พร้อมใช้กับ Style Dictionary / Figma Tokens บวกกับแถบสว็อตช์ PNG ขนาด 1200×200

ดูคอนทราสต์ WCAG ในแว็บเดียว

ทุกสว็อตช์แสดงค่าคอนทราสต์ WCAG เทียบกับสีดำหรือขาวที่ดีกว่า พร้อมป้าย AA / AAA / fail ตรวจจับปัญหาด้านการเข้าถึงได้ก่อนปล่อยจริง

เป็นส่วนตัวโดยการออกแบบ

ทุกไบต์อยู่บนอุปกรณ์ของคุณ การคำนวณ OKLCH การสร้างความกลมกลืน การหา scale และการส่งออก PNG ทั้งหมดทำงานเป็น JavaScript ในเครื่อง เปิด DevTools → Network แล้วยืนยันได้เลยว่าไม่มี request ออกไปข้างนอก

วิธีสร้างพาเลตต์แบรนด์

สี่ขั้นตอนจากสีหลักเดียวสู่พาเลตต์ที่พร้อมใช้เป็น design token

  1. 1

    ใส่สีหลักของแบรนด์

    คลิกกล่องสี วาง HEX หรือกด สีหลักแบบสุ่ม เพื่อหาแรงบันดาลใจ เครื่องมือจะจัดทั้งพาเลตต์ให้อยู่บนสีนี้ — ทั้งสว็อตช์ความกลมกลืนและ tonal scale 11 ขั้น

  2. 2

    เลือกความกลมกลืน

    ค่าเริ่มต้นคือ Analogous — สามสีภายใน 30° ของสีหลัก เหมาะกับพาเลตต์แบรนด์ที่เรียบสงบ Complementary สำหรับ accent ที่คอนทราสต์ Triadic / Tetradic สำหรับแบรนด์เชิงเอดิทอเรียลหรือสนุกสนาน Monochromatic สำหรับระบบโทนสีเดียว ทั้งหมดคำนวณใน OKLCH เพื่อให้สว่างสม่ำเสมอ

  3. 3

    ล็อกและสุ่มใหม่จนกว่าจะพอใจ

    คลิกไอคอนกุญแจบนสว็อตช์ที่อยากเก็บไว้ จากนั้นกด Space (หรือกด สุ่มใหม่) เพื่อเปลี่ยนที่เหลือภายในความกลมกลืน ลองซ้ำได้เร็ว แก้ไขสว็อตช์ใด ๆ โดยตรงด้วยการคลิกช่อง HEX หากอยากกำหนดค่าที่แม่นยำ

  4. 4

    ส่งออกเป็น design token

    คัดลอกผลลัพธ์ CSS (custom properties), Tailwind v4 (บล็อก @theme), SCSS map หรือ JSON design tokens หรือกด ดาวน์โหลด PNG เพื่อรับแถบสว็อตช์ขนาด 1200×200 พร้อมใส่ใน design brief

สร้างมาเพื่อ brand designer + ทีม design system

สี่สถานการณ์ที่เครื่องมือพาเลตต์ OKLCH แบบเน้นความเป็นส่วนตัวเหนือกว่าการนั่งปรับ hex ใน Figma เอง

สปรินต์สร้างเอกลักษณ์แบรนด์ใหม่

คุณมีสีแบรนด์ คุณต้องการระบบรอบ ๆ มัน วาง HEX เลือก Analogous สุ่มใหม่จนสีรอง 2 สีลงตัว แล้วล็อกทั้งสาม เปลี่ยนไปดู Tonal Scale คัดลอกบล็อก @theme ของ Tailwind วางลงใน app.css ของโปรเจ็กต์ใหม่ เวลาทั้งหมด: 5 นาที

เพิ่มแบรนด์ในโปรเจ็กต์ Tailwind ที่มีอยู่แล้ว

indigo ของ Tailwind ตามค่าเริ่มต้นไม่ใช่แบรนด์ของคุณ แบรนด์ของคุณคือ #5B3FCD วางลงไป ได้ tonal scale 11 ขั้นที่สอดคล้องกับช่วงของ Tailwind อย่างสมบูรณ์ คัดลอกบล็อก @theme — ทุก bg-brand-500 / text-brand-700 ทำงานได้ทันที

ตรวจสอบการเข้าถึงก่อนเปิดตัว

ทุกสว็อตช์แสดงค่าคอนทราสต์ WCAG พร้อมป้าย AA/AAA สุ่มตรวจว่า brand-500 ผ่าน AA บนพื้นขาว และ brand-100 ยังอ่านได้เป็นพื้นหลังโทนอ่อนเมื่อใช้กับข้อความ brand-900 แก้สว็อตช์ที่มีปัญหาด้วยการสุ่มใหม่ทีละตัว

Design system แบบหลายแบรนด์

เอเจนซีหรือบริษัทหลายแบรนด์มี design system ขนานกัน N ระบบ แต่ละระบบรูปทรงเดียวกันแต่เฉดสีแบรนด์ต่างกัน ใช้ workflow ความกลมกลืน + tonal scale เดียวกันสำหรับทุกแบรนด์ ส่งออกแต่ละชุดเป็น JSON token แล้วใส่ใน Style Dictionary รูปทรงสม่ำเสมอ เอกลักษณ์ที่แตกต่าง

100% เป็นส่วนตัว — ทำงานในเบราว์เซอร์ของคุณ

สีแบรนด์ของคุณไม่เคยออกจากอุปกรณ์ เปิด DevTools → Network แล้วคุณจะเห็น 0 request ออกไปข้างนอกระหว่างการทำงานทุกอย่าง

  • การคำนวณ OKLCH การสร้างความกลมกลืน การหา tonal scale การคำนวณคอนทราสต์ WCAG และการส่งออก PNG ทั้งหมดทำงานเป็น JavaScript บนเครื่องของคุณ — ไม่มีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ ไม่มี API ของบุคคลที่สาม
  • การส่งออก PNG ใช้ canvas ในเครื่อง ภาพสว็อตช์ถูกสร้างทั้งหมดในหน่วยความจำของเบราว์เซอร์และดาวน์โหลดเป็น Blob — ไม่มีอะไรข้ามเครือข่าย
  • ไม่ต้องล็อกอิน ไม่มี telemetry ของค่าสี เราใช้คุกกี้เพียงตัวเดียวสำหรับสถานะการยินยอมคุกกี้ และอีกหนึ่งตัวสำหรับการตั้งค่าภาษา

คู่มือที่เกี่ยวข้อง

บทความที่คัดสรรเกี่ยวกับพาเลตต์ OKLCH ระบบสีแบรนด์ และ design token

คำถามที่พบบ่อย

ต่างจาก color picker ทั่วไปอย่างไร?

Color Picker & Converter ของเราเหมาะกับสีทีละสี — เลือก / แปลง / คัดลอก ส่วนเครื่องมือนี้เหมาะสำหรับ พาเลตต์: ใส่สีหลักเข้าไป ได้ระบบสีพร้อมใช้สำหรับแบรนด์ทั้งระบบ (ความกลมกลืน + tonal scale) ในคลิกเดียว เปรียบเสมือนความต่างระหว่างซื้อเสื้อหนึ่งตัวกับได้ทั้งตู้เสื้อผ้า

ทำไมต้อง OKLCH ไม่ใช่ HSL?

HSL กระจายเฉดสีไม่สม่ำเสมอ (สีเหลืองที่ 60° รู้สึกสว่างกว่าสีน้ำเงินที่ 240° มากแม้จะมีค่า lightness เท่ากัน) พาเลตต์ triadic ใน HSL จะมีสว็อตช์หนึ่งที่สว่างหรือทึบกว่าสีอื่นชัดเจน OKLCH สม่ำเสมอเชิงการรับรู้ — สว็อตช์สามตัวที่มี lightness OKLCH เท่ากัน มอง เห็นว่าสว่างเท่ากันจริง ๆ นี่คือเหตุผลที่ design system สมัยใหม่ทุกระบบ (Apple HI, Tailwind v4, IBM Carbon) เปลี่ยนมาใช้ OKLCH สำหรับความกลมกลืนและ scale

'Tonal scale (50 → 950)' หมายความว่าอะไร?

คือ scale สีแบรนด์สไตล์ Tailwind: indigo-50 (สว่างที่สุด), indigo-100, indigo-200, … indigo-900, indigo-950 (เข้มที่สุด) ใส่สีแบรนด์ของคุณแล้วเครื่องมือจะสร้างทั้ง 11 ขั้นโดยอัตโนมัติด้วยการเดิน lightness ของ OKLCH ตามเส้นโค้งที่กำหนด ผลที่ได้คือพาเลตต์ที่นำไปแทน Tailwind palette token ใด ๆ ได้ทันที ในเฉดสีของแบรนด์คุณ

ล็อกสว็อตช์และสุ่มเฉพาะที่เหลือได้อย่างไร?

คลิก ไอคอนกุญแจ ที่มุมซ้ายบนของสว็อตช์ใดก็ได้ — มันจะอยู่กับที่ จากนั้นกด สุ่มใหม่ หรือกด Space เพื่อเปลี่ยนทุกสว็อตช์ที่ไม่ได้ล็อกภายในความกลมกลืนที่เลือก นี่คือวิธีหาพาเลตต์ที่ดี: ปักหมุดสีแบรนด์ที่คุณตัดสินใจแล้ว และสำรวจรูปแบบรอบ ๆ มัน

มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ของคุณหรือไม่?

ไม่ การคำนวณ OKLCH การสร้างความกลมกลืน การหา tonal scale การคำนวณคอนทราสต์ การส่งออก PNG และการคัดลอกทุกครั้ง — ทั้งหมดทำงานใน JavaScript บนอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็น 0 request ออกไปข้างนอก วางสีแบรนด์ของคุณ design token ภายใน หรือพาเลตต์ที่อยู่ภายใต้ NDA — ไม่มีอะไรออกจากแล็ปท็อปของคุณ