Pemilih Warna

Pilih warna dari gambar apa pun atau dari layar Anda dengan pemilih warna online gratis kami. Dapatkan kode HEX, RGB, dan HSL secara instan. 100% pribadi dan berfungsi di browser Anda.

A color picker extracts color values from images or your screen, returning HEX, RGB, and HSL codes for any pixel you click. It uses the browser's Canvas API to read pixel data from uploaded images, and the EyeDropper API (Chrome, Edge) to capture colors from anywhere on your screen. All processing happens locally -- no images or color data are transmitted.

Pilih warna dari gambar atau layar Anda tanpa unggahan apa pun

Upload an image or use the system-wide eyedropper to capture any pixel on your screen. Get HEX, RGB, and HSL instantly — all locally in your browser.

Semua format

Screen eyedropper

Gratis tanpa batas

Cara menggunakan

1
Pilih Metode
Unggah gambar atau gunakan tombol 'Pilih dari Layar'.
2
Pilih Warna
Arahkan kursor ke gambar Anda untuk melihat pratinjau, lalu klik untuk mengambil warna.
3
Salin Kode
Warna ditambahkan ke riwayat Anda. Klik untuk menyalin nilai HEX, RGB, atau HSL-nya.

Sahabat Desainer & Pengembang

Untuk Desainer

Dapatkan kode hex yang tepat dari logo merek, gambar papan suasana hati, atau foto inspiratif dengan cepat. Bangun palet warna Anda dengan presisi piksel sempurna.

Untuk Pengembang

Ekstrak nilai warna dari mockup UI (JPG atau PNG) untuk digunakan langsung di CSS atau kode aplikasi Anda. Dapatkan nilai RGB untuk pengembangan asli atau HEX untuk penataan gaya web.

Understanding Digital Color Picking

Bagaimana warna digital bekerja

Digital displays reproduce colors using the RGB (Red, Green, Blue) additive color model. Each pixel on a screen is composed of three subpixels -- red, green, and blue -- each of which can be set to 256 brightness levels (0-255). By combining these three channels, a standard display can produce 16.7 million colors (256^3). The color value you pick from an image or screen is the RGB triplet of that specific pixel, which can be expressed in multiple notations: HEX (#00BFA5), RGB (rgb(0, 191, 165)), or HSL (hsl(174, 100%, 37%)).

When you pick a color from an image using our tool, the browser's Canvas API reads the pixel data at the click position using getImageData(). This returns a Uint8ClampedArray containing the RGBA values (red, green, blue, alpha) of the pixel. The alpha channel (0-255) represents transparency --0 is fully transparent, 255 is fully opaque. The tool then converts the RGB values to HEX and HSL for display. For screen-wide color picking, the EyeDropper API captures a single pixel's color from anywhere on your display, including other browser tabs and desktop applications.

Color spaces matter when picking colors for different purposes. The sRGB color space is the standard for web design -- it's what browsers, CSS, and HTML use. However, many modern displays support wider color gamuts (Adobe RGB, Display P3) that can show more saturated colors than sRGB. When you pick a color from a P3-display image, the browser may report P3 values that are out of sRGB gamut. For web design, always work in sRGB to ensure consistent color across devices. For print design, consider converting to CMYK using a dedicated print color management tool.

Practical color picking workflows

Designers use color pickers in several workflows: extracting brand colors from a logo image, building a color palette from a photograph, matching colors between a design mockup and a live website, and capturing inspiration colors from anywhere on screen. The EyeDropper API is particularly powerful for the last use case -- you can pick a color from a design in Figma, a color from a website in another tab, or even a color from a desktop application, without taking a screenshot first.

Saat membangun palet warna dari gambar, pilih 3-5 warna yang mewakili nada dominan. Mulailah dengan warna yang paling umum, lalu tambahkan warna aksen yang melengkapi. Hindari memilih terlalu banyak warna — palet yang lebih kecil lebih mudah dikelola dan terlihat lebih kohesif. Gunakan alat generator palet kami untuk mengekstrak warna secara otomatis.

Memahami Kode Warna

HEX (Heksadesimal)

Contoh: #00BFA5. Format paling umum untuk warna web. Kode enam digit yang mewakili campuran Merah, Hijau, dan Biru.

RGB (Merah, Hijau, Biru)

Contoh: rgb(0, 191, 165). Mendefinisikan intensitas komponen cahaya merah, hijau, dan biru (0-255).

HSL (Rona, Saturasi, Kecerahan)

Contoh: hsl(174, 100%, 37%). Lebih intuitif bagi manusia. Rona adalah jenis warna, Saturasi adalah intensitas, dan Kecerahan adalah kecerahan.

Bagaimana ini dibandingkan dengan pemilih warna lain?

Perbandingan langsung alat pemilih warna populer.

Fitur	NovaTools	ImageColorPicker.com
Pick from image	Canvas API
Pick from screen	EyeDropper API
HEX + RGB + HSL output	All three	HEX only
Riwayat warna	Tak terbatas
Privasi (tanpa unggah)	100% lokal	Uploads image
Berfungsi offline

Most online color pickers require uploading your image to their server. Our tool reads pixel data directly from the Canvas API in your browser -- your images never leave your device. The EyeDropper API enables screen-wide color capture, which server-based tools cannot offer.

Pertanyaan yang sering diajukan

Apakah gambar saya diunggah ke server?

Tidak. Privasi Anda terjamin. Semua pemrosesan terjadi sepenuhnya di dalam browser web Anda. Gambar Anda tidak pernah meninggalkan perangkat Anda, dan kami tidak pernah melihat atau menyimpannya.

Apa itu tombol 'Pilih Warna dari Layar'?

Fitur ini menggunakan API EyeDropper bawaan browser Anda (Chrome/Edge/Opera). Ini memungkinkan Anda memilih warna dari aplikasi atau jendela mana pun di seluruh layar Anda, bukan hanya dari gambar di browser.

Apa perbedaan antara HEX, RGB, dan HSL?

HEX (#RRGGBB) adalah standar untuk desain web. RGB menggunakan nilai 0-255 untuk intensitas Merah, Hijau, dan Biru. HSL (Hue, Saturation, Lightness) seringkali lebih intuitif bagi manusia untuk menyesuaikan properti warna.

Browser mana yang mendukung EyeDropper API?

The EyeDropper API is currently supported in Chrome (version 95+), Edge (version 95+), and Opera (version 81+). It is not supported in Firefox or Safari as of 2026. If you are using an unsupported browser, the 'Pick from Screen' button will not appear, but you can still pick colors from uploaded images. The EyeDropper API is a W3C draft specification, so support may expand to other browsers in the future. For Firefox users, a similar feature is available through browser extensions. For Safari users, the built-in Digital Color Meter utility (in Applications > Utilities) provides similar system-wide color picking.

Bisakah saya memilih beberapa warna dan menyimpan riwayat?

Yes. Every color you pick is automatically added to your color history, which appears below the main color display. Each history entry shows the color swatch, HEX value, RGB value, and HSL value, with individual copy buttons for each format. You can pick an unlimited number of colors in a single session. The history persists until you refresh or close the page — it is not saved to local storage or transmitted to any server. This is useful for building a color palette from a single image or capturing multiple colors from different parts of your screen.

Bagaimana cara menyalin nilai warna?

Click any color value (HEX, RGB, or HSL) in the display or history section to copy it to your clipboard. The copied value is formatted as a CSS-ready string: `#00BFA5` for HEX, `rgb(0, 191, 165)` for RGB, or `hsl(174, 100%, 37%)` for HSL. You can paste it directly into your CSS, SCSS, Tailwind config, design tool, or code editor. The tool uses the Clipboard API for reliable copying across all modern browsers. A visual confirmation (checkmark or tooltip) appears when the value is copied successfully.

Bisakah saya menggunakan alat ini untuk memilih warna dari situs web?

Yes, using the 'Pick from Screen' feature in supported browsers (Chrome, Edge, Opera). Navigate to the website you want to pick colors from, then click the 'Pick from Screen' button in our tool. The browser will minimize our tool and let you pick any pixel visible on your screen, including pixels from other browser tabs, desktop applications, or the operating system UI. This is perfect for matching brand colors, extracting a website's color scheme, or capturing a color from a design mockup in Figma or Sketch.

Seberapa akurat nilai warnanya?

The tool reads exact pixel values from the image or screen using the browser's native color pipeline. For uploaded images, the accuracy is perfect — the tool reads the raw RGB values from the image file. For screen picking, the accuracy depends on your display's color profile and calibration. Most modern displays use the sRGB color space, which matches the tool's output format. If your display uses a wider gamut (e.g., Display P3 on modern Macs), the picked color may not exactly match the original source color, but the difference is usually imperceptible for design purposes.

Privasi Anda Adalah Prioritas Kami

Alat ini berjalan sepenuhnya di browser Anda. File Anda tidak diunggah, disimpan, atau dianalisis.

Kami tidak mengunggah, menyimpan, atau menganalisis file Anda.
Semua yang Anda proses tetap di perangkat Anda.
Tidak ada pemrosesan sisi server, penyimpanan cloud, atau analisis.

Bahkan jika koneksi internet Anda terputus, file Anda tetap aman.

Anda mungkin juga suka

Jelajahi topik ini

Semua alat dalam kategori iniAlat Warna Panduan untuk topik iniDesain & aksesibilitas

Pemeriksa Kontras

Periksa kontras warna untuk WCAG.

Generator Palet

Buat palet warna yang indah.

Konverter HEX ↔ RGB ↔ HSL

Konversikan warna antara format HEX, RGB, dan HSL. Pratinjau langsung, preset cepat, salin nilai siap CSS. 100% sisi klien, tanpa unggahan.