Rain Mist · App palette (10 colours, ready to copy)

10 colour roles

Every colour has a defined purpose. Use the buttons on the right to copy it in any format.

Primary primary

Brand colour for primary buttons, selected states and emphasis

#4376dbrgb(67, 118, 219)hsl(219.9, 67.9%, 56.1%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#1f53b7rgb(31, 83, 183)hsl(219.5, 71%, 42%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#d0dbf1rgb(208, 219, 241)hsl(220, 54.1%, 88%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#cb67bbrgb(203, 103, 187)hsl(309.6, 49%, 60%)

Accent accent

Spot colour for badges and highlights

#ef4d2ergb(239, 77, 46)hsl(9.6, 85.8%, 55.9%)

Success success

Success toasts and completed states

#26ba64rgb(38, 186, 100)hsl(145.1, 66.1%, 43.9%)

Warning warning

Warnings and pending states

#f5aa14rgb(245, 170, 20)hsl(40, 91.8%, 52%)

Danger danger

Errors, destructive actions and failure states

#ea362argb(234, 54, 42)hsl(3.8, 82.1%, 54.1%)

Text text

Body text colour

#232529rgb(35, 37, 41)hsl(220, 7.9%, 14.9%)

Page background bg

Page base colour

#f9fafargb(249, 250, 250)hsl(180, 9.1%, 97.8%)

How to use it

Written by hand for the hue family and lightness of this palette, not assembled from a template.

The lead colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.

Good forThe most versatile lead: technology, finance, tools and enterprise services that need to feel trustworthy.

Use with careIt is so common that it can feel anonymous; support colours and typography have to do the differentiating.

Pairs withDeeper blue for depth and white for openness are the two hardest combinations to get wrong.

Hue family: Blue

What it looks like in a real interface

The same palette rendered across all three platforms — the fastest way to judge whether it works.

Live preview · switch platform

9:41

Today

FeaturedNearby

Weekend by the sea

Sample body copy, used to check how secondary text reads on a card background.

Accessibility contrast check

Calculated to WCAG 2.1. AA is the accessibility baseline, AAA the enhanced level.

Foreground / background	Ratio	Body text	Large text
Body text / page background	14.68:1	AAA	AAA
Brand colour / page background	4.14:1	AA	AA

Verify this pair in the checker →

Export to your project

Four formats, ready to paste. Or fetch them by URL from your tooling or AI agent.

CSS variables

:root {
  --color-primary: #4376db; /* Primary */
  --color-primaryDark: #1f53b7; /* Primary dark */
  --color-primaryLight: #d0dbf1; /* Primary light */
  --color-secondary: #cb67bb; /* Secondary */
  --color-accent: #ef4d2e; /* Accent */
  --color-success: #26ba64; /* Success */
  --color-warning: #f5aa14; /* Warning */
  --color-danger: #ea362a; /* Danger */
  --color-text: #232529; /* Text */
  --color-bg: #f9fafa; /* Page background */
}

SCSS variables

$color-primary: #4376db; // Primary
$color-primaryDark: #1f53b7; // Primary dark
$color-primaryLight: #d0dbf1; // Primary light
$color-secondary: #cb67bb; // Secondary
$color-accent: #ef4d2e; // Accent
$color-success: #26ba64; // Success
$color-warning: #f5aa14; // Warning
$color-danger: #ea362a; // Danger
$color-text: #232529; // Text
$color-bg: #f9fafa; // Page background

Tailwind config

// tailwind.config.js: Rain Mist
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#4376db',
        'primaryDark': '#1f53b7',
        'primaryLight': '#d0dbf1',
        'secondary': '#cb67bb',
        'accent': '#ef4d2e',
        'success': '#26ba64',
        'warning': '#f5aa14',
        'danger': '#ea362a',
        'text': '#232529',
        'bg': '#f9fafa',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Rain Mist",
  "platform": "app",
  "tags": [
    "Sunset",
    "Blue"
  ],
  "advice": {
    "family": "Blue",
    "depth": "The lead colour is light, so it works well over large areas — just keep text and borders dark enough to hold the contrast.",
    "muted": null,
    "suit": "The most versatile lead: technology, finance, tools and enterprise services that need to feel trustworthy.",
    "avoid": "It is so common that it can feel anonymous; support colours and typography have to do the differentiating.",
    "pair": "Deeper blue for depth and white for openness are the two hardest combinations to get wrong."
  },
  "roles": {
    "primary": "#4376db",
    "primaryDark": "#1f53b7",
    "primaryLight": "#d0dbf1",
    "secondary": "#cb67bb",
    "accent": "#ef4d2e",
    "success": "#26ba64",
    "warning": "#f5aa14",
    "danger": "#ea362a",
    "text": "#232529",
    "bg": "#f9fafa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.68,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 4.14,
      "level": "AA"
    }
  }
}

More palettes on this platform