พาเล็ตสี Uchū สำหรับคนรักอินเทอร์เน็ต

 (uchu.style)
2 คะแนน โดย GN⁺ 2025-02-17 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Uchū คือ พาเล็ตสีสำหรับคนรักอินเทอร์เน็ต ที่สร้างโดย NetOperator Wibby โดยนำเสนอโดยเน้นรายการค่าตัวเลข oklch() มากกว่าชื่อสี
  • พาเล็ตแบ่งเป็น 8 กลุ่มสี และแต่ละกลุ่มประกอบด้วยค่า oklch(L C H) จำนวน 9 ระดับ
  • กลุ่มแรกเป็นชุดสีความอิ่มตัวต่ำที่มีค่าโครมาอยู่ราว 0.002~0.004 ส่วนที่เหลือดูคล้ายกลุ่มสีแดง·ชมพู·ม่วง·น้ำเงิน·เขียว·เหลือง·ส้มตามมุมสี
  • ไม่มีการให้ชื่อแยกตามสี ตัวอย่างการใช้งาน ตัวอย่างโค้ด วิธีดาวน์โหลด หรือข้อมูลไลเซนส์
  • หากจะใช้กับ design system หรือธีม ต้องคัดลอก ค่าตัวเลข OKLCH ที่ให้มาไปใช้งานเองโดยตรง

รูปแบบพื้นฐานของพาเล็ต Uchū

  • Uchū คือ พาเล็ตสี ที่มาพร้อมคำอธิบายว่า “the color palette for internet lovers”
  • ผู้สร้างระบุว่าเป็น NetOperator Wibby
  • พาเล็ตนี้เน้นรายการค่า oklch() มากกว่าข้อความอธิบาย โดยแต่ละค่ากำหนดสีด้วยตัวเลขสามตัวซึ่งสอดคล้องกับความสว่าง·โครมา·มุมสี

วิธีจัดโครงสร้างของพาเล็ต

  • พาเล็ตทั้งหมดประกอบด้วย 8 กลุ่มสี
  • แต่ละกลุ่มมีค่า oklch() จำนวน 9 ค่า
  • การระบุระดับในแต่ละกลุ่มแสดงตั้งแต่ ### 2 ถึง ### 9 โดยค่าตัวแรกถูกวางไว้ด้านหน้าต่างหากโดยไม่มีหัวข้อเป็นตัวเลข

ช่วง OKLCH แยกตามกลุ่มสี

  • กลุ่มความอิ่มตัวต่ำ

    • ค่าโครมาอยู่ราว 0.002~0.004
    • ค่าเริ่มต้น: oklch(0.9557 0.003 286.35)
    • ค่าสุดท้าย: oklch(0.5682 0.004 247.89)

  • มุมสีที่ดูเป็นกลุ่มแดง·ชมพู

    • กลุ่มที่สองมีมุมสีอยู่ในช่วงประมาณ 3~19
      • ค่าเริ่มต้น: oklch(0.8898 0.052 3.28)
      • ค่าสุดท้าย: oklch(0.4117 0.157 16.58)
    • กลุ่มที่สามมีมุมสีอยู่ในช่วงประมาณ 352~355
      • ค่าเริ่มต้น: oklch(0.958 0.023 354.27)
      • ค่าสุดท้าย: oklch(0.5768 0.074 353.14)

  • มุมสีที่ดูเป็นกลุ่มม่วง·น้ำเงิน

    • กลุ่มที่สี่มีมุมสีอยู่ในช่วงประมาณ 298~305
      • ค่าเริ่มต้น: oklch(0.891 0.046 305.24)
      • ค่าสุดท้าย: oklch(0.3601 0.145 298.35)
    • กลุ่มที่ห้ามีมุมสีอยู่ในช่วงประมาณ 258~260
      • ค่าเริ่มต้น: oklch(0.8966 0.046 260.67)
      • ค่าสุดท้าย: oklch(0.3953 0.15 259.87)

  • มุมสีที่ดูเป็นกลุ่มเขียว·เหลือง·ส้ม

    • กลุ่มที่หกมีมุมสีอยู่ในช่วงประมาณ 144~149
      • ค่าเริ่มต้น: oklch(0.9396 0.05 148.74)
      • ค่าสุดท้าย: oklch(0.5277 0.138 145.41)
    • กลุ่มที่เจ็ดมีมุมสีอยู่ในช่วงประมาณ 91~92
      • ค่าเริ่มต้น: oklch(0.9705 0.039 91.2)
      • ค่าสุดท้าย: oklch(0.6229 0.097 91.9)
    • กลุ่มที่แปดมีมุมสีอยู่ในช่วงประมาณ 51~57
      • ค่าเริ่มต้น: oklch(0.9383 0.037 56.93)
      • ค่าสุดท้าย: oklch(0.5249 0.113 51.98)

