Hazır bir palet yerine OKLCH ile jeton tasarladım

Hazır bir renk paleti seçmek yerine neden kendi jeton sistemimi kurduğumu anlatayım.

Hex neden yetmiyor

#808080 ile #0080ff sayısal olarak aynı "orta" bölgede dursa da gözde aynı koyulukta görünmüyor. Hex, üç kanalı (kırmızı, yeşil, mavi) birlikte kodladığı için "bu rengi biraz daha açık yap" demek üç sayıyı birlikte tahmin etmek anlamına geliyor.

OKLCH'de birinci bileşen algısal açıklıktır: %48 iki farklı renk tonunda da aynı koyulukta görünür. Bu, koyu tema karşılıklarını tahminle değil hesapla üretmeyi mümkün kılıyor.

Jeton adları rolü anlatır

Jetonlarımı surface, ink, brand gibi işlev adlarıyla adlandırdım — bg-amber gibi görünüş adıyla değil. Gerekçesi basit: marka rengi değiştiğinde bg-amber adının kendisi yalan söylemeye başlar, ama bg-brand her zaman doğru kalır.

--surface: oklch(98.8% 0.006 78);
--ink: oklch(22% 0.014 70);
--brand: oklch(52% 0.15 76);

| Jeton adı | Kullanım alanı | Örnek eşleşme | | ------------- | ------------------------ | --------------------------- | | surface | Sayfa arka planı | Açık temada neredeyse beyaz | | ink | Gövde metni ve başlıklar | Koyu, ılık nötr | | brand | Bağlantı, birincil eylem | Amber/ocher | | line-strong | Etkileşimli öge kenarı | Form alanı çevresi |

Kontrastı elle değil betikle doğruluyorum

Kontrast tablosunu elle yazmadım; bir betik jeton değerlerinden hesaplayıp üretiyor. Elle yazılan bir tablo, jetonlar değiştiği anda sessizce yalan söylemeye başlar — betik bunu imkânsız kılıyor.

Kapanış

Bu disiplin "tutarlılığı garanti ediyor, özgünlüğü garanti etmiyor" — ikisi ayrı işler. Jeton sistemi bana renk değiştiğinde her yerin doğru güncellendiğini garanti ediyor; rengin kendisinin "iyi bir seçim" olup olmadığına dair hiçbir şey söylemiyor. O karar ayrı bir yargı, bu yazının konusu değil.