Szemantikus UI Paletta

Adjon meg egy márkaszínt, kapjon elsődleges / másodlagos / siker / figyelmeztetés / veszély színeket — exportálva Tailwind konfigurációként és CSS változókként.

Elsődleges márkaszin

2F6FED · L 57%

Elsődleges

Automatikusan származtatva, a márka fényereje és színintenzitása megmarad

#010101Alap

#010101Világos

#000101Sötét

Másodlagos

Automatikusan származtatva, a márka fényereje és színintenzitása megmarad

#010101Alap

#010101Világos

#010101Sötét

Siker

Automatikusan származtatva, a márka fényereje és színintenzitása megmarad

#000101Alap

#010101Világos

#000100Sötét

Figyelmeztetés

Automatikusan származtatva, a márka fényereje és színintenzitása megmarad

#010100Alap

#010101Világos

#010100Sötét

Veszély

Automatikusan származtatva, a márka fényereje és színintenzitása megmarad

#010101Alap

#010101Világos

#010000Sötét

Kód exportálása

// 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",
      },
      },
    },
  },
};

Hogyan építs szemantikai rendszert – egy elsődleges, öt szerep.

Add meg a márka színét, kapd meg az öt szemantikai készletet, amire minden felületnek szüksége van, kódként exportálva.

01
Elsődleges szín megadása
Illeszd be a márkád HEX színét; a szemantikai színek ennek fényességét és kromatikus jellegét öröklik.
02
Szerepek olvasása
A siker zöld árnyalati tartományba kerül, a figyelmeztetés borostyánba, a veszély pirosba – az árnyalat szemantikus, a jelleg a márkához marad.
03
Exportálás
Másold ki Tailwind konfigurációként / CSS változóként / JSON-ként, közvetlenül a tervezési rendszeredbe.

Szemantikus paletta GYIK

Három gyakori kérdés, amikor integrálod a tervezési rendszeredbe.

A szemantikus árnyalatok rögzítettek?: Az árnyalatok a szemantikus tartományokhoz kötődnek (siker=zöld, figyelmeztetés=borostyán, veszély=piros), míg a fényerő és a króm a márka elsődleges színéből öröklődik – minden márka a saját karakterét generálja.
Miért három lépés van minden szemantikus színhez?: Az alap az alapértelmezett állapothoz, a világos a hoverhez/árnyalatokhoz, a sötét az aktív állapothoz/szegélyekhez; a szöveg színe automatikusan fekete vagy fehér a kontraszt alapján kerül kiválasztásra.
Az exportált kód használható éles környezetben?: A Tailwind blokk közvetlenül beilleszthető a tailwind.config fájlba; a CSS változó blokk bármely keretrendszerrel vagy sima CSS-sel működik.

A szemantikus paletta után

Nyisd meg a táblázat szerkesztőjét és teszteld le valós felületként.

OKLCH Szerkesztő

Az L / C / H hangolása az észlelésileg egységes OKLCH térben, élő előnézettel és oklch() / HEX / RGB kimenettel.

Árnyalatskála-generátor

Bármely szín 11 lépésből álló, OKLCH-ben észlelésileg egyenletes design-rendszer skálává alakítható, minden lépésben WCAG kontraszt, exportálás Tailwind/CSS/SCSS/JSON formátumba.

Kontrasztellenőrző

WCAG 2.1 kontraszt validálás bármilyen előtér és háttér szín között.

AI Paletta Stúdió

Írjon le egy jelenetet vagy hangulatot egy mondatban – kapjon egy ötszereplős palettát indoklással.