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

Bir rengi HEX, RGB, HSL, HWB ve OKLCH arasında dönüştürün, bir arka planla WCAG kontrastını denetleyin ya da ondan Material 3 ton paleti oluşturun.

Kod örnekleri

Bu örnekleri kendi projenize kopyalayın. Her biri yalnızca dilin standart kütüphanesini kullanır, bu yüzden kurulacak bir şey yoktur.

En çok 3 dili yıldızlayın; her araç sayfasında ilk sırada görünsünler.

const foreground = '#3366cc'
const background = '#ffffff'

const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((start) => {
    const channel = parseInt(hex.slice(start, start + 2), 16) / 255
    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)

// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))

Ne yapar

Bir rengi HEX, RGB, HSL, HWB ve OKLCH arasında dönüştürür, bir arka planla WCAG kontrast oranını denetler ve ondan Material 3 ton paleti oluşturur. Her şey tarayıcınızda çalışır.

Nasıl kullanılır

Bir rengi hex (#36c, #3366cc) ya da rgb(), hsl(), hwb() veya oklch() olarak yazın.
Dönüştür, Kontrast veya Palet’i seçin. Kontrast modu arka plan rengi için bir alan gösterir.
Sonucu kopyalayın, indirin ya da başka bir araca gönderin.

Örnekler

#3366cc, rgb(51 102 204), hsl(220 60% 50%), hwb(220 20% 20%) ve oklch(0.5325 0.1679 262.29) demektir. Beyaz üzerinde kontrastı 5,36:1’dir: normal metinde AA için yeterli, AAA için yetersiz.

Bilmekte fayda var

Oran WCAG 2’yi izler: doğrusal sRGB’den göreli parlaklık, sonra (açık + 0,05) / (koyu + 0,05). İki ondalığa kesilir, geçti sonucuna doğru asla yukarı yuvarlanmaz.
AA normal metin için 4,5:1, büyük metin için 3:1 ister; AAA 7:1 ve 4,5:1 ister.
Değerler önce tam 8 bitlik kanallara yuvarlanır; böylece her satır aynı hex rengi tanımlar. sRGB dışındaki bir OKLCH rengi, gösterilebilen en yakın renge sıkıştırılır.
Palet, temel rengin tonunu ve kromasını korur ve Material 3 gibi 0, 10, 20 … 90, 95, 99 ve 100 tonlarını listeler.
Renk adları ve alfa kanalları desteklenmez.

Hangi renk gösterimlerini okur?

Hex (#36c veya #3366cc) ile rgb(), hsl(), hwb() ve oklch() CSS işlevlerini okur; değerler arasında boşluk veya virgül olabilir. Renk adları ve saydamlık desteklenmez. Sonuç aynı rengi her gösterimde, tam sRGB kanallarına yuvarlanmış olarak verir.

Sık sorulan sorular

WCAG hangi kontrast oranını ister?

AA normal metin için 4,5:1, büyük metin ve arayüz öğeleri için 3:1 ister. AAA ise 7:1 ve 4,5:1 ister. Oran yukarı yuvarlanmaz, kesilir; bu yüzden 4,49 geçti sayılmaz.

OKLCH nedir, neden kullanılır?

OKLCH, eşit adımların eşit farklılıkta göründüğü bir uzayda rengi açıklık, kroma ve ton ile tanımlar. Renk ölçekleri kurmak ve tonu kaydırmadan açıklığı ayarlamak için kullanışlıdır.

Palet modu ne yapar?

Material 3 ton paleti oluşturur: temel rengin tonunu ve kromasını 0 (siyah) ile 100 (beyaz) arasında 13 tonda verir. Arkasındaki renk kitaplığı yalnızca bu modu seçtiğinizde yüklenir.

Bu aracın değişiklikleri