Palet brand berbasis OKLCH. Pilih warna dasar, dapatkan setiap harmoni klasik plus skala tonal 50–950. Kunci, re-roll, ekspor sebagai CSS / Tailwind v4 / SCSS / JSON.
Palet brand berbasis OKLCH. Pilih warna dasar, dapatkan setiap harmoni klasik plus skala tonal 50–950. Kunci, re-roll, ekspor sebagai CSS / Tailwind v4 / SCSS / JSON.
Color Picker & Converter kami untuk satu warna dalam satu waktu — pilih / konversi / salin. Alat ini untuk palet: masukkan warna dasar, dapatkan seluruh sistem siap-brand (harmoni + skala tonal) dalam sekali jalan. Bedanya seperti membeli satu kemeja dengan mendapatkan satu lemari pakaian.
HSL menempatkan hue secara tidak merata (kuning di 60° terasa jauh lebih cerah daripada biru di 240° meskipun dengan nilai lightness yang sama). Palet triadik dalam HSL memiliki satu swatch yang terasa lebih cerah atau lebih kusam daripada lainnya. OKLCH seragam secara persepsi — tiga swatch dengan lightness OKLCH yang sama terlihat sama cerahnya. Itulah mengapa setiap sistem desain modern (Apple HI, Tailwind v4, IBM Carbon) beralih ke OKLCH untuk harmoni dan skala.
Warna brand Anda tidak pernah meninggalkan perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama operasi apa pun.
Tip: tekan Spasi untuk me-re-roll swatch yang tidak terkunci.
Harmoni OKLCH, skala tonal, lock-and-reroll, ekspor token desain — plus beberapa sentuhan kecil yang membuatnya benar-benar menyenangkan untuk digunakan.
Komplementer, analog, triadik, tetradik, split-komplementer, monokromatik — semuanya dihitung dalam OKLCH sehingga palet triadik dengan tiga warna cerah jenuh tetap memiliki kecerahan yang merata. Tanpa kekeruhan HSL.
Masukkan warna brand Anda, dapatkan skala tonal berbentuk Tailwind 50, 100, 200, … 900, 950 yang dihasilkan dengan menyusuri lightness pada kurva OKLCH. Chroma dikompresi pada ekstrem agar warna tetap berada dalam gamut sRGB.
Sematkan swatch mana pun (ikon kunci) dan tekan Re-roll (atau cukup tekan Spasi) untuk memvariasikan sisanya dalam harmoni yang dipilih. Iterasi cepat, simpan yang Anda sukai.
Custom properties CSS (--brand-500), blok @theme Tailwind v4, map SCSS, dan token desain JSON siap untuk Style Dictionary / Figma Tokens. Plus strip swatch PNG 1200×200.
Setiap swatch menampilkan rasio kontras WCAG-nya terhadap pilihan terbaik antara hitam atau putih, dengan badge AA / AAA / fail. Temukan masalah aksesibilitas sebelum dirilis.
Setiap byte tetap di perangkat Anda. Matematika OKLCH, pembuatan harmoni, derivasi skala, ekspor PNG — semuanya berjalan sebagai JavaScript secara lokal. Buka DevTools → Network dan verifikasi nol permintaan keluar.
Empat langkah dari satu warna dasar menuju palet lengkap yang siap menjadi token desain.
Klik kotak warna, tempel HEX, atau tekan Dasar acak untuk inspirasi. Alat ini memusatkan seluruh palet pada warna ini — baik swatch harmoni maupun skala tonal 11 langkah.
Default adalah Analog — tiga warna dalam jarak 30° dari dasar, sempurna untuk palet brand yang tenang. Komplementer untuk aksen kontras. Triadik / Tetradik untuk brand editorial / playful. Monokromatik untuk sistem tonal satu hue. Semuanya dihitung dalam OKLCH agar tetap memiliki kecerahan yang merata.
Klik ikon kunci pada swatch yang ingin Anda pertahankan, lalu tekan Spasi (atau klik Re-roll) untuk memvariasikan sisanya dalam harmoni. Iterasi cepat. Edit swatch mana pun secara langsung dengan mengeklik bidang HEX-nya jika Anda ingin nilai yang tepat.
Salin output CSS (custom properties), Tailwind v4 (blok @theme), map SCSS, atau token desain JSON. Atau tekan Unduh PNG untuk strip swatch 1200×200 yang siap dimasukkan ke dalam brief desain.
Empat skenario umum di mana alat palet OKLCH yang mengutamakan privasi mengalahkan penyetelan kode hex secara manual di Figma.
Anda punya warna brand, Anda butuh sistem di sekitarnya. Masukkan HEX, pilih Analog, re-roll sampai dua warna pendukung terasa pas, kunci ketiganya. Beralih ke tampilan Skala Tonal, salin blok @theme Tailwind, tempel ke app.css proyek baru. Total waktu: 5 menit.
indigo default Tailwind bukan brand Anda. Brand Anda adalah #5B3FCD. Masukkan, dapatkan skala tonal 11 langkah yang persis mencerminkan spasi Tailwind. Salin blok @theme — setiap bg-brand-500 / text-brand-700 langsung berfungsi.
Setiap swatch menampilkan rasio kontras WCAG + badge AA/AAA. Periksa bahwa brand-500 mencapai AA terhadap putih, dan brand-100 tetap terbaca sebagai latar tint dengan teks brand-900. Perbaiki swatch bermasalah dengan me-re-roll-nya satu per satu.
Agensi / perusahaan multi-brand memelihara N sistem desain paralel, masing-masing dengan bentuk yang sama tetapi hue brand yang berbeda. Gunakan alur kerja harmoni + skala tonal yang sama untuk setiap brand, ekspor masing-masing sebagai token JSON, masukkan ke Style Dictionary. Bentuk konsisten, identitas berbeda.
Warna brand Anda tidak pernah meninggalkan perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar selama operasi apa pun.
canvas lokal; gambar swatch dihasilkan sepenuhnya di memori browser dan diunduh sebagai Blob — tidak ada yang melewati jaringan.
Bacaan pilihan tentang palet OKLCH, sistem warna brand, dan token desain.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Color Picker & Converter kami untuk satu warna dalam satu waktu — pilih / konversi / salin. Alat ini untuk palet: masukkan warna dasar, dapatkan seluruh sistem siap-brand (harmoni + skala tonal) dalam sekali jalan. Bedanya seperti membeli satu kemeja dengan mendapatkan satu lemari pakaian.
HSL menempatkan hue secara tidak merata (kuning di 60° terasa jauh lebih cerah daripada biru di 240° meskipun dengan nilai lightness yang sama). Palet triadik dalam HSL memiliki satu swatch yang terasa lebih cerah atau lebih kusam daripada lainnya. OKLCH seragam secara persepsi — tiga swatch dengan lightness OKLCH yang sama terlihat sama cerahnya. Itulah mengapa setiap sistem desain modern (Apple HI, Tailwind v4, IBM Carbon) beralih ke OKLCH untuk harmoni dan skala.
Ini adalah skala warna brand gaya Tailwind: indigo-50 (paling terang), indigo-100, indigo-200, … indigo-900, indigo-950 (paling gelap). Masukkan warna brand Anda dan alat ini akan menghasilkan semua 11 langkah secara otomatis dengan menyusuri lightness OKLCH pada kurva tetap. Hasilnya adalah pengganti drop-in untuk token palet Tailwind apa pun, dalam hue brand Anda.
Klik ikon kunci di pojok kiri atas swatch mana pun — swatch akan tetap di tempatnya. Lalu tekan Re-roll atau Spasi untuk memvariasikan setiap swatch yang tidak terkunci dalam harmoni yang dipilih. Begitulah cara menemukan palet yang bagus: sematkan warna brand yang sudah Anda pilih, lalu jelajahi variasi di sekitarnya.
Tidak. Matematika OKLCH, pembuatan harmoni, derivasi skala tonal, perhitungan rasio kontras, ekspor PNG, setiap salinan ke clipboard — semuanya berjalan di JavaScript pada perangkat Anda. Buka DevTools → Network dan Anda akan melihat nol permintaan keluar. Tempel warna brand Anda, token desain internal, palet yang dikunci NDA — tidak ada yang meninggalkan laptop Anda.