ตัวสร้างพาเลตสี
เลือกสีตั้งต้นหนึ่งสี แล้วเครื่องมือจะคำนวณสีที่เหลือให้ตามวงล้อสี คลิกที่ช่องสีใดก็ได้เพื่อคัดลอกรหัส หรือจะวางรูปถ่ายลงไปแล้วดึงพาเลตจากรูปนั้นโดยตรงก็ได้
รูปแบบสี
คลิกที่ช่องสีเพื่อคัดลอกโค้ด
พาเลตจากรูปภาพ
รูปภาพไม่ออกจากเครื่องของคุณ — เบราว์เซอร์อ่านไฟล์โดยตรง
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- พิมพ์รหัสสีหรือเปิดช่องเลือกสี พาเลตจะวาดใหม่ตามที่คุณเลือก
- สลับชุดสีได้ สีตรงข้ามอยู่ฝั่งตรงข้ามของวงล้อ ส่วนชุดสามสีแบ่งวงล้อออกเป็นสามส่วน
- คลิกที่ช่องสีเพื่อคัดลอกรหัส หรือคัดลอกทั้งชุดเป็นตัวแปร CSS
- ถ้าจะดึงสีจากรูปถ่าย ให้เลือกไฟล์ภาพ ระบบจะอ่านไฟล์นั้นบนเครื่องของคุณ
สิ่งที่ควรรู้
องศาเหล่านี้มาจากไหน
ชุดสีไม่ใช่เรื่องรสนิยม แต่เป็นเรื่องเรขาคณิตบนวงล้อสี สีตรงข้ามอยู่ฝั่งตรงกันข้ามพอดีที่ 180° ชุดสามสีแบ่งวงกลมออกเป็นสามส่วนเท่ากันส่วนละ 120° ส่วนสีข้างเคียงคือสีที่อยู่ติดกันในระยะสามสิบองศา เครื่องมือนี้หมุนเฉพาะเนื้อสีโดยคงความอิ่มตัวและความสว่างไว้ สีที่มาเข้าคู่จึงสดและเข้มเท่ากับสีที่คุณเริ่มต้น
ทำไมรูปถ่ายถึงให้สีจริง ไม่ใช่สีขุ่น ๆ
การนับพิกเซลที่พบบ่อยที่สุดใช้ไม่ได้กับรูปถ่าย ลำพังท้องฟ้าก็มีสีฟ้าที่ต่างกันเพียงนิดเดียวนับล้านเฉด ซึ่งแต่ละเฉดปรากฏเพียงครั้งเดียว เครื่องมือนี้แบ่งปริภูมิสีออกเป็นสองส่วนตามช่องสีที่กว้างที่สุด แล้วทำซ้ำจนได้กล่องมากพอ ชุดสีที่ได้จึงเก็บท้องฟ้า ใบหน้า และเงาไว้แยกกัน แทนที่จะได้สีน้ำตาลเฉลี่ยสีเดียว
แหล่งข้อมูล
คำถามที่พบบ่อย
ควรใช้ชุดสีแบบไหนกับเว็บไซต์
แบบสีเดียวหรือสีข้างเคียงคือทางเลือกที่ปลอดภัย ทั้งสองแบบทำให้หน้าเว็บดูสงบและไม่แย่งความสนใจกันเอง ส่วนสีตรงข้ามให้เก็บไว้ใช้กับองค์ประกอบเดียวที่ต้องสะดุดตาจริง ๆ เช่น ปุ่ม ป้ายกำกับ หรือคำเตือน
จะนำพาเลตไปใช้ในโค้ดอย่างไร
คัดลอกบล็อกตัวแปร CSS ที่อยู่ใต้ช่องสีแล้ววางลงในไฟล์สไตล์ของคุณ ชื่อที่ได้จะเป็น --color-1 ถึง --color-6 ซึ่งอ่านง่ายกว่าแถวรหัสเลขฐานสิบหกเมื่อไปอยู่ในโปรเจกต์ของคนอื่น
รูปของฉันถูกอัปโหลดไปที่ไหนหรือเปล่า
ไม่ ภาพถูกถอดรหัสในหน้านี้และย่อลงเหลือ 160 พิกเซลก่อนเริ่มนับสี ไม่มีอะไรออกไปจากเครื่อง และคำตอบก็มาทันที
ทำไมแถวเฉดเข้มถึงไม่จบที่สีดำ
สีดำสนิทและสีขาวสนิทไม่ได้ให้ข้อมูลอะไร ใคร ๆ ก็รู้จักอยู่แล้ว และในพาเลตมันเอาแต่กินที่ไปเปล่า ๆ แถวสีจึงหยุดก่อนถึงปลายสุดเล็กน้อย ทุกช่องสีจึงยังเป็นสีที่ใช้งานได้จริง
เครื่องมือที่เกี่ยวข้อง
- ตัวแปลงรหัสสี พิมพ์สีในรูปแบบที่คุ้นเคยแบบใดก็ได้ เช่น #1f5fd6, 1f5fd6, #1f5 หรือ rgb(31, 95, 214) แล้วรูปแบบ…
- HEX เป็น RGB วางรหัส HEX ลงไปแล้วอ่านค่าช่องสี RGB ได้เลย #1f5fd6 จะกลายเป็น rgb(31, 95, 214) และถ้ารหัสนั้น…
- สร้างไล่สี CSS ลากแถบเลื่อนแล้วดูแผงด้านบนเปลี่ยนตาม พอได้หน้าตาที่ต้องการ ก็คัดลอกบรรทัดนั้นไปวางในสไตล์ชีตขอ…
- ตัวสร้างเงา CSS เลื่อนแถบปรับแล้วตัวอย่างจะเปลี่ยนตาม ซ้อนหลายชั้นได้เมื่อเงาชั้นเดียวไม่พอ นั่นคือวิธีสร้างควา…
- แปลง RGB เป็น HEX วางค่า rgb(31, 95, 214) ลงไป จะคั่นด้วยจุลภาคหรือเว้นวรรคก็ได้ แล้วรับค่า #1f5fd6 ที่พร้อมใช้ใน…
- ตัวเลือกสี เลื่อนไปบนช่องสี่เหลี่ยมเพื่อเลือกสี หรือจะหยิบสีที่มีอยู่แล้วก็ได้ ทั้งจากรูปภาพด้วยหลอดดูดสี…