Palet warna Uchū untuk pencinta internet

 (uchu.style)
2 poin oleh GN⁺ 2025-02-17 | 1 komentar | Bagikan ke WhatsApp
  • Uchū adalah palet warna untuk pencinta internet yang dibuat oleh NetOperator Wibby, disajikan terutama sebagai daftar nilai oklch() alih-alih nama warna
  • Palet ini dibagi menjadi 8 kelompok warna, dan tiap kelompok terdiri dari 9 tingkat nilai oklch(L C H)
  • Kelompok pertama adalah seri bersaturasi rendah dengan tingkat kroma 0.002~0.004, sementara sisanya, berdasarkan sudut rona, tampak seperti seri merah, merah muda, ungu, biru, hijau, kuning, dan oranye
  • Nama untuk tiap warna, contoh penerapan, sampel kode, cara mengunduh, dan informasi lisensi tidak disediakan
  • Untuk digunakan dalam design system atau tema, pengguna perlu menyalin dan menerapkan langsung nilai OKLCH yang tersedia

Bentuk dasar palet Uchū

  • Uchū adalah palet warna yang disajikan dengan deskripsi “the color palette for internet lovers”
  • Pembuatnya ditampilkan sebagai NetOperator Wibby
  • Palet ini lebih berfokus pada daftar nilai oklch() daripada teks penjelasan, dan setiap nilai menentukan warna lewat tiga angka yang merepresentasikan lightness, chroma, dan hue

Cara palet disusun

  • Seluruh palet terdiri dari 8 kelompok warna
  • Setiap kelompok memiliki 9 nilai oklch()
  • Penanda tingkat pada tiap kelompok terlihat dari ### 2 hingga ### 9, sementara nilai pertama ditempatkan di bagian awal tanpa judul angka terpisah

Rentang OKLCH per kelompok warna

  • Seri saturasi rendah

    • Nilai kroma berada di kisaran 0.002~0.004
    • Nilai awal: oklch(0.9557 0.003 286.35)
    • Nilai terakhir: oklch(0.5682 0.004 247.89)

  • Sudut rona yang tampak seperti seri merah dan merah muda

    • Kelompok kedua memiliki sudut rona di kisaran sekitar 3~19
      • Nilai awal: oklch(0.8898 0.052 3.28)
      • Nilai terakhir: oklch(0.4117 0.157 16.58)
    • Kelompok ketiga memiliki sudut rona di kisaran sekitar 352~355
      • Nilai awal: oklch(0.958 0.023 354.27)
      • Nilai terakhir: oklch(0.5768 0.074 353.14)

  • Sudut rona yang tampak seperti seri ungu dan biru

    • Kelompok keempat memiliki sudut rona di kisaran sekitar 298~305
      • Nilai awal: oklch(0.891 0.046 305.24)
      • Nilai terakhir: oklch(0.3601 0.145 298.35)
    • Kelompok kelima memiliki sudut rona di kisaran sekitar 258~260
      • Nilai awal: oklch(0.8966 0.046 260.67)
      • Nilai terakhir: oklch(0.3953 0.15 259.87)

  • Sudut rona yang tampak seperti seri hijau, kuning, dan oranye

    • Kelompok keenam memiliki sudut rona di kisaran sekitar 144~149
      • Nilai awal: oklch(0.9396 0.05 148.74)
      • Nilai terakhir: oklch(0.5277 0.138 145.41)
    • Kelompok ketujuh memiliki sudut rona di kisaran sekitar 91~92
      • Nilai awal: oklch(0.9705 0.039 91.2)
      • Nilai terakhir: oklch(0.6229 0.097 91.9)
    • Kelompok kedelapan memiliki sudut rona di kisaran sekitar 51~57
      • Nilai awal: oklch(0.9383 0.037 56.93)
      • Nilai terakhir: oklch(0.5249 0.113 51.98)

