เครื่องมือเลือกสี HEX

เลือกสี HEX: HEX, RGB, HSL, OKLCH และเฉดสี | We.Inc

เครื่องมือเลือกสี HEX ฟรี เลือกหรือวางค่าสีเพื่อดู HEX, RGB, HSL และ OKLCH พร้อมเฉดอ่อนเข้มและคะแนนคอนทราสต์เทียบกับสีขาวและดำ

เครื่องมือเลือกสี HEX

เลือกสีหรือวางค่า HEX, RGB หรือ HSL เพื่อดูรูปแบบที่ต้องใช้กับงานออกแบบและโค้ด: HEX, RGB, HSL และ OKLCH ดูระดับสีอ่อนและเข้ม พร้อมตรวจว่าข้อความอ่านง่ายเมื่อวางบนสีนั้นโดยใช้สีขาวหรือดำหรือไม่

ใช้ตัวเลือกสีหรือพิมพ์ค่า เช่น #4F98FB, rgb(79, 152, 251) หรือ hsl(215, 95%, 65%)
คลิกครั้งเดียวเพื่อคัดลอกรูปแบบใดก็ได้ OKLCH เป็นรูปแบบ CSS สมัยใหม่ที่รักษาความสว่างให้สม่ำเสมอระหว่างเฉดสี
คลิกเฉดอ่อนหรือเข้มใดก็ได้เพื่อใช้เป็นสีปัจจุบัน
ดูอัตราส่วนคอนทราสต์เพื่อเลือกว่าควรใช้ข้อความสีขาวหรือดำบนสีนี้

สำหรับปุ่ม ตั้งเป้าคอนทราสต์ระหว่างข้อความกับสีปุ่มอย่างน้อย 4.5:1
สร้างชุดสีจากสีแบรนด์สีเดียว: ใช้เฉดอ่อนเป็นพื้นหลัง ใช้สีหลักกับปุ่ม ใช้เฉดเข้มสำหรับสถานะชี้หรือกด และข้อความ
หน้าจอแต่ละเครื่องแสดงสีต่างกัน ตรวจสีแบรนด์บนโทรศัพท์ด้วย ไม่ใช่แค่แล็ปท็อป

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

รหัสสี hex คืออะไร

รหัสหกหลักสำหรับสีบนหน้าจอ เขียนด้วย # ตามด้วยเลขฐานสิบหกสามคู่ที่แทนสีแดง เขียว และน้ำเงิน #FF0000 คือสีแดงล้วน #000000 คือสีดำ และ #FFFFFF คือสีขาว

HEX, RGB และ HSL ต่างกันอย่างไร

ทั้งหมดอธิบายสีเดียวกันด้วยวิธีที่ต่างกัน HEX และ RGB ระบุปริมาณสีแดง เขียว และน้ำเงิน ส่วน HSL ระบุเฉดสี (มุมบนวงล้อสี) ความอิ่มสี และความสว่าง ซึ่งปรับด้วยตนเองได้ง่ายกว่า

OKLCH คืออะไร และควรใช้ไหม

OKLCH เป็นรูปแบบสี CSS รุ่นใหม่ที่อิงกับการรับรู้สีของคน สีสองสีที่มีค่า L เท่ากันจะดูสว่างเท่ากัน จึงสร้างชุดสีที่สม่ำเสมอได้ง่าย เบราว์เซอร์หลักในปัจจุบันรองรับทั้งหมด

คำนวณคอนทราสต์อย่างไร

ใช้สูตร WCAG 2: ค่าความสว่างสัมพัทธ์ของสีที่สว่างกว่าบวก 0.05 แล้วหารด้วยค่าของสีที่มืดกว่าบวก 0.05 หากต้องการตรวจสีสองสีแบบเต็มรูปแบบ ให้ใช้เครื่องมือตรวจคอนทราสต์สีของ We.Inc

เลือกสีแบรนด์ที่ใช้ได้ดีกับเว็บไซต์

สีแบรนด์ต้องทำงานได้หลายอย่าง: โดดเด่นบนปุ่ม ข้อความสีขาวยังอ่านได้เมื่อวางบนสี และไม่ทำให้ล้าสายตาเมื่อใช้ทั่วทั้งหน้าเว็บ สีน้ำเงิน เขียว และแดงเข้มระดับกลางมักทำได้ทั้งสามข้อ สีอ่อนมาก (เหลือง ชมพูพาสเทล) ดูดีในโลโก้แต่ไม่เหมาะกับปุ่ม เพราะอ่านข้อความสีขาวหรือดำได้ยากหากไม่ปรับสี
แผงคอนทราสต์แสดงผลนี้ทันที หากข้อความสีขาวมีคะแนนต่ำกว่า 4.5:1 ให้ใช้ข้อความสีดำหรือเลือกเฉดเข้มกว่าจากแถบสีสำหรับปุ่ม

เฉดอ่อน เฉดเข้ม และชุดสีแบบง่าย

เฉดอ่อนเกิดจากการผสมสีกับสีขาว ส่วนเฉดเข้มเกิดจากการผสมกับสีดำ ชุดสีเว็บไซต์ที่ใช้งานได้จริงต้องมีเพียงไม่กี่สี: เฉดอ่อนมากสำหรับพื้นหลังส่วนต่าง ๆ สีหลักสำหรับปุ่มและลิงก์ และเฉดเข้มสำหรับสถานะชี้เมาส์ เพิ่มสีเทากลางสำหรับข้อความและเส้นขอบ ก็ได้ชุดสีที่ครบและสม่ำเสมอ
หากต้องการตรวจคู่สีข้อความกับพื้นหลังโดยเฉพาะ (เช่น ข้อความสีเทาบนพื้นหลังสีอ่อน) ให้ใช้เครื่องมือตรวจคอนทราสต์สี ซึ่งให้คะแนนทั้ง WCAG AA และ AAA

เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap