Langsung ke konten utama

Konverter Warna gratis

Konversi warna antara format HEX, RGB, HSL, HSV, dan CMYK secara instan. Termasuk skala kecerahan dan swatch prasetel.

Berfungsi offline setelah dimuat

Konversi warna antara HEX, RGB, HSL, HSV, dan CMYK — dengan pratinjau langsung dan salin satu ketukan. Semuanya berjalan di browser Anda.

Menerima: HEX (#fff atau #ffffff), RGB (255, 255, 255), atau HSL (360, 100%, 50%)

100%
Prasetel:
HEX#14B8A6
rgb() · lamargb(20, 184, 166)
rgb() · modernrgb(20 184 166)
hsl() · lamahsl(173, 80%, 40%)
hsl() · modernhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
Nilai RGB20, 184, 166

Kontras WCAG

Di latar belakang putih

2,49:1

Gagal

Di latar belakang hitam

8,44:1

AAA
🖨️ Untuk cetak: Nilai CMYK ini (89%, 0%, 10%, 28%) adalah perkiraan standar sRGB→CMYK untuk referensi. Untuk warna cetak yang akurat, gunakan profil ICC printer Anda atau bukti cetak — CMYK layar tidak dapat cocok dengan setiap tinta/kertas.

Skala kecerahan

Klik swatch untuk beralih ke warna tersebut

Penggunaan umum

  • Konversi Warna untuk Desain WebDapatkan nilai HEX, RGB, dan HSL untuk warna apa pun — siap untuk ditempel ke CSS atau Tailwind.
  • Konversi Warna untuk Cetak (CMYK)Konversi warna layar (HEX/RGB) ke nilai CMYK untuk digunakan dalam desain cetak dan pencetakan profesional.
  • Bangun Palet Warna untuk Sistem DesainKonversi warna merek di semua format dan buat skala kecerahan yang konsisten untuk sistem desain lengkap.
  • Periksa Kontras Warna untuk AksesibilitasKonversi warna untuk mendapatkan nilai RGB yang digunakan dalam alat rasio kontras - kepatuhan WCAG untuk desain yang dapat diakses.
  • Konversi Warna untuk FigmaDapatkan nilai HEX dan RGB yang tepat untuk ditempel ke pengambil warna Figma dan sistem token desain.

Cara kerja

Semua logika konversi adalah JavaScript tulisan tangan yang berjalan sepenuhnya di browser Anda — tanpa library, tanpa panggilan server. Alat ini mengurai masukan Anda, merutekannya melalui rangkaian fungsi matematika murni, dan secara bersamaan menghasilkan sebelas format keluaran termasuk ruang CSS Color 4 modern oklch() dan lab().

  1. 1
    Penguraian masukan yang fleksibel
    Parser khusus menerima heksa (3, 4, 6, atau 8 digit), rgb()/rgba(), hsl()/hsla() dalam sintaks koma lama maupun sintaks spasi modern, dan triple numerik telanjang. Nilai alfa sebagai desimal atau persentase dinormalisasi ke rentang 0–1 sebelum konversi apa pun dimulai.
  2. 2
    RGB sebagai pusat konversi
    Setiap format yang diterima pertama-tama diselesaikan menjadi triplet RGB kanonik. Dari representasi tunggal itu alat ini bercabang: HSL dan HSV menggunakan rumus min/max/chroma standar; CMYK diturunkan dengan mencari kanal kunci; dan linearisasi sRGB (kurva gamma sepotong-sepotong yang didefinisikan dalam IEC 61966-2-1) diterapkan sebelum perhitungan ruang perseptual.
  3. 3
    Ruang warna perseptual dihitung dari awal
    oklch() dihitung menggunakan matriks 3×3 referensi Björn Ottosson (ruang akar-kubik LMS). lab() dan lch() menggunakan adaptasi kromatik Bradford untuk mengonversi dari titik putih D65 ke D50, yang sesuai dengan cara CSS Color 4 mendefinisikan lab(). Ini adalah rumus yang sama yang digunakan dalam mesin rendering browser — diimplementasikan di sini tanpa dependensi eksternal apa pun.
  4. 4
    Kontras WCAG dan skala lightness
    Luminansi relatif dihitung sesuai rumus WCAG 2.1 (R, G, B yang dilinearisasi dibobot 0,2126/0,7152/0,0722) dan rasio kontras terhadap putih dan hitam dinilai AA-besar, AA, AAA, atau Gagal. Strip lightness sembilan-langkah dihasilkan dengan melangkahkan kanal lightness HSL dari 10% hingga 90%, memungkinkan Anda mengklik swatch mana pun untuk mengonversi corak itu.

Alat terkait

Pertanyaan yang sering diajukan