Penukar Warna

Alat dalam talian percuma convert between color formats instantly. free online color converter supports hex, rgb, hsl, hsv, cmyk, and named colors. get color previews and accessibility info. no sign-up.

Adakah kalkulator ini membantu anda?

Apakah Penukar Warna?

Penukar warna menukar warna antara model warna HEX, RGB dan HSL. Penting untuk pembangun web dan pereka yang bekerja dengan CSS, alatan reka bentuk dan teori warna. Termasuk pratonton warna secara langsung.

Bila Menggunakan Kalkulator Ini

Apabila menukar spesifikasi warna pereka Figma atau Sketch kepada nilai yang serasi CSS
Apabila membina sistem reka bentuk dan memerlukan nilai warna yang konsisten merentasi format HEX, RGB, dan HSL
Apabila mencipta palet atau skema warna menggunakan HSL untuk mengekalkan saturasi dan lightness yang konsisten
Apabila memeriksa kontras warna untuk pematuhan kebolehcapaian (standard WCAG AA/AAA)
Apabila menukar nilai warisan warna dalam kod sedia ada kepada format lain untuk konsistensi
Apabila melaras masalah warna CSS dengan mengesahkan seperti apa warna sebenarnya merentasi format

Langkah:

Enter a color value in HEX, RGB, or HSL format.
Select the input format using the tabs.
View converted values in all three formats.
See the live color preview swatch.

Rumus

HEX → RGB: split #RRGGBB into decimal values RGB → HSL: normalize RGB → find hue/saturation/lightness HSL → RGB: convert via chroma formulas HEX: #RRGGBB (0-255 each) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

Kes Penggunaan

Converting CSS color values
Creating color schemes from base colors
Matching design system colors
Understanding color relationships through HSL

Faedah Utama

Convert colors between 3 formats instantly
See live color preview
Copy any format with one click
Free no sign-up needed

Tips Pro

Use HSL for intuitive color adjustments
Use HEX for CSS compatibility
Use the preview to verify your color before using it
Keep a reference of common color conversions

Kesilapan Biasa

Forgetting the # prefix for HEX colors
Using RGB values above 255 or below 0
Confusing HSL hue range (0-360) with RGB (0-255)

Istilah Utama

HEX: Hexadecimal RGB representation
RGB: Red Green Blue color model
HSL: Hue Saturation Lightness model
Color space: Mathematical model for colors

Konsep Berkaitan

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

Contoh

Input: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Input: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.

Mentafsir Hasil

Penukar menyokong tiga format warna dan memaparkan nilai yang sama dalam ketiganya secara serentak. HEX (#RRGGBB) adalah format paling biasa dalam pembangunan web. RGB (rgb(R, G, B)) memberikan kawalan langsung ke atas saluran warna individu. HSL (hsl(H, S%, L%)) paling intuitif untuk manusia — hue menentukan keluarga warna, saturasi mengawal intensiti, dan lightness mengawal kecerahan. Penunjuk nisbah kontras menunjukkan sama ada kombinasi warna latar depan/latar belakang anda memenuhi standard kebolehcapaian WCAG. Pematuhan AA memerlukan sekurang-kurangnya 4.5:1 untuk teks normal dan 3:1 untuk teks besar.