logo
GeekFormat

Konverter Warna

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Konverter warna online mendukung konversi satu klik antar 14 format warna termasuk HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, dan OKLCH. Dilengkapi pemilih warna bawaan untuk penyesuaian real-time, pemeriksaan kontras WCAG, skema harmoni warna, pembuatan corak warna, konversi batch, dan ekstraksi warna dari gambar. Semua perhitungan berjalan sepenuhnya di browser Anda secara lokal—tidak perlu unggah file, cocok untuk desainer dan pengembang frontend.

Rekomendasi Terkait

Simulator Buta Warna

Filter Foto

CSS Formatter

Konversi Satuan

Konverter Mata Uang

Konversi Gambar

Kasus penggunaan

  • Mengonversi nilai HEX dari maket desain ke RGB/HSL untuk gaya CSS dalam pengembangan frontend, atau ke RGBA saat transparansi diperlukan
  • Menyatukan format nilai warna saat beralih antar alat desain seperti Figma, Sketch, dan Photoshop untuk desainer UI/UX
  • Mengonversi nilai RGB layar ke CMYK untuk referensi selama komunikasi produksi cetak awal
  • Memeriksa rasio kontras antara teks dan warna latar belakang untuk kepatuhan WCAG AA/AAA dalam desain yang dapat diakses
  • Dengan cepat menghasilkan keluarga lengkap dari tint ke shade untuk membangun sistem desain menggunakan generator corak warna
  • Menghasilkan skema warna profesional (komplementer, analog, dll.) untuk branding atau desain poster menggunakan harmoni warna
  • Mengekstrak warna dominan dari gambar referensi atau foto untuk inspirasi (pemilih warna gambar)
  • Memproses batch beberapa nilai warna dari maket desain dan mengonversi ke format yang dibutuhkan sekaligus
  • Dengan nyaman menyesuaikan kecerahan dan saturasi dengan HSL atau OKLCH saat menulis keadaan CSS seperti hover
  • Membangun warna sistem desain yang seragam secara perseptual menggunakan ruang warna OKLCH CSS modern
  • Mengajarkan prinsip ruang warna dengan perbandingan visual interaktif tentang bagaimana format berbeda merepresentasikan warna yang sama
  • Dengan cepat menemukan nama warna CSS bahasa Inggris untuk nilai apa pun untuk referensi dan komunikasi yang mudah

Fitur

  • Konversi 14 format warna: Mendukung HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH, dan nama warna CSS standar
  • Pengenalan input cerdas: Tempel format warna apa pun akan terdeteksi otomatis; mendukung singkatan #rgb, #rrggbbaa dengan alpha, rgb(), hsl(), dan nama warna CSS
  • Penyesuaian slider real-time: Merah/hijau/biru RGB, Hue/Saturasi/Cahaya HSL, slider HSV untuk penyesuaian warna WYSIWYG instan
  • Dukungan transparansi alpha: Konversi RGBA dan HSLA dengan saluran alpha, mendukung format opacity persentase dan desimal
  • Pencocokan nama warna CSS: Otomatis menemukan nama warna CSS standar terdekat (140+ pilihan) untuk referensi cepat
  • Pemeriksa kontras WCAG: Perhitungan rasio kontras real-time terhadap teks putih dan hitam, dengan indikator lulus/gagal AA (≥4.5:1) dan AAA (≥7:1) otomatis
  • Generator harmoni warna: Pembuatan satu klik 5 skema klasik—komplementer, analog, triadik, split-komplementer, dan tetradik
  • Pembuatan corak warna: Tersedia corak campuran RGB tradisional maupun corak OKLCH yang seragam secara perseptual, menghasilkan 11 tingkat kecerahan secara instan
  • Konversi batch: Memproses beberapa nilai warna sekaligus dengan input multi-baris—ideal untuk memproses palet warna sistem desain
  • Pemilih warna gambar: Unggah gambar untuk mengambil sampel otomatis dan mengekstrak 16 warna dominan, bagus untuk mengambil palet dari referensi atau foto
  • Salin satu klik: Tombol salin di samping setiap format warna untuk penyalinan instan dalam notasi standar—siap tempel langsung ke CSS atau perangkat lunak desain
  • Generator warna acak: Hasilkan warna acak satu klik untuk inspirasi cepat
  • Pemrosesan murni berbasis browser: Semua perhitungan warna berjalan lokal di browser tanpa unggahan ke server—bekerja instan tanpa perlu pendaftaran
  • Desain responsif: Bekerja mulus di desktop, seluler, dan tablet—menyesuaikan warna dan menyalin nilai dengan nyaman di ponsel

