01 จาก 10
การทำความเข้าใจเกี่ยวกับ Color and Web Schemes
มีสี่สีพื้นฐานที่คุณสามารถใช้สำหรับเว็บไซต์ได้ แต่ละหน้าของบทความนี้จะแสดงภาพของโทนสีและวิธีที่คุณสามารถสร้างรูปแบบที่คล้ายกันใน Photoshop ได้
- สีเดียว
การใช้สีของสีเดียวกัน พวกเขาอาจมีเฉดสีหรือเฉดสีที่แตกต่างกันขึ้นอยู่กับจำนวนสีขาวหรือสีดำที่เพิ่มขึ้น - คล้ายคลึง
ใช้สีที่ใกล้เคียงกับล้อเลื่อนสี - ประกอบ
นี้มักจะถูกมองว่าเป็น "ตรงข้าม" เพราะทั้งสองสีในโทนสีที่ต่างกันอยู่ตรงกันข้ามกับล้อเลื่อนสี - triadic
สีเหล่านี้มีการเว้นระยะเท่ากันบนล้อเลื่อนสี
ทุกโทนสีจะใช้สีเหลืองเป็นสีฐาน
02 จาก 10
โทนสีเว็บแบบ Monochromatic
โทนสีนี้ใช้สีเหลืองสีส้มของสีฐานของฉันและเพิ่มสีขาวและดำให้เป็นสีและทาตามรูปแบบตามลำดับ
- ด้านบนซ้าย - สีฐาน # ffe500
- ด้านขวาบน - เติมสีขาว 50% เพื่อให้ได้สี # fff280
- ซ้ายล่าง - เพิ่มสีขาว 75% เพื่อให้ได้ # fff8bf
- ด้านล่างขวา - เติมสีดำ 50% เพื่อให้ได้ # 7f7200
โทนสีโทนสีเดียวมักจะง่ายที่สุดในสายตาของทุกรูปแบบสี การเปลี่ยนแปลงที่อ่อนโยนในเฉดสีและเฉดสีทำให้สีไหลเข้าสู่กันดีกว่า ใช้โทนสีนี้เพื่อทำให้เว็บไซต์ของคุณมีสภาพคล่องและรวบรวมได้มากขึ้น
03 จาก 10
โทนสีเว็บแบบ Monochromatic เพิ่มเติม
เพิ่มสี่เหลี่ยมจัตุรัสสีดำ 20% เพื่อให้ได้สีสันมากขึ้นในโครงการ การเพิ่มสีดำหรือสีขาวให้เป็นสีของคุณสามารถสร้างสีใหม่ให้กับจานสีโดยไม่ทำให้สีของหน้าเว็บวุ่นวาย
04 จาก 10
รูปแบบสีเว็บแบบอะนาล็อก
โทนสีนี้ใช้สีฐานสีเหลืองและเพิ่มและหักลบสี 30 องศาในจานสี Photoshop
- ด้านบนซ้าย - สีฐาน # ffe500
- บนขวา - +30 องศาเพื่อรับ # 99ff00
- ซ้ายล่าง - -30 องศาเพื่อรับ # ff6600
- ล่างขวา - สีขาว 100% #ffffff
สีแบบอะนาล็อกสามารถทำงานร่วมกันได้ดี แต่บางครั้งอาจมีการปะทะกันไม่ดี อย่าลืมทดสอบแผนการเหล่านี้กับผู้คนมากกว่าตัวเองครอบครัวและเพื่อนของคุณ เมื่อทำงานพวกเขาสร้างไซต์ที่เต็มไปด้วยสีสันมากกว่าโครงการเดียว แต่เกือบเป็นของเหลว
05 จาก 10
รูปแบบสีเว็บที่คล้ายคลึงกันมากขึ้น
เพิ่มสี่เหลี่ยมจัตุรัสสีดำ 20% เพื่อให้ได้สีสันมากขึ้นในโครงการ
06 จาก 10
โครงการ Web Color Scheme
โทนสีที่ไม่เหมือนชุดสีอื่น ๆ มักมีเพียง 2 สีเท่านั้น สีฐานและตรงข้ามกับล้อสี Photoshop ทำให้ง่ายต่อการรับสีเสริม - เพียงแค่เลือกพื้นที่สีที่คุณต้องการให้เป็นส่วนประกอบและกด Ctrl-I Photoshop จะกลับไปหาคุณ ตรวจสอบให้แน่ใจว่าได้ทำแบบนี้ในเลเยอร์ที่ซ้ำกันดังนั้นคุณจึงไม่สูญเสียสีฐานของคุณ
- ซ้าย - สีพื้นฐาน # ffe500
- ขวา - ส่วนเสริม # 001aff
ชุดสีเพิ่มเติมมักจะโดดเด่นกว่าผังสีอื่น ๆ ดังนั้นจึงควรใช้มันอย่างระมัดระวัง พวกเขามักจะใช้ชิ้นส่วนที่ต้องโดดเด่น
07 จาก 10
เพิ่มเติมชุดรูปแบบเว็บเสริม
เพื่อให้ได้รุ่นนี้ฉันเพิ่มสีขาว 50% ลงครึ่งล่างของสีและ 30% สีดำไปที่สี่เหลี่ยมกลาง อย่างที่คุณเห็นจะช่วยให้คุณมีตัวเลือกเพิ่มขึ้นอีกเล็กน้อย แต่ก็ยังคงเป็นชุดสีที่สมบูรณ์
08 จาก 10
Triadic Web Color Scheme
โทนสี Triadic ประกอบด้วย 3 สีที่มีระยะห่างเท่า ๆ กันรอบล้อสี เนื่องจากล้อสีเป็น 360 องศาฉันจึงใช้กล่องสีในตัวเลือกสีเพื่อเพิ่มและลบออก 120 องศาจากสีฐาน
- ด้านบนซ้าย - สีฐาน # ffe500
- ด้านขวาบน - +120 องศาเพื่อรับ # e500ff
- ซ้ายล่าง - -120 องศาเพื่อรับ # 00ffe6
- ล่างขวา - สีขาว 100% #ffffff
โทนสี Triadic มักสร้างเว็บเพจที่มีชีวิตชีวา แต่เช่นเดียวกับชุดสีที่ต่างกันพวกเขาสามารถส่งผลกระทบต่อคนอื่นได้ อย่าลืมทดสอบ
นอกจากนี้คุณยังสามารถสร้างโครงร่างสี tetradic หรือ 4 สีโดยที่สีจะเว้นระยะเท่ากันรอบล้อสี
09 จาก 10
Triadic Web Color Scheme เพิ่มเติม
เช่นเดียวกับตัวอย่างอื่น ๆ ฉันเพิ่มสี่เหลี่ยมสีดำ 30% เป็นสีเพื่อให้ได้เฉดสีเพิ่มเติม
10 จาก 10
ชุดสีเว็บที่ไม่สอดคล้องกัน
ความงามอยู่ในสายตาของคนดู แต่ความจริงที่น่าเสียดายไม่ใช่เรื่องที่ทุกสีเข้าด้วยกัน สีที่ไม่ลงรอยกันคือสีที่อยู่ห่างจากล้อเลื่อนสีประมาณ 30 องศาและไม่สามารถเสริมหรือเป็นส่วนหนึ่งของสามสีได้
ชุดสีที่ไม่สุภาพอาจเป็นเรื่องที่น่าตกใจมากและควรใช้เพื่อสร้างความสนใจเท่านั้น จำไว้ว่าเนื่องจากสีเหล่านี้มักจะปะทะกันความสนใจที่คุณได้รับอาจไม่ใช่สิ่งที่คุณต้องการ