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 tonuna, ne kadar canlı ve ne kadar açık olduğuna göre tanımlar. Bu da elle ayarlamayı kolaylaştırır. CMYK, baskı için gereken camgöbeği, macenta, sarı ve siyah mürekkep miktarlarını verir. LAB, LCH, OKLab ve OKLCH, sayılarındaki eşit aralıkların gözle eşit aralıklar gibi görünmesi için tasarlanmıştır. Bu özellik paletler ve degradeler için kullanışlıdır 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.

Aynı turuncu rengin farklı biçimlerdeki gösterimi:

Biçim Örnek Değerlerin anlamı
HEX #ff6600 Kırmızı, yeşil ve mavi; her biri iki 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ığı, renklilik ve ton
OKLab oklab(69.58% 0.1482 0.1406) Açıklık ve LAB'den daha yeni bir modeldeki iki renk ekseni
OKLCH oklch(69.58% 0.2043 43.49) OKLab'deki açıklık, renklilik ve ton
XYZ xyz(46, 30.77, 3.52) LAB'nin temel aldığı CIE 1931 renk uzayı
HCG hcg(24, 100%, 0%) Ton, renklilik ve grilik
Renk adı orangered CSS'teki en yakın adlandırılmış renk
ANSI 16 91 16 temel renkten birinin terminal kodu
ANSI 256 208 256 renkten birinin terminal kodu
AppleScript RGB {65535, 26214, 0} AppleScript'in gösterdiği 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ç, bir rengi 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 tek bir biçim çifti için olanlara kadar, her araç adında belirtilen biçimlerle açılır; Kaynak ve Hedef menülerinden diğer biçimler seçilebilir. Bir renk yapıştırdığınızda sonuç siz yazdıkça görünür ve kopyalamaya hazır olur. Renk Dönüştürücü'nün varsayılan Kaynak seçeneği olan Otomatik algıla ile araç, rengin yazılış biçimine bakarak formatını belirler. Değiştir düğmesi dönüşümün 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

Yapıştırabilecekleriniz

  • # işaretiyle veya bu işaret olmadan yazılabilen, 3, 4, 6 ya da 8 basamaklı HEX kodları. Dördüncü basamak veya sondaki basamak çifti opaklığı belirtir.
  • Değerlerin arasında virgül veya boşluk bulunan rgb(), hsl() ya da oklch() gibi işlevler ve dördüncü değer olarak veya eğik çizgiden sonra yazılabilen isteğe bağlı opaklık: 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 birimleriyle ifade edilen ton değerleri.
  • İşlev adı içermeyen 255, 102, 0 gibi düz sayılar. Otomatik algılama üç sayıyı RGB olarak; son iki sayı yüzdeyse HSL olarak, dört sayıyı ise RGB ve opaklık gibi görünmedikleri sürece CMYK olarak yorumlar.
  • Boşluklu veya boşluksuz, büyük-küçük harf fark etmeksizin renk adları: Rebecca Purple da çalışır.
  • hsb() olarak yazılan HSB değerleri ve {65535, 26214, 0} gibi süslü parantezler içinde verilen 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, bunu ifade edebilen HEX, RGB, HSL, HWB, OKLab ve OKLCH biçimlerinde korunur. Diğer biçimlerde opaklık gösterilmez.
  • LAB, LCH ve XYZ, D65 beyaz noktasını kullanan CIE değerleridir. CSS lab() ve lch() ise D50 beyaz noktasını kullanır; bu nedenle sayıları biraz farklıdır.
  • LAB, LCH, OKLab ve OKLCH, ekranlarda gösterilemeyen renkleri tanımlayabilir. Böyle bir renk HEX, RGB veya başka bir ekran biçimine dönüştürüldüğünde, kanallar 0 ile 255 aralığına kırpılır. Bu nedenle oklch(70% 0.3 145), #00c800 olur.
  • Renk adı sonucu, CSS'teki adlandırılmış renkler arasından en yakın olanıdır; bu nedenle yalnızca adı bulunan renkler için tam sonuç verir: #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ı, 30 ile 37 ve 90 ile 97 arasındaki ön plan kodlarıdır; 40 ile 47 ve 100 ile 107 arasındaki arka plan kodları da aynı renkler olarak yorumlanır.
  • CMYK, yazıcının renk profili kullanılmadan temel formülle hesaplanır; bu nedenle bir baskı atölyesinin 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.