Semantisch UI-palet

Voer één merkkleur in, ontvang primary / secondary / success / warning / danger — geëxporteerd als Tailwind-configuratie en CSS-variabelen.

Merk primair

2F6FED · L 57%

Primair

Automatisch afgeleid, helderheid en chroma van het merk behouden

#010101Basiskleur

#010101Licht

#000101Donker

Secundair

Automatisch afgeleid, helderheid en chroma van het merk behouden

#010101Basiskleur

#010101Licht

#010101Donker

Succes

Automatisch afgeleid, helderheid en chroma van het merk behouden

#000101Basiskleur

#010101Licht

#000100Donker

Waarschuwing

Automatisch afgeleid, helderheid en chroma van het merk behouden

#010100Basiskleur

#010101Licht

#010100Donker

Gevaar

Automatisch afgeleid, helderheid en chroma van het merk behouden

#010101Basiskleur

#010101Licht

#010000Donker

Code exporteren

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

Hoe bouw je een semantisch systeem – één primaire, vijf rollen.

Voer een merkkleur in, ontvang de vijf semantische sets die elke interface nodig heeft, geëxporteerd als code.

01
Voer primaire in
Plak je merk-HEX; semantische kleuren nemen de helderheid en chroma-karakter ervan over.
02
Lees de rollen
Succes valt in het groene kleurtoonbereik, Waarschuwing in amber, Gevaar in rood – kleurtoon is semantisch, karakter blijft merkgebonden.
03
Exporteren
Kopieer als Tailwind-configuratie / CSS-variabelen / JSON, rechtstreeks in uw ontwerpsysteem.

Semantisch palet FAQ

Drie veelgestelde vragen bij de integratie in een ontwerpsysteem.

Zijn semantische kleuren vast?: Kleuren zijn verankerd aan semantische bereiken (succes=groen, waarschuwing=amber, gevaar=rood), terwijl lichtheid en chroma overgenomen worden van de merkprimair – elk merk genereert zijn eigen karakter.
Waarom drie stappen per semantische kleur?: Basis voor de standaardtoestand, licht voor hover/tinten, donker voor actief/randen; de tekstkleur wordt automatisch gekozen als zwart of wit op basis van contrast.
Is de geëxporteerde code productieklara?: Het Tailwind-blok plakt rechtstreeks in tailwind.config; het CSS-variabelen-blok werkt met elk framework of gewone CSS.

Na het semantische palet

Open de bordeditor en gebruik het als echte interface.

OKLCH-editor

Stel L / C / H af in het perceptueel uniforme OKLCH-ruimte met live preview en oklch() / HEX / RGB-uitvoer.

Tintengenerator

Iedere kleur omzetten naar een 11-traps schaal voor ontwerpsystemen, perceptueel gelijkmatig in OKLCH, WCAG-kleurcontrast per stap, exporteren naar Tailwind/CSS/SCSS/JSON.

Contrastcontroleur

WCAG 2.1 contrastvalidatie tussen elke voorgrond- en achtergrondkleur.

AI Paletstudio

Beschrijf een scène of stemming in één zin — ontvang een palet met vijf rollen met onderbouwing.

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

Hoe bouw je een semantisch systeem – één primaire, vijf rollen.

Voer een merkkleur in, ontvang de vijf semantische sets die elke interface nodig heeft, geëxporteerd als code.

Voer primaire in

Plak je merk-HEX; semantische kleuren nemen de helderheid en chroma-karakter ervan over.

Lees de rollen

Succes valt in het groene kleurtoonbereik, Waarschuwing in amber, Gevaar in rood – kleurtoon is semantisch, karakter blijft merkgebonden.

Exporteren

Kopieer als Tailwind-configuratie / CSS-variabelen / JSON, rechtstreeks in uw ontwerpsysteem.

Semantisch palet FAQ

Drie veelgestelde vragen bij de integratie in een ontwerpsysteem.

Zijn semantische kleuren vast?

Kleuren zijn verankerd aan semantische bereiken (succes=groen, waarschuwing=amber, gevaar=rood), terwijl lichtheid en chroma overgenomen worden van de merkprimair – elk merk genereert zijn eigen karakter.

Waarom drie stappen per semantische kleur?

Basis voor de standaardtoestand, licht voor hover/tinten, donker voor actief/randen; de tekstkleur wordt automatisch gekozen als zwart of wit op basis van contrast.

Is de geëxporteerde code productieklara?

Het Tailwind-blok plakt rechtstreeks in tailwind.config; het CSS-variabelen-blok werkt met elk framework of gewone CSS.