“ ค่าอัลฟาของสีดำ” คืออะไร?

ฉันพยายามเข้าใจย่อหน้าต่อไปนี้ในแนวทางการออกแบบวัสดุของ Google:

องค์ประกอบอื่น ๆ เช่นไอคอนและตัวแบ่งยังได้รับประโยชน์จากการมีค่าอัลฟาสีดำแทนสีทึบเพื่อให้แน่ใจว่าพวกเขาทำงานบนพื้นหลังของสีใด ๆ

แหล่ง

สิ่งนี้หมายความว่า? ค่า 00 อัลฟาจะโปร่งใสอย่างสมบูรณ์ใช่มั้ย

transparency google-material-design

— กิโลกรัม.
แหล่งที่มา

ฉันคิดว่า "ของดำ" เป็น / เป็นตัวพิมพ์ผิด หรืออย่างน้อยที่สุดความหมายคำที่แย่มาก ๆ "ค่าอัลฟาสำหรับคนผิวดำ"

— สกอตต์

ใช่คุณถูกต้องค่าอัลฟ่าหมายถึงความโปร่งใสของสี ค่าเริ่มต้นจาก 00 ถึง FF ในเลขฐานสิบหกโดยที่ 00 เป็นค่าโปร่งใสสมบูรณ์และ FF เป็นค่าทึบ / ทึบแสง ใน Android คุณระบุว่ามันเป็นสองตัวอักษรแรกในรูปแบบเลขฐานสิบสำหรับ # FF000000 เป็นสีดำทึบ

— Samy S.Rathore

คำตอบ:

บริบทที่สมบูรณ์มีดังนี้:

ใช้ค่าอัลฟาสำหรับข้อความไอคอนและตัวแบ่งสีเทา

