Konverter warna

Ubah warna antara HEX, RGB, HSL, HWB, dan OKLCH, periksa kontras WCAG terhadap latar belakang, atau buat palet tonal Material 3 darinya.

Contoh kode

Salin contoh ini ke proyek Anda sendiri. Masing-masing hanya memakai pustaka standar bahasanya, jadi tidak ada yang perlu diinstal.

Beri bintang hingga 3 bahasa agar tampil lebih dulu di setiap halaman alat.

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))

Fungsinya

Mengubah warna antara HEX, RGB, HSL, HWB, dan OKLCH, memeriksa rasio kontras WCAG terhadap latar belakang, dan membuat palet tonal Material 3 darinya. Semuanya berjalan di browser Anda.

Cara memakai

Ketik warna dalam hex (#36c, #3366cc) atau dengan rgb(), hsl(), hwb(), atau oklch().
Pilih Konversi, Kontras, atau Palet. Mode Kontras menampilkan kolom untuk warna latar belakang.
Salin atau unduh hasilnya, atau kirim ke alat lain.

Contoh

#3366cc adalah rgb(51 102 204), hsl(220 60% 50%), hwb(220 20% 20%), dan oklch(0.5325 0.1679 262.29). Di atas putih kontrasnya 5,36:1: cukup untuk AA pada teks biasa, tetapi belum untuk AAA.

Perlu diketahui

Rasio mengikuti WCAG 2: luminans relatif dari sRGB linear, lalu (lebih terang + 0,05) / (lebih gelap + 0,05). Rasio dipotong sampai dua desimal, tidak pernah dibulatkan ke atas menjadi lulus.
AA meminta 4,5:1 untuk teks biasa dan 3:1 untuk teks besar; AAA meminta 7:1 dan 4,5:1.
Nilai lebih dulu dibulatkan ke kanal 8-bit utuh, sehingga setiap baris menggambarkan warna hex yang sama. Warna OKLCH di luar sRGB dibatasi ke warna terdekat yang bisa ditampilkan.
Palet mempertahankan rona dan kroma warna dasar dan menampilkan nada 0, 10, 20 … 90, 95, 99, dan 100, seperti Material 3.
Nama warna dan kanal alfa tidak didukung.

Notasi warna apa yang dibaca?

Hex (#36c atau #3366cc) dan fungsi CSS rgb(), hsl(), hwb(), dan oklch(), dengan spasi atau koma di antara nilainya. Nama warna dan transparansi tidak didukung. Hasilnya menampilkan warna yang sama dalam setiap notasi, dibulatkan ke kanal sRGB utuh.

Pertanyaan umum

Berapa rasio kontras yang diminta WCAG?

AA meminta 4,5:1 untuk teks biasa dan 3:1 untuk teks besar dan komponen antarmuka. AAA meminta 7:1 dan 4,5:1. Rasio dipotong, tidak pernah dibulatkan ke atas, sehingga 4,49 tidak dihitung lulus.

Apa itu OKLCH dan mengapa dipakai?

OKLCH menggambarkan warna lewat kecerahan, kroma, dan rona dalam ruang warna di mana langkah yang sama tampak sama berbedanya. Ini berguna untuk membuat skala warna dan mengubah kecerahan tanpa membuat rona bergeser.

Apa fungsi mode palet?

Mode ini membuat palet tonal Material 3: rona dan kroma warna dasar dalam 13 nada dari 0 (hitam) sampai 100 (putih). Pustaka warna di baliknya baru dimuat saat Anda memilih mode ini.

Perubahan alat ini