OKLCH tabanlı marka paletleri. Bir taban seçin, tüm klasik harmonileri ve 50–950 tonal ölçeği alın. Kilitleyin, yeniden üretin, CSS / Tailwind v4 / SCSS / JSON olarak dışa aktarın.
OKLCH tabanlı marka paletleri. Bir taban seçin, tüm klasik harmonileri ve 50–950 tonal ölçeği alın. Kilitleyin, yeniden üretin, CSS / Tailwind v4 / SCSS / JSON olarak dışa aktarın.
Color Picker & Converter'ımız tek bir renk içindir — seç / dönüştür / kopyala. Bu araç ise paletler içindir: bir taban renk bırakın, tek seferde markaya hazır bir sistem (harmoniler + tonal ölçek) alın. Tek bir gömlek almakla bir gardırop almanın farkı gibi.
HSL tonları eşit olmayan biçimde dağıtır (60°'deki sarı, aynı parlaklık değerinde 240°'deki maviden çok daha parlak hissedilir). HSL'de triadic bir paletin bir örneği diğerlerinden gözle görülür biçimde daha parlak veya soluktur. OKLCH algısal olarak tekdüzedir — aynı OKLCH parlaklığındaki üç örnek aynı parlaklıkta görünür. Bu nedenle her modern tasarım sistemi (Apple HI, Tailwind v4, IBM Carbon) harmoniler ve ölçekler için OKLCH'ye geçiyor.
Marka renkleriniz cihazınızdan asla ayrılmaz. DevTools → Network'ü açın, herhangi bir işlem sırasında sıfır giden istek göreceksiniz.
İpucu: Kilitli olmayan örnekleri yeniden üretmek için Space tuşuna basın.
OKLCH harmonileri, tonal ölçekler, kilitle-ve-yeniden-üret, design-token dışa aktarımları — ve kullanmayı gerçekten keyifli kılan birkaç küçük dokunuş.
Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — hepsi OKLCH'de hesaplanır, böylece üç doygun parlaktan oluşan triadic bir palet eşit derecede parlak kalır. HSL bulanıklığı yok.
Marka renginizi bırakın, parlaklığı bir OKLCH eğrisi boyunca yürüterek üretilen Tailwind biçimli 50, 100, 200, … 900, 950 tonal ölçeği alın. Chroma uçlarda sıkışır, böylece renkler sRGB gamutunda kalır.
Herhangi bir örneği sabitleyin (kilit simgesi) ve geri kalanını seçilen harmoni içinde değiştirmek için Yeniden üret'e basın (veya sadece Space tuşuna basın). Hızlı yineleyin, sevdiklerinizi koruyun.
CSS custom property'ler (--brand-500), Tailwind v4 @theme bloğu, SCSS map ve Style Dictionary / Figma Tokens için hazır JSON design token'lar. Ayrıca 1200×200 PNG renk şeridi.
Her örnek, siyah veya beyazdan iyisine karşı WCAG kontrast oranını AA / AAA / fail rozetiyle gösterir. Erişilebilirlik sorunlarını yayına çıkmadan önce yakalayın.
Her byte cihazınızda kalır. OKLCH matematiği, harmoni üretimi, ölçek türetme, PNG dışa aktarımı — hepsi yerel olarak JavaScript'te çalışır. DevTools → Network'ü açın ve sıfır giden istek olduğunu doğrulayın.
Tek bir taban renkten design-token'a hazır eksiksiz bir palete dört adım.
Renk kutusuna tıklayın, bir HEX yapıştırın veya ilham için Rastgele taban'a basın. Araç tüm paleti bu rengin etrafına yerleştirir — hem harmoni örnekleri hem de 11 adımlı tonal ölçek.
Varsayılan Analogous'tur — taban etrafında 30° içinde üç renk, sakin marka paletleri için mükemmel. Kontrast vurguları için Complementary. Editöryel / eğlenceli markalar için Triadic / Tetradic. Tek tonlu sistemler için Monochromatic. Hepsi OKLCH'de hesaplanır, böylece eşit derecede parlak kalırlar.
Korumak istediğiniz herhangi bir örneğin kilit simgesine tıklayın, ardından Space'e (veya Yeniden üret'e) basarak geri kalanı harmoni içinde değiştirin. Hızlı yineleyin. Tam değer belirlemek istiyorsanız HEX alanına tıklayarak herhangi bir örneği doğrudan düzenleyin.
CSS çıktısını (custom property'ler), Tailwind v4'ü (@theme bloğu), SCSS map'i veya JSON design token'ları kopyalayın. Ya da bir tasarım brief'ine bırakmaya hazır 1200×200 renk şeridi için PNG indir'e basın.
Gizlilik öncelikli bir OKLCH palet aracının Figma'da hex kodlarını elle ayarlamayı yendiği dört yaygın senaryo.
Bir marka renginiz var, etrafında bir sistem oluşturmanız gerekiyor. HEX'i bırakın, Analogous'ı seçin, iki destekleyici renk uyum sağlayana kadar yeniden üretin, üçünü de kilitleyin. Tonal Scale görünümüne geçin, Tailwind @theme bloğunu kopyalayın, yeni projenin app.css'ine yapıştırın. Toplam süre: 5 dakika.
Varsayılan Tailwind indigo'su sizin markanız değil. Markanız #5B3FCD. Bırakın, Tailwind'in aralığını mükemmel biçimde yansıtan 11 adımlı bir tonal ölçek alın. @theme bloğunu kopyalayın — her bg-brand-500 / text-brand-700 sorunsuz çalışır.
Her örnek, WCAG kontrast oranını + AA/AAA rozetini gösterir. brand-500'ün beyaza karşı AA'ya ulaştığını ve brand-100'ün brand-900 metniyle arka plan tonu olarak okunaklı kaldığını noktasal olarak doğrulayın. Sorunlu örnekleri tek tek yeniden üreterek düzeltin.
Ajanslar / çok markalı şirketler, aynı yapıya ancak farklı marka tonuna sahip N paralel tasarım sistemi yürütür. Her marka için aynı harmoni + tonal ölçek akışını kullanın, her birini JSON token olarak dışa aktarın, Style Dictionary'ye bırakın. Tutarlı yapı, ayrı kimlik.
Marka renkleriniz cihazınızdan asla ayrılmaz. DevTools → Network'ü açın, herhangi bir işlem sırasında sıfır giden istek göreceksiniz.
canvas kullanır; renk görseli tamamen tarayıcı belleğinde üretilir ve bir Blob olarak indirilir — hiçbir şey ağdan geçmez.
OKLCH paletleri, marka renk sistemleri ve design token'lar üzerine seçilmiş okumalar.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Color Picker & Converter'ımız tek bir renk içindir — seç / dönüştür / kopyala. Bu araç ise paletler içindir: bir taban renk bırakın, tek seferde markaya hazır bir sistem (harmoniler + tonal ölçek) alın. Tek bir gömlek almakla bir gardırop almanın farkı gibi.
HSL tonları eşit olmayan biçimde dağıtır (60°'deki sarı, aynı parlaklık değerinde 240°'deki maviden çok daha parlak hissedilir). HSL'de triadic bir paletin bir örneği diğerlerinden gözle görülür biçimde daha parlak veya soluktur. OKLCH algısal olarak tekdüzedir — aynı OKLCH parlaklığındaki üç örnek aynı parlaklıkta görünür. Bu nedenle her modern tasarım sistemi (Apple HI, Tailwind v4, IBM Carbon) harmoniler ve ölçekler için OKLCH'ye geçiyor.
Tailwind tarzı marka rengi ölçeğidir: indigo-50 (en açık), indigo-100, indigo-200, … indigo-900, indigo-950 (en koyu). Marka renginizi bırakın, araç OKLCH parlaklığını sabit bir eğri boyunca yürüterek 11 adımın hepsini otomatik olarak üretir. Sonuç, kendi marka tonunuzda herhangi bir Tailwind palet token'ı için doğrudan yerine geçen bir paletidir.
Herhangi bir örneğin sol üstündeki kilit simgesine tıklayın — yerinde kalır. Sonra Yeniden üret'e basın veya Space tuşuna basarak kilitli olmayan tüm örnekleri seçilen harmoni içinde değiştirin. Harika bir paleti böyle bulursunuz: zaten karar verdiğiniz marka rengini sabitleyin, etrafındaki varyasyonları keşfedin.
Hayır. OKLCH matematiği, harmoni üretimi, tonal ölçek türetme, kontrast oranı hesaplama, PNG dışa aktarımı, her panoya kopyalama — hepsi cihazınızda JavaScript'te çalışır. DevTools → Network'ü açın, sıfır giden istek göreceksiniz. Marka renklerinizi, dahili design token'larınızı, NDA ile korunan paletlerinizi yapıştırın — hiçbir şey dizüstünüzden ayrılmaz.