Aarunya AppsAarunya Apps

Monochromatic Blue Palette

Cohesive · Professional · Polished

A single-hue blue palette using only variations in lightness and saturation. Monochromatic schemes create a cohesive, polished look with guaranteed colour harmony. This blue range works from nearly-white backgrounds to near-black dark mode.

SwatchNameHex
Blue 50#F0F7FF
Blue 200#C2DEFC
Blue 400#5CA8F5
Blue 600#1A73E8
Blue 800#0D47A1
Blue 950#0A2550

Best For

SaaSFinanceCorporateHealthcare

Build an entire UI using just these tones — backgrounds (lightest), borders (light), interactive elements (mid), text (dark). Add one complementary accent colour for CTAs.

CSS Custom Properties

:root {
  --mono-blue-100: #F0F7FF;
  --mono-blue-200: #C2DEFC;
  --mono-blue-300: #5CA8F5;
  --mono-blue-400: #1A73E8;
  --mono-blue-500: #0D47A1;
  --mono-blue-600: #0A2550;
}

Tailwind CSS Config

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        "mono-blue": {
    "100": "#F0F7FF",
    "200": "#C2DEFC",
    "300": "#5CA8F5",
    "400": "#1A73E8",
    "500": "#0D47A1",
    "600": "#0A2550",
        },
      },
    },
  },
}

Generate a custom palette

Enter any seed colour and generate complementary, analogous, triadic, and monochromatic palettes. Export as CSS variables, Tailwind config, or JSON.

Open Color Palette Generator

Frequently Asked Questions

What hex codes are in the Monochromatic Blue Palette?

The Monochromatic Blue Palette includes: Blue 50 (#F0F7FF), Blue 200 (#C2DEFC), Blue 400 (#5CA8F5), Blue 600 (#1A73E8), Blue 800 (#0D47A1), Blue 950 (#0A2550).

What is the mood of the Monochromatic Blue Palette?

Monochromatic Blue Palette evokes: Cohesive · Professional · Polished. A single-hue blue palette using only variations in lightness and saturation. Monochromatic schemes create a cohesive, polished look with guaranteed colour harmony. This blue range works from nearly-white backgrounds to near-black dark mode.

What industries use the Monochromatic Blue Palette?

The Monochromatic Blue Palette is popular in: SaaS, Finance, Corporate, Healthcare. Build an entire UI using just these tones — backgrounds (lightest), borders (light), interactive elements (mid), text (dark). Add one complementary accent colour for CTAs.

What colours pair well with this palette?

This palette pairs well with: white, orange-accent. Build an entire UI using just these tones — backgrounds (lightest), borders (light), interactive elements (mid), text (dark). Add one complementary accent colour for CTAs.