Cara Penggunaan

  1. Masukkan nilai format warna apa pun di kotak input atas, klik swatch warna untuk menggunakan picker, atau seret slider RGB/HSL/HSV untuk menyesuaikan
  2. Alat secara otomatis mengonversi real-time ke semua 14 format termasuk HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Beralih ke 'Harmoni Warna' untuk skema, 'Corak Warna' untuk ramp tint/shade, atau 'Batch/Picker' untuk konversi batch atau ekstraksi warna dari gambar
  4. Klik tombol salin di samping format warna apa pun untuk menyalin notasi standar secara langsung untuk digunakan

Pertanyaan Umum

Format warna apa saja yang didukung konverter warna?

Mendukung konversi antar 14 format warna umum: HEX (singkatan 3-digit dan 8-digit dengan alpha), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 dengan iluminan D65), CIE LAB, LCH, OKLAB, OKLCH, ditambah 140+ nama warna CSS standar. Masukkan format apa pun untuk mengonversi otomatis ke semua format lainnya.

Bagaimana cara menggunakan alat konversi warna ini?

Sangat sederhana: 1) Masukkan nilai warna apa pun di kotak input atas—misalnya #22c55e, rgb(34,197,94), hsl(142,71%,45%), atau bahkan nama warna seperti green; 2) Atau klik swatch warna untuk menggunakan picker, atau seret slider RGB/HSL/HSV untuk penyesuaian real-time; 3) Semua 14 konversi format akan muncul secara instan di bawah—klik tombol salin di samping format apa pun untuk menyalin ke clipboard.

Apa perbedaan antara HEX, RGB, dan HSL? Di mana masing-masing digunakan?

HEX adalah notasi heksadesimal paling umum untuk web—#ff0000 untuk merah—digunakan secara luas di CSS dan file handoff desain. RGB merepresentasikan warna dengan nilai 0-255 untuk merah, hijau, dan biru, dasar dari tampilan layar. HSL menggunakan Hue (0-360°), Saturasi, dan Lightness, yang lebih selaras dengan persepsi warna manusia dan lebih intuitif bagi desainer saat menyesuaikan warna. CMYK menggunakan persentase tinta cyan, magenta, kuning, dan hitam untuk cetak. OKLCH adalah ruang warna modern yang seragam secara perseptual yang menghasilkan gradien dan ramp corak yang halus secara visual.

Apa itu rasio kontras WCAG? Rasio berapa yang memenuhi standar aksesibilitas?

Rasio kontras WCAG mengukur perbedaan luminansi antara warna teks dan warna latar belakang, memastikan konten dapat dibaca oleh pengguna dengan gangguan penglihatan. Menurut Pedoman Aksesibilitas Konten Web: teks isi normal memerlukan ≥4.5:1 untuk Level AA (lulus) dan ≥7:1 untuk Level AAA (sangat baik); teks besar (≥18pt tebal atau ≥24pt normal) memerlukan ≥3:1 untuk AA. Alat ini menampilkan rasio kontras real-time terhadap teks putih dan hitam, dengan indikator lulus/gagal otomatis untuk standar AA dan AAA.

Apa arti huruf A dalam RGBA? Bagaimana cara mengatur transparansi?

Huruf A dalam RGBA adalah singkatan dari saluran Alpha, yang mengontrol transparansi—nilai berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram). Misalnya, rgba(34,197,94,0.5) adalah hijau semi-transparan. Sesuaikan transparansi dengan slider Alpha; hasil konversi menampilkan format RGBA dan HSLA dengan alpha. HEX juga mendukung transparansi dengan menambahkan dua digit heksadesimal setelah warna 6-digit—misalnya #22c55e80 merepresentasikan opacity 50%.

