Ngobrolin Format Warna
Ringkasan Episode
Bantu KoreksiTopik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan sisi visual, membangun web berarti menuliskan warna — dan daftar formatnya sekarang panjang sekali: RGB dan RGBA, heksadesimal, HSL, HWB, Lab, LCH, sampai OKLCH. Dimulai dari yang paling sederhana, yaitu nama warna. Awalnya hanya ada enam belas, warisan sistem tampilan lama dengan nilai-nilai yang rapi dan simetris, lalu bertambah sekitar seratus lima puluh nama yang jauh lebih semaunya. Salah satunya punya kisah yang tidak lucu sama sekali: Rebecca Purple diabadikan untuk mengenang anak seorang pengembang yang meninggal saat masih kecil dan menyukai warna itu. Sisanya membandingkan format penulisan. RGB dan heksadesimal paling umum dan paling aman dukungannya, tapi keduanya tidak intuitif ketika kita hanya ingin sebuah warna sedikit lebih terang atau lebih gelap. Di situlah HSL dan HWB terasa lebih dekat dengan cara manusia berpikir — cukup tambahkan whiteness atau blackness, tanpa perlu memasang pustaka tambahan seperti dulu; skala warna Tailwind dipakai sebagai contoh yang sudah dihafal orang. Dibahas juga bahwa RGB punya sRGB sebagai versi standar, sehingga penyerahan desain sebaiknya menyepakati yang mana, dan Display P3 di spesifikasi CSS Color yang baru menjangkau warna yang sebelumnya tidak terjangkau. CMYK ditutup sebagai ranah percetakan, bukan pengganti yang setara di web.
Poin-poin Utama
- •Nama warna di CSS awalnya hanya enam belas, warisan sistem tampilan lama, lalu bertambah sekitar seratus lima puluh nama yang jauh lebih semaunya
- •Rebecca Purple punya kisah duka di baliknya: diabadikan untuk mengenang anak seorang pengembang yang meninggal saat masih kecil dan menyukai warna itu
- •RGB dan heksadesimal paling aman dukungannya tapi tidak intuitif — mencerahkan sedikit sebuah warna berarti membuka color picker, bukan menaikkan satu angka
- •HSL dan HWB lebih dekat dengan cara manusia berpikir: cukup tambah whiteness atau blackness-nya, tanpa perlu pustaka tambahan seperti dulu
- •RGB punya sRGB sebagai versi standar, jadi penyerahan desain sebaiknya menyepakati yang mana supaya warnanya tidak melenceng
- •Display P3 di spesifikasi CSS Color baru menjangkau warna yang sebelumnya tidak terjangkau — terasa untuk tampilan kaya, hampir tidak untuk teks dan dokumen
- •CMYK adalah ranah percetakan dengan gamut lebih sempit dari RGB dan tanpa transparansi, jadi bukan pengganti yang setara di web
[Menelefon]
Hai, hai, hai. Selamat malam.
Halo, halo. Selamat hari Rabu.
Biasanya selamat hari Stasa.
Ini spesial karena satu dan hal, jadi kemarin kita nggak bisa live.
Jadi kita undur, jadi kayak apa ya, kayak ini ya.
Susulan. Susulan. Remedial.
Bukan, kalau kuliah itu apa ya?
Kuliah pengganti. Remedial.
Kuliah pengganti, jadi di hari Rabu ya.
Khusus minggu ini, minggu depan kita balik lagi.
Waktunya berlewat.
Minggu depan selesa lagi.
Mudah-mudahan selesa lagi, dan berhubung kita udah lama ya.
Nggak kenal-kenalan, mungkin ada penonton yang baru,
atau penonton yang lama juga mungkin belum tahu.
Salam kenal semuanya, di sini kita bertiga.
Ada saya Riza, co-founder Heik Tiewit.
Kemudian ada Ivan.
Saya Ivan.
Gue bukan co-founder, gue apa ya?
Kerjanya apa, kerjanya?
Oh kerjanya.
Kalau sehari-harinya sebagai senior engineer di HumanMate.
HumanMate.
Terus ada Eka.
Halo, Eka bukan founder juga.
Apa, sehari-hari web developer.
Aku jadi tidak enak.
Satu-satunya bukan developer, di sini adalah saya.
Lihat transkrip lengkap (1761 segmen lagi)
Mantan developer.
Dan kita adalah tiga dari GDE,
yang fokusnya ke web teknologi di Indonesia.
Jadi jangan ngobrol-ngobrol.
Trio GDE.
Belum nambah lagi.
Dan tujuan kita bikin acara ini selain mau diskusi sama teman-teman
yang ada di rumah, di YouTube masing-masing,
kita juga pengen diskusi di antara kita bertiga.
Karena ternyata kita mengalami kesulitan yang sama,
terus sekarang sudah sulit menentukan topik.
Kalau misalkan kita diminta jadi pembicara di mana,
kita kayaknya mulai kebingungan mencari topik.
- Mulai kehabisan ide. - Kehabisan ide.
Jadi harapannya dengan ngobrol,
kita sebenarnya bisa aja ngobrolnya privat, misalkan pakai Google Meet atau apa,
tapi kan hanya terbatas ke kita bertiga, nggak sama teman-teman.
- Lebih seru ngobrol rame-rame juga sih.
- Lebih seru ngobrol rame-rame.
Kayak kemarin tuh ada ide topik yang keren banget
yang kita nggak kepikiran ya, web jadul itu ya.
Teknologi jadul yang kita bahas lagi itu,
itu adalah ide dari salah satu penonton.
Dan itu ide-nya sangat bagus sekali.
Dan langsung kita eksekusi.
Jadi teman-teman di sini yang mau diskusi,
yang punya ide, silahkan disampaikan aja.
Baik di chat, di kolom chat seperti Rahul.
Halo, Rahul.
Atau juga di bit.ly/ngobrolinweb.
Nah, bisa sampaikan ide-nya di situ ya.
Oke, malam hari ini kita akan membahas tentang topik yang cukup nis,
karena ini berhubungan dengan CSS dan lebih dalam lagi.
Lebih nis lagi, ya itu adalah kewarnaan.
- Tapi kalau kita bikin web, kayaknya nggak mungkin lepas dari ini.
- Betul. - Sesedikit apapun,
se-nggak-suka apapun, semalus apapun kita sama aspek visual,
kan kita tetap harus tentuin warna ya.
- Betul.
Dan biasanya juga, kalau buat saya ya, nggak tahu ya teman-teman ya,
warna ini kadang-kadang dipakai untuk dibaging juga.
- Nah, kalau menurut-menurut warnanya apa, warna kesukaan?
- Oh, warna kesukaan. - Oh, warna kesukaan.
- Warnanya merah. - Tomato ya.
- Kalau buat dibaging. - Buat dibaging, oh tomato.
Iya, tomato juga bagus.
Warnanya rupanya tomato, soalnya lucu aja.
- Gimana sih warna tomato? Belum pernah pakai warna tomato.
- Nah, kalau saya warnanya ini. - Merah tapi soft gitu, bagus.
- Ini, ini, ini tomato. Ada nggak disini warnanya?
Warnanya merah, merah-tomat gitu lah.
- Yang merah. Nah, terus kalau mau nge-compare dua hal,
misalnya nge-check box mana yang keren gitu, biasanya sih red sama green sih.
- Di screenshot tuh jelek banget. - Iya, mencolok sekali ya.
- Tapi itu fungsi dibaging. - Jaman dulu, jaman dulu
kalau gue nyari overflow itu gue bikin kayak itu loh, kayak apa itu?
Yang border supaya semuanya. - Gradient.
- Bukan border, jadi semua elemen itu kayak gue kasih asterisk,
terus kasih border dan satu pixel, warnanya merah.
Jadi semua elemen itu kelihatan tuh line-nya.
Jadi ketahuan yang overflow. - Yang overflow.
Nah, itu ya biasanya dibagingnya ke arah situ ya.
Ini kok pixelnya segini tapi kok lewat ya gitu kan.
Nah, itu dibaging CSS-nya begitu ya, triknya ya, salah satu triknya.
- Tapi kenapa selalu merah ya? Gak pernah ada yang pakai warna biru atau ungu atau apa?
- Pauzan. Mungkin karena merah mencolok. - Merah mencolok.
- Kalau kita bikin aplikasi pakai React Native dulu ya,
kalau sekarang mungkin udah merahnya udah agak-agak diredukkan ya.
Kalau dulu error-nya itu merah, merah darah gitu.
Text-nya putih, ini menyeramkan sekali gitu kan.
Sekarang sih udah agak-agak ke arah tomato warnanya, jadi udah lumayan.
Ada pauzan, ada damar juga, halo damar.
- Tinggal tunggu Mas Danang, dia datang. - Kalau disembut muncul.
- Oh, kalau Tailwind ya, Tailwind juga ada pewarnaan ya.
Begera 300, udah hapal sekali ya, luar biasa.
Oke, kita mulai dari mana? Kita mulai dari yang paling dasar.
Paling dasar adalah menggunakan pewarnaan di CSS dengan menggunakan nama warnanya.
Ya, seperti tadi yang kita gunakan untuk debugging ya,
biasanya pakai orange atau red, yang paling sering.
Karena red itu karakternya cuma 3, gampang diketik gitu ya.
Saya baru tahu juga ada 10, ini juga bisa dipakai nih.
Kalau misalkan kita mau pakai Rebecca Purple, panjang banget nulisnya.
Nah ini ada ceritanya nih, jadi dulu kan gue lihat ada nama warna Rebecca Purple,
terus gue ngetawain, anjir itu aneh banget sih, frek banget sih.
Kirain di helloper-nya mereka saling nge-prank gitu, kirain bercandaan kan.
Nah terus diketik, loh kok beneran ada warna ungu?
Terus iseng kan, bubuk, kenapa? Terus ternyata ceritanya tragis gitu,
yang ya engineer yang bikin anaknya umur 6 tahun atau umur berapa,
pokoknya anaknya masih kecil, anak perempuannya namanya Rebecca meninggal.
Pas lagi proses apalah rilis warna atau apa, anaknya namanya Rebecca.
Cuma ceritanya panjang, sedih gitu, terus jadi gak enak sendiri,
tadinya udah ngetawain sambil ngetengatain.
Ya ampun, maaf.
- Semoga tenang. - Ada ceritanya ya?
Namanya dia, jadi si anaknya itu sebelum dulunya suka warna ungu,
jadi kayak diabadikan gitu deh, ketribut.
Wow, luar biasa.
Kalau Alice Blue gimana, Alice Blue?
Gak tau, gak ada orang tahu.
Itu dari Alice in Wonderland, kayak warna asin, kayak kostumnya atau dress-nya atau apa,
pokoknya gak tragis, yang tragis itu satu doang kok.
Coba kan tragisnya itu doang.
- Banyak yang ada. - Kok gak Chelsea Blue atau MU Red gitu ya?
- AC Milan Red. - Mereka sebenernya bukan penggemar bola.
Kalau yang buat penggemar bola begitu ya.
Tapi ada beberapa yang namanya aneh atau unik lah ya.
Misalkan saya pernah dapet namanya Papaya Whip.
Yang namanya kayak Popaya apa?
Popaya itu kan diatasnya ada batang popaya, gitu kali ya warnanya.
- Batang popaya. - Batang popaya udah putih juga sih padahal.
- Peru, ada peru. - Peru kan nama negara padahal ya.
- Iya, warnanya cokelat. - Tapi kita masih,
ini warna yang kita kan masih Red Green Blue ya di sini ya.
Yang kita pakai ini RGB ya, itu kan ada 6 karakter ya.
Jadi contohnya Red FF 0000.
Berarti Rednya full, yang lain gak ada.
Greennya sama bluenya gak ada.
- 255 kan? - Iya, 255 karakter.
Jadi cuma ada berapa, intinya gabungan ini 256 ya.
Kalau untuk cat rumah, itu lebih parah lagi.
Pakainya namanya Pantone.
Itu soalnya mereka di patentin kalau warna cep.
Penamaan warnanya itu lebih aneh-aneh lagi.
Putih aja ada macem-macem.
Masa si user-nya yang mau cat rumah harus nyebut hexcode F35996?
Nggak mungkin kan harus dikasih nama yang user-friend.
Nah, ini nih penamaan HTML, CSS juga menarik sih.
Yang paling atas deh, coba scroll ke paling atas awalnya.
Itu ternyata cuma 16, cuma ada 16 variasi warna.
Dan itu yang bikin, nah ini ya kayaknya.
Nah ini cuma ada 16 warna, terus itu yang bikin adalah sistem yang namanya X.
Punya Windows dulu punya Microsoft gak salah.
Jadi X.org.
Nah dulu itu cuma ada...
X.org, sort.
Sort, apa gimana sih bacanya gue lupa.
- Sort itu. - Nggak ngerti bacanya gimana.
Itu punya Windows, punya Windows ya?
Windows mungkin ya, gak tahu apa.
Oh punya Windows.
Nah terus kan RGB-nya rapih gitu semua.
RGB-nya gak ada yang random, gak ada yang arbitrary gitu kan.
Semua kayak simetris.
Nah, gak ngerti itu. Apa karena di monitor jaman dulu tuh kayak masih simple?
Atau gimana? Atau biar gampang?
Ya mungkin ya.
Karena masih 16 bit kan?
CGA, VGA, SPGA.
Ya.
Nah terus abis itu di release selanjutnya baru yang ditambahin 150 warna yang sembarangan itu.
Nah terus kan dulu belum ada warna orange.
Jadi gemiknya tuh ada si SS2 atau apa ya kalau gak salah.
Wow ada warna orange. Sekarang bisa pakai warna orange.
Oh jadi inilah sebabnya kenapa ada yang ngalamin gak? Ini jadi web jadul juga.
Geocities.
Geocities itu warnanya warna ini loh.
Warna biru, ini kan warna link kan.
Kalau link di hover yang udah dikulik dia jadi Navy ya kan.
Kalau ngeliat di apa? Ada CSS-nya.
Geocities kita jangan nunggu.
Ada CSS-nya, CSS framework-nya sekarang ada yang iseng buat.
Nah ini.
Oh ya ampun.
Nah ini kan warnanya warna-warna ini kan.
Cuma original.
Cuma dulu ya cuma ada 16 mungkin ya waktu awal ada CSS kan.
Dan biar compatible sama semua device.
Semua device ya betul.
Nah terus juga ini nih Rahul benar sekali kita mau bahas tentang ini nih.
Penulisan warna ya ada banyak ya ada HEX yang barusan kita bahas.
Kemudian ada RGB, ada RGBA, ada alphanya.
Sekarang nambah lagi banyak malah LCH.
Ada HSL.
HSL, LCH.
OKLH.
Selamat pusing.
Ada Lab.
Oh iya.
Yang Lab itu kalau gak salah yang itu ya yang bisa mengakses warna yang sebelumnya sama sekali belum bisa diakses.
Itu bukan sih.
Yang color space baru itu.
Gue ada ini.
Kita bahas bersama.
Gue belum baca total.
Inilah gunanya.
Oke kalau buka sendiri cuma skimming, skimming wait bentar yang menarik apa ditutup lupa lagi.
Nah sebenernya ini cara maksa kita baca.
Iya.
Nah ini ada pertanyaan yang relevan nih.
Pemakaian format tersebut sejak kapan adanya?
Kalau RGB kayaknya dari awal ya?
Iya kayaknya di luar standard web pun RGB udah.
Format digital awalnya RGB kan emang ya?
Betul.
RGB format.
Siapa nih?
Malexibra.
Enggak telat baru mulai.
Masih panjang.
Selamat datang.
Baru mulai.
Oke.
Tadi kan awalnya kan sengaja dipakai keyword jadi penamaan lebih gampang gitu kan.
Easy to remember names.
Tujuannya itu kan.
Walaupun dia bisa direpresentasikan juga dengan RGB atau dengan HSL atau dengan yang lain.
Termasuk juga untuk tadi kebutuhan dibagiin.
Kalau kita mulai seret harus pager F000 pun panjang sekali ya.
Capek.
Singletik red, pom atau green.
Oh.
Kemudian bertambah lagi ditambahin 150.
Walaupun kayaknya kalau udah ada misalkan tim di kantornya udah cukup lengkap.
Ada designer dan lain-lain.
Biasanya udah langsung pakai format RGB atau HSL atau yang lain ya.
Tidak pakai keyword lagi ya biasanya.
Biasanya kalau sudah dari Figma udah ada.
Udah ditranslate CSS-nya sudah ada gitu tinggal pakai.
Dari kursus ya atau dari desain-desain tools yang lain kan itu udah pakai formatnya.
Apakah itu RGB atau HSL atau apapun.
Kayaknya kalau designer sekarang itu sudah supaya colornya konsisten sudah pakai color palette kan ya.
Sudah ada paletnya mau range warnanya cuma ini doang gitu.
Jadi nggak ada keluar dari aturan.
Karena itu mungkin warna itu kan sudah berkaitan sama identiti ya.
Identiti dari perusahaan atau situsnya.
Desain sistem ya.
Ya basic bagian dari desain sistem udah ada ya semacam tailwind itu lah.
Dari shape-nya kan. Dulu misalnya yang paling terang sampai paling gelap.
Nah loncat-loncat step-nya itu sudah di auto-generate bisa.
Nah ngomongin kewarnaan tadi Eka juga udah ngomongin tentang salah satu sejarah Rebecca Parple itu dari mana.
Nah kalau tomato itu gimana tuh ceritanya?
Tomato? Gak tau ya semuanya tragis sih.
Kayaknya ya warna tomato aja itu.
Iya warnanya sih keren sih warnanya.
Tomato.
Ini ada hubungannya dengan ini ya ex-org tadi ya.
Nah itu tadi.
Oke.
Jadi ternyata warna yang awal yang 16 pertama itu ya dari tang 80-an itu.
Ternyata name color itu section dari ada juga di module CSS module level 4 juga ya berarti speknya ya.
Iya.
CSS WG.
Karena itu kan di render-nya dari CSS kan di define-nya.
Oke.
Ini adalah spesifikasinya ya.
Itu yang color keyway itu Bob 6 coba di sebelah kiri ada Bob 6.
Nah color keyway.
Nah.
Mau ditambahin nama gitu? Oh tetap. Gak berubah kan.
Maksudnya sudah di spek kan.
Sudah di spesifikasikan.
Jadi browser waktu ngeimplementasi udah jelas nih.
Jadi kalau ada yang pakai CSS light green ya udah light green itu ya 9.0.
Ya tinggal masukin itu.
Dan disini udah keliatannya ada.
Lime sama lime green itu warnanya sama ya.
Gak penting banget sih sampai ada dua gitu.
Lime sama lime green.
Beda nih warnanya.
Oh beda ya?
Oh iya dia yang beda.
Maksudnya sih? Beda gimana?
Beda.
Kalau coba pelotorin lihat yang deket keliatan beda.
Tapi kalau sekilas kayaknya sama.
Beda ini ya hexnya beda.
Hexnya aja beda berarti kan logically warnanya beda.
Warnanya beda.
Emang sama?
Mata gue bilang sama.
Oke.
Persepsinya gitu.
Berbeda, tiap orang berbeda.
Persepsi.
Persepsi tiap orang itu berbeda.
Makanya nanti kita harus ngomongin tentang accessibility dengan warna.
Nanti itu.
Kalau di mata saya itu lime green itu lebih gelap daripada lime.
Gue gak bisa bedain.
Ada gray atau gray?
Ini pakai A.
Ini pakai gray.
Light gray dan light gray.
Menarik itu.
Ini sama, ini sama.
Karena hexnya sama.
Satu UK Inggris, satu US Inggris.
Dulu juga sempet apa?
Si Tailwind kalau gak salah versi-versi sebelumnya.
Itu sempet ada gray pakai A.
Pakai A ya gray.
Terus kemudian diganti jadi pakai A sekarang.
Atau kebalikannya saya lupa.
Kita gantung bahasa Inggrisnya yang mana.
Gantung UK atau USA.
Test, test.
Nah di spesifikasi ini juga kita bisa lihat nih.
Ada format warna HSL.
Ada HAWB.
HAWB itu apa?
Hue.
Hue, whiteness sama blackness.
Blackness.
B nya apa tuh?
Ada, B nya blackness.
Ada Cie.
Cie.
Cie.
Cie orang.
Itu itu lab.
Lab LAB kan.
LAB sama LCH.
LAB sama LCH.
Nah buat temen-temen yang bingung seperti apa.
Gimana sih maksudnya.
Kalau RGB itu red, green, blue.
Kita bisa langsung pakai.
Di CSS nya tuh fungsinya nanti.
Langsung pakai RGB.
Itu ya di CSS.
Sorry di property color.
Kita pakai RGB.
0, 255, 0.
Seperti itu contohnya.
Kalau HSL sama.
Bisa pakai HSL.
Gue gak tau formatnya karena jarang pakai.
Tapi ya itu.
HSL 120 degree, 100% 50%.
Kemudian HWB juga hue.
Wideness dan blackness.
Caranya juga sama.
HSL.
Di bawah kayaknya.
Di bawah.
Example of HWB color.
Itu doang tuh.
Jadi.
Ya pakai berapa persen.
Terus berapa white nya berapa black nya.
Itu kayaknya memudahkan kita.
Dari perspektif apa.
Human kali ya.
Kalau misalnya kita pakai RGB.
Atau hex.
Misalnya kita pengen pakai warna ini.
Shade warna biru yang ini.
Tapi terangin sedikit.
Terangin sedikit itu kan.
Ya kita harus pakai color picker ya.
Nah kalau ini kan secara logis.
Berarti tambahin white nya.
Kalau dua pin sedikit.
Berarti tambahin kadar black nya.
Perspektif human language kayaknya.
Makanya ada helper dari CSS kan.
Yang ada lighter ya.
Darker.
Ada lighter dan darker.
Ada kayaknya ya.
Itu SESS apa CSS?
Kayaknya dulu SESS.
Yang udah jadi SESS itu.
Color mix sama color contrast.
Berarti itu masih SAS ya.
Lighten sama darken.
Ya darken.
Ya lighten sama darken itu.
Sekarang kita gak perlu.
Pakai SAS atau SESS.
Atau CSS in JS lagi.
Yaitu kita pakai HWB aja.
Pakai apa.
Pakai CSS variable, CSS property.
Masukin aja value nya.
Di tambahin kadar white nya atau black nya.
Variable nya kita sudah ada warnanya.
Mungkin RGB.
Terus kita pasangin pakai HWB.
Kita mau gelapin atau terangin.
Tinggal kita atur gitu saja ya.
Jadinya lebih mudah.
Nah ini nih ada contohnya.
Ini kayaknya di linknya Ivan juga deh.
Cuma karena nyambung ada demo nya.
Yang HWB penggunaannya.
Jadi udah gak usah pakai SAS lagi.
SAS, SESS, atau library CSS in JS.
Jadinya itu di atas itu tinggal define aja.
Kita kasih argumen value berapa persen.
Sesuai kebutuhan.
200 itu berarti degree nya ya.
Tinggal whiteness sama blackness nya ditambah.
Itu dikurangi.
Menarik.
Gila, CSS ini luar biasa.
Kayak bertahun-tahun gak ngapa-ngapain.
Tiba-tiba dua tahun terakhir.
Langsung cuma pikir lagi banyak banget.
Gak, hatam-hatam sih.
Kalau CSS ada terus.
Ini kan bagus juga buat performance nya.
Ada pertanyaan dari Tom.
Kalau ANSI color code gimana?
Apa itu ANSI color code?
ANSI?
ANSI itu apa sih?
ANSI itu kan karakter ANSI.
Oh itu yang di terminal.
Yang di terminal.
Bener gak maksudnya itu?
Atau jangan-jangan yang lain?
Ini ya.
Itu 31 program color code.
Kalau background nya 41 gitu ya maksudnya.
Ini beda lagi ya betul ya?
Bukan web ya?
Bukan web ya.
Ini buat CLA ya berarti?
Buat CLA betul.
Beda apa namanya?
Beda media?
Beda standard juga.
Tapi RGB nya kan
Prinsipnya berdasarkan algoritmanya.
RGB tetep ya?
Iya.
Kayaknya masih ada hubungan sih.
Yang export tadi kayaknya
ada hubungan sama ini kayaknya ya.
Gak tau juga.
Aku tidak bisa menemukan
hubungannya dimana.
Antara ANSI
color code ini.
Mungkin bisa dielaborasi
lebih lanjut.
Apa?
Kira-kira
ada hubungannya sama
CSS color apa?
Oke.
Oh
kalau tellur ini udah ada ini ya?
Ada brightness
baru tau.
Cuma dia pakai property
filter.
Filter brightness.
Oh.
Itu fitur barunya CSS juga ya?
Filter mah
dari dulu ada.
Cuma ini kan
cocoknya buat
image sih.
Kalau buat warna ya.
Kurang cocok aja.
Nah kalau CMYK
terkenal dimana ya?
Printing.
Printing.
Bisa gak di web?
Range nya juga gak sebanyak RGB
kalau gak salah deh CMYK.
Brightness kayak apa?
warna ngejrengnya.
Itu lebih kuat RGB.
Oh.
Dulu kayaknya kalau misalnya Photoshop nih
pakai Adobe Photoshop dalam kurung bajakan.
Itu kan apa?
Pas kita lagi edit bisa switch mode.
Kayak ada shortcutnya malah.
Switch mode antara RGB dan CMYK.
Oh.
Loh.
Ika hilang.
Kita dihubung dulu.
Iya.
Gantung.
Iya.
Namun setau gue CMYK itu gak bisa
ada alpha mode
branding gitu ya.
Oh iya benar.
Kalau di webcam
bisa transparansi bisa diatur.
Iya.
Itu lebih
sering dipakainya di
apa namanya?
Media.
Iya media print ya.
Karena tinta itu
tinta printing
gue gak tau kenapa standardnya
bukan RGB.
Itu CMYK.
Tapi
kalau media digital
kayak pixel
monitor itu RGB kan.
Masih sampai sekarang masih RGB.
Masih.
Oke.
Nah kalau sRGB.
Kenapa ya?
Pertanyaan dari Jason.
S-RGB.
Gue sering dengar
standard RGB.
Standard RGB.
Menarik.
Yang kita ngomongin tadi gak standard ya?
Gak standard. Atau kenapa sih sebetulnya?
S-RGB.
Jangan-jangan ini ada
perkembangan.
Itu bagian dari color space yang baru.
Color level yang baru.
Kalau disini
sekilas dia menyebutkan bahwa
S-RGB ini standard.
Sedangkan RGB yang biasa itu
punya yang Adobe.
Katanya.
Ada-ada aja.
Iya.
The range of S-RGB
lebih narrow.
Ternyata ada
politik warna ya.
Politik korporat. Warna aja dipatenin.
Iya. Karena kan
si Adobe ini kan punya banyak
produk yang berhubungan dengan
warna kan.
Jadi mungkin dia punya standard sendiri.
Samalah kayak perang
media. Perang bukan
perang media. Perang
dulu DVD.
Format DVD ada apa gitu kan.
Beda-beda kan. Kayak Kodek pun
perang kan sebenernya kan. Dalam tanda kutip kan.
Google dengan
AV1-nya
terus ada
MP4 apa
MPEG. Ada macem-macem gitu kan.
Ada 3GP.
Sekarang udah gak ada ya. Sony ya
3GP.
Nokia kan.
Gue gak tau deh jaman siapa.
Jadi semakin kesini ya semakin
ada pemenangnya
jadi monopoli dan jadi standard akhirnya.
Biasanya kan gitu kan.
Jadi masing-masing awalnya bikin sendiri semua.
Terus ada yang
merging. Oh ini kayaknya kita masih
sejalan nih. Masih satu PC.
Bergabung, bergabung, bergabung.
Kayak koalisi gitu kan lama-lama.
Jadi yang ininya cuma
dua pilihannya. Misalkan ya tadi
sRGB sama sRGB si Adobe.
Atau misalkan format
image juga sama kan. Image juga sama.
Ada JPEG, ada
PNG, ada
WP. Sekarang ada baru WP.
Afif ya Afif. Ya ada Afif.
Ada banyak kan. Dan itu juga
masing-masing. Perusahaan pegang
peranan masing-masing kan. Kalo kayak misalkan
Adobe mungkin dia lebih prefer ke
JPEG, JPEG 2000. Sedangkan
di Chrome malah JPEG 2000nya
dihilangkan ininya, supportnya.
Gitu-gitulah.
Politik semua jadinya.
Tapi ada
biasanya ada alasan
tertentu kan. Mungkin gak
kompresinya kurang bagus
atau color
correction atau gimana lah.
Terlalu dalam.
Atau feature yang pengen dia
bikin. Yang menukun
feature yang dibikin oleh
pengusahaan itu.
Itu ada artikel
untuk sekilas ngebandingin
macem-macem CSS
color space. Coba deh bukain
Lambda Test.
Ini RGB.
Kemudian ke
mana nih? Nah itu ada RGB.
Nah liat daftar isinya aja.
Ada RGB, Hex,
sRGB, DisplayP3,
HSL,
HSL,
dan seterusnya.
Jadi kalo
RGB ini 3
parameter.
Kalo RGBA tentu ditambahin
1 ya.
Ada alphanya.
0 sampai 1.
0,1, 0,2 sampai
1.0.
Nah ini yang paling aman ya
browser supportnya. Semua dijemput
support.
Semua hudai hijau, kemudian ada
hexadecimal. Itu
ada 6
karakter ya. Ditambah pager.
Terus ada 2 karakter.
A, B, C, D, E, F.
Jadi ini red-red,
green-green, blue-blue.
Untuk campuran
warnanya.
Kok IE gak bisa sih?
IE gak bisa. RGBA.
Oh iya.
Udah bukan jamannya. Untung
udah minggal.
Garip.
Ini masih ada merah-merah, tapi
untuk latest kayaknya udah aman ya.
Ya.
sRGB. Oh sRGB
juga ada ya. Ini tadi ada
penyelesaian. Yang tadi itu
you might hear the term sRGB
standard RGB.
Oh.
Photoshop
pakai Adobe RGB
sedangkan sRGB
berbeda gitu ya. Oh pantesan.
Kadang-kadang bisa berbeda ini ya.
Berbeda warna. Kalo buat designer
yang bisa membedakan
warna antara. Gak kayak kita.
Tadi lang sama lime green.
Terima jadi.
Terus tiba-tiba begitu web
yang muncul. Warnanya beda ya?
Warnanya salah.
Ya gak tau. Nah itu pentingnya
komunikasi dengan UI designer
kita. Apa handovernya
pakai apa? RGB atau sRGB?
Detail banget.
Itu pentingnya
design system. Harus disepakatin.
Nah ini nih display P3 yang seru.
Ini masuk di spesifikasi
CSS color
baru ya. Yang CSS4
ya tadi.
Nah display P3 ini
konon bisa mengakses
warna yang paling besar itu yang paling luas.
Banyak lagi warnanya.
Jadi konon bisa mengakses
warna yang sebelumnya
gak bisa diakses.
Exactly. Maksudnya
in reality penerapannya
kayak gimana gak kebayang sih. Cuma
yang jelas bisa mengakses
spektrum warna yang lebih
large dan lebih luas.
Oke.
Tetep belum kebayang
penerapannya kayak gimana.
Tapi mungkin ngaruh banget ke
reach application kali ya.
Kalo misalnya game atau apa lah
factor gitu
itu bakal ngaruh banget.
Tapi kalo buat dokumen, text gitu
sebenernya pengaruh ya.
Rasanya tidak terlalu berpengaruh ya.
Tapi kan ya web kan
sekarang juga udah dipake buat
media yang macam-macam lah.
Bisa convert ke
DisplayP3? Iya ini.
Pakai apa nih?
Kayaknya Chrome.
Belum pernah coba.
Mari kita coba.
Inspect.
Ada gak warna disini?
Enggak, itu pakai parkisi Lambda
test itu dia jualan produk.
Ininya dia extension deh.
Convert to
oh iya bener.
Gak ada.
Jadi ya itu semacam
extensionnya dia.
Tapi ini bentuknya mirip banget
sama ini ya.
Inspect elementnya Chrome ya.
Kan ada
extension yang
integrate sama DevTools kayak buat
itu loh. Yang buat
ngecek accessibility kan.
Itu kan juga integrate sama
Chrome DevTools.
Oke lanjut.
HSL.
Iya ini menggunakan degree ya.
Menggunakan sudut.
Sudutnya seperti ini
jadi bisa diputuskan.
Dari 0 itu dari mana?
Oh 0 itu merah.
Iya itu yang merah di kanan.
Jadi cara bacanya
gimana sih?
Dari 0?
Ini berarti counter clockwise ya?
Counter clockwise, jadi
kalau 30 itu mungkin agak orange.
Kalau 60, kuning.
Yellow.
Oh gitu. Oh iya.
Berarti dari sini.
360, balik lagi merah ya.
Kalau 90, 90.
Ya itu sebelum
120 lah. Antara kuning
ke hijau-hijau. Lime, lime.
Oh berarti dari kayak gini ya?
Isang belum matang.
Isang belum matang.
Kalau warna apa?
Biru telur asin.
Emang ada.
Oh iya ada ya.
Itu 180
kurang. Kurang
dikit gitu.
Itu kalau orang Indonesia yang namain
CSXN itu jadi apa itu?
Telur asin nggak ada di sana.
Kuning durian gitu.
Durian kuning nggak sih?
Buahnya, dua
dalamnya.
Kuning beige.
Beige.
Ini sintaksnya.
ASL,
kemudian persen-persen ya.
Saturation sama lightness ya.
Saturation.
Saturation itu apa sih?
Saturation itu kadar
warnanya. Jadi kalau saturationnya
0 itu greyscale.
Terus kejreng.
Kayak alpha juga ya.
Ada sedikit kemiripan dengan
alpha ya. Beda. Kalau alpha itu
transparansi. Oh ini putih ya
dari putih atau dari gelap ya.
Greyscale ke
warna.
Lightness baru ke putih kan?
Dulu kan sempat tuh web itu atau
desain-desain tuh warnanya sempat
ngetrend itu warna-warna yang pastel.
Ingat nggak sih? Pastel itu
kan tengah-tengah saturation itu di tengah-tengah.
Jadi kayak dia kuning
tapi soft. Kuningnya soft itu.
Terus semua textnya nggak kebaca.
Oh, saturation berarti mainnya ya.
Oke.
Punya saturation 100 persen tuh ngejreng
kayak apa? Kartun Asturo itu.
Kayak Stabilo, kayak Stabilo.
Kalau saturation itu
greyscale.
Oh, oke.
Kalau gelap terang
berarti lightnessnya berarti makin
kebawah. Dari hitam kan?
Enggak ya dari gelap.
Dari gelap.
Lanjut. Browser support aman?
Aman.
HSL. HSV
atau HSB?
Apaan lagi ini?
Nanti coba tanya
audience.
Kalau sudah belajar ini, sukanya yang mana sih?
Selain RGB.
Ya, karena RGB terlalu umum sudah.
Dan RGB dan selain Halloween.
Coba, sukanya apa?
Kalau mau belajar selanjutnya, apa?
Oke. Ini HSB.
Ini apa sih?
Belum pernah pakai aslinya.
Saturation.
Tapi ini.
Mirip ya sama lightness.
Lightness, brightness
bedanya apa?
Gak tau ini
sengaja kali.
HSV.
Oke, kita lanjut.
HWB.
Nah, ini kan yang tadi.
Yang tadi kita coba.
Ya, ya, ya.
HWB.
Ini lumayan lah ya.
Tapi belum bisa.
Opera gak bisa. Oh, no.
Langsung gak bisa.
Kok opera gak bisa sih?
Gak tau.
Opera mobile.
Engga, itu opera biasa.
Gak bisa semua.
Opera ini gak bisa, opera mobile juga gak bisa.
Oh iya.
Padahal dia Chromium based kan?
Iya.
Nah, mungkin dia gak nge-update versi Chromium nya?
Belum, belum?
Ada sih, kalau opera itu kan biasa ngasih tau.
Dia versi
berapa.
Dan Chromium versi nya
versi berapa.
Ini relatif baru sih.
Soalnya HWB, jadi ya
masih eksperimental
anggap aja.
Tapi ini udah lama sih.
Ini udah lama. Karena ini 87.
Sekarang aja opera udah 97.
Dan base-nya
aja dia sudah Chrom 111.
Berarti sudah dapat.
Nah coba cek aja tuh source.
2022.
Tahun lalu sih.
Belum lama-lama amat juga.
Cuma ya itu CSS cepet banget ya.
Iya.
Nah itu kan bawah ada link nya tuh source.
Coba klik open in new tab.
Sekarang ya? Sekarang status nya gimana?
Gak terima, gue opera gak bisa lho.
Oh kasihan.
Tuh udah bisa.
Eh udah bisa, sudah 5.
Tuh bener kan?
Opera fanboy ya.
Iya.
Ini browser yang aneh-aneh.
Yang di kanan tuh pada gak support sih.
Ya udah.
Kayak Baidu, UC, Kai.
Itu yang kemarin browser apa
yang baru itu jenis yang baru?
Yang baru banget?
Arc.
Oh gak masalah.
Kalau podipain Arc itu aman sih.
Karena itu kan buat developer sama designer ya.
Sama 4K nya Chromium.
Udah pasti dia region update kok.
Chromium pasti aman.
Karena semua yang Chromium aman sih.
Belum ada yang bikin browser engine
baru ya?
Sebetulnya kalian dari segi inovasi
bagus. Cuma kalau dari perspektif
sebagai developer jangan ya tolong.
Jangan bikin ya.
Tolong jangan iseng bikin browser engine.
Kan mau ubah status ko.
Gak cuma 3.
Nanti aja deh
kalau gue udah jadi apa ya?
Udah jadi founder, udah gak jadi developer.
Udah sana pada bikin browser engine baru
yang banyak tuh gue.
Lab, nah ini yang mau dapet.
Lab, break nya Lab.
L.A.B.
Apa ini?
Cylindrical.
Susah amat.
Lab, you must be lightness system.
Oke. Nah yang di tengah itu
tues nya lightness.
L nya lightness.
L ngerti lightness, gelap, keterang.
Green
to red, yellow to blue gitu.
Gimana sih?
Jadi kalau tadi buatan
ini jadi kayak setir
hue nya, gantinya hue ya sih.
Lab, lightness.
A nya kalau makin
makin minus
makin ke arah green.
Oh.
Gitu berarti ya.
Untungannya apa sih?
Untungannya, benefit nya apa?
Gak tau.
Mungkin lebih
intuitive pun
gak ya. Kayaknya tetep lebih intuitive.
Yang apa?
Circle, yang lingkaran kayak tadi.
Karena degree kan, lebih gampang
ingetnya.
Ngebayangnya lebih gampang. Kayak tadi kita bisa
nyari warna pisang belum mateng,
warna tur asin, tinggal liat
lingkarannya.
Karena belum familiar aja mungkin.
Nanti kita liat lagi. Siapa tau besok-besok
ketemu lagi.
Berusurnya belum ada yang support kok.
40% 100-100. Berarti ini
makin ke arah bawang.
Lightness ya? Lightness.
A itu apa?
Green, kalau
100 berarti ke arah green.
Ke arah green, ke arah red
berarti ya. Terus ke arah
blue-yellow.
Ok, browser support.
Ternyata ini
ternyata tidak hanya Apple doang.
Budo amat.
Budo amat.
Safari duluan, jangan-jangan ini
produknya Apple. Emang ini punya nya
kayaknya.
Pantes.
Ini bawa nya Apple.
Lucu gak sih kalau misalnya
yang propose safari
tim, tapi mereka
belum support, bisa
Firefox duluan.
Ada gak sih?
Gak ada. Gak ada ya.
Jadi buatnya sendiri sih
kayaknya internal.
Tapi jangan salah. Interop
yang baru, si apa?
Kemarin kan safari baru
rilis yang versi barunya.
Itu interop nya udah menang. Nomor satu dia sekarang.
Iya buat feature yang bersama. Cuma kalau yang
tadi yang setir aneh itu
kayaknya dia cuma buat apa ya
mungkin dia punya graphic processor
atau apalah, nyambung sama hardwarenya dia yang
paling optimal. Lebih optimize mungkin ya.
Ya udah suka-suka dia aja.
Suka-suka dia.
LHC.
LCH.
Lightness, Chroma, and Hue.
Chroma.
Chroma ini LCH.
Chroma ini konsep baru.
Konsep baru cuma gak tau apa nih.
Udah baca berapa kali tetap
gak ngerti sih.
LCH uses Chroma instead
of lightness defined
as the amount of color used in the
final render. It's give a uniform
color even though you use
lightness with varying
values in various scenario.
Nggak ngerti.
Nggak ngerti kan?
Nah kalau temen-temen ngerti
tolong dijelasin di cep
pakai bahasa yang kita ngerti.
Tapi intinya ini bagian dari
color space CSS yang baru juga
dan katanya sih itu yang
paling, itu tuh tadi tuh, closest
to the human vision.
Perspektif warna yang
paling dekat dengan perspektif manusia.
Jadi kayak lebih user-friendly lah
gitu intinya.
Ceritanya.
Ceritanya.
Oke. Ada lagi?
Abis lab?
Browser support, safari lagi.
Kayaknya
satu ini tuh 11-12.
Iya kayaknya.
Cuma kalau LCH ini
masa depannya cerah sih.
Karena banyak
pihak yang diluar.
Apple juga banyak yang
pakai dan
bikin artikel
tentang itu. Yang propose juga
Mbak, siapa itu? Lea Vero
yang aktif
di algoritma
warna dan CSS sebelumnya.
Jadi ya ini masa depannya
lumayan cerah lah.
Coba balik ke
itu CSS API?
CSS API?
Apa yang
belum kita bahas?
Oke Lab, Oke LCH?
Kita udah bahas
Lab sama LCH tadi tuh.
Oke LCH apa lagi?
Oke Lab.
Oke Lab.
Sama kita
lebih oke.
Ini gak ada keterangannya gitu
Oke Lab apa?
Gak tahu.
Oke lah.
Oke lah.
Oke lah.
Oke lah.
Kalo masalah ada
ide nya kemaren
tuh gue dapet situsnya yang oke
LCH itu apa sih gitu
gue pernah
Oh ada di artikel state of CSS
nih. Mana nih? Bentar.
Oh CSS ini.
Oh bukan.
Ini bukan. State of CSS
ini.
Nah itu di search aja
Comment F
Oke LCH ada tuh.
Oke.
Somewhere disana.
Oke LCH. Ini dia?
Ini?
Nah iya diklik.
Nah tuh tuh tuh tuh.
Apa tadi apa tadi?
Oke. Ini.
Nah
are specialized color spaces
that account for various
drift.
Like this one into purple
making them especially
Oh behavior gradient nya
beda. Itu ada
lingkukasih kenapa dia
jelasin oke LCH
keren. Kenapa? Maksudnya
alasannya. Oh iya alasannya ya.
Nah ini penting ya.
Kita baca sama-sama
why I quit RGB
and HSL.
En banget ini animasinya.
Cuma animasinya
aja sih. Cuma kalau pakai
oke LCH masih gak minat.
Tuh. The CSS
encoded color lgb oke.
Extremely short version. Ini jelasannya.
Iya lch. Ini fitnya.
New way to define
CSS color.
Oke LCH is human
readable.
Oke. And easily
understand what color
what color on oke LCH.
Jadi katanya kalau kita
definisikan seperti ini kita bisa
membaca bahwa ini blue.
Saya gak bisa.
Tapi.
Yang white itu
yang white itu bisa tuh.
Kan 100% 0-0 tuh.
Iya. Iya.
Color space yang lain
kita bisa ngerti.
Tunggu kalau misalnya
LCH itu kan L yang depannya
itu L. Berarti terang gelap.
Persif color nya. Persif lightness nya.
C is chroma.
H is hue angle.
Berarti sama yang kayak tadi
hue nya itu. Oh hue sama kayak tadi.
Terus terakhirnya
kalau ada
itu bisa opacity.
Oke.
Tapi masih gak ngerti gue tetep.
Mungkin ini karena
masih baru kan kita gak.
Oke tetep ada chroma nya.
LCH.
Lightness, Chroma, Hue.
Kita udah bahas kan Darken kan.
Ternyata katanya
OK LCH ini lebih mudah untuk dimodifikasi.
Untuk menambah lightness
atau mengumurkan lightness.
Jadi gak perlu pake Darken, kita bisa pake OK LCH.
Dari sini nanti bisa diganti
yang darkness nya yang mana nih.
Lightness nya yang mana. Ini ya.
Yang pertama. Yang pertama.
Itu chroma. 40%.
Itu bisa diturunnya atau dinaikin untuk
mencapatkan. Naikin lebih terang, turunin lebih gelap.
Ya lebih terang atau lebih gelap.
C nya itu
Chroma dari
Grey dari Saturated K.
Dari Grey ke
Most Saturated K.
Yang tengah itu untuk ngatur
kekuatan warnanya.
Mirip Saturation ya.
Itu Saturation.
Chroma itu
Saturation.
Kenapa bukan S? Kenapa
C kan pasti ada konsepnya kan?
Coba.
Untuk antar Chroma dengan Saturation.
Walaupun mungkin behavior nya mirip
dari Grey Scale ke
warna yang kuat. Tapi maksud saya kenapa
ada konsep Saturation, kenapa ada
konsep Chroma. Silahkan temen-temen
dicat, kasih jawaban.
Kita mau tinggal iya-iya aja nanti.
Ya.
Disini keunggulan ketiga
itu katanya better
accessibility.
Karena
Oh mudah untuk generate
yang tadi kita bahas itu kayak
kalau tailwind ada rate 100,
rate 200, 300.
Berarti untuk step kayak gitu
friendly ya, user friendly.
Developer friendly deh.
Bisa pake White Jamut Petri Color.
Nah yang empat yang tadi kita bahas itu
Oh dipakai petri ya.
Yang mengakses warna yang sebelumnya
belum bisa dipakai.
Sebelumnya nggak pernah bisa dipakai.
Sekarang jadi bisa.
Oke.
Keberangannya, challenge-nya.
Challenge-nya mana?
Tapi jadinya untuk
untuk ngatur yang untuk
ngasih warnanya itu cuman yang parameter
ketiga doang tuh yang ngasih warnanya.
Jadi dari 70%
itu lightness, 0,1
itu saturation.
Chroma dan hue.
Dan yang 145 itu
ini ya hue-nya.
Chroma dan hue.
Dan yang ngasih warnanya.
Jadi kalau kita udah
pahami yang lingkaran tadi itu
dari 0 itu merah.
Sampai 180 itu
hijau.
Kayaknya.
Iya nggak sih? Atau biru ya?
Ijo-ijo-ijo.
Jadi ujungnya red, green kan?
180 green.
Berarti kalau 145 ya kira-kira
kalau disini sih
ijo pastel. Menurut gue line.
Itu betul.
Betul.
Nah ini tuh sebenernya kayak HSL dibalik
nggak sih? Iya bener.
HSL tapi versi
fancy.
Jadi ibaratnya nih kalau kita makan di Warung
lor chiplok
itu harganya 4000 atau 3000
dan nggak menarik lah nggak ada yang pengen liat.
Tapi giliran kita masuk cafe yang keren
sunny side up.
Terus ada platingnya dihias.
Instagram mobile.
Harganya 30 ribu.
Tapi sebenernya
resepnya sama aja ya?
Telur sama
garam sama merica.
Ada sentuhan apalah.
Maksudnya ada keunggulannya
apa nggak tahu ini kalau balik ke
color space ini.
Oke.
Nah teman-teman suka yang mana?
Sekarang kita lihat ini ya.
Koment ya.
Em Razak.
Bapak Riza bisa nggak manusia menemukan
warna baru? Bisa aja.
Tadi kan kita menemukan warna baru.
Yang nemu?
Biru telur asin.
Biru telur asin.
Itu kalau ada
warna yang sama juga.
Warna warteg bahari.
Kuning hijau ya.
Kuning hijau bahari.
HSL ini warm versus
cool bukan?
Waduh.
Itu roda warnanya.
Hue, saturation,
lightness kan HSL itu?
Saturation itu gray scale ke
full warna, lightness
terang ke bluap.
Bukan ya kayanya?
Warm itu
apa?
Warung itu lebih banyak merah.
Pader merahnya lebih banyak kalau di RGB.
Kalau cool, kan
sebaliknya ya. B-nya, bluenya lebih banyak.
Kemudian ada
kira ini cuma RGB sama
CMYK, ternyata banyak ya.
Banyak.
CMYK kan untuk
fisik ya, untuk printing.
Ini nggak dipakai ya?
Nggak bisa.
Untuk CSS nggak bisa ya.
Cie Eka bikin
standar baru.
Cie Eka.
Enggak lah, Oke Eka lah.
Oke Eka.
Oke Eka.
Oke Eka.
Ini bener nggak sih?
Yang masih pakai Donate, masih pakai IAEA.
Disini maksudnya yang sebelum
Edge ya.
Rasanya udah nggak.
Udah beralih ke Edge semua kan.
Walaupun di Windows kayaknya masih ada.
Internet Explorer.
Ada.
Ada kan itu nggak bisa
dihilangin, cuma nggak dikasih update baru.
Pasti pakai Visual Studio.
Studio, iya.
Nggak bisa diganti gitu.
Open in Chrome.
Pasti bisa sih.
Gua udah lama banget nggak pakai itu.
Udah versi berapa sekarang?
Udah ada yang open source-nya juga tuh.
Visual Code.
VS Code.
ISP.net-nya.
Bukan Visual Studio-nya.
Maksudnya yang .net-nya.
.net core, sorry. .net core namanya.
Jadi bisa dijalankan di server
Linux juga sekarang.
4 kan.
Terus 4 setengah.
Wah nggak ngikutin.
Udah, next.
Nggak ngikutin.
Banyak sekali.
Ada yang pakai angka,
ada yang pakai persen, ada yang pakai
angkanya desimal.
0,1, 0,2.
Tapi mudah diprediksi daripada Hex-nya.
Keubulan utamanya sih itu ya.
Ya semua, sisanya.
Apapun yang bukan Hex sih.
Relatif, gampang ya.
Tapi sebenarnya kalau pikir-pikirin,
tadi OKLH itu
lebih mudah dibaca daripada
kita kayak 0 sampai 255.
Kayak 255, 255, 255.
Itu susah kan.
Terus Hex juga lebih susah kan.
Paling taunya FF000 ya.
Udah itu pasti red.
Asal bukan Hex ya.
Asal bukan Hex, sisanya aman.
Cuma tergantung kita udah terbiasa.
Yang penting tau lingkaran Hue-nya udah kebayang tuh.
Kira-kira kalau di ujung mana,
di negri mana,
tinggal atur saturation
dan lightness
sama dark-nya.
Lebih menarik sih memang.
Kan setengah 2N7 juga sama DevTools ya.
Walaupun kita sulit ngebayangin,
di DevTools kan semua
sekarang mau pake Chrome,
mau pake Firefox,
kurang-kurang seperti gimana.
Pasti udah ada Windows-nya,
udah ada gambarnya, color picker.
Kita pake VS Code juga
udah ada itu-nya kan,
swatch-nya.
Kalau kita pake Tailwind,
asal pake plugin-nya,
plugin Tailwind itu
juga bg-rate 300
juga udah muncul.
Bahkan kita pake custom, custom dimming
pun bisa muncul.
Kalau mau nge-check rumah,
sudah ada pantonnya.
Iya, pantonnya.
Warna Tailwind.
Ini favoritnya Jason
ternyata HSL sama kayak Damar ya,
berarti ya. Ini juga HSL kan maksudnya ya.
HSL.
Karena mirip pas lagi mirip foto.
Nah, ini menarik.
Apakah
teman-teman melakukan
misalkan pake HSL
sekian-sekian,
kok warnanya kurang oke ya, langsung di-edit,
mungkin di DevTools
atau di Figma,
saya nggak tahu dia pake HSL atau nggak,
kayaknya pake ya, ada ya.
Kalau saya sih nggak,
karena bukan
naturali bukan orang front-end,
jadi biasanya yang saya lakukan adalah
color palette generator,
cari dulu.
Tinggal pake,
tinggal pake,
nggak nyari-nyari, wah ini kurang gelap,
ini kurang terang, nggak.
Generator aja,
kalau saya sih. Itu juga
udah pake color generator,
begitu hasilnya,
kok jelek ya, gitu.
Kadang-kadang nggak sesuai.
Kalau nggak, pemenaranya,
bahkan saya orang front-end,
bukan orang UI,
bukan orang visual,
bukan orang visual design,
apa concern orang front-end,
yang penting kontrasnya bagus,
aksesibilitas bagus, ya udah,
mau warnanya fanas.
Kalau dulu,
saya waktu masih masanya
jadi co-founder,
celek,
saya tinggal panggil,
sini dulu,
desainernya gitu,
"Ayo,
kasih tahu warnanya apa."
Nanti dia pake kutip-kutip pake laptopnya dia,
"Oke, Pak, ini kasih warna ini di sini."
Kata-kata lagi, "Kasi warna ini."
Jadi saya pake DevTool, nganti-ganti warna,
cocok nggak? "Oke, nanti kita atur-atur dikit-dikit sana-sana."
Jadi bagus, ternyata.
Nah, tapi itu pentingnya established kan,
ya itu orang kan lain-lain kan,
si visual designer,
yang pinter
dan sense of aesthetic
yang bagus, dia kan bener-bener tuh bisa coding.
Jadi semua orang kan punya
spesialisasi sendiri-sendiri,
kita harus sepakat kayak format apa
yang paling oke buat
kerja sama, jadi nggak usah,
nggak usah bingung lah. Misalnya,
kalau sekarang lah,
pake storybook kan enak tuh.
Udah ada, klagin, otomatis
ngecek color contrast.
Nah, misalnya kita
sepakat dulu format apa yang mau dipake,
misalnya mungkin desainernya
dari Figma atau dari apapun,
kan bisa copy-paste juga kan,
tuh, copy-paste jadi JSON atau apalah.
Nah, terus kita bikin
apalah kayak buat
view swatch-nya, termasuk kalau ada
palette yang generate palette
custom misalnya dari shade 100,
200, 300. Yaudah, tinggal
masukin semua kan, kalau misalnya ada yang
diubah, mau diubah sama desainernya,
tinggal di-copas value-nya,
kita tinggal lihat, pastikan semua
udah contrast-nya oke.
Yaudah, nggak usah mikir-mikir
warnanya halus atau nggak lagi.
Oh, iya, ini juga
jadi pertanyaan ya, kalau
apa, yang tadi ya, di garis bawahnya adalah
format-nya harus
disepakati dulu, apakah
HSL, RGB, atau apapun
gitu ya. Karena
bisa aja kan, kalau kita
yang develop, mungkin
sederhana
dikasih
mock-up, dikasih value kita
masukin. Itu mending
dikasih value, nggak dikasih, jadi kita
pakai color picker itu.
Oh, color picker.
Pakai color picker
di eye dropper.
Iya, eye dropper,
gitu kan,
ada tools-nya kan, bisa aja
kemungkinan itu nggak akurat.
Iya. Jadi
harus disediakan
value-nya, jadi misalkan dari
mana, dikasih value-nya ini
RGB-kah, HSL-kah,
atau apa. Karena kalau misalkan pakai itu, ada
kemungkinan berbeda.
Jadi begitu udah masuk ke web,
design-nya begini,
tapi warnanya kok agak
sedikit
terang atau sedikit gelap, gitu.
Mungkin gara-gara kita pakai color
picker itu, atau ya itu
ya color picker sih. Nah, itu susah nggak
enak sih, itu agak terang, agak gelap,
itu kan hal yang
subjektif dan sulit
di, apa ya, sulit
di-streamline, sulit
di-reproduce, jangan lah.
Iya, desain-nya
desain-nya
dia di retina
display, kan. Sementara kita
develop-nya di handphone.
Nggak ya, jauh banget.
Nah, coba
kalau soal color swatch
sama agak terang, agak gelap itu,
material design 3,
apa, desain
sistem punya-nya Google,
bagus sih, menurut gue itu oke,
enak banget, express
apa, nekspresiin
kombinasi
warna dan
palette-nya, dan mereka juga
ternyata punya library
untuk ke comfort warna.
Jadi kita nggak harus pakai material
desain secara full,
kita bisa pakai
library-nya doang.
Yang color tones.
Coba mana ya?
Nah, itu, scroll ke bawah.
Nah, itu, apa,
udah ada perhitungannya sendiri, yang
accent kayak gimana,
yang natural kayak gimana, primary,
secondary,
terus penggunaannya juga,
contrast-nya juga udah dihitung.
Iya, ini udah terima jadi ya,
sama kayak tadi yang saya
lakukan, kan.
Kita masukin, tapi kita harus masukin, kita
ngedefine primary color-nya,
misalnya, terus di generate sisanya.
Oke. Berarti,
ini juga mirip sama tailwind ya,
tailwind, tapi tailwind udah
terdefinisi ya, kalau ini masih...
Kalau tailwind handpicked dan bawaan
dari sana, kan, tapi kan kita
bakal pengen custom sesuai
brand color kita, nih.
Ini bagus sih, bahkan palette-nya itu,
kayak misalnya kita mau bikin tailwind, tapi
custom ya, customize, itu
udah ada tuh, nanti dikasih
gitu.
Bisa ya.
Oke, kan.
Teman-teman, punya ini nggak sih?
Terus menarik yang kayak gini, nih, buat
misalkan kita bikin app,
tapi kita nggak punya kemampuan untuk
memilih warna atau
tentunya belum punya design system, gitu.
Pakai apa, ya?
Ini salah satunya, ya.
Kalau nggak, biasanya carinya
designnya udah jadi.
Ya, cari design systemnya.
Cari color palette banyak.
Banyak, banyak, banyak.
Cari aja online. Tapi kan, maksudnya
kita harus sesuaiin, kalau kita punya brand
color kan, harus sesuaiin tuh, ya
nama kerjaan lagi.
Tapi sebetulnya, kalau nggak ada
restriction harus brand color tentu, ya
cari color palette yang udah jadi
juga banyak, kok, online.
Ya, color palette yang udah jadi, atau bahkan
design system yang udah jadi juga.
Misalkan, kayak Tailwind tadi kan, itu kan
design system kan. Udah,
aku tip ya, semi lah, semi design system
masih belum jadi full.
Warnanya juga bisa kita pilih lagi, kan.
Terus juga, misalkan kayak Boostrap
atau kayak Bulma, itu kan
warnanya udah spesifik, kan.
Udah, udah apa ya,
udah...
sudah disediain,
sudah disediain, gitu.
Tengah lo tapen aja.
Kalau, apa, yang
terlalu-lalu saya temukan, ya ada nih namanya
Hue, Happy Hues.
Jadi, selain color palette,
dia juga, apa ya,
mencobohkan gunaannya.
Dicontohin.
Biasanya kan, kalau color palette
kan, cuma dikasih warna doang, kan.
Ini cocok banget.
Pake nya yang peks mana,
yang ring mana, yang accent mana.
Kalau ini, tinggal paken.
Nah, ini solusi nih buat
kita.
Happy Hues, boleh.
Sense of estetiknya direbukan,
udah tinggal pake aja, tinggal pilih.
Oh iya,
Tailwind color palette
juga ada, ini apa.
Tailwind palette.
Tinggal, betul.
Tinggal kita mau pilih-pilih kan,
gak harus semuanya, kan.
Gak harus semua warna kita pakai, kan.
Untuk latihan, kalau temen-temen mau latihan CSS,
kita pake CSS, apa,
CSS Zen Garden, gitu.
Zen Garden.
Masih ada.
Kalau mau,
CSS.
Jadi bisa latihan
untuk beneran kayak nge-styling,
biar bagus.
Itu yang lama banget,
sekarang yang versi baru ada versi modernnya
stylestage.dev, buka deh.
Ini inspired by
Zen Garden juga.
Stylestage.dev.
Kalau temen-temen mau latihan
front-end, mau bagus,
mau coba-coba.
Lucu nih.
Itu inspired by CSS Zen Garden,
cuma versi modernnya.
Next time kalau ada yang nanya,
kalau saya mau belajar CSS, atau mau belajar
jadi front-end gimana, kasih aja ini.
Udah, coba
ubah warnanya, gitu.
Ubah estetikanya.
Kalau gue di sini malah nyontek
malah nyontek warnanya sih.
CSS-nya udah bisa milih
warnanya, bukan nulis CSS
buat warna ya, tapi milih warna apa
yang bagus, nggak bisa. Yaudah nyontek dari situ.
Material Design Palette Generator.
Wah, ada juga ya material design-nya.
Design
Palette
Palette Generator.
Wow
anak siapa tuh nangis?
Anak gue, mau tidur
ntar lagi, ntar lagi udah hanyuh.
Oh ini ya, kita bisa
pilih, pilih, pilih, gitu ya.
Oh, ada ini juga.
Keren juga nih. Sambah ini.
Oh nggak. Ini based on material, cuma belum
auto contrast nih, kan
background-nya kuning, text-nya putih.
Wah, surem bos. Surem, surem.
Tapi ya, tapi bagus sih, maksudnya
minimal milih warna yang enak di matalah.
Shade ungunya bagus.
Nah iya.
Contrast kita harus handle sendiri.
Iya.
Oke.
Ada lagi yang mau dibahas?
Udah ya.
Cukup? Cukup.
Cukup.
Warna doang banyak ya?
Tenang, tenang, tenang.
Oke.
Sebelum kita, sambil kita
apa, kalau temen-temen masih ada yang mau
disusukan, silahkan di kolom komentar.
Kalau nggak, bisa bantu kita isi
ini.
bit.ly/
tiga kata ngobrol inward.
Kira-kira apa gitu.
bit.ly
tiga kata ngobrol inward.
Buat feedback buat kita.
Saya kira...
3 kata, mkh, hsl,
rgba.
mkh,
informatif,
tes,
inside pool.
Belum, belum. Mana hasilnya
kelihatan?
Oh iya, belum ada.
Woh.
Loh, mantap.
Kita nggak apa,
nggak ada yang bilang kita ganteng.
Jangan.
Semua disusulnya.
Jangan.
Saya telah join.
Saya telah join.
Bedanya nih sama Ravel.
Nggak pelit ilmu.
Terima kasih. Readable.
Objek-objek.
Ini lupa...
Lupa diparse.
Oh iya, lupa diparse ya.
Stingify ya. Itulah salah satu ini.
Belum distingify.
Belum distingify.
Waduh, seru-seru-seru.
Ini nambah banyak.
3 participants typing.
Oke.
Baiklah. Kalau begitu,
untuk malam ini, terima kasih banyak
semuanya yang sudah menemani
dari jam 9 sampai jam
10 lewat.
Lewat-lewat sedikit.
Minggu depan, Selasa jam 9.
Berhubung Minggu depan kita
akan balik lagi ke
waktu yang normal. Jadi ditunggu
hari Selasa jam 9 malam.
Bukan jam 8, seperti malam ini.
Tadi kemarin salah skejul.
Jadi untuk malam ini, udahan dulu.
Terima kasih banyak buat semuanya.
Kita ketemu lagi Minggu depan.
Minggu depan, hari Selasa.
Bye bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://bit.ly/ngobrolinweb Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
20 Mei 2026
Alat Desain AI
Episode ini menelusuri gelombang alat desain berbasis AI: getdesign.md, Stitch dari Google, Claude Design, Open Design, ...
17 Jun 2026
Tailwind
Episode ini menengok kabar terbaru Tailwind, dimulai dari kisah pahit di baliknya: tim Tailwind sempat harus melepas seb...
22 Agu 2023
Ngobrolin WASM
WebAssembly dibahas dengan mundur dulu ke kata assembly itu sendiri — istilah yang bisa terasa asing bagi siapa pun yang...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .