tints and shades

เครื่องกำเนิดสีและเฉดสี

การพัฒนาท้องถิ่น

โครงการนี้ใช้ตัวสร้างไซต์แบบคงที่ระดับสูงและปรับใช้กับหน้า GitHub โดยใช้การกระทำของ GitHub จาก Shohei Ueda

วิชาบังคับก่อน: node.js 14+

1. โคลนโครงการนี้
2. นำทางไปยังโครงการในเทอร์มินัลของคุณ
3. ติดตั้งการพึ่งพา: npm install
4. เริ่มต้นเซิร์ฟเวอร์: npm run start
5. นำทางไปยัง localhost:8080 ในเบราว์เซอร์ของคุณ

เครื่องกำเนิดสีและเฉดสีคืออะไร?

วัตถุประสงค์ของเครื่องมือนี้คือการผลิตโทนสี (เพิ่มสีขาวบริสุทธิ์) และเฉดสี (เพิ่มสีดำบริสุทธิ์) ของสีหกเหลี่ยมที่กำหนดโดยเพิ่มขึ้น 10%

ทำไมเครื่องมือนี้ถึงไม่เหมือนใคร?

ใช้คณิตศาสตร์อย่างจริงจัง จากประสบการณ์ของฉันเครื่องมือที่คล้ายกันทำให้การคำนวณไม่ถูกต้องเนื่องจากข้อผิดพลาดในการปัดเศษการตั้งค่าผู้สร้างหรือความไม่สอดคล้องอื่น ๆ

การทดสอบแสดงให้เห็นว่าผลลัพธ์ที่ตรงกับวิธีการคำนวณของ Chrome Devtools รวมถึงวิธีการที่ได้รับความนิยมและเป็นที่นิยมในการรับโทนสีและเฉดสีผ่าน SASS

ฉันจะใช้สิ่งนี้เมื่อใด

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

สิ่งนี้มีประโยชน์สำหรับนักออกแบบที่อาจสื่อสารความตั้งใจสีให้กับนักพัฒนาที่ใช้ sass หรือ postcss ในงานสร้างของพวกเขา นอกจากนี้ยังเป็นวิธีที่ดีในการดูตัวอย่างอย่างรวดเร็วว่าโทนสีและเฉดสีมีลักษณะเป็นสีพื้นฐานที่คุณอาจพิจารณาสำหรับการออกแบบของคุณ

ฉันเคยได้ยินว่ามันมีประโยชน์สำหรับครูผู้เชี่ยวชาญด้านข้อมูลและผู้ที่นำเสนอ

วิธีการคำนวณ

สีหกเหลี่ยมที่กำหนดจะถูกแปลงเป็น RGB เป็นครั้งแรก จากนั้นแต่ละองค์ประกอบของสี RGB มีการคำนวณดังต่อไปนี้ดำเนินการตามลำดับ

• Tints: New value = current value + ((255 - current value) x tint factor)
• เฉดสี: New value = current value x shade factor

ค่าใหม่จะถูกปัดเศษขึ้นหากจำเป็นจากนั้นแปลงกลับเป็น Hex เพื่อแสดงผล

การคำนวณตัวอย่าง

สมมติว่าเราต้องการสีและเฉดสีของรีเบคก้าม่วง, #663399

สี 10%

1. #663399 ถูกแปลงเป็น RGB เทียบเท่ากับ 102, 51, 153
2. r: 102 + ((255 - 102) x .1) = 117.3 , ปัดเป็น 117
3. G: 51 + ((255 - 51) x .1) = 71.4 , ปัดเศษเป็น 71
4. B: 153 + ((255 - 153) x .1) = 163.2 , ปัดเศษเป็น 163
5. RGB 117, 71, 163 ถูกแปลงเป็น Hex เทียบเท่ากับ #7547A3

ร่มเงา 10%

1. #663399 ถูกแปลงเป็น RGB เทียบเท่ากับ 102, 51, 153
2. r: 102 x .9 = 91.8 ปัดเป็น 92
3. G: 51 x .9 = 45.9 , ปัดเป็น 46
4. B: 153 x .9 = 137.7 , ปัดเป็น 138
5. RGB 92, 46, 138 ถูกแปลงเป็น Hex เทียบเท่ากับ #5C2E8A

ข้อเสนอแนะและการบริจาค

โครงการนี้เป็นโอเพ่นซอร์สและฉันชอบความช่วยเหลือของคุณ!

หากคุณสังเกตเห็นข้อผิดพลาดหรือต้องการเพิ่มคุณสมบัติโปรดยื่นปัญหาเกี่ยวกับ GitHub หากคุณไม่มีบัญชีที่นั่นเพียงส่งอีเมลรายละเอียดให้ฉัน

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

สนับสนุนโครงการนี้

เครื่องกำเนิดย้ำและเฉดสีจะฟรีเสมอ แต่การสนับสนุนของคุณได้รับการชื่นชมอย่างมาก

• ซื้อกาแฟให้ฉัน
• Venmo
• แอพเงินสด
• paypal

การให้เครดิต

Michael Edelstone ออกแบบและจัดระเบียบโครงการด้วยความช่วยเหลือครั้งใหญ่จาก Nick Wing เกี่ยวกับการคำนวณสี

เราใช้ห้องสมุดโอเพนซอร์ซที่น่าทึ่งเหล่านี้ทั่วทั้งโครงการ:

• Anchorjs
• clipboard.js
• มืดมน
• สิบเอ็ด

ขอบคุณมากสำหรับ Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen และ Luis Escarrilla สำหรับการบริจาคที่มีค่าของพวกเขา

รายละเอียดอื่น ๆ

• ตัวอักษร: งาน sans โดย wei huang
• สี: #000000, #FFFFFF, #E96443 และ #CA228E
• ชอบการออกแบบวัสดุของ Google? ลองสิ่งอื่นที่ฉันทำ