Apa itu OKLCH dan LCH? Bagaimana perbedaannya dengan HSL?

LCH dan OKLCH adalah ruang warna yang seragam secara perseptual di mana L adalah Lightness (kecerahan), C adalah Chroma (saturasi), dan H adalah Hue. Keuntungan terbesar mereka dibandingkan HSL adalah: warna dengan nilai L yang sama benar-benar tampak sama terang secara visual, yang sangat penting untuk sistem desain—jika Anda membuat palet dengan hue berbeda tetapi kecerahan sama menggunakan HSL, beberapa warna akan tampak lebih gelap dari yang lain, tetapi OKLCH menjamin kecerahan perseptual yang seragam. OKLCH lebih baru dari LAB/LCH dengan perhitungan yang lebih sederhana dan prediksi warna yang lebih akurat, direkomendasikan dalam CSS modern (CSS Color Level 4).

Bagaimana cara menggunakan fitur pemilih warna gambar?

Beralih ke tab 'Batch/Picker', klik unggah untuk memilih gambar—alat secara otomatis menskalakan gambar ke grid 100×100 dan mengekstrak 16 warna dari posisi yang terdistribusi merata, menampilkan swatch dan nilai warna. Klik swatch mana pun untuk mengatur warna itu sebagai warna utama Anda untuk penyesuaian dan konversi lebih lanjut. Sempurna untuk mengekstrak palet dengan cepat dari gambar referensi, maket desain, atau foto.

Skema harmoni warna apa saja yang tersedia dan bagaimana cara menggunakannya?

Alat ini menyediakan 5 skema harmoni klasik: 1) Komplementer: Warna yang berjarak 180° untuk kontras tinggi; 2) Analog: Warna yang berjarak 30° untuk harmoni alami; 3) Triadik: Warna yang berjarak 120° untuk keseimbangan yang hidup; 4) Split-komplementer: Warna dasar + 30° di kedua sisi komplemen untuk kontras yang lembut; 5) Tetradik (persegi panjang): Empat warna yang berjarak 90° untuk variasi yang kaya. Beralih ke tab 'Harmoni Warna' untuk melihat skema yang dihasilkan—klik swatch mana pun untuk mengaturnya sebagai warna utama.

Apakah hasil konversi CMYK dapat digunakan langsung untuk cetak?

Hasil tersebut berfungsi dengan baik sebagai referensi, namun perlu diperhatikan: layar menggunakan warna RGB aditif (emisi cahaya), sedangkan cetak menggunakan CMYK subtraktif (refleksi tinta). Keduanya memiliki gamut yang berbeda—beberapa warna RGB yang cerah (seperti hijau dan biru terang) tidak dapat direproduksi secara akurat dengan tinta CMYK, sehingga akan terjadi beberapa pergeseran warna. Alat ini menggunakan rumus konversi RGB-ke-CMYK standar, cocok untuk komunikasi awal dan referensi cepat. Untuk produksi cetak akhir, kami merekomendasikan penggunaan perangkat lunak desain profesional dengan profil warna ICC yang tepat untuk pembuktian lunak.

Bagaimana cara kerja konversi batch? Berapa banyak warna yang dapat dikonversi sekaligus?

Beralih ke tab 'Batch/Picker', masukkan satu warna per baris di kotak teks (dapat mencampur HEX/RGB/HSL/nama warna CSS secara bebas), lalu klik konversi batch untuk memproses semua warna sekaligus. Hasil menampilkan swatch warna dan nilai HEX untuk masing-masing warna. Tidak ada batasan teoretis, tetapi untuk ratusan warna kami menyarankan pemrosesan dalam batch untuk menghindari lag browser.

Dapatkah saya menggunakan konverter warna di ponsel?

Ya. Alat ini menggunakan desain responsif dan bekerja sempurna di layar ponsel, tablet, dan desktop dari semua ukuran. Di ponsel Anda masih dapat memasukkan nilai warna, menyeret slider untuk menyesuaikan warna, melihat konversi, dan menyalin nilai—semua fitur setara dengan pengalaman desktop. Dan karena ini adalah komputasi lokal murni, tidak akan menggunakan data seluler Anda.

Bagaimana jika input mengatakan 'format warna tidak dikenali'?

Periksa format input: 1) HEX harus dimulai dengan # (opsional) diikuti oleh 3, 6, atau 8 karakter heksadesimal (0-9/a-f)—#f00, #ff0000, #ff0000ff semuanya valid; 2) Format RGB harus rgb(r,g,b) dengan tiga nilai 0-255 yang dipisahkan koma; 3) Format HSL adalah hsl(h,s%,l%) dengan hue 0-360°, saturasi dan kecerahan 0-100%; 4) Nama warna CSS harus nama standar seperti red/blue/green—nama warna bahasa Indonesia tidak didukung.

Mengapa warna yang dikonversi terlihat berbeda di perangkat lunak yang berbeda?

Ini adalah perilaku manajemen warna yang normal: perangkat lunak, monitor, dan sistem operasi yang berbeda dapat menggunakan profil warna yang berbeda (sRGB, Display P3, Adobe RGB), menyebabkan perbedaan visual kecil untuk nilai warna yang sama. Halaman web default ke ruang warna sRGB—jika Anda menggunakan profil Adobe RGB atau Display P3 di perangkat lunak seperti Photoshop, Anda perlu mengonversi ke sRGB saat mengekspor untuk tampilan web yang konsisten.

Format warna mana yang harus saya gunakan dalam pengembangan frontend?

CSS modern mendukung semua format warna: HEX paling umum dengan kompatibilitas terbaik dan merupakan standar untuk handoff desain; RGB/RGBA bekerja dengan baik saat Anda memerlukan penyesuaian opacity dinamis atau manipulasi tingkat saluran; HSL paling intuitif untuk menulis varian warna langsung dalam kode (seperti mencerahkan keadaan hover hanya dengan meningkatkan L); OKLCH adalah masa depan, didukung asli di CSS Color Level 4, dengan keseragaman perseptual yang sempurna untuk menghasilkan corak dan gradien—pilih berdasarkan kebutuhan kompatibilitas proyek Anda.

Untuk apa fitur pembuatan corak warna? Apa perbedaan antara corak tradisional dan OKLCH?

Pembuatan corak warna secara instan membuat 11 langkah (50-900) dari tint dan shade untuk keluarga warna, ideal untuk membangun palet warna sistem desain (seperti sistem warna Tailwind). Corak tradisional hanya mencampur ke arah putih di ruang RGB—meskipun seragam secara numerik, nada tengah dapat terlihat tidak merata. Corak OKLCH mempertahankan hue dan chroma sambil hanya menyesuaikan kecerahan L, menghasilkan transisi yang halus antara terang dan gelap secara visual—lebih profesional dan rapi.

Tentang Ruang Warna dan Konversi Format Warna

Konverter warna adalah salah satu alat yang paling sering digunakan oleh desainer dan pengembang frontend, memberikan konversi akurat antar representasi warna yang berbeda. Warna itu sendiri adalah persepsi visual; untuk merepresentasikannya di komputer dan dalam cetak, orang telah mengembangkan beberapa model warna (ruang warna) yang menggambarkan warna yang sama menggunakan sistem numerik yang berbeda, masing-masing cocok untuk skenario dan perangkat yang berbeda.

Format warna umum meliputi: HEX (RGB heksadesimal, notasi standar web), RGB (nilai Merah/Hijau/Biru 0-255, dasar dari tampilan layar), HSL (Hue/Saturasi/Cahaya, paling intuitif untuk penyesuaian warna manusia), CMYK (persentase tinta Cyan/Magenta/Kuning/Hitam untuk cetak). Dalam beberapa tahun terakhir, ruang warna yang seragam secara perseptual seperti OKLCH telah tumbuh dalam popularitas karena mereka menjamin secara matematis bahwa warna dengan nilai kecerahan yang sama benar-benar tampak sama terang secara visual—sangat penting untuk membangun sistem desain dan menghasilkan gradien.

Mengapa mengonversi antar format warna? Alat, platform, dan media output yang berbeda menggunakan format warna yang berbeda: CSS web mendukung HEX/RGB/HSL/OKLCH dan banyak lagi; perangkat lunak desain seperti Figma/Sketch default ke HEX; cetak memerlukan CMYK; dan saat menyesuaikan warna secara dinamis dalam kode (seperti keadaan hover atau perubahan opacity), HSL dan OKLCH jauh lebih nyaman daripada HEX. Konversi warna yang akurat memastikan konsistensi warna antara maket desain dan implementasi akhir.

Kontras WCAG adalah standar penting untuk aksesibilitas web, mengukur perbedaan luminansi antara teks latar depan dan warna latar belakang untuk memastikan keterbacaan bagi pengguna dengan gangguan penglihatan. Teks isi normal memerlukan rasio kontras 4.5:1 (tingkat AA), dengan konten penting direkomendasikan pada 7:1 (tingkat AAA). Alat kami menghitung ini secara real-time, membantu desainer mempertimbangkan aksesibilitas selama pemilihan warna daripada memperbaiki nanti.

Harmoni Warna adalah teori warna klasik berdasarkan roda warna, menghasilkan kombinasi yang kohesif secara visual menggunakan posisi geometris hue di sekitar roda. Warna komplementer menciptakan kontras kuat yang ideal untuk tombol dan aksen; warna analog harmonis dan alami untuk area latar belakang besar; skema triadik dan tetradik menawarkan keseimbangan dan kekayaan untuk identitas merek. Alat ini mencakup 5 skema harmoni yang paling umum digunakan, menghasilkan palet dengan satu klik.

Corak/Tint warna adalah variasi terang-ke-gelap dari hue yang sama, dasar untuk membangun sistem desain (seperti palet 50-900 Tailwind CSS). Corak RGB tradisional hanya mencampur ke arah putih, tetapi tampak tidak merata secara visual; corak berbasis OKLCH mempertahankan hue dan chroma sambil hanya menyesuaikan kecerahan, menghasilkan transisi terang-ke-gelap yang halus secara visual—pendekatan yang direkomendasikan untuk sistem desain modern. Alat kami menawarkan kedua gaya corak untuk perbandingan.

Mengapa pemrosesan lokal itu penting? Konversi warna murni matematis dan sama sekali tidak memerlukan unggahan data ke server. Semua perhitungan dalam alat kami berjalan sepenuhnya di browser Anda secara lokal—buka halaman dan gunakan secara instan tanpa pendaftaran atau login, tidak ada data gambar atau warna yang diunggah. Ini cepat dan menjaga privasi—Anda dapat menggunakannya dengan percaya diri bahkan untuk warna dari maket desain yang belum dirilis dan rahasia.

Catatan penting: Konversi format warna presisi secara matematis, tetapi karena gamut layar, kalibrasi monitor, dan proses pencetakan, nilai warna yang sama mungkin tampak sedikit berbeda di berbagai perangkat dan media. Layar menggunakan RGB aditif (lebih banyak cahaya = lebih terang), sedangkan cetak menggunakan CMYK subtraktif (lebih banyak tinta = lebih gelap). Keduanya memiliki gamut yang berbeda—beberapa warna RGB yang sangat jenuh tidak dapat direproduksi secara akurat dengan tinta CMYK. Hasil konversi ideal untuk desain digital dan pengembangan web; untuk produksi cetak akhir, kami merekomendasikan perangkat lunak manajemen warna profesional untuk pembuktian.

术语表

