Image courtesy of Saranont Limpananont
During my art therapy sessions at night, years ago, I was thinking it would be more efficient for me if I had my own color system. One of the rules was that no matter how different the hues were, the colors should be arranged according to their luminance values. So I created a color palette program arranged by luminance values for the convenience of choosing colors I like to use for each project.
The simple idea of this program is that we input the color codes we want to use, without having to think too much about which color has what luminance value. Just put in the colors you like first. Then, let the program rearrange them from the lowest to highest value.
There may not be a need to arrange a color palette in this manner for some people, which is understandable. I think it could be useful for the work I do, so I tried writing this small program.
Recently, I've adapted this color arrangement program to be embedded and shared on this page. In case it might be useful for anyone, please feel free to try it out.
ด้วยการทำงานประจำที่เกี่ยวข้องกับการใช้สี รวมถึงงานศิลปะบำบัดที่ผมสนใจเรื่องการทดลองเกี่ยวกับค่าของสี ทำให้อยากพัฒนาระบบการจัดการสีแบบง่าย ๆ เป็นของตัวเอง หนึ่งในกติกาที่ต้องการก็คือในการจัดเรียงสีนั้นไม่ว่าจะมีเฉด (hue) ที่แตกต่างกันอย่างไร ก็ควรจะสามารถจัดเรียงตามค่าความสว่าง (Luminance value) ได้ ผมเลยลองทำโปรแกรมจานสีที่จัดเรียงตามค่าความสว่างเพื่อความสะดวกในการทำความเข้าใจสีที่เราชอบและเลือกมาใช้งาน
หลักการของโปรแกรมนี้คือเราก็ใส่รหัสสีที่เราอยากใช้ลงไปตามที่ต้องการ โดยไม่ต้องคิดมากว่าสีไหนมีค่าความสว่างเท่าไหร่ ชอบอะไรก็เติมเข้าไปก่อนได้ จากนั้นก็ให้โปรแกรมจัดเรียงมาให้ใหม่ โดยไล่จากค่าความสว่างน้อยไปหามาก
สำหรับบางท่านก็อาจจะไม่ได้มีความจำเป็นในการจัดเรียงจานสีในลักษณะเช่นนี้ ก็เข้าใจได้ครับ สำหรับผมคิดว่ามันมีประโยชน์กับงานที่ผมทำ ก็ลองหาวิธีเขียนโปรแกรมขนาดเล็กนี้ขึ้นมาใช้ครับ
ผมนำมาแชร์ไว้ข้างล่างที่หน้านี้ ท่านที่สนใจสามารถทดลองใช้ได้ครับ
Saranont Limpananont
2024.06.19
*This program was made using p5.js, a JavaScript library for creative coding.
Luminance Sorter Palette:
How to Use:
- Enter the preferred hexadecimal color codes in the text box, separating each color with a comma. For example #0D0D0D, #D9D0D6, #D9C5D2, ...
- Once you have entered all the color codes, click the SORT COLORS button.
- The list of colors will then appear below the text box, arranged from lowest to highest luminance value.
วิธีใช้:
- ใส่รหัสสีเลขฐาน 16 (Hexadecimal color code) ที่ต้องการลงไปบนช่องข้อความ โดยแบ่งแต่ละสีด้วยเครื่องหมายจุลภาค เช่น #0D0D0D, #D9D0D6, #D9C5D2, ...
- เมื่อเติมรหัสสีครบตามที่ต้องการแล้ว กดปุ่ม SORT COLORS
- จากนั้นรายการสีจะปรากฏขึ้นบริเวณด้านล่างของช่องข้อความ โดยจะเรียงตามค่าความสว่างของสีจากน้อยไปหามาก
