คนเราสร้างจานสีแบบเดียวกับในการออกแบบวัสดุของ Google ได้อย่างไร

ข้อกำหนดการออกแบบวัสดุของ Google มีชุดจานสี :

เริ่มต้นด้วยสีหลักพื้นฐานซึ่งกำหนดเป็น "500" จากนั้นพวกเขาจะมีช่วงของการเพิ่มเฉดสีที่สว่างขึ้นและเข้มขึ้นเพื่อสร้างช่วงของสีประมาณ 10 สี แสงที่เบาที่สุดถูกกำหนดว่า "50" และใกล้เคียงสีขาวและมืดที่สุด "900" อยู่ใกล้สีดำ แต่ทั้งคู่ยังคงสีฐานไว้บางส่วน

ฉันไม่สามารถระบุได้ว่าจะคำนวณการเพิ่มขึ้นอย่างไร ฉันลองเครื่องกำเนิดสวอตช์ออนไลน์นี้แต่ดูเหมือนว่าฉันจะไม่สามารถหมุนหมายเลขได้

ฉันคิดว่ามันเป็นเพียงเรื่องของการปรับความสว่างขึ้นและลงจากฐาน "500" สีและฉันเดาว่าค่า "0" จะเป็นสีขาวบริสุทธิ์และ "1000" จะเป็นสีดำบริสุทธิ์ แต่ช่วงใน Google จานสีดูเหมือนจะมีความอิ่มตัวมากกว่าช่วงความสว่างแบบง่าย

ไม่มีใครรู้ว่าอัลกอริทึมหรือกระบวนการที่ฉันสามารถใช้เพื่อใช้สีพื้นฐานและสร้างจานสีให้สอดคล้องกับจานสีของ Google?

ฉันทำเครื่องมือ CSS3 / AngularJS เล็ก ๆ นี้สำหรับโครงการเพื่อสร้างจานสีของวัสดุ คุณสามารถป้อนสีฐานสิบหก 500 และใช้เครื่องมือภายนอกเช่น ColorZilla เพื่อรับค่าสีจากที่นั่น ส่วนที่เบากว่านั้นก็เป็นของที่ Google ใช้เหมือนกัน แต่อันที่มืดกว่าก็ออกจะเล็กน้อย

mcg.mbitson.com

จานของ Google จะมีสีเดียว ซึ่งจะทำให้อัตราส่วน RGB เดียวกันเปลี่ยนความสว่างและความอิ่มตัวของสีขึ้นหรือลง ในการทำเช่นนี้คุณจะต้องแปลงค่า RGB เป็น HSL (Hue, Saturation, Lightness), เปลี่ยนความสว่างและความอิ่มตัวของสีจากนั้นแปลงกลับหากต้องการ เป็นไปได้ที่จะเก็บไว้ในพื้นที่ RGB ในขณะที่คำนวณ แต่คณิตศาสตร์นั้นสับสนเกินไป (สำหรับฉันที่จะเข้าใจหรืออธิบาย) HSL ถูกสร้างขึ้นสำหรับการผสมสีแบบดั้งเดิม (มันง่ายกว่าที่เราจะคิด)

หากวัตถุประสงค์ของคุณคือการสร้างจานสี CSS คุณสามารถใช้สีใน HSL background-color: hsl(0,100%, 50%);ได้

คุณสามารถทำได้ด้วยตนเองใน Photoshop โดยใช้ตัวเลือกสี HSB มีไว้สำหรับความสว่างอิ่มตัวของสี (เหมือนกันกับ HSL เหมือนกัน) เลือกเฉดสีที่คุณชอบและเปลี่ยนความอิ่มตัวและความสว่างด้วยค่าที่สอดคล้องกัน ในภาพด้านล่างรุ่น S = 54 และ B = 77, เลื่อนขึ้น 5% โดยใช้และ54 + 54 * 0.05 77 + 77 * 0.05หรือจะเลื่อนลงS - S * 0.05

