Palet UI Semantik

Masukkan satu warna merek, dapatkan primer / sekunder / sukses / peringatan / bahaya — diekspor sebagai konfigurasi Tailwind dan variabel CSS.

Primer merek

2F6FED · L 57%

Primer

Diperoleh secara otomatis, lightness dan chroma merek dipertahankan

#010101Dasar

#010101Terang

#000101Gelap

Sekunder

Diperoleh secara otomatis, lightness dan chroma merek dipertahankan

#010101Dasar

#010101Terang

#010101Gelap

Sukses

Diperoleh secara otomatis, lightness dan chroma merek dipertahankan

#000101Dasar

#010101Terang

#000100Gelap

Peringatan

Diperoleh secara otomatis, lightness dan chroma merek dipertahankan

#010100Dasar

#010101Terang

#010100Gelap

Bahaya

Diperoleh secara otomatis, lightness dan chroma merek dipertahankan

#010101Dasar

#010101Terang

#010000Gelap

Ekspor kode

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      primary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#000101",
        foreground: "#ffffff",
      },
      secondary: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010101",
        foreground: "#ffffff",
      },
      success: {
        DEFAULT: "#000101",
        light: "#010101",
        dark: "#000100",
        foreground: "#ffffff",
      },
      warning: {
        DEFAULT: "#010100",
        light: "#010101",
        dark: "#010100",
        foreground: "#ffffff",
      },
      danger: {
        DEFAULT: "#010101",
        light: "#010101",
        dark: "#010000",
        foreground: "#ffffff",
      },
      },
    },
  },
};

Cara membangun sistem semantik - satu primer, lima peran.

Masukkan warna merek, dapatkan lima set semantik yang dibutuhkan setiap antarmuka, diekspor sebagai kode.

01
Masukkan primer
Tempelkan HEX merek Anda; warna semantik mewarisi karakter kecerahan dan kromatisitasnya.
02
Baca peran
Sukses berada di rentang rona hijau, Peringatan di amber, Bahaya di merah - rona bersifat semantik, karakter tetap sesuai merek.
03
Ekspor
Salin sebagai konfigurasi Tailwind / variabel CSS / JSON, langsung ke sistem desain Anda.

FAQ Palet Semantik

Tiga pertanyaan umum saat menghubungkan ke sistem desain.

Apakah rona semantik tetap?: Rona berlabuh pada rentang semantik (sukses=hijau, peringatan=kuning keemasan, bahaya=merah) sementara kecerahan dan kroma mewarisi warna utama merek - setiap merek menghasilkan karakter tersendiri.
Mengapa ada tiga langkah per warna semantik?: Dasar untuk keadaan default, terang untuk hover/tint, gelap untuk aktif/batas; warna teks dipilih secara otomatis hitam atau putih berdasarkan kontras.
Apakah kode yang diekspor siap produksi?: Blok Tailwind dapat langsung ditempel ke tailwind.config; blok variabel CSS bekerja dengan framework apa pun atau CSS biasa.

Setelah palet semantik

Buka editor papan dan coba sebagai antarmuka nyata.

Editor OKLCH

Sesuaikan L / C / H di ruang OKLCH yang seragam secara persepsi dengan pratinjau langsung dan output oklch() / HEX / RGB.

Pembuat Skala

Ubah warna apa pun menjadi skala sistem desain 11-langkah, merata secara persepsi di OKLCH, kontras WCAG per langkah, ekspor ke Tailwind/CSS/SCSS/JSON.

Pemeriksa Kontras

Validasi kontras WCAG 2.1 antara warna latar depan dan latar belakang apa pun.

Studio Palet AI

Deskripsikan adegan atau suasana dalam satu kalimat — dapatkan palet lima peran dengan alasan.

// tailwind.config.js module.exports = { theme: { extend: { colors: { primary: { DEFAULT: "#010101", light: "#010101", dark: "#000101", foreground: "#ffffff", }, secondary: { DEFAULT: "#010101", light: "#010101", dark: "#010101", foreground: "#ffffff", }, success: { DEFAULT: "#000101", light: "#010101", dark: "#000100", foreground: "#ffffff", }, warning: { DEFAULT: "#010100", light: "#010101", dark: "#010100", foreground: "#ffffff", }, danger: { DEFAULT: "#010101", light: "#010101", dark: "#010000", foreground: "#ffffff", }, }, }, }, };

Cara membangun sistem semantik - satu primer, lima peran.

Masukkan warna merek, dapatkan lima set semantik yang dibutuhkan setiap antarmuka, diekspor sebagai kode.

Masukkan primer

Tempelkan HEX merek Anda; warna semantik mewarisi karakter kecerahan dan kromatisitasnya.

Baca peran

Sukses berada di rentang rona hijau, Peringatan di amber, Bahaya di merah - rona bersifat semantik, karakter tetap sesuai merek.

Ekspor

Salin sebagai konfigurasi Tailwind / variabel CSS / JSON, langsung ke sistem desain Anda.

FAQ Palet Semantik

Tiga pertanyaan umum saat menghubungkan ke sistem desain.

Apakah rona semantik tetap?

Rona berlabuh pada rentang semantik (sukses=hijau, peringatan=kuning keemasan, bahaya=merah) sementara kecerahan dan kroma mewarisi warna utama merek - setiap merek menghasilkan karakter tersendiri.

Mengapa ada tiga langkah per warna semantik?

Dasar untuk keadaan default, terang untuk hover/tint, gelap untuk aktif/batas; warna teks dipilih secara otomatis hitam atau putih berdasarkan kontras.

Apakah kode yang diekspor siap produksi?

Blok Tailwind dapat langsung ditempel ke tailwind.config; blok variabel CSS bekerja dengan framework apa pun atau CSS biasa.