# วงล้อสี

> วงล้อสี HSV, HSL และ RYB ความกลมกลืนสีสำเร็จรูป และแปลงระหว่าง HEX, RGB, HSL, OKLCH และ CMYK พร้อมโทเค็น Tailwind ที่ใกล้เคียงที่สุด ฟรี ไม่ต้องติดตั้ง

URL: https://acrafto.com/th/online-color-picker/  
Updated: 2026-09-23

Tools are interactive browser apps; there is no public API, no endpoints to call and no server-side processing. To use a tool, open its HTML page in a browser.

เลือกสีบนวงล้อ ปรับแต่งอย่างละเอียดบนพื้นที่ความอิ่มตัวและความสว่าง แล้วอ่านค่ากลับมาในทุกฟอร์แมตที่โปรเจกต์ของคุณใช้ ตั้งแต่ `#RRGGBB` ไปจนถึง `oklch()` เครื่องมือนี้ยังทำในสิ่งที่เครื่องมือเลือกสีอื่นมักมองข้าม: วงล้อสามรูปแบบ รวมถึงวงล้อ RYB แบบจิตรกรดั้งเดิม ความกลมกลืนของสีที่สร้างจานสีให้เอง ช่องความทึบ (อัลฟา) และการส่งออกจานสีทั้งชุดด้วยคลิกเดียวเป็น CSS variables, SCSS หรือ JSON ทุกอย่างคำนวณในเบราว์เซอร์ของคุณเอง

## RYB vs RGB: วงล้อสามแบบ ไม่ใช่แค่แบบเดียว

ตัวเลือก **โหมดวงล้อ** จะเปลี่ยนรูปแบบการจัดเรียงโทนสีบนวงล้อ:

