ColorMateCreate Palette

Color palette

Minimal Green 10 Color Palette

MinimalGreenDashboard
Primary#313CD8
Accent#D66151
Surface#ECEBF4
Text#121221
Support#CE8287

Palette Quality

Checked against practical UI roles before publishing.

96 / 100 · Usable

Review notes: Primary / Text contrast is 2.44:1 Support / Surface contrast is 2.48:1

CSS Variables

:root {
  --primary: #313CD8;
  --accent: #D66151;
  --surface: #ECEBF4;
  --text: #121221;
  --support: #CE8287;
}

Tailwind Config

colors: {
  primary: "#313CD8",
  accent: "#D66151",
  surface: "#ECEBF4",
  text: "#121221",
  support: "#CE8287",
}

UI Example

Product dashboardLive
Revenue$48k
Activation72%
Retention41%

Contrast Checks

Text / Surface15.66:1
Primary / Surface6.41:1
Accent / Text5.01:1

SCSS Variables

$primary: #313CD8;
$accent: #D66151;
$surface: #ECEBF4;
$text: #121221;
$support: #CE8287;

Social Card SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
  <rect width="1200" height="630" fill="#fbfaf7"/>
  <rect x="48" y="48" width="1104" height="534" rx="28" fill="#fff" stroke="#e8e2d6"/>
  <rect x="80" y="130" width="170" height="290" rx="14" fill="#313CD8"/><text x="100" y="455" fill="#171717" font-size="20" font-weight="700">#313CD8</text><text x="100" y="485" fill="#666" font-size="15">Primary</text><rect x="270" y="130" width="170" height="290" rx="14" fill="#D66151"/><text x="290" y="455" fill="#171717" font-size="20" font-weight="700">#D66151</text><text x="290" y="485" fill="#666" font-size="15">Accent</text><rect x="460" y="130" width="170" height="290" rx="14" fill="#ECEBF4"/><text x="480" y="455" fill="#171717" font-size="20" font-weight="700">#ECEBF4</text><text x="480" y="485" fill="#666" font-size="15">Surface</text><rect x="650" y="130" width="170" height="290" rx="14" fill="#121221"/><text x="670" y="455" fill="#171717" font-size="20" font-weight="700">#121221</text><text x="670" y="485" fill="#666" font-size="15">Text</text><rect x="840" y="130" width="170" height="290" rx="14" fill="#CE8287"/><text x="860" y="455" fill="#171717" font-size="20" font-weight="700">#CE8287</text><text x="860" y="485" fill="#666" font-size="15">Support</text>
  <text x="80" y="92" fill="#171717" font-family="Inter, Arial, sans-serif" font-size="34" font-weight="800">Minimal Green 10</text>
  <text x="80" y="540" fill="#666" font-family="Inter, Arial, sans-serif" font-size="20">ColorMate by stndworks · Minimal / Green / Dashboard</text>
</svg>

Similar Palettes

Japanese MinimalJapanese / Minimal / EditorialSaaS GrowthSaaS / Dashboard / CalmPastel Green 4Pastel / Green / WellnessMinimal ProductMinimal / Modern / DashboardPastel Green 11Pastel / Green / WellnessPastel Green 5Pastel / Green / WellnessPastel Green 12Pastel / Green / WellnessPastel Green 6Pastel / Green / WellnessPastel Green 7Pastel / Green / Wellness

FAQ

What is Minimal Green 10 best used for?

Minimal Green 10 works well for minimal, green, dashboard interfaces, websites, dashboards, and brand explorations.

Can I export this palette to CSS or Tailwind?

Yes. ColorMate provides CSS variables, Tailwind config, SCSS variables, and shareable palette artwork.

Is this palette checked for readability?

The detail page includes contrast ratios for practical UI pairings so you can review readability before using the colors.