Konversi antara HEX, RGB, HSL, dan OKLCH dengan pratinjau langsung.
Terakhir diperbarui
140 nama warna ini bisa dipakai di CSS dan di Python turtle. Klik sebuah warna untuk membukanya di konverter.
Setiap kartu menampilkan nama CSS, nama yang kamu tulis di turtle, kode HEX, dan nilai RGB-nya.
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
Konverter warna mengambil warna dalam format umum apa pun, seperti HEX, RGB, HSL, atau OKLCH, lalu menampilkan semua format lain yang mewakili warna yang sama. Ini alat sehari-hari bagi desainer dan developer saat mencocokkan warna merek, debug variabel CSS, membandingkan palet mode gelap dan terang, atau memeriksa kontras untuk aksesibilitas.
CSS mendukung beberapa model warna, dan masing-masing punya kelebihan. HEX dan RGB menggambarkan warna dari cahaya merah, hijau, dan biru. HSL lebih intuitif (hue, saturasi, kecerahan). OKLCH adalah model perseptual, di mana perubahan angka yang sama terlihat sebagai perubahan yang sama di mata, sehingga sangat berguna untuk membuat tint, shade, dan palet yang aksesibel.
Aksesibilitas berasal dari kontras, bukan hanya warna. WCAG mendefinisikan rasio kontras antara teks dan latar belakang: minimal 4,5:1 untuk teks isi biasa, dan 3:1 untuk judul besar. Alat warna yang bagus melaporkan kedua angka di samping warnamu, supaya kamu tidak merilis UI yang tidak aksesibel tanpa sengaja.
#ff8800 sama dengan rgb(255, 136, 0).L sebesar 10% di OKLCH terlihat seperti perubahan kecerahan yang kurang lebih sama untuk hue apa pun. HSL tidak berperilaku seperti itu.Tempel nilai HEX, RGB, HSL, atau OKLCH apa pun, atau pilih warna dengan eyedropper / color picker bawaan.
Konverter menampilkan warna yang sama dalam setiap format yang didukung. Klik nilai mana pun untuk menyalinnya ke clipboard.
Geser slider kecerahan untuk tint (lebih terang) dan shade (lebih gelap). Pakai kecerahan OKLCH untuk langkah yang konsisten secara visual.
Panel kontras menampilkan rasio WCAG terhadap putih dan hitam. Usahakan ≥ 4,5 untuk teks isi dan ≥ 3 untuk judul besar.
Pakai format yang sesuai dengan codebase-mu: HEX untuk design token, OKLCH untuk palet modern, HSL kalau kamu ingin mengaturnya dengan calc().
Lima format yang akan kamu temui sehari-hari, dengan contoh untuk warna yang sama. Referensi sintaks warna lengkap ada di halaman <color> MDN.
| Format | Sintaks | Contoh (oranye) |
|---|---|---|
| HEX | #RRGGBB atau #RGB | #ff8800 |
| HEX dengan alpha | #RRGGBBAA | #ff880080 (50% transparan) |
rgb() | Merah, hijau, biru 0 sampai 255 | rgb(255 136 0) |
rgb() dengan alpha | Sintaks garis miring modern | rgb(255 136 0 / 0.5) |
hsl() | Hue 0 sampai 360°, saturasi 0 sampai 100%, kecerahan 0 sampai 100% | hsl(32 100% 50%) |
oklch() | Kecerahan 0 sampai 100%, chroma, hue | oklch(74% 0.18 50) |
| Bernama | Nama warna CSS (ada 147) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);Keempat deklarasi menghasilkan biru yang persis sama. Memilih salah satunya untuk design token sebagian besar soal bagaimana kamu ingin mengaturnya nanti.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);Menahan hue (268) dan chroma tetap sambil menaikkan kecerahan bertahap menghasilkan palet yang konsisten, di mana setiap langkah *terlihat* punya selisih yang sama, sesuatu yang tidak dijamin HSL.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5 adalah cara CSS modern untuk menambahkan alpha. Bentuk HEX menambahkan byte alpha dua digit di akhir (80 ≈ 50%).
hsl(60 100% 50%) (kuning) dan hsl(240 100% 50%) (biru) punya L yang sama tapi kecerahan yang terlihat sangat berbeda. Pakai OKLCH untuk perbandingan visual.#abc) adalah singkatan dari bentuk 6 digit (#aabbcc).rgba(...) alih-alih sintaks modern rgb(... / alpha). Keduanya berfungsi, tapi bentuk garis miring adalah spesifikasi terkini dan lebih mudah dibaca di berbagai tool.#RR, GG, BB) lalu ubah setiap pasangan dari heksadesimal ke desimal. Atau tempel nilainya ke konverter warna dan baca hasil RGB-nya secara instan.L yang sama tidak selalu terlihat sama terang. OKLCH seragam secara perseptual, jadi lebih baik untuk membuat tint, shade, dan palet aksesibel yang konsisten.OKLCH adalah singkatan dari Oklab Lightness, Chroma, Hue. Model ini berbasis ruang warna Oklab, yang dirancang agar seragam secara perseptual: perubahan angka yang kecil terlihat sebagai perubahan visual yang kecil.
Pakai yang paling nyaman bagi timmu. HEX ada di mana-mana; OKLCH adalah pilihan modern untuk design system; HSL bagus kalau kamu ingin mengatur hue atau kecerahan dengan perhitungan. Dukungan browser sangat baik untuk keempatnya.
t.color("light gray"), t.color("lightgray"), dan t.color("LightGray") menggambar warna yang sama. Ejaan Inggris grey juga bisa. Kamu juga bisa memberikan kode HEX seperti "#D3D3D3", atau angka RGB setelah turtle.colormode(255).