Theme Generator

Keep your brand color and generate light and dark interface roles with component previews and CSS exports.

Free · Unlimited use · No account needed

Brand color

Nearest CSS name: royalblue · approximate

Change the color to update the result.

Light theme

Example interface

A place for your next idea.

Keep your brand. Make every interaction readable.

Project name

Your changes are ready.

Button state preview

Light · 13/13 passed · button text 5.17:1

Dark theme

Example interface

A place for your next idea.

Keep your brand. Make every interaction readable.

Project name

Your changes are ready.

Button state preview

Dark · 13/13 passed · button text 5.17:1

Your result

Copy or download this result for free. Saving to a workspace is optional.

Output format

:root {
  --brand: #2563EB;
  --neutral: #363B43;
  --success: #3A9742;
  --warning: #E9AB2B;
  --danger: #DB4241;
  --info: #2784D5;
  --brand-50: #F0F5FF;
  --brand-100: #E5EEFF;
  --brand-200: #C8DBFF;
  --brand-300: #9DBFFF;
  --brand-400: #699BFF;
  --brand-500: #3170F9;
  --brand-600: #114CCD;
  --brand-700: #002E9D;
  --brand-800: #001D6D;
  --brand-900: #00124E;
  --brand-950: #051434;
  --neutral-50: #F3F5F8;
  --neutral-100: #EBEEF4;
  --neutral-200: #D6DBE2;
  --neutral-300: #BABFC8;
  --neutral-400: #999EA8;
  --neutral-500: #767C85;
  --neutral-600: #565B64;
  --neutral-700: #3B3F46;
  --neutral-800: #26292F;
  --neutral-900: #191B1F;
  --neutral-950: #151618;
  --success-50: #E3FEE2;
  --success-100: #CDFDCD;
  --success-200: #ADEEAE;
  --success-300: #86D589;
  --success-400: #5DB562;
  --success-500: #34923D;
  --success-600: #066F1C;
  --success-700: #004D0F;
  --success-800: #003307;
  --success-900: #002303;
  --success-950: #071B08;
  --warning-50: #FFF4E1;
  --warning-100: #FFEBCB;
  --warning-200: #FFD48A;
  --warning-300: #EBB551;
  --warning-400: #CD9200;
  --warning-500: #A17200;
  --warning-600: #775400;
  --warning-700: #533900;
  --warning-800: #382500;
  --warning-900: #261800;
  --warning-950: #201300;
  --danger-50: #FFF2F0;
  --danger-100: #FFE8E5;
  --danger-200: #FFCDC7;
  --danger-300: #FFA29A;
  --danger-400: #FC6660;
  --danger-500: #D53C3C;
  --danger-600: #AB0E1D;
  --danger-700: #7B000E;
  --danger-800: #540006;
  --danger-900: #3B0003;
  --danger-950: #2B0808;
  --info-50: #EEF6FF;
  --info-100: #E1F0FF;
  --info-200: #BFDEFF;
  --info-300: #8BC4FF;
  --info-400: #4EA3F4;
  --info-500: #207FD0;
  --info-600: #005DA1;
  --info-700: #004072;
  --info-800: #002A4E;
  --info-900: #001C37;
  --info-950: #04172A;
}

Use the result now. Save it when you need to.

Each tool handles one color task at a time. Repeat calculations, copy values and download basic formats without creating a project or using a project slot.

Choose Save to workspace to keep a result in an existing or new project. Workspace project limits and advanced Pro features apply there.

Need a quick conversion? Open the color converter.