İçeriğe geç

Renk Dönüştürücü

Yaygın gösterimlerden herhangi birinde bir renk yazın — ya da seçin — ve onu HEX, RGB, HSL, HWB, HSV, CMYK ve OKLCH olarak görün; en yakın CSS renk adı ve kopyalanacak CSS özel özellikleri bloğu ile birlikte. Dönüşümler CSS Color Module Level 4 formüllerini izler ve tamamen tarayıcınızda çalışır. Ücretsiz, üyelik gerekmez.

Örnekler: #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%), rebeccapurple. Saydamlık eklemek için #rrggbbaa ya da “/ 50%” kullanın.

Dönüştürülmüş değerler

  • HEX

    #336699

  • RGB

    rgb(51 102 153)

  • HSL

    hsl(210 50% 40%)

  • HWB

    hwb(210 20% 40%)

  • HSV

    hsv(210, 66.7%, 60%)

  • CMYK (basit)

    cmyk(66.7%, 33.3%, 0%, 40%)

  • OKLCH

    oklch(49.93% 0.0987 250.43)

  • CSS adı

    steelblue (en yakın)

CSS özel özellikleri

:root {
  --color-hex: #336699;
  --color-rgb: rgb(51 102 153);
  --color-hsl: hsl(210 50% 40%);
  --color-oklch: oklch(49.93% 0.0987 250.43);
}

Buradaki CMYK, RGB'den basit bir cihaz dönüşümüdür — mürekkep, kâğıt ya da ICC profili söz konusu değildir — bu yüzden basılı bir renkle eşleşmez. Çalışmanızı göndermeden önce yazıcınızdan profillerini isteyin.

HSV ve CMYK CSS renk fonksiyonları değildir; sayfa bunları tasarım ve baskı araçları için gösterir.

