Tüm bu renk biçimleri ne anlama geliyor?

Ekrandaki bir renk, kırmızı, yeşil ve mavi ışığın karışımıdır ve her biçim bu karışımı kendine özgü şekilde ifade eder. CSS ve tasarım araçları HEX kodlarını ve RGB değerlerini kullanır. HSL, HSV ve HWB; bir rengi renk çemberindeki açı olan tonu ve rengin ne kadar canlı ve açık olduğunu belirterek tanımlar. Bu özellikleri elle ayarlamak daha kolaydır. CMYK, baskıda kullanılan camgöbeği, macenta, sarı ve siyah mürekkep miktarlarını belirtir. LAB, LCH, OKLab ve OKLCH, sayılarındaki eşit adımların göz tarafından yaklaşık olarak eşit algılanması için tasarlanmıştır. Bu özellikleri paletler ve degradeler oluştururken kullanışlı kılarlar ve modern CSS bu dört biçimi de destekler. Terminaller ANSI renk kodlarını kullanır; CSS'te ayrıca tomato gibi adlandırılmış renkler de bulunur.

Aşağıda aynı turuncu rengin her biçimdeki gösterimi yer alıyor:

Biçim Örnek Değerlerin anlamı
HEX #ff6600 Kırmızı, yeşil ve mavi; her biri ikişer onaltılık basamakla gösterilir
RGB rgb(255, 102, 0) 0 ile 255 arasında kırmızı, yeşil ve mavi değerleri
HSL hsl(24, 100%, 50%) Ton, doygunluk ve açıklık
HSV hsv(24, 100%, 100%) Ton, doygunluk ve değer; HSB olarak da adlandırılır
HWB hwb(24 0% 0%) Ton, beyazlık ve siyahlık
CMYK cmyk(0%, 60%, 100%, 0%) Camgöbeği, macenta, sarı ve siyah mürekkep
LAB lab(62.31, 55, 71.33) CIE açıklığı, yeşilden kırmızıya ve maviden sarıya eksenler
LCH lch(62.31, 90.07, 52.36) CIE açıklığı, renk doygunluğu ve ton
OKLab oklab(69.58% 0.1482 0.1406) Açıklık ve LAB'dekine benzer iki renk ekseni
OKLCH oklch(69.58% 0.2043 43.49) OKLab'de açıklık, renk doygunluğu ve ton
XYZ xyz(46, 30.77, 3.52) LAB'nin temel aldığı CIE XYZ renk uzayı
HCG hcg(24, 100%, 0%) Ton, renk doygunluğu ve grilik
Renk adı orangered En yakın adlandırılmış CSS rengi
ANSI 16 91 16 temel renkten birinin terminal kodu
ANSI 256 208 256 renkten birinin terminal kodu
AppleScript RGB {65535, 26214, 0} AppleScript'in kullandığı biçimde 0 ile 65535 arasında kırmızı, yeşil ve mavi değerleri
Gri tonlama gray(46.7%) 0% ile 100% arasında parlaklık

Araç açıklaması

Bu araç, renkleri bu 17 biçim arasında dönüştürür ve sonucu bir renk örneği olarak gösterir. Buradaki tüm renk dönüştürücüler aynı şekilde çalışır. Genel Renk Dönüştürücü'den HEX'ten RGB'ye, RGB'den CMYK'ye veya HEX'ten renk adına dönüştürme gibi iki biçime özel araçlara kadar hepsi, adında belirtilen biçimlerle açılır; Kaynak ve Hedef menülerinden başka biçimleri seçebilirsiniz. Bir renk yapıştırın; yazdıkça sonuç görüntülenir ve kopyalamaya hazır olur. Renk Dönüştürücü'nün başlangıçta kullandığı kaynak olarak Otomatik algıla'yı seçtiğinizde araç, rengin yazılış biçimine bakarak hangi biçimde olduğunu belirler. Değiştir düğmesi dönüşüm yönünü tersine çevirir.

Örnekler