สิ่งที่ควรตรวจสอบเมื่อใช้งาน

  • ไม่มีการให้ ชื่อสี ของแต่ละกลุ่มสี
  • ไม่มีตัวอย่างการใช้กับธีม ตัวอย่างโค้ด วิธีดาวน์โหลด หรือข้อมูลไลเซนส์รวมอยู่ด้วย
  • ผู้ใช้จริงต้องคัดลอกค่า oklch() จากรายการไปใช้สร้างพาเล็ตหรือธีมด้วยตนเอง

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-02-17
ความคิดเห็นบน Hacker News

  • วันนี้เพิ่งรู้จัก oklch()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

    • ได้เรียนรู้จากบทความนี้: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
      พอลองใช้เองแล้วแปลกใจมากที่โทนสีดูมีชีวิตชีวาขึ้นทันที และตอนนั้นก็ตัดสินใจว่า ต้องทำธีมขึ้นมา
    • เพื่อให้เข้าใจมากขึ้น เลยลองทำเครื่องมือ visualization ด้วย v0 :)
      https://v0-oklch-visualiser-e69nx1.vercel.app/
    • อีกอย่างที่ควรรู้คือเบราว์เซอร์ส่วนใหญ่รองรับแล้ว
      https://caniuse.com/?search=oklch
    • รู้สึกเหมือนเป็นอนาคตของสี
    • ผมเองก็เพิ่งรู้ไม่นานมานี้ แต่เพื่อนร่วมงานของผมตามการเปลี่ยนแปลงแบบนี้ได้เร็วกว่ามาก

  • สงสัยว่าทำไมถึงใช้คำว่า uchu
    ช่วงนี้ชุดสี โมเดล AI สตาร์ทอัพ เครื่องมือ แอป ฯลฯ แทบทุกอย่างดูเหมือนถูกตั้งชื่อด้วยคำภาษาญี่ปุ่นที่สุ่มมา 1 คำ ไม่รู้ว่าทำไม

    • ไม่อยากให้ฟังดูเป็นลบ แต่ตอนนี้รู้สึกว่าใช้กันมากเกินไปหน่อย
      ที่น่าสนใจคือในญี่ปุ่นเองก็เกิดเรื่องแบบเดียวกันกับคำภาษาอังกฤษที่ดูเหมือนสุ่มมาเหมือนกัน ดังนั้นคงไม่ใช่เรื่องที่ไม่เคยมีมาก่อนโดยสิ้นเชิง
    • สงสัยว่าชื่อผลิตภัณฑ์อย่าง Galaxy หรือ Forester ก็ทำให้รำคาญด้วยหรือเปล่า
      การบ่นเรื่องชื่อผลิตภัณฑ์ที่เป็นคำคำเดียวดูค่อนข้างแปลก ปัญหาคือภาษาต้นทางของคำนั้นหรือเปล่า หรืออิจฉาที่ใช้คำสองพยางค์แทนคำยาว ๆ อย่าง Navigator หรือไม่ชอบเพราะไม่ใช่คำพยางค์เดียวแบบ Chrome กันแน่
      สงสัยว่า Ubuntu ไม่ใช่ภาษาญี่ปุ่นเลยโอเคไหม หรือหมายความว่าชื่ออย่าง Twitter หรือ Yahoo ก็ควรถูกเลิกใช้ แล้วทุกอย่างควรไปเป็นตัวอักษรเดียวแบบ X
    • “uchū” ในภาษาญี่ปุ่นแปลว่า จักรวาล
      เพราะใช้ธีมนี้กับทุกโปรเจกต์ จึงหมายถึงว่าเป็นธีมที่ใช้ได้ทั่วไปในความหมายหนึ่ง
      ส่วนกรณีอื่น ๆ ผมไม่รู้ แต่ส่วนตัวชอบสไตล์หรือสุนทรียะของญี่ปุ่นอยู่แล้ว ถ้าเป็นคำที่เข้ากันดีก็อยากใช้
    • คำที่สั้นและออกเสียงได้มีไม่มาก
      ถ้าต้องการ ชื่อโปรเจกต์ 4–6 ตัวอักษร คำภาษาญี่ปุ่นมักตรงเงื่อนไขได้ดี และวัฒนธรรมญี่ปุ่นก็แพร่หลายมากในต่างประเทศ
    • คนรุ่นใหม่โตมากับความคุ้นเคยต่อ วัฒนธรรมญี่ปุ่น อย่างอนิเมะ วิดีโอเกม และการอ้างอิงทางวัฒนธรรมที่ไม่ใช่แนวย้อนยุคมากขึ้น จึงดูเหมือนจะตั้งชื่อตามคำที่ฟังดูไพเราะ

  • สงสัยว่าได้ทำ การวิเคราะห์ความอ่านง่าย กับสิ่งนี้หรือยัง
    คอนทราสต์ระหว่างพื้นหลังกับพื้นหน้าต่ำเกินไป ดูไม่น่าจะสบายสำหรับการอ่านเป็นเวลานาน

    • ช่วงนี้ดูเหมือนจะให้ความสำคัญกับ ความอ่านง่าย มากเกินไป
      ที่ทำงานมีทีมใหม่เกิดขึ้นมา แล้วบังคับให้วัดคอนทราสต์ทุกอย่างเพื่อคนที่มีปัญหาในการอ่าน คอนทราสต์ต้องเกิน 80% ตัวอักษรก็ต้องใหญ่มาก เปลี่ยนธีมก็ไม่ได้ และ “ด้วยเหตุผลด้านความปลอดภัย” ก็ห้ามติดตั้งปลั๊กอินอย่าง Dark Reader ด้วย
      ปัญหาคือผลลัพธ์ที่ได้สำหรับคนอื่น ๆ นั้นทั้งน่าเกลียดและทำให้ล้าตามาก ตอนนี้ใช้ Dark Reader ไม่ได้แล้วยิ่งแย่ลง ทุกอย่างหนาและเหมือนตะโกนใส่ ทำให้แยกแยะได้ยากขึ้นด้วยว่าตรงไหนสำคัญ ผมไม่ได้ซื้อจอแสดงผล 4.7 ล้านสีมาเพื่อดูแค่ 10 สี ที่คอนทราสต์สูงมาก ๆ ผมมักปวดหัว เลยชอบธีมที่นุ่มกว่าอย่าง Solarized มากกว่า
      พนักงาน 0.5% ที่มีปัญหาทางสายตาสามารถได้รับความช่วยเหลือเพียงพอจากปลั๊กอินเบราว์เซอร์ที่ปรับให้เข้ากับปัญหาของแต่ละคนได้อยู่แล้ว ปัญหาทางสายตาไม่ได้เหมือนกันหมด บางคนมองไม่เห็นการจับคู่สีบางแบบ จึงต้องหลีกเลี่ยงหรือแก้ไข บางคนมองเบลอจึงต้องการตัวอักษรใหญ่ ซึ่งอาจต้องใหญ่กว่าตอนนี้มากด้วยซ้ำ สำหรับคนที่มองไม่เห็นเลย สิ่งนี้ก็ช่วยไม่ได้ และต้องใช้จอแสดงผลอักษรเบรลล์กับข้อความทดแทนรูปภาพที่ดี แต่บริษัทกลับดูเหมือนไม่สนใจเรื่องพวกนั้น สนใจแต่สิ่งที่เห็นเด่นชัดเท่านั้น
      เมื่อก่อนมีลายเซ็นอีเมลที่ดูนุ่มนวล แต่ตอนนี้กลายเป็นสีแบบอนุบาลกับตัวอักษรยักษ์ที่พุ่งเข้ามา ทั้งที่เป็นข้อมูลที่ไม่มีใครอ่านอยู่แล้ว มีเหตุผลที่ตั้งใจทำให้มันเด่นน้อยลง คือให้รู้ว่ามีอยู่ตรงนั้นถ้าจำเป็น แต่ไม่ใช่ข้อมูลสำคัญ ถ้าอยากอ่านจริง ๆ ก็เลือกดูได้ หรือเปลี่ยนเป็นโหมดข้อความล้วนก็ได้
      ผมไม่ได้ต่อต้านการช่วยเหลือผู้พิการเลย แต่ хотелось бы видеть แนวทางที่ปรับให้เหมาะกับแต่ละคน มากกว่า ไม่ชอบวิธีที่แก้สิ่งหนึ่งแล้วทำให้ที่เหลือพังสำหรับทุกคน โทรศัพท์ของผมเองก็ไม่ได้ใช้โหมดตัวอักษรยักษ์ แต่ผมคิดว่าการมีฟีเจอร์นั้นให้คนที่ต้องการเป็นเรื่องดี
    • ถ้าพูดถึงคอนทราสต์ สงสัยว่าหมายถึง พื้นที่ตัวอย่างสี หรือเปล่า
      ถ้าใช่ ค่าเล็ก ๆ ของสีเหล่านั้นมีไว้เชิงภาพมากกว่าการสื่อข้อมูล และใน repository ก็มีค่าในรูปแบบที่อ่านง่ายอยู่แล้ว เช่น คงไม่มีใครอยากอ่านข้อความยาวเกินหนึ่งย่อหน้าที่เป็นตัวอักษรสีส้มอ่อนบนพื้นหลังสีส้ม

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

    • อันนี้คล้ายกับวิธีที่ Tailwind มี พาเล็ตต์สีแบบครบชุด ให้ใช้ในการพัฒนา UI
      เมื่อมีระดับความสว่างหลายขั้นของสีเดียวกัน ก็จะรู้สึกว่าเป็นโทนเดียวกัน และสามารถสร้างองค์ประกอบ UI ที่เข้ากันได้อย่างยืดหยุ่น เช่น ถ้าอยากใช้เส้นขอบโทนฟ้ากับการ์ดสีฟ้า ก็ใช้ฟ้าที่สว่างกว่าสำหรับพื้นหลัง และใช้ฟ้าที่เข้มกว่าสำหรับเส้นขอบได้
      แทนที่จะใช้เส้นขอบสีดำแล้วใส่ความโปร่งใส ระดับความสว่างแต่ละขั้นในพาเล็ตต์นี้ถูกเลือกแยกกันเพื่อให้เข้ากันภายในตระกูลสีเดียวกัน ข้อดีอีกอย่างคือสามารถรับประกันได้ว่า “ระดับความสว่าง” แต่ละขั้นมีความสอดคล้องกันระหว่างสีต่าง ๆ สีเทา 50% อยู่ในตำแหน่งใกล้เคียงกับสีแดง 50%
      พูดให้ทั่วไปกว่านั้น สีแต่ละสีในนี้ถูกออกแบบมาให้เข้ากันได้ดีกับสีอื่นทั้งหมด ไม่ใช่สีอะไรก็ได้ แต่ต้องกลมกลืนกัน
    • เรียกว่า พาเล็ตต์สี จะถูกต้องกว่า
    • ส่วนตัวก็คิดว่าควรเรียกว่า “พาเล็ตต์สี” เหมือนกัน ตัวอย่างที่คล้ายกันมีดังนี้
      Open Color ของ OpenProps https://yeun.github.io/open-color/
      พาเล็ตต์สีของ Tailwind https://tailwindcss.com/docs/colors
      จากมุมมองด้านดีไซน์ การเลือกพาเล็ตต์สีอาจยากมาก หากต้องรักษาคะแนนคอนทราสต์ของสีที่ดีและเกณฑ์การเข้าถึงอื่น ๆ ไว้ พาเล็ตต์มาตรฐานมีประโยชน์เพราะช่วยทำงานส่วนนั้นแทนให้ ผมใช้พาเล็ตต์ของ OC หรือ Tailwind บ่อย แต่ก็มักมีกรณีที่ขาดตระกูลสีที่ต้องการ ดังนั้นการมีตัวเลือกแบบนี้เพิ่มมา 3 แบบก็ค่อนข้างดี
    • ผมก็ไม่เข้าใจเหมือนกันว่าทำไมโดยพื้นฐานแล้ว รายการกล่องสี ถึงได้ 476 คะแนน

  • พาเล็ตต์นี้ดูไม่ สม่ำเสมอในเชิงการรับรู้
    หมายความว่าอัตราส่วนคอนทราสต์ระหว่างแต่ละ tint กับสีขาว/สีดำไม่ได้เท่ากันในทุกสี อยากรู้ว่าได้ลองวิเคราะห์ด้วย https://huetone.ardov.me/ หรือยัง

    • ผมลองวิเคราะห์ด้วยเครื่องมือของผมชื่อ a11y-contrast[1] แล้ว และที่จริงค่าความสว่างไม่สม่ำเสมอ ผมเขียนไว้ใน [2] ว่าทำไมคุณสมบัติแบบนี้อาจเป็นสิ่งที่พึงประสงค์ในพาเล็ตต์สี
      [1] https://github.com/darekkay/a11y-contrast
      [2] https://darekkay.com/blog/accessible-color-palette/
    • ไม่ใช่ แค่ทำตามความรู้สึกว่าดูดีเท่านั้น
      ไม่รู้ว่าเครื่องมือ huetone รองรับ OKLCH หรือเปล่า ผมไม่เห็นตัวเลือกแปลง

  • สงสัยว่าทำไมอันนี้ถึงเป็น การจัดชุดสีสำหรับคนรักอินเทอร์เน็ต

    • ผมชอบอินเทอร์เน็ต และก็ชอบสีสวย ๆ ด้วย คงไม่ใช่ผมคนเดียวหรอกมั้ง ;)

  • ถ้าเทียบเลขเดียวกัน สีฟ้าดู สดและทึบ กว่าสีอื่นมาก
    เมื่อเอาทั้ง 5 ขั้นมาเทียบเคียงกัน สีฟ้าดูพุ่งเหมือนไฟฟ้า ส่วนสีอื่นดูเหมือนถูก tint ไว้
    แน่นอนว่าอาจขึ้นอยู่กับค่าแกมมาและโปรไฟล์สีของจอ แต่สงสัยว่าเจตนาคือให้เลขแต่ละตัวดูเหมือน tint ที่คล้ายกันเมื่อเทียบกับสีบริสุทธิ์หรือเปล่า ตอนนี้ดูเหมือนระบบที่คล้าย RGB/CMYK แต่ใช้สัญลักษณ์ต่างกัน มากกว่าจะเป็นการนำ Munsell Color System มาใช้เพื่อสร้างความเท่าเทียมในการรับรู้ตามการสเกลความเข้มของสี

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

  • ดูบน Firefox ของ Android แล้วเห็นแค่ ตัวอักษรสีดำบนพื้นหลังสีขาว
    คิดว่าตามปกติน่าจะเห็นมากกว่านี้ ใช่ไหม

    • ใช้ CSS nesting[1] ให้นึกถึงอะไรแบบ SCSS จำเป็นต้องมี Firefox 117 และ Chrome 120 เพื่อรองรับเต็มรูปแบบ[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • บน Firefox เดสก์ท็อป Linux ก็เหมือนกัน และเปิด JavaScript แล้วก็ยังเหมือนเดิม
      แก้ไข: ดูเหมือนว่าจะใช้ Oklab/oklch() [1] ซึ่งบอกว่าควรทำงานได้ตั้งแต่ Firefox 113 แต่ใน 115 ดูเหมือนจะไม่ได้ หรือไม่ก็อาจมีองค์ประกอบอื่นบางอย่างทำให้พัง
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • ถ้าเลื่อนลงไปแล้วไม่เห็น ชุดตัวอย่างสี หลายชุดที่จัดกลุ่มตามความสว่าง แปลว่าคุณยังไม่ได้เห็นอย่างถูกต้อง
      ใน Firefox ของผมทำงานได้ดี แต่ผมไม่ได้ใช้ Android
    • บน Firefox 50 ของ Linux ก็เหมือนกัน
      ไม่รู้ควรเรียกคนที่ไม่สนใจ ความเข้ากันได้ย้อนหลัง ว่าอะไรดี เว็บไซต์ของผมถ้าจำเป็นก็ยังทำงานบน IE6 ได้
    • บน Chromium PC ก็เหมือนกัน

  • แม้จะไม่ได้ใช้ Tailwind แต่ผมใช้ พาเล็ตต์ของ Tailwind สำหรับงานแบบนี้มาตลอด
    https://tailwindcss.com/docs/colors

    • ต้องระวัง Tailwind เปลี่ยนสีอีกครั้งระหว่างเวอร์ชัน 3 กับ 4 และนี่ก็เป็นครั้งที่สามแล้ว
      พูดให้ชัดคือ การอัปเดตไลบรารี CSS เป็นเวอร์ชันล่าสุดไม่ควรทำให้ธีมสีทั้งเว็บไซต์เปลี่ยนไปแบบเนียน ๆ แต่ในความเป็นจริงมันเป็นแบบนั้น
      ดังนั้นผมจึงเริ่มย้ายไปทาง Radix Colors

  • แม้คงไม่ได้มีข้อกำหนดเข้มงวดว่าสีต่าง ๆ ต้องมีความอิ่มตัวสม่ำเสมอกัน แต่สำหรับรสนิยมของผมมันดูขึ้น ๆ ลง ๆ ไปหน่อย
    สีเหลืองเข้มกับสีส้มให้ความรู้สึกซีดจางไปนิด
    โดยรวมพาเลตต์นี้ดี โดยเฉพาะชอบที่หลีกเลี่ยงสีแดงแบบ “แดงแจ๋” ซึ่งผมคิดว่าเป็นสีที่ดีไซเนอร์หลายคนไม่ชอบ ถ้ามีงานวิจัยเกี่ยวกับความสัมพันธ์ระหว่างสีตากับความชอบเรื่องสี ก็อยากอ่านดู
    แนวทางคล้ายกัน แต่มีตระกูลสีมากกว่า: https://www.s-ings.com/scratchpad/oklch-smooth/

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