HEX
Notasi warna heksadesimal menggunakan # diikuti oleh 6 digit heksadesimal yang merepresentasikan RGB (dua digit per saluran, 00-FF)—#FF0000 untuk merah, format paling umum untuk web dan perangkat lunak desain. Mendukung singkatan 3-digit (misalnya #f00) dan notasi 8-digit dengan alpha.
RGB/RGBA
Merepresentasikan warna dengan tiga nilai 0-255 untuk Merah, Hijau, dan Biru; rgba() menambahkan saluran Alpha untuk transparansi (0-1). Model warna dasar untuk tampilan layar.
HSL/HSLA
Merepresentasikan warna dengan Hue (0-360°), Saturasi (0-100%), dan Cahaya (0-100%), lebih selaras dengan persepsi warna manusia—lebih intuitif bagi desainer saat menyesuaikan warna.
HSV/HSB
Hue, Saturasi, Nilai/Kecerahan—mirip dengan HSL tetapi dengan perhitungan kecerahan yang berbeda, umum ditemukan di pemilih warna di perangkat lunak desain seperti Photoshop.
HWB
Hue, Whiteness, Blackness—tambahan CSS Color Level 4 yang lebih intuitif daripada HSL: cukup tambahkan putih atau hitam untuk menyesuaikan nada.
CMYK
Persentase tinta Cyan, Magenta, Kuning, dan Hitam (Key), digunakan dalam industri percetakan untuk merepresentasikan rasio campuran tinta.
CIE LAB/LAB
Ruang warna yang seragam secara perseptual yang didefinisikan oleh Komisi Penerangan Internasional (CIE): L untuk Lightness (0-100), a untuk sumbu hijau-merah, b untuk sumbu biru-kuning—dirancang agar jarak numerik sesuai dengan perbedaan warna yang dipersepsikan.
LCH
Representasi koordinat kutub yang dikonversi dari LAB: L Lightness, C Chroma (saturasi), H Hue—lebih seragam secara perseptual daripada HSL, cocok untuk desain profesional yang memerlukan kontrol perseptual yang presisi.
OKLAB/OKLCH
Generasi baru ruang warna yang seragam secara perseptual yang diperkenalkan pada tahun 2020—perhitungan lebih sederhana dan prediksi hue lebih akurat daripada LAB/LCH. OKLCH adalah bentuk kutubnya, didukung asli di CSS modern dan direkomendasikan untuk membangun sistem desain.
Kontras WCAG
Rasio luminansi antara teks latar depan dan latar belakang yang ditentukan oleh Pedoman Aksesibilitas Konten Web: AA memerlukan ≥4.5:1 untuk teks isi, AAA memerlukan ≥7:1—memastikan keterbacaan bagi pengguna dengan gangguan penglihatan.
Harmoni Warna
Teori warna berdasarkan posisi di sekitar roda warna, menggunakan hubungan geometris (komplementer 180°, analog berjarak 30°, triadik berjarak 120°, dll.) untuk menghasilkan kombinasi yang kohesif dan estetis secara visual.
Corak/Tints
Rentang variasi terang-ke-gelap dari hue yang sama, biasanya dihasilkan sebagai 11 langkah dari 50 hingga 900, digunakan dalam sistem desain untuk aplikasi berbeda dari satu warna (latar belakang, batas, teks, aksen).

Referensi Cepat Perbandingan 14 Format Warna

Berikut adalah rentang nilai, contoh merah murni, dan kasus penggunaan utama untuk setiap format warna:

FormatRentang NilaiContoh Merah MurniKasus Penggunaan Utama
HEX#RRGGBB 00-FF#ff0000CSS web, handoff desain—format paling universal
RGBR/G/B: 0-255rgb(255,0,0)Dasar tampilan layar, pemrograman Canvas/WebGL
RGBADitambah A: 0-1rgba(255,0,0,1)CSS yang memerlukan transparansi, efek overlay
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)Penyesuaian warna desainer, manipulasi warna dinamis dalam kode
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Pemilih warna perangkat lunak desain seperti Photoshop
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4—penyesuaian intuitif dengan menambahkan putih/hitam
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)Industri percetakan dan penerbitan
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)CSS modern, palet sistem desain, gradien seragam perseptual

Referensi Standar Kontras Aksesibilitas WCAG

Persyaratan rasio kontras minimum dari Pedoman Aksesibilitas Konten Web (WCAG 2.1):

