Semantic UI Palette

Feed one brand color, get primary / secondary / success / warning / danger — exported as Tailwind config and CSS variables.

Brand primary

2F6FED · L 57%

Primary

Derived automatically, brand lightness & chroma kept

#010101Base

#010101Light

#000101Dark

Secondary

Derived automatically, brand lightness & chroma kept

#010101Base

#010101Light

#010101Dark

Success

Derived automatically, brand lightness & chroma kept

#000101Base

#010101Light

#000100Dark

Warning

Derived automatically, brand lightness & chroma kept

#010100Base

#010101Light

#010100Dark

Danger

Derived automatically, brand lightness & chroma kept

#010101Base

#010101Light

#010000Dark

Export code

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

How to build a semantic system - one primary, five roles.

Enter a brand color, get the five semantic sets every interface needs, exported as code.

01
Enter primary
Paste your brand HEX; semantic colors inherit its lightness and chroma character.
02
Read the roles
Success lands in the green hue range, Warning in amber, Danger in red - hue is semantic, character stays on-brand.
03
Export
Copy as Tailwind config / CSS variables / JSON, straight into your design system.

Semantic palette FAQ

Three frequent questions when wiring into a design system.

Are semantic hues fixed?: Hues anchor to semantic ranges (success=green, warning=amber, danger=red) while lightness and chroma inherit the brand primary - every brand generates its own character.
Why three steps per semantic color?: Base for the default state, light for hover/tints, dark for active/borders; the text color is auto-picked black or white by contrast.
Is the exported code production-ready?: The Tailwind block pastes straight into tailwind.config; the CSS variables block works with any framework or plain CSS.

After the semantic palette

Open the board editor and play it as a real interface.

OKLCH Editor

Tune L / C / H in the perceptually uniform OKLCH space with live preview and oklch() / HEX / RGB output.

Scale Generator

Any color into an 11-step design-system scale, perceptually even in OKLCH, WCAG contrast per step, export to Tailwind/CSS/SCSS/JSON.

Contrast Checker

WCAG 2.1 contrast validation between any foreground and background color.

AI Palette Studio

Describe a scene or mood in one line — get a five-role palette with rationale.

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

How to build a semantic system - one primary, five roles.

Enter a brand color, get the five semantic sets every interface needs, exported as code.

Enter primary

Paste your brand HEX; semantic colors inherit its lightness and chroma character.

Read the roles

Success lands in the green hue range, Warning in amber, Danger in red - hue is semantic, character stays on-brand.

Export

Copy as Tailwind config / CSS variables / JSON, straight into your design system.

Semantic palette FAQ

Three frequent questions when wiring into a design system.

Are semantic hues fixed?

Hues anchor to semantic ranges (success=green, warning=amber, danger=red) while lightness and chroma inherit the brand primary - every brand generates its own character.

Why three steps per semantic color?

Base for the default state, light for hover/tints, dark for active/borders; the text color is auto-picked black or white by contrast.

Is the exported code production-ready?

The Tailwind block pastes straight into tailwind.config; the CSS variables block works with any framework or plain CSS.