- **HSV** และ **HSL** คือวงล้อดิจิทัล: โทนสีเรียงตามวิธีที่จอผสมแสง ทั้งสองต่างกันตรงพื้นที่สี่เหลี่ยม มุมที่สว่างที่สุดของ HSV คือโทนสีบริสุทธิ์ ส่วน HSL วางโทนสีบริสุทธิ์ไว้กลางความสว่างแล้วเติมสีขาวไว้เหนือมัน
- **RYB (จิตรกร)** จัดเรียงโทนสีตามที่ศิลปินเรียนรู้กันมา: สีแดง เหลือง และน้ำเงินเป็นแม่สี โดยมีสีส้ม เขียว และม่วงอยู่ระหว่างกลาง (ดู [RYB color model](https://en.wikipedia.org/wiki/RYB_color_model) บนวิกิพีเดีย ภาษาอังกฤษ) คุณค่าในทางปฏิบัติของมันแสดงออกในความกลมกลืนสี บนวงล้อ RYB สีตรงข้ามของสีแดงคือ **สีเขียว** และสีตรงข้ามของสีน้ำเงินคือ **สีส้ม** ซึ่งเป็นคู่สีตามหลักเม็ดสีคลาสสิก วงล้อดิจิทัลจะจับคู่สีแดงกับสีฟ้าอมเขียวแทน หากจานสี “ตรงข้าม” จากเครื่องมือเลือกสีทั่วไปเคยดูผิดสายตาคุณมาก่อน นี่คือเหตุผล

## ความกลมกลืนสีที่สร้างจานสีให้คุณ

เลือกกฎภายใต้ **ความกลมกลืนของสี** แล้ววงล้อจะทำเครื่องหมายสีคู่หูให้ ซึ่งจะปรากฏเป็นจานสีพร้อมใช้:

- **สีตรงข้าม:** สีตรงข้ามหนึ่งสี คอนทราสต์ที่แรงที่สุด ใช้เป็นสีเน้นเดี่ยวคู่กับสีหลักของแบรนด์
- **สีตรงข้ามแบบแยก:** สองสีข้างเคียงของสีตรงข้าม คอนทราสต์เกือบเท่ากันแต่จัดสมดุลได้ง่ายกว่ามาก
- **สีสามเส้า:** สามโทนสีที่เว้นระยะเท่ากัน มีชีวิตชีวาแต่มั่นคง เมื่อให้สีหนึ่งเป็นสีหลักและใช้อีกสองสีอย่างประหยัด
- **สีสี่เส้า (สี่เหลี่ยม):** สี่โทนสี ชุดสีที่หลากหลายสำหรับภาพประกอบและการแสดงข้อมูล จัดสมดุลได้ยากในงานอินเทอร์เฟซ
- **สีข้างเคียง:** สีที่อยู่ติดกัน ผสมผสานได้นุ่มนวลสำหรับพื้นหลังและการไล่ระดับสี
- **สีเอกรงค์:** โทนสีเดียวในระดับความสว่างต่างกัน ตัวเลือกที่ปลอดภัยที่สุดสำหรับสถานะปุ่ม (hover, active, disabled)

แผงจานสีคัดลอกชุดสีทั้งหมดในคลิกเดียว ในรูปแบบที่คุณเลือก: **HEX**, **RGB**, **HSL**, **OKLCH** แบบธรรมดา, **CSS custom properties** พร้อมวาง (`--color-1: …`), ตัวแปร **SCSS** หรือ **JSON** สำหรับส่งต่อให้โค้ด หากอยากตรวจสอบว่าจานสียังคงคอนทราสต์ไว้สำหรับคนที่แยกโทนสีได้ยากหรือไม่ ให้จับภาพหน้าจอแล้ว[แปลงเป็นขาวดำ](https://acrafto.com/th/plaeng-ruphphaph-pen-khawdam/)

## แปลง HEX, RGB, HSL, OKLCH และ CMYK: วางอะไรก็ได้ อ่านได้ทุกอย่าง

ช่องป้อนข้อมูลรับรูปแบบสีแทบทุกชนิดที่คุณป้อนเข้าไป: `#f80`, `#ff8800`, hex 8 หลักพร้อมอัลฟา, `rgb()` / `rgba()`, `hsl()`, `hwb()`, `lch()`, `oklch()`, `oklab()`, `cmyk()`, `0xFF8800` หรือชื่อสี CSS อย่าง `rebeccapurple` ไม่ว่าจะป้อนอะไรเข้ามา ผลลัพธ์ที่ซิงค์กันเจ็ดแบบจะแสดงกลับมา: **HEX, RGB, HSL, HSV, LCH, OKLCH และ CMYK** แต่ละแบบมีปุ่มคัดลอกของตัวเอง

ลากแถบเลื่อน **ความทึบ (อัลฟา)** ใต้ตัวอย่าง แล้วผลลัพธ์จะสลับเป็นรูปแบบโปร่งใส `#RRGGBBAA`, `rgba()`, `hsla()` พร้อมแสดงตัวอย่างบนพื้นลายตารางหมากรุกเพื่อให้คุณตัดสินความโปร่งใสได้ทันที

## ค้นหาโทเค็น Tailwind CSS ที่ใกล้เคียงที่สุด

ป้ายช่วยเหลือสองอันใต้ตัวอย่างจะบอกชื่อสีให้คุณ: **ชื่อสี CSS ที่ใกล้เคียงที่สุด** (มีประโยชน์สำหรับต้นแบบด่วนๆ) และ **โทเค็น Tailwind ที่ใกล้เคียงที่สุด** เช่น `orange-500` เพื่อให้คุณอยู่ในดีไซน์ซิสเต็มของตัวเองได้โดยไม่ต้องคิดค่าเฉพาะกิจขึ้นมาเอง คลิกที่ป้ายใดก็ได้เพื่อคัดลอก

เรื่องนี้ตอบคำถามที่เกิดขึ้นทุกครั้งที่ส่งมอบงานออกแบบ: ดีไซเนอร์ส่งโค้ดสี hex มาให้ คลาส Tailwind ตัวไหนใกล้เคียงที่สุด? การจับคู่คำนวณจากพาเลตเริ่มต้นของ Tailwind CSS 4 เอง (ดู [เอกสาร Tailwind](https://tailwindcss.com/docs/colors) ภาษาอังกฤษ) ดังนั้นโทเค็นที่ได้จึงนำไปวางในชื่อคลาสได้ทันที

## ควรใช้ฟอร์แมตไหน?

| ฟอร์แมต | ชื่อเต็ม | ใช้เมื่อไหร่? |
| :--- | :--- | :--- |
| **HEX** | Hexadecimal | **ค่าเริ่มต้นของเว็บ** กะทัดรัด รองรับทุกที่ คัดลอกง่าย 8 หลักเพิ่มอัลฟาได้ |
| **RGB** | Red, Green, Blue | **วิธีที่หน้าจอคิด** สามช่องแสง ค่าตั้งแต่ 0 ถึง 255 ฟอร์แมตที่ API และโค้ด canvas ส่วนใหญ่ต้องการ |
| **HSL** | Hue, Saturation, Lightness | **สำหรับปรับด้วยตา** “สว่างขึ้นอีกนิด” หรือ “อิ่มตัวน้อยลง” คือการเปลี่ยนตัวเลขค่าเดียว |
| **HSV** | Hue, Saturation, Value | **ซอฟต์แวร์กราฟิก** โมเดลเบื้องหลังตัวเลือกสีใน Photoshop และ GIMP |
| **LCH** | Lightness, Chroma, Hue | **สอดคล้องกับการรับรู้** การเปลี่ยนตัวเลขเท่ากันดูเป็นการเปลี่ยนแปลงทางสายตาเท่ากัน ซึ่ง HSL แค่แสร้งทำได้ |
| **OKLCH** | OK Lightness, Chroma, Hue | **ตัวเลือก CSS สมัยใหม่** แก้ปัญหาการเลื่อนโทนสีน้ำเงินที่ LCH มี รองรับในเบราว์เซอร์ปัจจุบันทั้งหมด และเหมาะกับดีไซน์โทเค็น |
| **CMYK** | Cyan, Magenta, Yellow, Key | **แนวทางสำหรับงานพิมพ์** การแปลงค่าโดยประมาณสำหรับสื่อสารกับโรงพิมพ์ ค่าสุดท้ายจริงขึ้นอยู่กับโปรไฟล์สีของเครื่องพิมพ์ |

เหตุผลที่ OKLCH สอดคล้องกับการรับรู้มากกว่าโมเดลรุ่นเก่า Björn Ottosson ผู้ออกแบบพื้นที่สี Oklab อธิบายไว้ใน[บทความต้นฉบับ](https://bottosson.github.io/posts/oklab/) (ภาษาอังกฤษ) ไวยากรณ์และการรองรับในเบราว์เซอร์สรุปไว้ใน[เอกสาร MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) (ภาษาอังกฤษ) ส่วนหลักการทำงานของโมเดลงานพิมพ์อธิบายไว้ใน[บทความ CMYK บนวิกิพีเดีย](https://th.wikipedia.org/wiki/%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%AA%E0%B8%B5_CMYK)

## รายละเอียดเล็กๆ ที่ช่วยประหยัดเวลา

- **ประวัติจดจำเอง** สี 24 สีล่าสุดที่คุณใช้งานจะคงอยู่แม้รีเฟรชหน้าเว็บ เก็บไว้ใน local storage ของเบราว์เซอร์คุณเท่านั้น ไม่มีการอัปโหลดที่ใดเลย
- **เครื่องมือหยดสี (Eyedropper)** ในเบราว์เซอร์ที่รองรับ EyeDropper API (Chrome และ Edge) คุณสามารถเลือกสีจากที่ใดก็ได้บนหน้าจอ แม้จะอยู่นอกหน้าต่างเบราว์เซอร์ ต้องการดูดสีจากภาพถ่ายหรือไฟล์โลโก้? ใช้[เครื่องมือดูดสีจากรูปภาพ](https://acrafto.com/th/image-color-picker-online/) ได้เลย
- **ควบคุมด้วยคีย์บอร์ด** วงล้อและพื้นที่ความอิ่มตัวตอบสนองต่อปุ่มลูกศร ช่วยให้ปรับแต่งสีทีละขั้นเล็กๆ ได้
- **ค่าที่ตั้งไว้ล่วงหน้า** ครอบคลุมสีพื้นฐานทั่วไปเมื่อคุณแค่ต้องการจุดเริ่มต้นอย่างรวดเร็ว

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

### แปลง OKLCH เป็น HEX ได้อย่างไร?

วางค่า `oklch()` ลงในช่อง OKLCH แล้วผลลัพธ์อื่นๆ ทั้งหมดจะอัปเดตทันที รวมถึง HEX ด้วย ทำงานย้อนกลับได้เช่นกัน พิมพ์โค้ด HEX แล้วอ่านค่า `oklch()` ที่เทียบเท่ากลับมา ข้อควรระวังอย่างหนึ่งคือ OKLCH สามารถอธิบายสีที่อยู่นอกขอบเขตสี sRGB ได้ ซึ่งสีเหล่านั้นจะถูกตัดให้อยู่ในขอบเขตที่ sRGB แสดงได้ ดังนั้นค่า `oklch()` ที่มีความอิ่มตัวสูงมากจะดูไม่เหมือนกับรูปแบบ HEX ของมันทุกประการบนจอที่รองรับ wide gamut

### ใช้ oklch() ในโค้ด CSS จริงได้อย่างปลอดภัยหรือไม่?

ได้ Chrome, Edge, Firefox และ Safari เวอร์ชันปัจจุบันทั้งหมดรองรับ `oklch()` และมันได้กลายเป็นสัญกรณ์ที่นิยมใช้สำหรับดีไซน์โทเค็น (Tailwind CSS 4 กำหนดจานสีทั้งหมดด้วยฟอร์แมตนี้) สำหรับเบราว์เซอร์เก่ามาก ให้เตรียมค่า HEX สำรองไว้บรรทัดก่อนหน้า เครื่องมือนี้ให้ทั้งสองค่าแก่คุณ

### ทำไมความกลมกลืนสีจึงเปลี่ยนไปเมื่อสลับไปที่วงล้อ RYB?

เพราะ "สีตรงข้าม" ขึ้นอยู่กับวิธีจัดเรียงโทนสีรอบวงกลม วงล้อ RYB กระจายแม่สีเม็ดสีอย่างเท่าเทียม ทำให้คู่สีตรงข้ามตกลงบนคู่ที่ศิลปินคุ้นเคย: แดงกับเขียว, น้ำเงินกับส้ม, เหลืองกับม่วง ส่วนวงล้อ HSV และ HSL จะเรียงโทนสีตามการผสมแสง จึงจับคู่สีแดงกับสีฟ้าอมเขียวแทน ไม่มีแบบไหนผิด RYB ตรงกับการฝึกฝนศิลปะแบบดั้งเดิม ส่วน HSV และ HSL ตรงกับสิ่งที่หน้าจอทำ

### เชื่อค่า CMYK สำหรับงานพิมพ์ได้หรือไม่?

ควรมองว่าเป็นแนวทาง ไม่ใช่ค่าที่แน่นอน การแปลงค่าสำหรับงานพิมพ์จริงขึ้นอยู่กับ[โปรไฟล์สี ICC](https://en.wikipedia.org/wiki/ICC_profile) (ภาษาอังกฤษ) ของเครื่องพิมพ์ กระดาษ และหมึก สี RGB เดียวกันจะให้สีต่างกันบนกระดาษเคลือบและไม่เคลือบ ค่าที่นี่คำนวณด้วยสูตรมาตรฐานที่ให้ผลใกล้เคียง แต่การพิสูจน์อักษรสีขั้นสุดท้ายเป็นหน้าที่ของโรงพิมพ์

### ปุ่มหยดสีอยู่ตรงไหนใน Firefox หรือ Safari?

มันถูกซ่อนไว้โดยตั้งใจ [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) (MDN ภาษาอังกฤษ) ที่ปุ่มนี้พึ่งพาอยู่ ปัจจุบันมีให้ใช้เฉพาะเบราว์เซอร์ตระกูล Chromium (Chrome, Edge, Opera) เท่านั้น ฟีเจอร์อื่นๆ ของเครื่องมือนี้ทำงานได้ทุกที่ ขาดแค่การเลือกสีจากหน้าจอ หากต้องการสีจากรูปภาพ ให้ใช้[เครื่องมือดูดสีจากรูปภาพ](https://acrafto.com/th/image-color-picker-online/) ซึ่งใช้งานได้กับทุกเบราว์เซอร์

### ประวัติสีของฉันเป็นส่วนตัวหรือไม่?

ใช่ ประวัติเก็บอยู่ใน localStorage ของเบราว์เซอร์บนอุปกรณ์ของคุณเท่านั้น ไม่มีสีที่คุณเลือก วาง หรือคัดลอกถูกส่งออกไปที่ใดเลย เครื่องมือทั้งหมดเป็น JavaScript ฝั่งไคลเอ็นต์ ซึ่งตรวจสอบได้เองที่แท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนา

## Other languages

- Čeština (cs): [Barevné kolo](https://acrafto.com/cs/barevne-kolo/) ([Markdown](https://acrafto.com/cs/barevne-kolo/index.md))
- Slovenčina (sk): [Online výber farieb](https://acrafto.com/sk/online-vyber-farieb/) ([Markdown](https://acrafto.com/sk/online-vyber-farieb/index.md))
- English (en): [Color Picker](https://acrafto.com/en/color-picker-online/) ([Markdown](https://acrafto.com/en/color-picker-online/index.md))
- Deutsch (de): [Farbwähler](https://acrafto.com/de/farbwahl-online-farbrad-konverter/) ([Markdown](https://acrafto.com/de/farbwahl-online-farbrad-konverter/index.md))
- Français (fr): [Sélecteur de couleur](https://acrafto.com/fr/selecteur-couleur-en-ligne/) ([Markdown](https://acrafto.com/fr/selecteur-couleur-en-ligne/index.md))
- Español (es): [Selector de colores online](https://acrafto.com/es/selector-de-colores-online/) ([Markdown](https://acrafto.com/es/selector-de-colores-online/index.md))
- Italiano (it): [Selettore colori](https://acrafto.com/it/selettore-colori-online/) ([Markdown](https://acrafto.com/it/selettore-colori-online/index.md))
- Português (pt): [Color Picker Online](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/) ([Markdown](https://acrafto.com/pt/color-picker-online-roda-cores-conversor-hex-rgb-lch/index.md))
- Nederlands (nl): [Kleurkiezer](https://acrafto.com/nl/online-kleurkiezer/) ([Markdown](https://acrafto.com/nl/online-kleurkiezer/index.md))
- Polski (pl): [Color Picker Online](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/) ([Markdown](https://acrafto.com/pl/color-picker-online-konwerter-kolorow/index.md))
- Română (ro): [Selector de culori](https://acrafto.com/ro/selector-culori-online/) ([Markdown](https://acrafto.com/ro/selector-culori-online/index.md))
- Magyar (hu): [Online színválasztó](https://acrafto.com/hu/szinvalaszto-online/) ([Markdown](https://acrafto.com/hu/szinvalaszto-online/index.md))
- Ελληνικά (el): [Color picker online](https://acrafto.com/el/online-color-picker-chromatikos-trochos/) ([Markdown](https://acrafto.com/el/online-color-picker-chromatikos-trochos/index.md))
- Български (bg): [Цветово колело](https://acrafto.com/bg/onlain-izbirach-na-cvetove/) ([Markdown](https://acrafto.com/bg/onlain-izbirach-na-cvetove/index.md))
- Hrvatski (hr): [Kotač boja](https://acrafto.com/hr/online-birac-boja-pretvornik/) ([Markdown](https://acrafto.com/hr/online-birac-boja-pretvornik/index.md))
- Slovenščina (sl): [Izbirnik barv](https://acrafto.com/sl/izbirnik-barv-splet/) ([Markdown](https://acrafto.com/sl/izbirnik-barv-splet/index.md))
- Eesti (et): [Värvivalija](https://acrafto.com/et/varvivalija-online/) ([Markdown](https://acrafto.com/et/varvivalija-online/index.md))
- Latviešu (lv): [Krāsu ritenis](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/) ([Markdown](https://acrafto.com/lv/krasu-atlasitajs-tiessaiste/index.md))
- Lietuvių (lt): [Spalvų parinkiklis](https://acrafto.com/lt/spalvu-parinkiklis-internetu/) ([Markdown](https://acrafto.com/lt/spalvu-parinkiklis-internetu/index.md))
- Svenska (sv): [Färgväljare](https://acrafto.com/sv/fargv%C3%A4ljare-online/) ([Markdown](https://acrafto.com/sv/fargv%C3%A4ljare-online/index.md))
- Dansk (da): [Farvevælger og farvehjul](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/) ([Markdown](https://acrafto.com/da/farvevaelger-online-farvehjul-konverter/index.md))
- Suomi (fi): [Värinvalitsin online](https://acrafto.com/fi/varinvalitsin-online/) ([Markdown](https://acrafto.com/fi/varinvalitsin-online/index.md))
- Norsk (no): [Fargehjul og fargevelger](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/) ([Markdown](https://acrafto.com/no/online-fargevelger-hex-rgb-lch/index.md))
- Українська (uk): [Вибір кольору онлайн](https://acrafto.com/uk/kolir-picker-onlayn/) ([Markdown](https://acrafto.com/uk/kolir-picker-onlayn/index.md))
- Русский (ru): [Цветовой круг](https://acrafto.com/ru/onlain-vybor-tsveta/) ([Markdown](https://acrafto.com/ru/onlain-vybor-tsveta/index.md))
- Српски (sr): [Točak boja](https://acrafto.com/sr/online-izbirac-boja/) ([Markdown](https://acrafto.com/sr/online-izbirac-boja/index.md))
- Македонски (mk): [Избирач на бои](https://acrafto.com/mk/izbirac-boi-online/) ([Markdown](https://acrafto.com/mk/izbirac-boi-online/index.md))
- Bosanski (bs): [Krug boja](https://acrafto.com/bs/birac-boja-online-pretvornik/) ([Markdown](https://acrafto.com/bs/birac-boja-online-pretvornik/index.md))
- Shqip (sq): [Zgjedhës ngjyrash](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/) ([Markdown](https://acrafto.com/sq/zgjedhes-ngjyrash-online-konvertues/index.md))
- Türkçe (tr): [Renk seçici](https://acrafto.com/tr/online-renk-secici/) ([Markdown](https://acrafto.com/tr/online-renk-secici/index.md))
- 日本語 (ja): [カラーピッカー](https://acrafto.com/ja/online-color-picker/) ([Markdown](https://acrafto.com/ja/online-color-picker/index.md))
- 한국어 (ko): [컬러 피커](https://acrafto.com/ko/online-color-picker/) ([Markdown](https://acrafto.com/ko/online-color-picker/index.md))
- العربية (ar): [منتقي الألوان](https://acrafto.com/ar/muntaky-al-alwan-online/) ([Markdown](https://acrafto.com/ar/muntaky-al-alwan-online/index.md))
- हिन्दी (hi): [कलर पिकर ऑनलाइन](https://acrafto.com/hi/color-picker-online/) ([Markdown](https://acrafto.com/hi/color-picker-online/index.md))
- Bahasa Indonesia (id): [Pemilih warna](https://acrafto.com/id/pemilih-warna-online/) ([Markdown](https://acrafto.com/id/pemilih-warna-online/index.md))
- Tiếng Việt (vi): [Bánh xe màu](https://acrafto.com/vi/chon-mau-online/) ([Markdown](https://acrafto.com/vi/chon-mau-online/index.md))
- עברית (he): [גלגל צבעים](https://acrafto.com/he/online-color-picker-hex-rgb-lch/) ([Markdown](https://acrafto.com/he/online-color-picker-hex-rgb-lch/index.md))