Penukar Warna

Alat penukar warna kami memudahkan proses pertukaran antara semua format warna utama yang digunakan dalam pembangunan web, reka bentuk grafik, dan percetakan. Sama ada anda perlu menukar kod HEX kepada RGB untuk CSS, menterjemah nilai HSL untuk alat reka bentuk, atau menukar RGB kepada CMYK untuk cetakan, alat ini mengendalikan semua penukaran dalam masa nyata dengan pratonton warna langsung.

star 4.9
auto_awesome AI
New

Penukar Warna calculator

colorize Click to pick
#
R
G
B
HSL
hsl(217, 91%, 60%)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS Snippets 
color: #3B82F6;
background: rgb(59, 130, 246);
border: 1px solid hsl(217, 91%, 60%);
Shades & Tints

lightbulb Tips

  • •HEX is most common for web/CSS
  • •HSL is best for creating variations
  • •CMYK is for print only
  • •#F00 is shorthand for #FF0000

How to Use the Penukar Warna

palette

Masukkan Warna

Taip kod HEX (#FF5733), nilai RGB (rgb(255,87,51)), atau nilai HSL (hsl(11,100%,60%)) ke dalam mana-mana medan input.

colorize

Gunakan Pemilih Warna

Klik pada swatch pratonton warna untuk membuka pemilih warna asal dan pilih mana-mana warna secara visual.

content_copy

Salin Sebarang Format

Klik butang salin di sebelah mana-mana format warna untuk menyalinnya ke papan klip anda. Semua format dikemas kini dalam masa nyata.

The Formula

Penukaran warna menggunakan transformasi matematik antara model warna. HEX ialah perwakilan asas-16 bagi RGB. HSL/HSV ialah perwakilan koordinat silinder yang lebih intuitif untuk pereka. CMYK digunakan dalam cetakan dan mewakili peratusan dakwat.

HEX → RGB: R = parseInt(hex[1..2], 16), G = parseInt(hex[3..4], 16), B = parseInt(hex[5..6], 16)

lightbulb Variables Explained

  • HEX Kod warna heksadesimal 6 digit (cth., #FF5733)
  • RGB Merah (0-255), Hijau (0-255), Biru (0-255)
  • HSL Rona (0-360°), Ketepuan (0-100%), Kecerahan (0-100%)
  • HSV Rona (0-360°), Ketepuan (0-100%), Nilai (0-100%)
  • CMYK Sian (0-100%), Magenta (0-100%), Kuning (0-100%), Hitam/Key (0-100%)

tips_and_updates Pro Tips

1

Kod HEX adalah format paling biasa untuk warna web/CSS — sentiasa sertakan awalan #

2

RGB adalah format asal untuk skrin — setiap saluran bernilai dari 0-255

3

HSL lebih intuitif untuk pereka bentuk — laraskan Rona (Hue) untuk warna, Ketepuan (Saturation) untuk kejelasan, Kecerahan (Lightness) untuk cahaya

4

CMYK hanya untuk cetakan — warna RGB/HEX mungkin kelihatan berbeza apabila dicetak dalam CMYK

5

Gunakan HEX ringkas (#F00) untuk warna yang pasangan berulangnya sama (#FF0000)

6

Saluran legap/alfa: gunakan rgba() atau hsla() untuk warna telus

7

Warna dinamakan CSS (seperti 'tomato', 'dodgerblue') dipetakan kepada nilai HEX tertentu

Kalkulator dan penukar warna percuma kami serta-merta menterjemahkan warna antara semua format utama. Sama ada anda seorang pembangun web yang memerlukan penukaran HEX kepada RGB, pereka bentuk yang bekerja dengan nilai HSL, atau menyediakan fail untuk dicetak dengan CMYK, alat ini mengendalikan semua penukaran warna dengan pratonton langsung.

Penukar Warna HEX kepada RGB

HEX dan RGB ialah dua format warna yang paling biasa di web. Kod HEX (#RRGGBB) adalah padat dan digunakan secara meluas dalam CSS, manakala nilai RGB (0-255 setiap saluran) digunakan dalam JavaScript dan alat reka bentuk.

Penukar hex kepada rgb kami menterjemahkan antara format ini serta-merta, memudahkan anda bekerja merentas pelbagai alat dan kod.

Penukar Warna HSL untuk Pereka

HSL (Rona, Ketepuan, Kecerahan) ialah model warna yang paling intuitif untuk pereka bentuk. Laraskan:

  • Rona untuk menukar warna
  • Ketepuan untuk seri
  • Kecerahan untuk cahaya

Penukar warna HSL kami memudahkan anda mencipta variasi warna, membina palet, dan menterjemahkan nilai HSL kepada HEX atau RGB untuk pelaksanaan.

RGB kepada CMYK untuk Reka Bentuk Cetakan

Menukar daripada warna skrin (RGB) kepada warna cetakan (CMYK) memerlukan penukaran yang teliti kerana kedua-dua model warna berfungsi secara berbeza. RGB adalah berasaskan cahaya (additive), manakala CMYK adalah berasaskan dakwat (subtractive).

Penukar RGB kepada CMYK kami menyediakan anggaran nilai cetakan, walaupun hasil akhir bergantung pada pencetak dan kertas anda.

Cara Tukar HEX kepada RGB (Formula)

Untuk menukar warna HEX kepada RGB, bahagikan kod enam digit (#RRGGBB) kepada tiga pasangan dua aksara dan tukar setiap satu daripada asas-16 (heksadesimal) kepada asas-10 (perpuluhan): R = 16 × d1 + d2, dan begitu juga untuk hijau dan biru.

Sebagai contoh, #FF5733 menghasilkan FF = 255, 57 = 87, 33 = 51, atau rgb(255, 87, 51). Kedua-dua tanda menerangkan ruang warna sRGB yang sama yang ditentukan oleh IEC 61966-2-1 dan dirujuk dalam spesifikasi Warna W3C CSS.

Setiap saluran merangkumi 0–255 (8 bit), menghasilkan 256³ = 16,777,216 warna yang mungkin. HEX ringkas (#F53) hanya menggandakan setiap digit menjadi sepasang.

Cara Menukar RGB kepada HSL dan HSV

RGB ditukar kepada HSL dan HSV menggunakan langkah pertama yang sama: normalkan setiap saluran kepada 0–1 (bahagi dengan 255), kemudian cari nilai maksimum dan minimum. Kod Rona adalah sama dalam kedua-dua model, diperoleh daripada saluran yang mempunyai nilai paling besar.

Bagi HSL, Kecerahan = (maksimum + minimum) / 2; bagi HSV, Nilai = maksimum. Ketepuan dikira secara berbeza: HSL membahagikan kroma dengan 1 − |2L − 1|, manakala HSV membahagikan kroma dengan maksimum.

HSL dan HSV ialah pemetaan semula silinder bagi kiub RGB, yang diseragamkan dalam Modul Warna CSS W3C. Pereka bentuk menyukai model ini kerana Rona, Ketepuan, dan Kecerahan selari dengan cara manusia menerangkan warna.

Penjelasan Kod Warna HEX: 3, 6, dan 8 Digit

Kod warna HEX ialah trengkas heksadesimal untuk nilai saluran RGB, didahului dengan tanda #.

  • Bentuk enam digit biasa (#RRGGBB) mengekodkan merah, hijau, dan biru sebagai dua digit heks setiap satu.
  • Trengkas tiga digit (#RGB) mengembangkan setiap digit menjadi sepasang, jadi #F53 sama dengan #FF5533.
  • Bentuk lapan digit (#RRGGBBAA) dan trengkas empat digit menambah saluran alfa (ketelusan), seperti yang ditentukan dalam Modul Warna CSS W3C Tahap 4.

Heksadesimal adalah berasaskan asas-16, menggunakan digit 0–9 dan huruf A–F, di mana A = 10 dan F = 15. Tatatanda ringkas inilah sebabnya HEX menguasai pemilih warna CSS dan alat reka bentuk.

Asas sRGB, Gamut Luas, dan Ruang Warna

Kebanyakan nilai HEX dan RGB yang anda guna di web ialah sRGB, iaitu ruang warna standard yang ditentukan oleh IEC 61966-2-1 dan diandaikan oleh CSS melainkan ruang lain diisytiharkan. sRGB merangkumi sebahagian kecil warna yang boleh dilihat oleh mata manusia, jadi ruang gamut yang lebih luas seperti Display P3 dan Rec. 2020 wujud untuk paparan moden.

Modul Warna CSS Tahap 4 daripada W3C menambah fungsi seperti color() dan oklch() untuk mencapai gamut ini. Penukar ini beroperasi dalam sRGB, yang kekal sebagai ruang paling selamat dan paling serasi untuk kerja web dan UI harian merentas pelayar dan peranti.

Apakah Kegunaan Penukar Warna? Kegunaan Biasa di Dunia Nyata

Penukar warna menterjemahkan satu warna antara format supaya ia berfungsi di mana sahaja ia diperlukan.

  • Pembangun web menukar HEX kepada RGB atau RGBA untuk menambah ketelusan dalam CSS.
  • Pereka UI menggunakan HSL untuk menjana tona warna jenama yang lebih cerah dan lebih gelap dengan melaraskan Kecerahan sahaja.
  • Pasukan percetakan menukar RGB kepada CMYK sebelum menghantar karya seni ke mesin cetak, memandangkan dakwat bersifat subtraktif.
  • Alat visualisasi data dan kebolehaksesan menggunakan nilai ini untuk menyemak nisbah kontras berbanding garisan panduan WCAG daripada W3C.

Penukar menghilangkan pengiraan asas-16 manual dan mengekalkan warna yang konsisten merentas kod, fail reka bentuk dan cetakan.

Warna Bernama CSS dan Cara Ia Dipetakan kepada HEX

CSS mentakrifkan 148 warna bernama, seperti tomato (#FF6347), dodgerblue (#1E90FF), dan rebeccapurple (#663399), setiap satunya merupakan alias tepat untuk nilai HEX sRGB tertentu. Nama ini diseragamkan dalam Modul Warna CSS W3C dan disokong oleh setiap pelayar moden.

Ia mudah untuk prototaip tetapi hanya mewakili sebahagian kecil daripada 16.7 juta warna yang boleh dicapai melalui HEX dan RGB.

Oleh kerana warna bernama adalah sama dengan kod HEX tetap, penukar boleh memaparkan warna bernama yang paling hampir untuk sebarang input. Warna kata kunci adalah tidak sensitif huruf besar-kecil dalam CSS, jadi 'DodgerBlue' dan 'dodgerblue' dipaparkan secara sama.

Kesilapan Lazim Penukaran Warna yang Perlu Elakkan

Elakkan kesilapan penukaran warna yang kerap berlaku ini:

  • Kesilapan yang paling kerap ialah meninggalkan tanda awalan # atau salah membahagikan pasangan HEX, yang merosakkan hasil RGB.
  • Satu lagi ialah menganggap HSL dan HSV sebagai seiras: komponen ketiga mereka (Kecerahan vs. Nilai) berbeza, jadi 50% Kecerahan bukan 50% Nilai.
  • Menjangkakan penukaran RGB kepada CMYK adalah tepat akan menyebabkan kejutan cetakan, kerana output CMYK bergantung pada pencetak, dakwat dan kertas, dan pengiraannya hanyalah anggaran mengikut piawaian profil sRGB dan cetakan.
  • Pembundaran terlalu awal apabila menukar melalui HSL dan kembali juga boleh memesongkan warna.
  • Akhir sekali, melupakan saluran alfa akan menghilangkan ketelusan apabila beralih antara RGB dan RGBA atau #RRGGBBAA.

HEX vs RGB vs HSL vs CMYK: Format Manakah yang Perlu Digunakan

Setiap format warna sesuai untuk tugasan yang berbeza.

  • HEX (#RRGGBB) adalah yang paling padat dan merupakan lalai untuk CSS dan penyerahan reka bentuk.
  • RGB (0–255 setiap saluran) paling mudah dibaca dan dimanipulasi dalam JavaScript serta mencerminkan cara skrin memancarkan cahaya secara aditif.
  • HSL (Rona, Ketepuan, Kecerahan) adalah yang terbaik untuk membina palet dan melaraskan tona secara intuitif.
  • CMYK (Sian, Magenta, Kuning, Hitam) rizab untuk cetakan, di mana warna adalah dakwat subtraktif pada kertas.

Semua format skrin berkongsi ruang sRGB yang mentakrifkan IEC 61966-2-1 dan Modul Warna CSS W3C, jadi HEX, RGB, dan HSL boleh ditukar ganti sepenuhnya; hanya CMYK memerlukan penukaran anggaran yang bergantung kepada peranti.

Frequently Asked Questions

sell

Tags

color converter hex to rgb rgb to hex hex to hsl hsl to hex color code converter hex color converter rgb color converter
verified

Data sourced from trusted institutions

All formulas verified against official standards.

W3C CSS Color Module Level 4 open_in_new IEC 61966-2-1 (sRGB) open_in_new MDN Web Docs - CSS color value open_in_new Unicode Consortium open_in_new W3C WCAG Color Contrast open_in_new