Penukar Format Warna menterjemah sebarang warna antara HEX, RGB, HSL, HSV, dan OKLCH. Pilih warna dengan pemilih asli, taip nilai hex, tampal sebarang rentetan warna CSS, atau laraskan slaid RGB — setiap format dikemas kini secara langsung dan masing-masing mempunyai butang Salin tersendiri.
CSS moden memberi anda berbelas-belas cara untuk menulis warna yang sama: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), ditambah varian alfa bagi setiap satu. Anda sering perlu menukar antaranya — reka bentuk Figma memberi anda OKLCH, pangkalan kod anda menggunakan HEX, dan pemboleh ubah tema anda lebih suka HSL untuk laras hover. Penukar Format Warna melakukan semua penukaran dalam satu panel. Pilih warna daripada pemilih warna asli, tampal warna sedia ada dalam sebarang sintaks, atau seret slaid RGB untuk menetapkannya. Setiap format biasa dipaparkan serentak: HEX (dengan alfa), rgb()/rgba(), hsl()/hsla(), hsv(), dan oklch() — ditambah serpihan pemboleh ubah CSS dan nilai kecerahan (luminance) yang dikira untuk matematik kontras pantas. Saluran alfa disokong sepenuhnya. Setiap format mempunyai butang Salin tersendiri untuk penggunaan satu klik, dan penghurai (parser) menerima nama warna asli dan segala yang disokong oleh CSS.
Memaparkan HEX, RGB/RGBA, HSL/HSLA, HSV, dan OKLCH serentak — pilih mana-mana format yang diperlukan oleh kod sasaran anda tanpa perlu menukar semula setiap kali.
Menerima HEX (#abc atau #aabbcc atau #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch(), dan nama warna asli. Tampal apa sahaja yang disokong CSS.
Mengendalikan format OKLCH baharu yang digunakan dalam CSS moden — ruang warna seragam secara persepsi yang semakin menjadi lalai sistem reka bentuk baharu.
Setiap output mempunyai butang Salin tersendiri. Klik untuk mendapatkan tepat format yang anda perlukan untuk kod anda, tiada pemilihan manual diperlukan.
Laraskan slaid Red/Green/Blue/Alpha untuk penalaan halus. Setiap format dikemas kini secara masa nyata semasa anda menyeret.
Ketelusan dikendalikan merentas setiap format: #RRGGBBAA, rgba(...), hsla(...). Tetapkan sekali, ditukar di mana-mana.
Figma memberi anda OKLCH atau HSL — tampal, salin persamaan HEX untuk konfigurasi Tailwind atau pemboleh ubah CSS anda tanpa meninggalkan pelayar.
Seret slaid untuk meneroka warna, catat nilai OKLCH untuk palet sistem reka bentuk yang sistematik.
Tukar warna jenama kepada bentuk HSL supaya anda dapat menggunakan hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) untuk keadaan hover.
Medan luminance memberi anda nilai mentah yang digunakan dalam pengiraan kontras WCAG — berguna untuk matematik a11y.
Tampal oklch(...) daripada fail CSS yang sedang anda baca dan lihat dengan segera warna sebenar yang dihasilkannya.
Klik ikon Color Formats dalam dock DevSuite Pro. Satu panel terbuka dengan pemilih warna, input hex, dan slaid RGB.
Gunakan pemilih warna, taip hex, atau tampal sebarang rentetan warna CSS (rgb(...), oklch(...), dll.). Warna dipratonton dengan segera.
Setiap format dipaparkan di bawah: HEX, RGB, HSL, HSV, OKLCH, pemboleh ubah CSS, dan kecerahan. Semuanya kekal segerak semasa anda melaraskan.
Seret slaid R/G/B/A untuk pelarasan halus. Sangat sesuai untuk menetapkan warna khusus yang sepadan dengan spesifikasi reka bentuk.
Klik Copy pada baris format yang anda mahu — nilai tiba di papan keratan anda dalam sintaks yang betul.
Pasang DevSuite Pro secara percuma dan buka 64+ alat pembangun untuk pelayar anda.
