Langsung ke konten
Tutorial

Konversi warna antara hex, RGB, dan HSL dengan satu panggilan API

| 5 min read

Kirim warna sebagai HEX, RGB, atau HSL dan dapatkan ketiga representasi kembali dalam satu POST. Bangun token desain, normalkan input CMS, dan buat skala tema tanpa pustaka warna.

Code editor generating color design tokens from a brand color
Photo by Safar Safarov on Unsplash

Matematika konversi warna adalah jenis kode yang Anda tulis sekali, salah halus, dan salin di antaranya proyek selamanya. Hex ke RGB sangatlah mudah; RGB ke HSL adalah tempat bug yang menyimpang satu derajat hidup. Titik akhir ini mengambil warna dalam salah satu dari tiga format dan mengembalikan ketiganya sekaligus Anda berhenti membawa fungsi konversi.

Permintaan

Responsnya memberi Anda string hex, an {`{ r, g, b }`} objek, dan an {`{ h, s, l }`} objek bersama-sama:

Format masukan tidak masalah. Lulus rgb(62, 201, 151) atau string HSL dan Anda mendapatkan tiga representasi yang sama kembali. Hex bekerja dengan atau tanpa #:

Hasilkan skala token desain dari satu warna merek

HSL adalah format yang layak untuk dikembangkan. Karena memisahkan rona dari kecerahan, Anda dapat menghasilkan a skala rona dan rona penuh dengan menjaga rona dan saturasi tetap stabil dan meningkatkan nilai kecerahan. Ubah hex merek Anda menjadi HSL satu kali, lalu lakukan yang ringan untuk menghasilkan skala 50 hingga 900 a kebutuhan sistem desain:

Jalankan itu dalam langkah pembuatan dan tulis hasilnya ke file variabel CSS. Anda mendapatkan koordinasi palet dari satu warna sumber, dan mengubah warna merek akan meregenerasi keseluruhan skala:

Butuh palet penuh, bukan hanya satu konversi? Itu /v1/color/palette titik akhir mengambil satu warna dasar dan mengembalikan serangkaian corak dan warna pelengkap yang terkoordinasi, sehingga Anda dapat menentukan tema warna merek tanpa harus memilih masing-masing contoh dengan tangan.

Normalisasikan warna yang ditempelkan ke CMS

Editor konten menempelkan warna dalam format apa pun yang diekspor alat desain mereka: hex dari Figma, dan rgb() dari alat tangkapan layar, HSL dari cuplikan CSS. Jalankan setiap nilai yang ditempel melalui titik akhir untuk menyimpan dan menyimpan hex yang dinormalisasi. Kode rendering Anda kemudian berhubungan dengan salah satunya format, dan editor terus menempelkan apa pun yang diinginkan.

Dimana itu cocok

Untuk matematika UI interaktif di browser, fungsi lokal dapat digunakan. API mendapatkan tempatnya di build langkah-langkah, backend, dan bahasa apa pun tanpa paket warna solid: satu panggilan HTTP menggantikan a ketergantungan. Konversi warna adalah salah satu dari sekitar 200 titik akhir tujuan tunggal di botoi, semuanya tertinggal satu kunci dengan 5 req/mnt gratis.

Coba konversi di taman bermain interaktif, jelajahi dokumen API lengkap, atau menghubungkan server MCP untuk mengkonversi warna langsung dari Claude atau Cursor.

FAQ

Format warna apa yang diterima dan dikembalikan oleh API?
Kirim warna sebagai HEX, RGB, atau HSL dan responsnya mengembalikan ketiga representasi sekaligus. String hex berfungsi dengan atau tanpa awalan # di depannya. Satu panggilan memberi Anda string hex, objek {r, g, b}, dan objek {h, s, l}, jadi Anda tidak pernah menulis matematika konversi dengan tangan.
Mengapa mengonversi warna melalui API dan bukan di browser?
Untuk perhitungan UI satu kali, lakukan di browser. API mendapatkan tempatnya dalam langkah-langkah pembangunan dan backend: menghasilkan token desain pada waktu pembangunan, menormalkan warna yang ditempelkan ke CMS, atau memproduksi aset bertema di sisi server di mana Anda tidak ingin mengirimkan perpustakaan warna. Ini adalah panggilan HTTP tunggal dari bahasa apa pun, termasuk bahasa tanpa paket warna yang bagus.
Bisakah saya menghasilkan palet penuh, tidak hanya mengonversi satu warna?
Ya. Titik akhir warna/palet mengambil warna dasar dan mengembalikan serangkaian corak dan warna pelengkap yang terkoordinasi. Gunakan color/convert ketika Anda memiliki warna yang dikenal dan membutuhkan representasi lainnya, dan color/palette ketika Anda memiliki satu warna merek dan memerlukan skala untuk membangun tema di sekitarnya.
Bagaimana nilai-nilai HSL membantu dalam menentukan tema?
HSL memisahkan rona dari saturasi dan kecerahan, sehingga Anda dapat membuat skala rona dan bayangan dengan menjaga rona dan saturasi tetap stabil dan meningkatkan kecerahan. Itu jauh lebih mudah untuk dipikirkan daripada menyenggol tiga saluran RGB. Konversikan hex merek Anda ke HSL satu kali, lalu hasilkan skala 50 hingga 900 dengan menjalankan nilai lightness.
Apakah API warna gratis untuk digunakan?
Ya. Konversi warna berada di belakang tingkat gratis yang sama dengan botoi lainnya: 5 permintaan per menit tanpa memerlukan kunci API, dan batas lebih tinggi pada paket berbayar. Ini adalah salah satu dari sekitar 200 titik akhir tujuan tunggal dalam satu kunci.

Mulai membangun dengan botoi

150+ endpoint API untuk pencarian, pemrosesan teks, pembuatan gambar, dan utilitas developer. Paket gratis, tanpa kartu kredit.