LevelPersyaratan Rasio KontrasJenis Teks yang BerlakuCatatan
AA≥ 4.5:1Teks isi normal (<18pt normal atau <14pt tebal)Standar lulus minimum, persyaratan kepatuhan hukum
AA≥ 3:1Teks besar (≥18pt normal atau ≥14pt tebal)Judul besar mungkin memiliki persyaratan yang dikurangi
AAA≥ 7:1Teks isi normal (ditingkatkan)Direkomendasikan untuk konten penting, pembacaan konten panjang
AAA≥ 4.5:1Teks besar (ditingkatkan)Desain yang dapat diakses dengan sangat baik

Referensi Cepat 5 Skema Harmoni Warna

Kombinasi warna klasik berdasarkan sudut roda hue—klik untuk menghasilkan secara instan:

Jenis SkemaJarak HueJumlah WarnaEfek Visual & Kasus Penggunaan
KomplementerBerjarak 180°2 warnaKontras tinggi—ideal untuk tombol, aksen, CTA
AnalogBerdekatan ±30°3 warnaHarmonis dan alami—bagus untuk latar belakang besar, palet utama
TriadikBerjarak 120°3 warnaHidup dan seimbang—ideal untuk branding, ilustrasi
Split-KomplementerWarna dasar + ±30° dari komplemen3 warnaKontras dengan kelembutan—lebih halus daripada komplementer
TetradikBerjarak 90°4 warnaKaya dan bervariasi—ideal untuk desain kompleks, produk anak-anak

Privacy & Security

Konverter warna ini menjalankan semua perhitungan warna, pemilihan warna dari gambar, dan pemrosesan batch sepenuhnya di browser Anda menggunakan JavaScript murni dalam memori browser. Nilai warna yang Anda masukkan dan gambar yang Anda unggah tidak pernah dikirimkan melalui jaringan ke server mana pun, juga tidak dicatat, di-cache, atau disimpan. Setelah pemrosesan, menutup atau menyegarkan halaman secara otomatis menghapus data sementara dari memori browser. Konten sensitif seperti warna dari maket desain yang belum dirilis dan warna merek dapat digunakan dengan aman tanpa risiko kebocoran.

Authoritative References

Troubleshooting

Bagaimana jika input menampilkan 'format warna tidak dikenali'?

Periksa: 1) Format HEX menggunakan karakter heksadesimal yang valid (0-9, a-f, A-F) dengan 3, 6, atau 8 digit; # adalah opsional; 2) Format RGB/RGBA memerlukan tiga atau empat nilai dalam tanda kurung—R/G/B 0-255, Alpha 0-1, dipisahkan koma; 3) Format HSL/HSLA memerlukan H 0-360, S dan L sebagai nilai persentase 0-100; 4) Nama warna CSS harus nama bahasa Inggris standar—nama warna bahasa Indonesia tidak didukung.

Mengapa konversi CMYK terlihat berbeda dari cetak sebenarnya?

Ini diharapkan: RGB dan CMYK memiliki gamut yang berbeda—banyak warna RGB cerah tidak dapat direproduksi dengan tinta CMYK. Alat ini menggunakan rumus konversi standar yang cocok untuk referensi awal. Untuk cetak profesional: 1) Konversi ke mode CMYK di perangkat lunak desain; 2) Gunakan profil warna ICC yang benar; 3) Lakukan pembuktian digital.

Mengapa warna yang sama terlihat berbeda di ponsel dibandingkan komputer?

Layar yang berbeda memiliki cakupan gamut, suhu warna, kecerahan, dan kalibrasi yang berbeda: Mac default ke gamut lebar Display P3, sebagian besar PC Windows menggunakan sRGB, dan layar seluler bervariasi. Desain web direkomendasikan untuk menstandarisasi pada sRGB sebagai dasar untuk tampilan yang konsisten di sebagian besar perangkat.

Mengunggah gambar untuk pemilih warna tidak merespons?

Harap konfirmasi: 1) Anda mengunggah format gambar standar (JPG/PNG/GIF/WebP); 2) File gambar tidak rusak; 3) Ukuran file tidak terlalu besar (disarankan di bawah 5MB). Pemilihan warna dari gambar diproses secara lokal di canvas dan tidak pernah diunggah ke server—menyegarkan dan mengunggah ulang biasanya menyelesaikan masalah.