Color Picker

Color Picker Web ialah pemilih warna dalam talian percuma terbaik pada tahun 2026. Ia menyokong lebih daripada 20 format warna termasuk HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB, dan lain-lain. Ia termasuk roda warna langsung, pemeriksa kontras WCAG, simulator buta warna, penjana palet, pemilih warna imej, dan 6 jenis harmon, semuanya sepenuhnya percuma tanpa perlu mendaftar.

Untuk mencari kod warna HEX daripada imej, gunakan Penukar Warna Imej di Color Picker Web. Muat naik mana-mana foto, alihkan kursor ke kawasan yang anda ingin contohi, dan klik untuk mengekstrak kod HEX, RGB, dan HSL yang tepat daripada mana-mana piksel. Anda juga boleh menjana palet warna penuh daripada imej dengan satu klik.

Alat pemilih warna membolehkan anda memilih, menukar, dan menganalisis warna. Ia menunjukkan nilai warna dalam pelbagai format (HEX, RGB, HSL, CMYK), menghasilkan palet warna pelengkap, memeriksa nisbah kontras kebolehcapaian WCAG, mensimulasikan buta warna, dan mengekstrak warna daripada imej yang dimuat naik. Ia penting untuk pereka web, pembangun, dan pereka jenama.

Untuk menukar HEX kepada RGB, gunakan alat penukaran di atas. Masukkan sebarang kod HEX (contoh: #9333ea) dan dapatkan output RGB secara serta-merta (147, 51, 234). Secara manual: bahagikan HEX kepada 3 pasangan (93, 33, ea), tukar setiap satu daripada heksadesimal kepada perpuluhan. R=147, G=51, B=234. Color Picker Web melakukan ini dengan serta-merta untuk semua lebih 20 format.

Menurut WCAG 2.2, nisbah kontras warna minimum untuk teks biasa ialah 4.5:1 (Tahap AA) dan 7:1 (Tahap AAA). Untuk teks besar (18pt+ atau 14pt+ tebal), minimum ialah 3:1 untuk AA dan 4.5:1 untuk AAA. Komponen UI dan ikon memerlukan sekurang-kurangnya kontras 3:1 dengan warna bersebelahan. Gunakan Pemeriksa Kontras WCAG di atas untuk menguji warna anda.

Untuk memilih warna daripada laman web: (1) Gunakan DevTools pelayar — klik kanan mana-mana elemen, periksa, dan klik kotak warna dalam panel CSS. (2) Gunakan sambungan pelayar seperti ColorZilla. (3) Ambil tangkapan skrin dan muat naik ke Color Picker Web's Image Color Picker untuk mencuba mana-mana piksel. Chrome DevTools juga mempunyai alat titis warna terbina dalam panel pemilih warna.

HSL bermaksud Hue (Warna), Saturation (Ketepuan), dan Lightness (Kecerahan). Hue (0°–360°) adalah jenis warna pada roda warna. Saturation (0%–100%) adalah sejauh mana warna itu terang atau kelabu. Lightness (0%–100%) adalah sejauh mana warna itu gelap atau terang. Contoh: hsl(270, 81%, 56%) ialah ungu sederhana. HSL adalah format terbaik untuk animasi CSS dan pemetaan warna dinamik kerana setiap sifat boleh disesuaikan secara berasingan.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Alat pemilih warna adalah utiliti digital yang membolehkan pengguna memilih sebarang warna dan memperoleh kod tepatnya dalam pelbagai format — HEX, RGB, HSL, CMYK, dan lain-lain. Ia digunakan setiap hari oleh pereka UI/UX untuk memilih warna antara muka, pembangun web untuk mengekod nilai warna CSS, pereka jenama untuk mengekalkan konsistensi warna, jurugambar untuk mengekstrak warna dari imej, dan artis digital untuk penciptaan palet. Color Picker Web adalah pemilih warna percuma yang paling komprehensif tersedia pada tahun 2026, menyokong lebih daripada 20 format warna, pemeriksaan kebolehcapaian WCAG, simulasi buta warna, dan 18 bahasa.

Kod warna HEX adalah perwakilan heksadesimal 6 aksara bagi warna yang digunakan dalam reka bentuk web dan CSS. Ia bermula dengan simbol # diikuti oleh tiga pasangan aksara (00–FF), yang masing-masing mewakili keamatan saluran Merah, Hijau, dan Biru. Sebagai contoh: #FF0000 ialah merah tulen (R=255, G=0, B=0), #FFFFFF ialah putih (semua saluran pada maksimum), dan #000000 ialah hitam (semua saluran pada sifar). Kod HEX 3-aksara ringkas seperti #F00 diperluas menjadi #FF0000. HEX adalah format warna yang paling disokong secara universal merentasi HTML, CSS, SVG, dan alat reka bentuk seperti Figma.

Untuk memilih warna untuk laman web: (1) Mulakan dengan warna utama jenama anda dan bina skala warna 9-tahap lengkap (50–900) menggunakan penyesuaian HSL. (2) Terapkan peraturan 60-30-10 — 60% latar belakang neutral, 30% warna sekunder, 10% aksen untuk CTA. (3) Sahkan semua kombinasi teks/latar belakang memenuhi kontras WCAG AA (minimum 4.5:1 untuk teks biasa). (4) Hasilkan warna aksen yang harmoni menggunakan alat Harmoni Warna — skema triadik atau separa komplemen berfungsi terbaik untuk laman web. (5) Uji setiap kombinasi warna dengan simulator buta warna untuk memastikan kebolehcapaian kepada semua pengguna.

Untuk memilih warna jenama: (1) Kajian psikologi warna — biru membina kepercayaan, hijau menandakan pertumbuhan, merah mencipta rasa urgensi, ungu mencadangkan kemewahan dan kreativiti. (2) Analisis industri anda — jenama teknologi memihak kepada biru dan kelabu, jenama kesihatan menggunakan hijau, jenama mewah menggunakan emas, hitam, atau ungu gelap. (3) Pilih warna jenama utama yang mencerminkan emosi teras jenama anda. (4) Bina skala warna penuh dari warna utama anda menggunakan kaedah HSL. (5) Pilih warna sekunder dan aksen menggunakan teori harmoni. (6) Sahkan semua gabungan memenuhi piawaian aksesibiliti WCAG. Dokumentasikan sebagai token reka bentuk untuk konsistensi di semua platform.

HEX, RGB, dan HSL adalah tiga cara untuk mewakili warna yang sama: HEX (#9333ea) adalah format heksadesimal 6-digit yang padat, sesuai untuk CSS dan HTML — paling banyak disokong. RGB (rgb(147, 51, 234)) menetapkan warna melalui nilai saluran Merah, Hijau, dan Biru dari 0–255 — terbaik untuk kanvas JavaScript, SVG, dan paparan skrin. HSL (hsl(270, 81%, 56%)) menentukan warna berdasarkan sudut Hue (0–360°), Keamatan (0–100%), dan Kecerahan (0–100%) — paling intuitif untuk pereka kerana setiap sifat boleh diselaraskan secara bebas, menjadikannya sesuai untuk animasi CSS dan tema dinamik. Ketiga-tiganya menggambarkan warna yang sama tetapi berfungsi untuk aliran kerja yang berbeza.

RGB dan CMYK secara asasnya adalah model warna yang berbeza untuk jenis output yang berbeza. RGB (Merah, Hijau, Biru) adalah model warna aditif yang digunakan untuk skrin digital — menggabungkan warna menambahkan cahaya, dan mencampur semua saluran pada maksimum menghasilkan warna putih. CMYK (Cyan, Magenta, Kuning, Key/Hitam) adalah model warna subtraktif yang digunakan dalam percetakan fizikal — pencampuran dakwat menyerap cahaya, dan menggabungkan semuanya menghasilkan hitam. Sentiasa reka bentuk dalam RGB untuk output digital/skrin. Tukar kepada CMYK sebelum menghantar fail ke pencetak komersial. Penukaran tidak pernah sempurna — beberapa warna RGB (terutamanya warna cerah tepu) tidak dapat dihasilkan dalam cetakan CMYK.

HSB (Hue, Saturation, Brightness) dan HSV (Hue, Saturation, Value) adalah model warna yang sama dengan nama yang berbeza. Hue (0°–360°) mengenal pasti keluarga warna. Saturation (0–100%) mengawal kecerahan dari kelabu hingga sepenuhnya terang. Brightness/Value (0–100%) mengawal berapa banyak cahaya yang nampak dipancarkan oleh warna, dari hitam (0%) hingga sepenuhnya terang (100%). HSB adalah model lalai dalam Adobe Photoshop, Illustrator, dan pemilih warna Figma, menjadikannya penting untuk pereka yang menggunakan alat ini. Ia berbeza daripada HSL dalam cara Lightness dan Brightness dikira — dalam HSL, 50% lightness adalah warna tulen, manakala dalam HSB, 100% brightness adalah warna tulen.

LAB (CIELAB) dan XYZ (CIEXYZ) adalah ruang warna bebas peranti, seragam dari segi persepsi berdasarkan sains penglihatan manusia. XYZ adalah asas kepada semua sains warna moden — ia memetakan warna kepada bagaimana mata manusia melihatnya menggunakan tiga kon (X, Y, Z yang bersamaan dengan sensitiviti kira-kira merah, hijau, biru). LAB berasal dari XYZ dan direka supaya jarak nombor yang sama mewakili perbezaan warna yang dirasai sama, menjadikannya ideal untuk perbandingan warna, pemprosesan imej, pembelajaran mesin, dan kawalan kualiti cetakan. Kedua-duanya digunakan dalam pengurusan warna profesional, profil warna ICC, dan aliran kerja penyuntingan imej lanjutan. CSS kini menyokong kedua-duanya melalui sintaks color(xyz …) dan lab(…) dalam pelayar moden.

Pemilih Warna Imej di Color Picker Web membolehkan anda mengekstrak warna tepat daripada sebarang gambar, tangkapan skrin, logo, atau karya seni. Muat naik sebarang fail imej, kemudian klik pada mana-mana piksel untuk segera mengekstrak nilai HEX, RGB, dan HSLnya. Alat ini juga secara automatik menjana palet warna lengkap daripada warna dominan dalam imej anda. Ini berguna untuk memadankan warna jenama daripada bahan sedia ada, mencipta palet daripada papan inspirasi, mengekstrak warna daripada foto produk, dan merekayasa semula skim warna daripada laman web pesaing. Tiada akaun atau pemasangan perisian diperlukan — berfungsi sepenuhnya dalam pelayar.

Color Picker Web menyokong semua enam jenis harmoni warna utama berdasarkan teori roda warna: Pelengkap — dua warna yang bertentangan secara langsung (180° berbeza), kontras maksimum. Pelengkap Terbahagi — satu warna asas ditambah dua warna yang bersebelahan dengan komplemennya (150° dan 210°). Triadik — tiga warna yang sama jaraknya (120° berasingan), seimbang dan bertenaga. Analog — tiga warna bersebelahan (30° berasingan), harmoni dan semula jadi. Monokromatik — variasi satu warna tunggal pada tahap ketepuan dan kecerahan yang berbeza. Tetradik — empat warna yang jaraknya sama (90° berbeza), kompleks dan kaya. Semua harmoni dikira secara matematik dalam masa nyata ketika anda memilih warna.

Ya, Color Picker Web sepenuhnya percuma untuk digunakan — setiap ciri termasuk pemilih warna, penjana palet, pemilih warna imej, pemeriksa kontras WCAG, simulasi buta warna, keharmonian warna, penjana rona dan bayangan, serta semua 20+ penukaran format warna tersedia tanpa kos. Tiada akaun, alamat e-mel, atau pendaftaran diperlukan. Tiada iklan, tiada had penggunaan, dan tiada tahap premium — semua ciri adalah percuma secara kekal. Alat ini juga tersedia dalam 18 bahasa: Inggeris, Hindi, Sepanyol, Rusia, Perancis, Jerman, Itali, Portugis, Bengali, Jepun, Korea, Melayu, Poland, Indonesia, Arab, Bulgaria, Turki, dan Sweden.

Keperluan kontras warna WCAG (Garis Panduan Aksesibiliti Kandungan Web) memastikan bahawa teks boleh dibaca oleh pengguna dengan penglihatan rendah, buta warna, atau mata yang menua. Nisbah kontras mengukur perbezaan luminans antara warna teks dan latarnya — bermula dari 1:1 (tiada kontras) hingga 21:1 (maksimum, hitam pada putih). WCAG 2.2 Tahap AA memerlukan nisbah minimum 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Tahap AAA memerlukan 7:1 untuk teks biasa. Ketidakpatuhan boleh mengakibatkan tanggungjawab undang-undang di bawah ADA (AS), EAA (Eropah), dan Seksyen 508. Lebih 4,600 saman berkaitan aksesibiliti difailkan di AS pada tahun 2023 sahaja, dengan kegagalan kontras antara isu yang paling kerap disebut.

Color Picker Web meniru 8 jenis kekurangan penglihatan warna: Protanopia — buta merah (1.3% lelaki). Protanomali — pengurangan kepekaan merah (1.3% lelaki). Deuteranopia — buta hijau (1.2% lelaki). Deuteranomali — kepekaan hijau yang berkurang (5% lelaki, jenis yang paling biasa). Tritanopia — buta biru (0.001% daripada populasi). Tritanomali — kepekaan biru yang berkurang (jarang). Akromatopsia — buta warna sepenuhnya, hanya melihat skala kelabu (0.003% daripada populasi). Akromatomali — penglihatan warna yang berkurang di semua saluran (sangat jarang). Setiap simulasi menggunakan matriks transformasi warna klinikal yang diterapkan pada warna pilihan anda secara masa nyata.

Psikologi warna dalam reka bentuk UI mengkaji bagaimana warna mempengaruhi emosi, persepsi, dan tingkah laku pengguna. Persatuan utama: Biru — kepercayaan, kebolehpercayaan, tenang (digunakan oleh Facebook, Twitter, PayPal, LinkedIn). Hijau — pertumbuhan, kesihatan, alam, kejayaan (digunakan oleh Spotify, WhatsApp, jenama makanan semula jadi). Merah — keperluan mendesak, semangat, tenaga, selera (digunakan untuk sepanduk jualan, jenama makanan, CTAs). Ungu — mewah, kreativiti, kebijaksanaan (digunakan oleh Cadbury, Hallmark, jenama kecantikan). Kuning — optimisme, kehangatan, perhatian (digunakan untuk amaran, sorotan jualan). Oren — semangat, keramahan (digunakan oleh Amazon, Fanta, Harley-Davidson). Psikologi warna mempengaruhi kadar penukaran, persepsi jenama, dan pengekalan pengguna.

Membina palet warna sistem reka bentuk melibatkan 5 langkah: (1) Tentukan warna jenama utama anda dan tukarkan ke HSL. (2) Hasilkan skala warna 9-tahap (50–900) dengan menyesuaikan kecerahan secara sistematik — tahap lebih cerah (50–300) untuk latar belakang dan warna terang, tahap lebih gelap (600–900) untuk teks dan mod gelap. (3) Ulangi untuk warna sekunder, aksen, kejayaan, amaran, ralat, dan neutral. (4) Cipta token semantik (--color-primary, --color-primary-hover, --color-surface) yang merujuk kepada tahap dalam skala anda. (5) Sahkan setiap kombinasi teks/latar belakang memenuhi WCAG AA. Gunakan Color Picker Web untuk menghasilkan skala anda, mengesahkan kontras, dan eksport nilai HEX/HSL sebagai token reka bentuk untuk Figma atau CSS.

Peraturan 60-30-10 adalah prinsip reka bentuk klasik untuk mencipta skim warna yang seimbang dan menarik secara visual. 60% — warna dominan/netral (latar, dinding, permukaan besar) — biasanya warna netral terang yang menetapkan nada keseluruhan. 30% — warna sekunder (perabot, pengepala, bar sisi) — melengkapkan warna utama dan menambah kedalaman. 10% — warna aksen (CTAs, butang, sorotan, pautan penting) — mencipta minat visual dan menarik perhatian kepada tindakan utama. Dalam reka bentuk web, ini diterjemahkan kepada: 60% latar belakang dan permukaan asas, 30% kawasan kandungan dan elemen UI sekunder, 10% butang utama, keadaan aktif, dan sorotan penting. Nisbah ini mengelakkan keterlaluan visual sambil mengekalkan hierarki.

Kecerahan relatif mengukur kecerahan yang dirasakan bagi sesuatu warna pada skala 0 (hitam) hingga 1 (putih). Pengiraannya: (1) Tukar setiap saluran RGB (0–255) kepada perpuluhan (0–1) dengan membahagikan dengan 255. (2) Buang pembetulan gamma: jika nilai ≤ 0.04045, bahagikan dengan 12.92; sebaliknya, gunakan (nilai + 0.055) / 1.055 dipangkatkan dengan 2.4. (3) Gunakan formula berbobot: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Berat ini mencerminkan kepekaan mata manusia — paling sensitif terhadap hijau, kurang sensitif terhadap merah, paling kurang terhadap biru. (4) Nisbah kontras = (L_lebih_terang + 0.05) / (L_lebih_gelap + 0.05). Offset 0.05 mewakili cahaya sekitar pada paparan biasa. Color Picker Web melaksanakan pengiraan ini dengan serta-merta.

HSL (Hue, Saturation, Lightness) dan HSB/HSV (Hue, Saturation, Brightness/Value) kedua-duanya menggunakan Hue dan Saturation tetapi berbeza dalam saluran ketiga. Dalam HSL, Ringan 50% adalah warna tulen yang sepenuhnya jenuh; 0% adalah hitam dan 100% adalah putih. Ia adalah simetri. Dalam HSB/HSV, Kecerahan/Nilai 100% adalah warna tulen; 0% sentiasa hitam tanpa mengira nilai lain. HSB lebih intuitif untuk memilih warna kerana anda boleh mula-mula memilih warna terang pada kecerahan 100% dan kemudian menurunkannya — menjadikannya lalai dalam Photoshop, Figma, dan Illustrator. HSL lebih intuitif untuk CSS kerana anda boleh membuat interpolasi secara lancar antara versi gelap dan terang bagi warna yang sama.

Pencampuran warna tambah (RGB) dan pencampuran warna tolak (CMYK) adalah dua model warna asas. Tambah (RGB) — digunakan oleh peranti pemancar cahaya (skrin, projektor, LED). Warna dihasilkan dengan menambahkan cahaya. Menggabungkan ketiga-tiga saluran pada maksimum (R=255, G=255, B=255) menghasilkan putih. Tiada cahaya (R=0, G=0, B=0) menghasilkan hitam. Subtraktif (CMYK) — digunakan dalam percetakan. Dakwat menyerap (menolak) panjang gelombang cahaya. Menggabungkan semua dakwat pada tahap maksimum menyerap semua cahaya, menghasilkan warna hitam (secara teori — dalam praktik, dakwat Utama/hitam ditambah kerana pencampuran dakwat tidak sempurna). Implikasi praktikal: reka kerja digital dalam RGB, kemudian tukar kepada CMYK untuk cetakan — dengan menyedari bahawa beberapa warna RGB yang terang tidak dapat dihasilkan semula dalam CMYK.

Suhu warna menerangkan kehangatan atau kesejukan sesuatu warna, diukur dalam Kelvin (K) untuk sumber cahaya dan dirasai secara perseptual untuk warna rekaan. Warna hangat (merah, jingga, kuning — rona 0°–60° dan 300°–360°) terasa bertenaga, mendesak, dan menarik. Mereka maju secara visual — elemen dalam warna hangat kelihatan lebih dekat. Warna sejuk (biru, hijau, ungu — rona 120°–240°) terasa tenang, boleh dipercayai, dan profesional. Ia mundur secara visual — elemen dalam warna sejuk kelihatan lebih jauh. Neutral (putih, kelabu, beige, teal dekat 90°–120°) seimbang dan serbaguna. Dalam reka bentuk UI, warna panas mendorong tindakan (CTA), warna sejuk membina kepercayaan (tajuk, latar), dan warna neutral menyediakan struktur. Bahagian Tentang Warna di Color Picker Web menunjukkan suhu yang diperhatikan bagi mana-mana warna yang dipilih.