หมายเหตุด้านข้างเพื่อชี้แจงระหว่าง Hex & RGB HEX 6 หลัก # FFEB3B เป็นตัวเลข 3 ตัวแยกกันแทน RGB

#FFEB3B -> FF,EB,3B -> red:FF green:EB blue:3Bการแปลงค่า HEX red:255 green:235 blue:59 OR rgb(255,235,59)ที่จะช่วยให้คุณทศนิยม

มีอัลกอริทึมในการแปลง RGB เป็น HSL ถ้าคุณต้องการให้มันเป็นWikipediaแต่วิธีที่ง่ายที่สุดคือการใช้ lib สี ตัวอย่างนี้สร้างจานสีเดียวด้วยPlease.jsมันยังมีอัลกอริธึมอื่น ๆ สำหรับการสร้างจานสีเสริมหรือสีที่ถูกใจ เหมือน kuler.adobe ซึ่งมีหิน

Please.make_scheme(
    Please.HEX_to_HSV('#ffeb3b'),
    {scheme_type: 'mono', format:'hex'}
);
// returns ->["#ffeb3b", "#ffe821", "#ffe508", "#e5d54c"]

คุณลองทำงานกับ Color Wheel ของ Adobe หรือไม่ ฉันคิดว่ามันยืดหยุ่นกว่าเครื่องมือ SlayerOffice ที่คุณใช้อยู่เล็กน้อย

https://color.adobe.com/

สำหรับกรณีที่แน่นอนของคุณให้เลือก "เฉดสี" แล้วลองเล่น ๆ มันจะไม่สร้างการออกแบบวัสดุเช่นสวอตช์ แต่เป็นการเริ่มต้น

คุณสามารถดาวน์โหลดจานสีที่ Google ให้ลิงก์ไปยังไซต์ได้หรือไม่ เนื่องจากมันให้สีทั้งหมดกับคุณ?

Google Color Swatches Zip

เพื่อสร้างการไล่ระดับสี / จานสีจากสีที่กำหนดเป็นหลักคุณสามารถใช้อัลกอริทึมดังต่อไปนี้

1. เลือกเฉดสีต่ำสุดและสูงสุดที่คุณต้องการในจานสีของคุณ
2. แบ่ง 'color-space' ระหว่างสีเหล่านี้ในพาร์ติชันเท่ากัน (ดูด้านล่าง)
3. สีเอาต์พุตในขั้นตอนเหล่านี้

สำหรับการแบ่งช่องว่างระหว่างสีก่อนอื่นคุณสามารถแปลง HEX ของคุณเป็น RGB เลือกค่าในแต่ละช่อง สมมติว่าคุณมีcolor1 (r1, g1, b1) และcolor2 (r2, g2, b2) และคุณต้องการ 3 สีระหว่างcolor1และcolor2จากนั้นคุณสามารถทำสิ่งต่อไปนี้

all_colors = []
steps = no_of_colors + 1
rdelta, gdelta, bdelta = (r2 - r1) / steps, (g2 - g1) / steps, (b2 - b1) / steps
for step in range(steps - 1):
    r1 += rdelta
        g1 += gdelta
        b1 += bdelta
all_colors.append((r1, g1, b1)) 

อย่าลืมแปลงค่า RGB ระหว่าง (0 ถึง 1)

ในกรณีของคุณคุณสามารถใช้สีฐานและแบ่งพื้นที่ระหว่างสีและwhite to basecolor basecolor to blackคุณสามารถปรับขั้นตอนได้ตามต้องการ

ในที่สุดฉันจะทำโปรโมตห้องสมุดไพ ธ อนที่ไร้ยางอายเพราะมันเกี่ยวข้องกับคำถามนี้เกี่ยวกับการสร้างจานสี มันถูกเรียกว่าSecretColors คุณสามารถสร้างจานสีของตัวเองการไล่ระดับสีหรือใช้จานสีมาตรฐานเช่น IBM, Material Design, ColorBrewer หรือ Clarity