Palet jenama berasaskan OKLCH. Pilih warna asas, dapatkan setiap harmoni klasik ditambah skala tonal 50–950. Kunci, re-roll, eksport sebagai CSS / Tailwind v4 / SCSS / JSON.
Palet jenama berasaskan OKLCH. Pilih warna asas, dapatkan setiap harmoni klasik ditambah skala tonal 50–950. Kunci, re-roll, eksport sebagai CSS / Tailwind v4 / SCSS / JSON.
Color Picker & Converter kami adalah untuk satu warna pada satu masa — pilih / tukar / salin. Alat ini adalah untuk palet: letakkan warna asas, dapatkan keseluruhan sistem sedia jenama (harmoni + skala tonal) dalam satu kali. Ia ibarat perbezaan antara membeli sehelai baju dan mendapat satu almari pakaian.
HSL menjarakkan hue secara tidak sekata (kuning pada 60° terasa lebih cerah daripada biru pada 240° walaupun pada nilai kecerahan yang sama). Palet triadic dalam HSL mempunyai satu swatch yang jelas lebih cerah atau lebih malap daripada yang lain. OKLCH adalah seragam dari segi persepsi — tiga swatch pada kecerahan OKLCH yang sama kelihatan sama terang. Itulah sebabnya setiap sistem reka bentuk moden (Apple HI, Tailwind v4, IBM Carbon) beralih ke OKLCH untuk harmoni dan skala.
Warna jenama anda tidak pernah meninggalkan peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa sebarang operasi.
Petua: tekan Space untuk re-roll swatch yang tidak dikunci.
Harmoni OKLCH, skala tonal, lock-and-reroll, eksport design-token — dan beberapa sentuhan kecil yang menjadikannya seronok untuk digunakan.
Complementary, analogous, triadic, tetradic, split-complementary, monochromatic — semua dikira dalam OKLCH supaya palet triadic dengan tiga warna terang bertepu kekal sama terang. Tiada kekeruhan HSL.
Letakkan warna jenama anda, dapatkan skala tonal berbentuk Tailwind 50, 100, 200, … 900, 950 yang dijana dengan menggerakkan kecerahan merentas lengkung OKLCH. Chroma dimampatkan pada hujung supaya warna kekal dalam gamut sRGB.
Pin mana-mana swatch (ikon kunci) dan tekan Re-roll (atau hanya tekan Space) untuk mengubah selebihnya dalam harmoni yang dipilih. Ulang dengan pantas, kekalkan apa yang anda suka.
CSS custom properties (--brand-500), blok @theme Tailwind v4, SCSS map, dan JSON design tokens sedia untuk Style Dictionary / Figma Tokens. Tambah jalur swatch PNG 1200×200.
Setiap swatch memaparkan nisbah kontras WCAG-nya berbanding hitam atau putih yang lebih baik, dengan lencana AA / AAA / fail. Kesan masalah kebolehcapaian sebelum ia dihantar.
Setiap bait kekal pada peranti anda. Matematik OKLCH, penjanaan harmoni, derivasi skala, eksport PNG semuanya berjalan sebagai JavaScript secara setempat. Buka DevTools → Network dan sahkan sifar permintaan keluar.
Empat langkah daripada satu warna asas kepada palet lengkap yang sedia design-token.
Klik kotak warna, tampal HEX, atau tekan Asas rawak untuk inspirasi. Alat akan memusatkan keseluruhan palet pada warna ini — kedua-dua swatch harmoni dan skala tonal 11 langkah.
Lalai adalah Analogous — tiga warna dalam lingkungan 30° dari asas, sesuai untuk palet jenama yang tenang. Complementary untuk aksen kontras. Triadic / Tetradic untuk jenama editorial / lincah. Monochromatic untuk sistem tonal satu hue. Semua dikira dalam OKLCH supaya kekal sama terang.
Klik ikon kunci pada mana-mana swatch yang anda mahu kekalkan, kemudian tekan Space (atau tekan Re-roll) untuk mengubah selebihnya dalam harmoni. Ulang dengan pantas. Edit mana-mana swatch terus dengan mengklik medan HEX-nya jika anda mahu menetapkan nilai yang tepat.
Salin output CSS (custom properties), Tailwind v4 (blok @theme), SCSS map, atau JSON design tokens. Atau tekan Muat turun PNG untuk jalur swatch 1200×200 yang sedia untuk dimasukkan ke dalam taklimat reka bentuk.
Empat senario biasa di mana alat palet OKLCH yang mengutamakan privasi mengatasi penalaan kod hex secara manual dalam Figma.
Anda mempunyai warna jenama, anda perlukan sistem di sekelilingnya. Letakkan HEX, pilih Analogous, re-roll sehingga dua warna sokongan serasi, kunci ketiga-tiganya. Tukar ke paparan Skala Tonal, salin blok Tailwind @theme, tampal ke app.css projek baharu. Jumlah masa: 5 minit.
Tailwind indigo lalai bukan jenama anda. Jenama anda adalah #5B3FCD. Letakkannya, dapatkan skala tonal 11 langkah yang sempurna mencerminkan jarak Tailwind. Salin blok @theme — setiap bg-brand-500 / text-brand-700 berfungsi terus.
Setiap swatch memaparkan nisbah kontras WCAG + lencana AA/AAA. Periksa bahawa brand-500 mencapai AA berbanding putih, dan brand-100 kekal boleh dibaca sebagai tint latar belakang dengan teks brand-900. Betulkan swatch bermasalah dengan re-roll setiap satu secara berasingan.
Agensi / syarikat berbilang jenama menyelenggara N sistem reka bentuk selari, masing-masing dengan bentuk yang sama tetapi hue jenama yang berbeza. Gunakan aliran kerja harmoni + skala tonal yang sama untuk setiap jenama, eksport setiap satu sebagai token JSON, masukkan ke dalam Style Dictionary. Bentuk yang konsisten, identiti yang berbeza.
Warna jenama anda tidak pernah meninggalkan peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar semasa sebarang operasi.
canvas setempat; imej swatch dijana sepenuhnya dalam memori pelayar dan dimuat turun sebagai Blob — tiada apa-apa melintasi rangkaian.
Bacaan terpilih tentang palet OKLCH, sistem warna jenama, dan design tokens.
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 adalah untuk satu warna pada satu masa — pilih / tukar / salin. Alat ini adalah untuk palet: letakkan warna asas, dapatkan keseluruhan sistem sedia jenama (harmoni + skala tonal) dalam satu kali. Ia ibarat perbezaan antara membeli sehelai baju dan mendapat satu almari pakaian.
HSL menjarakkan hue secara tidak sekata (kuning pada 60° terasa lebih cerah daripada biru pada 240° walaupun pada nilai kecerahan yang sama). Palet triadic dalam HSL mempunyai satu swatch yang jelas lebih cerah atau lebih malap daripada yang lain. OKLCH adalah seragam dari segi persepsi — tiga swatch pada kecerahan OKLCH yang sama kelihatan sama terang. Itulah sebabnya setiap sistem reka bentuk moden (Apple HI, Tailwind v4, IBM Carbon) beralih ke OKLCH untuk harmoni dan skala.
Ia adalah skala warna jenama gaya Tailwind: indigo-50 (paling cerah), indigo-100, indigo-200, … indigo-900, indigo-950 (paling gelap). Letakkan warna jenama anda dan alat akan menjana kesemua 11 langkah secara automatik dengan menggerakkan kecerahan OKLCH merentas lengkung tetap. Hasilnya adalah pengganti drop-in untuk mana-mana token palet Tailwind, dalam hue jenama anda.
Klik ikon kunci di kiri atas mana-mana swatch — ia akan kekal. Kemudian tekan Re-roll atau tekan Space untuk mengubah setiap swatch yang tidak dikunci dalam harmoni yang dipilih. Beginilah cara anda mencari palet yang hebat: pin warna jenama yang anda telah komited, terokai variasi di sekelilingnya.
Tidak. Matematik OKLCH, penjanaan harmoni, derivasi skala tonal, pengiraan nisbah kontras, eksport PNG, setiap salinan papan keratan — semuanya berjalan dalam JavaScript pada peranti anda. Buka DevTools → Network dan anda akan melihat sifar permintaan keluar. Tampal warna jenama, design tokens dalaman, palet terkunci NDA — tiada apa-apa yang meninggalkan komputer riba anda.