Renk Dönüştürücü Nasıl Kullanılır

  1. 1. Bir renk girin. Kutunun kabul ettiği herhangi bir gösterimde yapıştırın ya da yazın — #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) ya da rebeccapurple gibi bir CSS adı. Çıplak 51 102 153 RGB olarak okunur.
  2. 2. Ya da seçiciyi kullanın. Seçici rengi ayarlar ve daha önce yazdığınız saydamlığı korur.
  3. 3. İhtiyacınız olanı kopyalayın. Her gösterimin kendi kopyalama düğmesi vardır; CSS'yi kopyala ise bir stil sayfası için HEX, RGB, HSL ve OKLCH değerlerini özel özellikler olarak verir.
  4. 4. Adı kontrol edin. Renginiz tam olarak bir CSS anahtar sözcüğüyse araç bunu gösterir (rebeccapurple #663399'dur); değilse en yakın anahtar sözcüğü gösterir.

Dönüşümler Nasıl Çalışır

Her şey sRGB üzerinden dönüştürülür; bu, bir tarayıcının boyadığı renk uzayıdır. Bir HEX kodu yalnızca 16 tabanında RGB'dir: #336699, kırmızı 0x33 = 51, yeşil 0x66 = 102 ve mavi 0x99 = 153'tür. Diğer gösterimler aynı üç sayıyı yeniden düzenler.

  • HSL bir rengi ton (renk çemberinde bir açı, 0–360°), doygunluk ve parlaklık olarak tanımlar. En büyük kanal max, en küçük kanal min olmak üzere (her ikisi de 255'e bölünür), parlaklık (max + min) ÷ 2'dir ve doygunluk (max − min) ÷ (1 − |2L − 1|)'dir. Ton, hangi kanalın en büyük olduğundan gelir.
  • HSV (HSB olarak da anılır) aynı tonu korur, ama değeri max, doygunluğu ise (max − min) ÷ max olarak ölçer. Çoğu renk seçicinin çizdiği modeldir.
  • HWB, saf bir ton üzerindeki beyazlık (min) ve siyahlıktır (1 − max). Bir ton ya da gölge istediğinizde HSL'den daha kolay düşünülür. Beyazlık ile siyahlık toplamı %100'e ulaşırsa sonuç bir gri tondur.
  • CMYK, basit bir cihaz dönüşümü olarak gösterilir: K = 1 − max, sonra C, M ve Y'nin her biri (1 − kanal − K) ÷ (1 − K). Hiçbir mürekkep, kâğıt ya da profil içermez.
  • OKLCH, Björn Ottosson'un OKLab uzayındaki parlaklık, kroma ve tondur; CSS Color 4 bunu oklch() olarak destekler. L değerindeki eşit adımlar, parlaklıkta eşit adımlara RGB ya da HSL'dekinden çok daha yakın görünür.

Tek bir renk, her gösterim

HEX: #336699

RGB: rgb(51 102 153)

HSL: hsl(210 50% 40%)

HWB: hwb(210 20% 40%)

HSV: hsv(210, 66.7%, 60%)

CMYK: cmyk(66.7%, 33.3%, 0%, 40%)

OKLCH: oklch(49.93% 0.0987 250.43)

CMYK Neden Burada Bir Baskı Rengi Değil

Ekranlar kırmızı, yeşil ve mavi ışık ekler; yazıcılar ise kâğıda camgöbeği, macenta, sarı ve siyah mürekkep basar. İki gamut farklıdır ve sayfadaki mürekkep; kâğıda, baskı makinesine ve bunları tanımlayan ICC profiline bağlıdır. Yalnızca RGB'den çalışan bir formül bunların hiçbirini bilemez; bu nedenle yukarıdaki CMYK bir gösterimdir, baskı tahmini değildir: saf ekran mavisi #0000ff, yüzde 100 camgöbeği ve yüzde 100 macenta olur; bu da daha donuk bir mor olarak basılır. Bir poster ya da basılı bir şekil için yazıcınıza görseli RGB olarak verin ve profilini isteyin ya da dönüştürmeyi o profille bir tasarım uygulamasında yapın.

Yuvarlama, Kırpma ve Saydamlık

  • Yuvarlama. HEX ve rgb() 0 ile 255 arasında tam sayılar tutar; bu nedenle hsl(210 50% 41%) olarak yazılan bir renk en yakın 8 bitlik değere yuvarlanır. O değeri geri dönüştürmek biraz farklı bir HSL verir — 8 bitlik ızgara HSL'nin kendisinden daha kabadır.
  • Aralık dışı kanallar. Aralık dışındaki değerler tarayıcıların yaptığı gibi kırpılır: rgb(300 0 0) #ff0000 olur ve negatif bir kanal 0 olur.
  • Ton birimleri. deg, grad, rad ve turn kabul edilir ve ton sarar: −150° ile 210° aynıdır.
  • Alfa. #rrggbbaa, #rgba ve / 50% hepsi çalışır. Alfa, 8 haneli HEX'te 8 bit olarak saklanır; bu nedenle %50 80 olur ve %50,2 olarak geri okunur.

Sık sorulan sorular

HEX'i RGB'ye nasıl dönüştürürüm?
Altı haneyi üç çifte ayırın ve her çifti 16 tabanında bir sayı olarak okuyun: #336699 için 33, 66 ve 99; bunlar 51, 102 ve 153 eder. HEX kodunu kutuya yapıştırın; RGB değeri HSL, HWB, HSV, CMYK ve OKLCH ile birlikte hemen görünür.
HSL ile HSV arasındaki fark nedir?
İkisi de aynı ton açısını kullanır. HSL, doygunluk ne olursa olsun beyazı tam parlaklığa koyar; bu yüzden ortası saf renktir. HSV ise saf rengi tam değer ve doygunlukta, beyazı sıfır doygunlukta koyar. HSL, CSS'in hsl() olarak desteklediği gösterimdir; HSV (ya da HSB) ise çoğu renk seçicinin gösterdiğidir.
CMYK değeri baskı için doğru mu?
Hayır. Mürekkep, kâğıt ya da ICC profili olmadan RGB'den yapılan basit bir dönüşümdür; aynı sayıları farklı biçimde tanımlar, bir baskı makinesinin ne basacağını tahmin etmez. Yazıcının gamutunun dışındaki renkler — parlak ekran mavileri ve yeşiller gibi — daha donuk basılır. Önemli olan her şey için yazıcınızın profilini kullanın.
En yakın CSS adı ne anlama gelir?
CSS 148 renk anahtar sözcüğü tanımlar. Renginiz bunlardan tam olarak biriyse, araç bunu şartsız gösterir. Değilse, OKLab'de en yakın olan anahtar sözcüğü gösterir; bu uzay, mesafenin algılanan farkla eşleşmesi için tasarlanmıştır. Bir rengi bir yorumda adlandırmak için kullanışlıdır, kodun yerini tutmaz.
Bir dönüşümden sonra HSL değerim neden biraz değişiyor?
HEX ve RGB her kanalı 256 değerden birinde saklar ve HSL bu ızgaraya bire bir eşlenmez. HSL'de girilen bir renk en yakın RGB değerine yuvarlanır ve gösterilen HSL, yuvarlanmış değerden hesaplanır. HEX koduyla başlanınca, her dönüşüm gösterilen hassasiyete kadar tam olur.
Renk verilerim bir yere gönderiliyor mu?
Hayır. Dönüşüm tarayıcınızda basit bir aritmetiktir; yazdığınız hiçbir şey yüklenmez ya da saklanmaz.

İlgili araçlar

Veri, işaretleme ve kod kategorisinde daha fazlası