วิธีการปรับ Dark & Light Color ใน Adobe XD

https://www.pexels.com/photo/color-palette-colors-colours-paint-259714/

เคยเป็นกันบ้างไหมเวลาที่เลือกสีที่ใช้แล้วไม่รู้จะใช้สีไหน ,สีใกล้เคียง หรือสีคู่ตรงข้าม เป็นต้น แต่แล้วสีเลือกมาก็ไม่เหมาะสมกับสิ่งทีคิดไว้

วันนี้เรามีทริคเล็ก ๆ มาแนะนำกันโดยการนำสี (เดียว) มาปรับโทนเพื่อให้ได้สีหลากหลายมากขึ้น และนั่นก็คือวิธีการปรับสี มืด, สว่าง หรือที่เรียกกันว่า Dark Color & Light Color การปรับสีในส่วน Dark & Light ก็จะมีกฎอยู่ว่า

Lighter Color variation = Lower Saturation + Higher Brightness.

Darker color variation = Higher Saturation + Lower Brightness.

ทีนี้เรามาเริ่มใช้งานกันเลย

1. ให้เราเลือกสีที่เราต้องการ

2. ให้เราเปลี่ยน Mode HEX เป็น Mode HSB ซึ่ง HSB ย่อมาจาก

H = Hue คุณลักษณะของสีสัน เช่น น้ำเงิน, เขียว, ม่วง, แดง เป็นต้น

S = Saturation คุณลักษณะความอิ่มตัวของสี เช่น ความสดของสี

B = Brightness คุณลักษณะความสว่างของสี เช่น มืด, สว่าง

3. จะเห็นว่า จะมีช่องให้เรากรอกอยู่ 4 ช่อง ถ้าเราเอาเมาส์ Hover จะเห็นว่า จะมีคำอธิบายขึ้นมา ช่องที่ 1 คือ Hue / ช่องที่ 2 คือ Saturation / ช่องที่ 3 คือ Brightness / ส่วนช่องสุดท้ายคือ Alpha การปรับความโปร่งใส

4. ผมจะปรับสีตามกฎ Lighter Color ที่ได้อธิบายไว้ด้านบนแล้ว ก็จะได้สีประมาณนี้

5. ผมจะปรับสีตามกฎ Darker Color ที่ได้อธิบายไว้ด้านบนแล้ว ก็จะได้สีประมาณนี้

สรุป : ถ้าใช้สีตามวงล้อสีแล้วไม่โอเค ลองมาใช้สี (เดียว) ในการปรับโทน เผื่อเพื่อน ๆ จะได้ เฉดสี ตามที่เพื่อน ๆ ต้องการก็ได้สุดท้ายนี้ผมมีเว็บที่ปรับโทนสีตามที่ผมอธิบายไว้แล้ว ซึ่งสามารถนำมาเลือกใช้ได้ง่าย

https://www.0to255.com/

วันนี้เพื่อน ๆ น่าจะได้ความรู้เกี่ยวกับการปรับโทนสี หวังว่า medium นี้จะเป็นประโยชน์กับเพื่อน ๆ ถ้าเห็นว่ามีประโยชน์ช่วยกด “ตบมือ” เป็นกำลังใจด้วยนะครับไว้คราวหน้ามีทริคดี ๆ และวิธีการใช้งาน Adobe XD จะมาแนะนำเพื่อน ๆ อีกนะครับ

ref: https://medium.com/sketch-app-sources/building-a-color-palette-framework-96dbda541c2e