Türkçe
HEX, RGB, HSL ve OKLCH arasında canlı önizlemeyle dönüştürün.
Son güncelleme
#B18CFFrgb(177, 140, 255)hsl(259, 100%, 77%)oklch(72.2% 0.165 296.9)Renk dönüştürücü, elinizdeki rengi (HEX, RGB, HSL ya da OKLCH) alır ve aynı rengi temsil eden diğer tüm formatları size gösterir. Marka rengini eşlerken, CSS değişkenlerini debug ederken, açık/koyu tema paletlerini karşılaştırırken veya erişilebilirlik için kontrast kontrolü yaparken tasarımcı ve geliştiricilerin günlük aleti budur.
CSS birden fazla renk modelini destekler ve her birinin kendi güçlü tarafı vardır. HEX ve RGB rengi kırmızı, yeşil ve mavi ışık üzerinden tanımlar. HSL daha sezgiseldir (ton, doygunluk, açıklık). OKLCH ise algısal bir modeldir; sayısal olarak eşit değişimler göze de eşit gelir — bu yüzden ton, gölge ve erişilebilir palet üretmek için bilhassa kullanışlıdır.
Erişilebilirlik sadece renkten değil, kontrasttan gelir. WCAG, metin ile arka plan arasındaki kontrast oranını tanımlar — normal gövde metni için en az 4.5:1, büyük başlıklar için 3:1. İyi bir renk aracı bu iki değeri rengin yanında gösterir; böylece kazara erişilemez bir arayüz yayına almazsınız.
#ff8800 ile rgb(255, 136, 0) aynı renktir.L'yi %10 artırmak hangi tonda olursanız olun yaklaşık aynı açıklık değişimi gibi görünür. HSL bu garantiyi vermez.İstediğiniz HEX, RGB, HSL veya OKLCH değerini yapıştırın ya da damlalık / yerleşik renk seçiciyle bir renk seçin.
Dönüştürücü, aynı rengi desteklenen her formatta gösterir. Herhangi bir değere tıklayarak panoya kopyalayabilirsiniz.
Açıklık (lightness) kaydırıcısını sürükleyerek tint (daha açık) ve shade (daha koyu) elde edin. Görsel olarak tutarlı adımlar için OKLCH lightness'ı tercih edin.
Kontrast paneli, beyaz ve siyaha karşı WCAG oranını gösterir. Gövde metni için ≥ 4.5, büyük başlıklar için ≥ 3 hedefleyin.
Kod tabanınıza uyan formatı seçin — tasarım token'ları için HEX, modern paletler için OKLCH, calc() ile oynamak istediğinizde HSL.
Günlük hayatta karşılaşacağınız beş format ve aynı renk için örnekleri. Tam color-syntax referansı için MDN'in <color> sayfası.
| Format | Sözdizimi | Örnek (turuncu) |
|---|---|---|
| HEX | #RRGGBB veya #RGB | #ff8800 |
| Alfa kanallı HEX | #RRGGBBAA | #ff880080 (%50 saydam) |
rgb() | Kırmızı, yeşil, mavi 0–255 | rgb(255 136 0) |
Alfa kanallı rgb() | Modern slash sözdizimi | rgb(255 136 0 / 0.5) |
hsl() | Hue 0–360°, sat %0–100, light %0–100 | hsl(32 100% 50%) |
oklch() | Lightness %0–100, chroma, hue | oklch(74% 0.18 50) |
| İsimli renk | CSS isimli rengi (toplam 147 tane) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);Dört tanımın dördü de tam olarak aynı maviyi üretir. Tasarım token'larınız için hangisini seçeceğiniz, daha çok ileride bu değerleri nasıl ayarlamak istediğinize bağlıdır.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);Hue'yu (268) ve chroma'yı sabit tutup lightness'ı adım adım değiştirmek, her adımın *gözle* aynı fark gibi göründüğü tutarlı bir palet üretir — HSL bunu garanti etmez.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5, CSS'te alfa eklemenin modern yoludur. HEX biçiminde ise sona iki haneli alfa byte'ı eklenir (80 ≈ %50).
hsl(60 100% 50%) (sarı) ile hsl(240 100% 50%) (mavi) aynı L değerine sahiptir ama gözle çok farklı parlaklıkta algılanır — görsel karşılaştırmalar için OKLCH kullanın.#abc) aslında 6 haneli formun (#aabbcc) kısayolu olduğunu unutmak.rgb(... / alpha) yerine rgba(...) kullanmak — ikisi de çalışır ama slash'lı biçim güncel spesifikasyona uygundur ve araçlarda daha okunaklıdır.#RR, GG, BB) ve her ikiliyi onaltılıdan ondalığa çevirin. Veya değeri bir renk dönüştürücüye yapıştırıp RGB karşılığını anında okuyun.L her zaman eşit parlaklıkta görünmez. OKLCH ise algısal olarak tutarlıdır; bu yüzden tutarlı tonlar, gölgeler ve erişilebilir paletler üretmek için daha iyi bir seçimdir.