Hal yang perlu diperiksa saat menggunakan

  • Nama warna untuk tiap kelompok warna tidak disediakan
  • Contoh penerapan tema, sampel kode, cara mengunduh, dan informasi lisensi tidak disertakan
  • Pengguna nyata perlu menyalin langsung nilai oklch() dari daftar untuk digunakan dalam penyusunan palet atau tema

Bacaan terkait

1 komentar

 
GN⁺ 2025-02-17
Komentar Hacker News

  • Hari ini baru tahu tentang oklch()
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...

  • Saya penasaran kenapa memakai kata uchu
    Belakangan ini sepertinya hampir semuanya—komposisi warna, model AI, startup, alat, aplikasi, dan sebagainya—dinamai dengan satu kata bahasa Jepang yang dipilih secara acak, dan saya tidak tahu kenapa

    • Saya tidak ingin terdengar negatif, tetapi rasanya sekarang sudah agak berlebihan
      Menariknya, di Jepang pun hal yang sama terjadi dengan kata-kata bahasa Inggris yang tampaknya dipilih secara acak, jadi sepertinya ini bukan sesuatu yang sama sekali tanpa preseden
    • Saya penasaran apakah nama produk seperti Galaxy atau Forester juga mengganggu Anda
      Mengeluhkan nama produk satu kata terlihat cukup aneh. Saya tidak tahu apakah masalahnya adalah bahasa asal kata itu, apakah iri karena memakai kata dua suku kata alih-alih kata yang lebih panjang seperti Navigator, atau tidak suka karena bukan satu suku kata seperti Chrome
      Saya juga penasaran apakah Ubuntu tidak apa-apa karena bukan bahasa Jepang, atau maksudnya nama seperti Twitter atau Yahoo juga harus disingkirkan dan semuanya harus menjadi satu huruf seperti X
    • “uchū” berarti alam semesta dalam bahasa Jepang
      Karena saya memakai tema ini di semua proyek saya, artinya bisa dibilang bersifat universal
      Saya tidak tahu soal contoh lain, tetapi secara pribadi saya menyukai gaya atau estetika Jepang, jadi kalau ada kata yang cocok, saya akan menggunakannya
    • Kata yang pendek dan bisa diucapkan itu jarang
      Jika menginginkan nama proyek 4–6 huruf, kata bahasa Jepang sering kali memenuhi syarat dengan baik, dan budaya Jepang juga sangat tersebar luas di luar negeri
    • Seiring generasi muda tumbuh dengan lebih akrab terhadap budaya Jepang seperti anime, gim video, dan rujukan budaya yang tidak retro, tampaknya mereka menamai sesuatu dengan kata yang terdengar bagus bagi mereka

  • Saya penasaran apakah sudah pernah melakukan analisis keterbacaan dengan ini
    Kontras antara latar belakang dan latar depan terlihat terlalu rendah, jadi tampaknya kurang nyaman untuk membaca dalam waktu lama

    • Rasanya belakangan ini terlalu banyak fokus pada keterbacaan
      Di kantor ada tim baru yang membuat kami mengukur semua kontras demi orang-orang yang mengalami kesulitan membaca. Kontras harus di atas 80%, ukuran huruf juga harus sangat besar, tema tidak boleh diubah, dan pemasangan plugin seperti Dark Reader juga dilarang “demi keamanan”
      Masalahnya, hasilnya bagi orang lain sangat jelek dan membuat mata lelah. Sekarang bahkan Dark Reader tidak bisa dipakai, jadi makin parah. Semuanya tebal dan seperti berteriak, sehingga makin sulit membedakan mana yang penting. Saya tidak membeli layar 4,7 juta warna hanya untuk melihat 10 warna. Pada kontras yang sangat tinggi, saya cenderung sakit kepala, jadi saya lebih suka tema yang lembut seperti Solarized
      Sebanyak 0,5% karyawan yang memiliki masalah penglihatan bisa cukup terbantu dengan plugin browser yang menyesuaikan sesuai masalah masing-masing. Kesulitan penglihatan juga tidak semuanya sama. Ada orang yang tidak bisa melihat kombinasi warna tertentu, jadi harus dihindari atau diperbaiki; ada yang melihat buram, jadi perlu teks besar, bahkan mungkin jauh lebih besar daripada sekarang. Bagi orang yang sama sekali tidak bisa melihat, ini juga tidak membantu; mereka membutuhkan display braille dan teks alternatif gambar yang baik. Namun perusahaan tampaknya tidak memedulikan hal-hal seperti itu, hanya peduli pada sesuatu yang langsung terlihat mencolok
      Dulu ada tanda tangan email yang lembut, tetapi sekarang terlalu mencolok dengan warna-warna taman kanak-kanak dan huruf raksasa. Padahal itu informasi yang memang tidak dibaca siapa pun. Ada alasan mengapa dulu sengaja dibuat kurang menonjol: agar orang tahu informasinya ada di sana jika perlu, tetapi bukan informasi penting. Kalau benar-benar ingin membacanya, bisa dipilih untuk dilihat, atau beralih ke mode teks biasa
      Saya sama sekali tidak menentang dukungan bagi penyandang disabilitas, tetapi ingin melihat pendekatan yang lebih bisa disesuaikan. Saya tidak suka cara yang memperbaiki satu hal tetapi merusak semuanya bagi orang lain. Saya juga tidak memakai ponsel dalam mode huruf raksasa, tetapi saya senang fitur itu tersedia bagi yang membutuhkannya
    • Kalau soal kontras, saya penasaran apakah yang dimaksud adalah area contoh warna
      Jika demikian, nilai warna kecil itu lebih bersifat visual daripada untuk menyampaikan informasi, dan di repositori nilainya tersedia dalam bentuk yang mudah dibaca. Misalnya, Anda tentu tidak ingin membaca lebih dari satu paragraf teks oranye terang di atas latar oranye

  • Ungkapan komposisi warna membingungkan
    Bagi saya, komposisi warna berarti sejumlah kecil warna yang saling cocok, seperti Monokai. Penerapannya juga jelas dan mudah, misalnya penyorotan sintaks di editor kode
    Ini terlihat seperti daftar yang sangat banyak berisi warna-warna monokromatik, dan saya tidak tahu harus memakainya bagaimana. Bukan bermaksud meremehkan, saya benar-benar bingung

    • Ini mirip dengan cara Tailwind menyediakan palet warna lengkap yang bisa dipakai untuk pengembangan UI
      Jika ada beberapa tingkat kecerahan untuk warna yang sama, elemen UI bisa terasa masih satu keluarga dan saling cocok, sehingga fleksibel. Misalnya jika ingin memakai border bernuansa biru pada kartu biru, Anda bisa memakai biru yang lebih terang untuk latar dan biru yang lebih gelap untuk border
      Alih-alih memberi transparansi pada border hitam, tiap tingkat kecerahan dalam palet ini dipilih secara individual agar cocok dalam keluarga warna yang sama. Keuntungan lainnya adalah tiap “tingkat kecerahan” bisa dijamin konsisten antarwarna. Abu-abu 50% berada di posisi yang mirip dengan merah 50%
      Secara lebih umum, setiap warna di sini dirancang agar cocok dengan semua warna lainnya. Bukan sembarang warna, melainkan harus harmonis satu sama lain
    • Lebih tepat menyebutnya palet warna
    • Secara pribadi saya juga merasa seharusnya disebut “palet warna”. Contoh serupa adalah sebagai berikut
      Open Color dari OpenProps https://yeun.github.io/open-color/
      Palet warna Tailwind https://tailwindcss.com/docs/colors
      Dari sudut pandang desain, palet warna bisa sangat sulit dipilih sambil tetap mempertahankan skor kontras warna yang baik dan standar aksesibilitas lainnya. Palet yang distandardisasi berguna karena mengambil alih pekerjaan itu. Saya sering memakai palet OC atau Tailwind, tetapi sering kali keluarga warna yang saya inginkan kurang, jadi cukup bagus punya tiga pilihan seperti ini
    • Saya juga sama-sama tidak paham bagaimana pada dasarnya daftar kotak warna bisa mendapat 476 poin

  • Palet ini tampaknya tidak seragam secara perseptual
    Maksudnya, rasio kontras antara tiap tint dan putih/hitam tidak sama di semua warna. Saya penasaran apakah sudah dianalisis di https://huetone.ardov.me/

  • Saya penasaran mengapa ini disebut komposisi warna untuk penggemar internet

    • Saya suka internet, dan juga suka warna-warna keren. Masa cuma saya saja? ;)

  • Jika dibandingkan berdasarkan nomornya, biru terlihat jauh lebih tajam dan opak daripada warna lain
    Jika kelima tingkat dibandingkan berdampingan, biru tampak menyala seperti listrik, sementara warna lain tampak seperti diberi tint
    Tentu ini akan bergantung pada gamma monitor dan profil warna, tetapi saya penasaran apakah tujuannya adalah agar tiap nomor terlihat seperti tint yang mirip terhadap warna murni. Saat ini, ini lebih terlihat seperti sistem yang mirip RGB/CMYK dengan notasi berbeda, bukan implementasi Munsell Color System yang membuat kesetaraan perseptual berdasarkan penskalaan intensitas warna

    • Tidak selalu begitu
      Saya tidak mencapai warna-warna ini dengan rumus tertentu; saya hanya melihatnya dengan mata dan menyesuaikannya sampai terasa cocok bagi saya

  • Saya melihatnya di Firefox Android, tetapi yang tampak hanya teks hitam di latar putih
    Sepertinya seharusnya ada lebih banyak yang terlihat; apakah benar?

    • Ini memakai CSS nesting[1]. Anggap saja seperti SCSS. Untuk dukungan penuh diperlukan Firefox 117 dan Chrome 120[2]
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_sel...
      [2] https://caniuse.com/css-nesting
    • Sama juga di Firefox desktop Linux, bahkan dengan JavaScript diaktifkan
      Sunting: kelihatannya memakai Oklab/oklch() [1], yang katanya seharusnya bekerja sejak Firefox 113, tetapi tampaknya tidak di 115. Atau mungkin ada elemen lain yang merusaknya
      [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...
    • Jika Anda menggulir ke bawah dan tidak melihat beberapa set swatch warna yang dikelompokkan berdasarkan kecerahan, berarti Anda tidak melihatnya dengan benar
      Di Firefox saya ini bekerja dengan baik, tetapi saya tidak memakai Android
    • Sama juga di Firefox 50 di Linux
      Saya tidak tahu harus menyebut apa orang-orang yang mengabaikan kompatibilitas mundur. Situs saya tetap bekerja di IE6 kalau perlu
    • Sama juga di Chromium PC

  • Saya tidak memakai Tailwind, tetapi selama ini memakai palet Tailwind untuk keperluan seperti ini
    https://tailwindcss.com/docs/colors

    • Perlu hati-hati. Tailwind kembali mengubah warna antara versi 3 dan 4, dan ini sudah yang ketiga kalinya
      Agar jelas, menaikkan versi library CSS ke versi terbaru seharusnya tidak secara diam-diam mengubah tema warna seluruh situs, tetapi kenyataannya begitu
      Karena itu saya mulai beralih ke Radix Colors

  • Mungkin tidak ada persyaratan kuat bahwa saturasi antarwarna harus konsisten, tetapi menurut selera saya terlihat agak tidak merata
    Kuning tua dan oranye terasa sedikit terlalu pudar
    Secara keseluruhan paletnya bagus. Saya terutama suka bahwa mereka menghindari merah yang benar-benar “merah”. Menurut saya itu warna yang tidak disukai banyak desainer. Saya ingin melihat kalau ada riset tentang hubungan antara warna mata dan preferensi warna
    Arah yang mirip, tetapi dengan lebih banyak rumpun warna: https://www.s-ings.com/scratchpad/oklch-smooth/

    • Kuning dan oranye memang jelas sulit
      Terima kasih untuk tautannya, dan rumpun warna itu terlihat sangat bagus