Girdi Hedef Sonuç
#ff6600 RGB rgb(255, 102, 0)
rgb(37, 99, 235) HEX #2563eb
#2563eb HSL hsl(221.2, 83.2%, 53.3%)
rgb(37, 99, 235) CMYK cmyk(84.3%, 57.9%, 0%, 7.8%)
#2563eb HSV hsv(221.2, 84.3%, 92.2%)
#2563eb OKLCH oklch(54.61% 0.2152 262.88)
rgb(37, 99, 235) LAB lab(46.06, 30.96, -73.83)
#ff6347 Renk adı tomato
rebeccapurple HEX #663399
rgba(37, 99, 235, 0.5) HEX #2563eb80

Neler yapıştırabilirsiniz?

  • # işaretiyle veya bu işaret olmadan, 3, 4, 6 ya da 8 basamaklı HEX kodları. Dördüncü basamak veya sondaki basamak çifti opaklığı belirler.
  • Değerlerin arasında virgül ya da boşluk bulunan rgb(), hsl() veya oklch() gibi işlevler. Dördüncü bir değer olarak ya da eğik çizgiden sonra isteğe bağlı opaklık da belirtilebilir: rgba(37, 99, 235, 0.5) veya rgb(37 99 235 / 50%).
  • rgb(100%, 40%, 0%) örneğindeki gibi kırmızı, yeşil ve mavi için yüzdeler; ayrıca hsl(0.5turn, 100%, 50%) örneğindeki gibi deg, rad, grad veya turn cinsinden ton değerleri.
  • 255, 102, 0 gibi işlev adı olmadan yazılmış sayılar. Otomatik algılama, üç sayıyı RGB olarak; son iki sayı yüzdeyse HSL olarak, dört sayıyı ise RGB opaklık değeri gibi görünmedikleri sürece CMYK olarak yorumlar.
  • Boşluk içersin ya da içermesin, her türlü büyük/küçük harfle yazılmış renk adları: Rebecca Purple kullanılabilir.
  • hsb() olarak yazılmış HSB değerleri ve {65535, 26214, 0} gibi süslü parantezler içindeki AppleScript renkleri.

Nasıl çalışır?

Hesaplamalar, renk dönüştürme için kullanılan bir JavaScript kütüphanesi olan color-convert ile yapılır.

  • Opaklık HEX, RGB, HSL, HWB, OKLab ve OKLCH biçimlerine aktarılır; bu biçimler opaklığı gösterebilir. Diğer biçimlerde opaklık gösterilmez.
  • LAB, LCH ve XYZ, D65 beyaz noktasını kullanan CIE değerleridir. CSS'teki lab() ve lch() ise D50 beyaz noktasını kullanır; bu nedenle değerleri biraz farklıdır.
  • LAB, LCH, OKLab ve OKLCH, ekranlarda gösterilemeyen renkleri de tanımlayabilir. Böyle bir renk HEX, RGB veya ekranda gösterilen başka bir biçime dönüştürüldüğünde kanalları 0 ile 255 aralığına sıkıştırılır; bu nedenle oklch(70% 0.3 145), #00c800 olur.
  • Renk adı sonucu, adlandırılmış CSS renkleri arasından en yakın olanıdır; bu nedenle yalnızca adı olan renkler için birebir eşleşir: #ff6600, #ff4500 olan orangered sonucunu verir.
  • ANSI 16 ve ANSI 256 sonuçları yaklaşık değerlerdir; çünkü bu paletlerde yalnızca 16 veya 256 renk bulunur. ANSI 16 sonuçları, ön plan kodları olan 30–37 ve 90–97 arasındadır. Arka plan kodları olan 40–47 ve 100–107 de aynı renkler olarak değerlendirilir.
  • CMYK, yazıcı renk profili kullanılmadan temel formülle hesaplanır; bu nedenle bir baskı merkezinin aynı renk için verdiği CMYK değerleri farklı olabilir.
  • Gri tonlama, kırmızı, yeşil ve mavi değerlerinin ortalamasıdır.

İpuçları

  • HEX, RGB, HSL, HWB, OKLab, OKLCH ve renk adı sonuçları geçerli CSS değerleridir; bunları olduğu gibi bir stil sayfasına yapıştırabilirsiniz.
  • Otomatik algılama, 208 gibi üç basamaklı bir sayıyı kısa HEX kodu olarak yorumlar. Bu nedenle terminal kodları için kaynak olarak ANSI 256 veya ANSI 16'yı seçin.
  • HSV ve HSB, aynı modelin iki farklı adıdır.