ในการถ่ายทอดลำดับชั้นของข้อมูลคุณสามารถใช้เฉดสีที่แตกต่างกันสำหรับข้อความ ค่าอัลฟามาตรฐานสำหรับข้อความบนพื้นหลังสีขาวคือ 87% (# 000000) ข้อความรองซึ่งต่ำกว่าในลำดับชั้นที่มองเห็นควรมีค่าอัลฟา 54% (# 000000) คำแนะนำข้อความสำหรับผู้ใช้เช่นเดียวกับที่อยู่ในฟิลด์ข้อความและป้ายกำกับมีความโดดเด่นทางสายตาที่ต่ำกว่าและควรมีค่าอัลฟา 26% (# 000000)

องค์ประกอบอื่น ๆ เช่นไอคอนและตัวแบ่งยังได้รับประโยชน์จากการมีค่าอัลฟาสีดำแทนสีทึบเพื่อให้แน่ใจว่าพวกเขาทำงานบนพื้นหลังของสีใด ๆ

นอกจากนี้ยังมีภาพตัวอย่างสองภาพ

ปัญหาคือ: พวกเขาดูเหมือนจะใช้คำนิยามใหม่ของ "ค่าอัลฟา"

นอกจากนี้ค่า hex-rgb ที่ยกมาของพวกเขานั้นไม่ถูกต้องและตัวอย่างเปอร์เซ็นต์สำหรับตัวอย่างที่เป็นภาพประกอบของข้อความสีขาวบนพื้นหลังสีดำ (ข้อความบอกว่าค่าสำหรับข้อความสีดำบนพื้นขาว)

จากสิ่งที่ฉันสามารถบอกได้พวกเขากำลังแนะนำให้คุณใช้ค่าความโปร่งใสนอกเหนือจากค่าสีของคุณเมื่อระบุข้อความและกฎ

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

TLDNR; ส่วนเขียนไม่ดีและต้องการการคัดลอก

— Yorik
แหล่งที่มา

หากคุณดูภาพประกอบนอกเหนือจากย่อหน้านั้นฉันคิดว่าสิ่งที่พวกเขาพูดเช่น 26% (# 000000) คือ RGBA (0,0,0,0.26) หรือ "สีดำที่มีความทึบ 27%" ซึ่งอยู่ด้านบน สีขาวจะมีสีเทาอ่อนเหมือนในภาพ

— cockypup

@cockypup นั่นสมเหตุสมผล ฉันยังคงคิดว่าพวกเขามีปัญหาความชัดเจนที่นี่: อาจเป็นได้ว่าพวกเขากำลังแนะนำให้ใช้สีดำในทุกกรณีและใช้ค่าอัลฟาเป็นวิธีในการจำลอง "โหมดการผสมผสานภาพซ้อนทับ" หรืออะไรบางอย่างในลักษณะนั้น

— Yorik

@ yorik นั่นคือการตีความของฉันเช่นกัน พวกเขาต้องการให้คุณใช้อัลฟาสีดำแทนที่จะเป็นสีเทาเพื่อให้ 'ซ้อนทับ' สี

— DA01

@ DA01: "แทนที่จะเป็นสีทึบ" = ไม่ใช่แค่สีเทา แต่เป็นสีใด ๆ (?) ไม่เป็นไร!

— Yorik

ค่าอัลฟาจะใช้ในพื้นที่สี RGBA เพื่อระบุความโปร่งใสของสี ค่าอัลฟาไปจาก 0 ถึง 1 โดยที่ 0 โปร่งใสอย่างสมบูรณ์และ 1 ไม่โปร่งใสเลย

วิธีนี้ช่วยให้ "alpha compositing" ซึ่งในแง่การวางเป็นกระบวนการของการวางภาพบนพื้นหลังและเพื่อรวมสีเพื่อสร้างภาพลวงตาของความโปร่งใส สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่สีนี้คุณสามารถ Google "พื้นที่สี rgba" หรือเยี่ยมชมหน้า Wikipedia นี้

โดยปกติสี RGBA จะแสดงด้วยค่า 4 ค่า 3 สำหรับส่วนประกอบ RGB แต่ละรายการและค่าสุดท้ายสำหรับค่าอัลฟา (เช่น (0,0,0,0.5)) แม้ว่าจะอยู่ในเอกสารสไตล์สีที่คุณอ้างถึง ด้วยค่า% หน้าค่า RGB เลขฐานสิบหก (เช่น 50% (# 000000))

" ค่าอัลฟาของสีดำ " อย่างน้อยในขอบเขตของเอกสารอ้างอิงจะเป็นวิธีสั้น ๆ เพื่อระบุสีใด ๆ ในพื้นที่ RGBA ที่มีสีดำเป็นค่า RGB ของพวกเขา (0,0,0) พวกเขามีตั้งแต่ 100% ของแข็งสีดำ (0,0,0,1) ถึงสีดำโปร่งแสงสมบูรณ์ (0,0,0,0) ผ่านค่าความโปร่งใสที่เป็นไปได้ทั้งหมด

ตัวอย่างเช่นค่า 57% alpha ของสีดำแสดงเป็น 57% (# 000000) จะเป็น "ค่า alpha ของสีดำ" โดยที่ alpha เท่ากับ 0.57 หมายความว่าทึบแสง 57%

ในภาพนี้คุณสามารถเห็น "ค่าอัลฟาของสีดำ" ที่แนะนำในเอกสารสไตล์สี ฉันวางมันไว้บนสีขาวและสีแดงเพื่อให้คุณเห็น "อัลฟาผสม" ในการดำเนินการ

ป้อนคำอธิบายรูปภาพที่นี่

— cockypup
แหล่งที่มา

คุณถูกต้อง แต่เมื่อดูที่เอกสารอ้างอิงของ google doc นั้นดูเหมือนว่าจะใช้คำนิยามใหม่ของค่าอัลฟา

— Yorik

คำถามนี้ตอบได้อย่างไรว่า "ค่าอัลฟ่าของดำ" คืออะไร ฉันไม่คุ้นเคยกับคำศัพท์นั้นอย่างใดอย่างหนึ่งและนี่ก็ไม่ได้ทำให้ชัดเจนว่า IMO จัตุรัสสีดำของคุณมีค่าอัลฟ่า 100% (1) แต่ค่าอัลฟ่าของสีดำคืออะไร พูดที่จัตุรัสแดงคุณจะให้ค่าอัลฟ่าสีดำได้อย่างไร

— Ryan

จุดดี. แก้ไขเพื่อตอบทั้งชื่อคำถามและคำถามที่ส่วนท้ายของร่างกาย เพิ่มการอ้างอิงไปยังเอกสารที่ OP ได้อ้างอิงและใช้สีของเอกสารเป็นตัวอย่างในภาพ

— cockypup

ฉันคิดว่าคุณไขปริศนาของปริศนาลึกลับ

— Yorik