Dark Mode Color Palette & CSS Dark Theme Generator

Quick actions

My tasks

Your team

Recent activity

System status

Integrations

Primary Palette

Primary

Best used for primary elements like buttons, links, and other primary elements.

#aca674

AAA - 8.46

#b4af82

AAA - 9.39

#bcb78f

AAA - 10.3

#c4c09d

AAA - 11.37

#ccc9ab

AAA - 12.51

#d5d2b9

AAA - 13.74

Surface Palettes

Surface

Best used for surface elements like cards, backgrounds, and other surface elements.

#121212

AAA - 18.73

#252525

AAA - 15.32

#393939

AAA - 11.54

#4f4f4f

AAA - 8.19

#666

AA - 5.74

#7d7d7d

Fail - 4.11

Tonal Surface

A tonal surface variant, best used for surface elements like cards, backgrounds, and other surface elements.

#1f1e1b

AAA - 16.66

#32312e

AAA - 13

#454442

AAA - 9.72

#5a5957

AA - 6.99

#706f6d

AA - 5.01

#868583

Fail - 3.68

Semantic Palettes

Success

Use for things that went right: confirmations, success messages, positive badges.

#7dff95

AAA - 16.6

#9dffac

AAA - 17.33

#b8ffc1

AAA - 18.11

Warning

Use when something needs attention soon: cautions, upcoming issues, soft alerts.

#ffbc5e

AAA - 12.6

#ffca83

AAA - 14.02

#ffd8a4

AAA - 15.61

Danger

Use when something is broken or destructive: errors, critical alerts, delete actions.

#ff8080

AAA - 8.65

#ff9b99

AAA - 10.4

#ffb5b2

AAA - 12.5

Info

Use to highlight helpful extras: tips, hints, general info banners.

#87d1ff

AAA - 12.59

#a1dbff

AAA - 14.09

#b9e4ff

AAA - 15.6

Build your perfect dark theme instantly

Quickly implement a cohesive and accessible dark mode that gives your users a stunning and comfortable viewing experience. This tool helps you manage all your custom theme variables in one place and instantly generates a ready-to-use code block for your project.

How does it work?

Simply define a few of your core brand colors. Our engine will intelligently calculate a full suite of accessible dark theme colors, including various surface, text, and accent shades. The tool then generates a complete, ready-to-use code block of CSS custom properties and SCSS variables. Just copy the code into your project to activate your new theme.

AI-generated content can make mistakes, so double-check it.

Frequently asked questions

What is a dark theme generator?

It builds a complete, accessible dark color system from a few base colors — primary, surface, accent and semantic colors — and gives you ready-to-use CSS, SCSS and design-token exports for your web or app project.

Should I use pure black for dark mode?

Usually not. Very dark grey surfaces (around #121212) reduce eye strain and halation compared to pure black, especially on OLED screens, while still looking deep. The generator defaults to a balanced dark surface you can adjust.

Are the generated themes accessible?

Each palette is built for legibility, and the contrast tools let you check text-on-surface ratios and auto-nudge colors toward WCAG AA/AAA. Semantic colors (success, warning, danger, info) are generated alongside the core palette.

What is the difference between surface and surface tonal?

Surface is a neutral dark background ramp. Surface tonal mixes a hint of your primary color into the surface for subtly tinted, more branded dark backgrounds. You can preview and export either.

Which formats can I export?

CSS custom properties, SCSS, Tailwind v3 and v4, Android, Flutter, SwiftUI, .NET MAUI, JSON, YAML, CSV, Style Dictionary, Figma variables and a DESIGN.md brief — plus an image of the preview and a PDF brand kit.

Can I save or share my dark theme?

Your configuration is stored in the page URL, so you can bookmark, refresh or share it without losing your colors. Signed-in users can also save complete themes to their account.

PWA Prompt

Dashboard - Dark Theme