Cara menggunakan
- Masukkan warna — #0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…) — atau pilih satu dengan pemilih warna.
- Salin format yang anda perlukan daripada senarai.
- Tetapkan warna Latar belakang untuk menyemak nisbah kontras dan keputusan WCAG AA/AAA.
- Klik satu rona dalam skala untuk menggunakannya.
Penerangan pilihan
- HEX / RGB
- Warna skrin sebagai merah, hijau dan biru dari 0–255. #rrggbbaa dan rgb(… / 50%) menambah ketelusan.
- HSL / HSV
- Rona (hue), ketepuan dan kecerahan (lightness atau value). Berguna untuk menjadikan warna lebih cerah atau gelap secara manual.
- OKLCH
- Ruang warna perseptual dalam CSS Color 4. Mengubah kecerahan mengekalkan rona dan kepekatan warna yang dilihat, menjadikannya ideal untuk palet dan tema gelap.
- CMYK
- Penukaran ringkas untuk rujukan sahaja. Warna cetakan sebenar bergantung pada profil warna pencetak, jadi minta nilai tepat daripada kedai cetak anda.
- Nisbah kontras
- WCAG 2.2 memerlukan 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (18pt, atau 14pt tebal) pada tahap AA; 7:1 dan 4.5:1 pada AAA.
Contoh
#0f766e ialah rgb(15 118 110), hsl(175 77% 26%) dan oklch(51.1% 0.086 186.4). Di atas latar belakang putih, nisbah kontrasnya kira-kira 5.5:1, yang lulus WCAG AA untuk semua saiz teks.
Warna biasa dalam setiap format
Warna bernama CSS dan nilainya. CMYK di sini ialah penukaran matematik yang mudah; untuk percetakan profesional, gunakan nilai CMYK daripada profil warna pencetak anda.
| Nama CSS | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
Format yang perlu digunakan
HEX ialah cara paling ringkas untuk menulis warna dalam CSS dan alat reka bentuk: dua digit heks bagi setiap merah, hijau dan biru.
RGB ialah maklumat yang sama dalam perpuluhan, dan rgb(255 0 0 / 50%) menambah ketelusan.
HSL menerangkan rona, ketepuan dan kecerahan, yang memudahkan pembinaan warna yang lebih cerah atau lebih gelap daripada warna yang sama dengan mengubah nombor terakhir sahaja.
OKLCH ialah format CSS yang lebih baharu di mana langkah kecerahan yang sama kelihatan sama berbeza pada mata — berguna untuk palet warna yang mudah diakses.
Soalan lazim
Apakah nisbah kontras yang baik untuk teks?
Sekurang-kurangnya 4.5:1 untuk teks badan (WCAG AA). Hitam tulen di atas putih ialah 21:1; kelabu #767676 yang lazim di atas putih ialah 4.54:1, cukup-cukup lulus.
Mengapa nilai CMYK berbeza daripada Photoshop?
Photoshop menukar melalui profil warna ICC untuk mesin cetak dan kertas tertentu. Alat ini menggunakan formula matematik biasa, yang sesuai untuk anggaran tetapi bukan untuk pruf cetakan.
Apakah beza HSL dan OKLCH?
HSL hanyalah susunan semula RGB, jadi kuning dan biru dengan kecerahan yang sama kelihatan sangat berbeza dari segi terang. OKLCH direka supaya kecerahan yang sama kelihatan sama terang pada mata.
Bolehkah saya menggunakan OKLCH dalam CSS sekarang?
Boleh. oklch() berfungsi dalam semua pelayar utama semasa.
Privasi
Alat ini berjalan sepenuhnya dalam pelayar anda. Fail dan teks anda diproses pada peranti anda dan tidak pernah dimuat naik ke pelayan kami.