Alat Online Gratis

Alat CSS dan Warna Gratis

Pilih warna, buat gradien, cek kontras, dan hasilkan CSS bayangan/sudut membulat — semuanya di satu tempat. Tidak ada yang diunggah, semuanya ter-update seketika saat kamu mengetik.

Klik kotak warna untuk memilih warna

HEX

RGB

HSL

Tulis di kolom mana pun — HEX, RGB, atau HSL — dua lainnya dan kotak warna otomatis ter-update.

Tonton: gradien CSS, konverter warna, pemeriksa kontras, dan bayangan dalam satu alat

Apa yang bisa kamu lakukan dengan alat CSS dan warna ini

Konverter Warna — ketik warna dalam HEX, RGB, atau HSL dan dua lainnya langsung ikut berubah. Berguna saat desain memberimu satu format sementara kodemu butuh yang lain.
Gradien — pilih warnamu, pilih Linear atau Radial, atur sudutnya, lalu klik Salin CSS.
Pengecek Kontras — pilih warna teks dan warna latar untuk melihat apakah orang dengan penglihatan lemah juga bisa membacanya (WCAG AA dan AAA).
Bayangan dan Sudut — geser pergeseran, blur, dan spread untuk membuat box-shadow, dan bulatkan sudutnya dengan border-radius. Salin CSS-nya kalau sudah cocok.

Istilah warna yang dijelaskan

HEX — warna yang ditulis sebagai # diikuti enam huruf atau angka, misalnya #2563EB.
RGB — warna yang sama sebagai tiga angka untuk merah, hijau, dan biru.
HSL — rona, saturasi, dan kecerahan. Lebih mudah disesuaikan dengan tangan, misalnya untuk membuat warna lebih terang.
Kontras WCAG — aturan tentang seberapa berbeda teks dan latar agar teks tetap terbaca. AA adalah tingkat yang dituju kebanyakan situs, AAA lebih ketat.

Perlu diketahui sebelum mulai

Warna sepenuhnya buram: tidak ada transparansi (alfa) dan tidak ada kode hex 8 digit.
Nilai HSL dibulatkan ke bilangan bulat, jadi saat dikonversi balik satu kanal warna bisa berbeda 1.
Lulus atau gagalnya kontras memakai warna yang tepat; rasio yang ditampilkan dibulatkan ke dua desimal, jadi 4,496 tampil sebagai 4.50:1 tetapi tidak lulus 4,5.
Gradien menerima sampai 6 warna dengan jarak merata, sebagai sudut linear atau radial melingkar.