Harbour Blue · Mini 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.

Theme theme

Global theme colour (navigation bar, selected tab)

#313dedrgb(49, 61, 237)hsl(236.2, 83.9%, 56.1%)

Button btn

Primary button background

#313dedrgb(49, 61, 237)hsl(236.2, 83.9%, 56.1%)

Button disabled btnDisabled

Disabled button background

#cbcef6rgb(203, 206, 246)hsl(235.8, 70.5%, 88%)

Page background bg

Page backgroundColor

#f9f9fargb(249, 249, 250)hsl(240, 9.1%, 97.8%)

Card card

Product and content card background

#f4f4f6rgb(244, 244, 246)hsl(240, 10%, 96.1%)

Text main textMain

Headings and body copy

#232429rgb(35, 36, 41)hsl(230, 7.9%, 14.9%)

Text sub textSub

Captions and timestamps

#6a6b7crgb(106, 107, 124)hsl(236.7, 7.8%, 45.1%)

Divider divider

List dividers

#e3e4e8rgb(227, 228, 232)hsl(228, 9.8%, 90%)

Price price

Prices and promotional figures, usually warm

#e34829rgb(227, 72, 41)hsl(10, 76.9%, 52.5%)

Tag tag

Tag and coupon backgrounds

#d7ce5brgb(215, 206, 91)hsl(55.6, 60.8%, 60%)

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 forComfortable for interfaces people look at for long stretches — it is the easiest colour on the eye.

Use with careCool blue feels reserved in promotions that need heat and momentum.

Pairs withWhite and pale grey are the safe pairing; a warm accent (orange or yellow) makes calls to action pop.

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

Mini App Store•••

Sample product500 g · pack

$39.90

Sample product1 kg · pack

$68.00

Buy nowSold out

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.72:1	AAA	AAA
Body text / card background	14.1:1	AAA	AAA
Brand colour / page background	6.61:1	AAA	AAA

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-theme: #313ded; /* Theme */
  --color-btn: #313ded; /* Button */
  --color-btnDisabled: #cbcef6; /* Button disabled */
  --color-bg: #f9f9fa; /* Page background */
  --color-card: #f4f4f6; /* Card */
  --color-textMain: #232429; /* Text main */
  --color-textSub: #6a6b7c; /* Text sub */
  --color-divider: #e3e4e8; /* Divider */
  --color-price: #e34829; /* Price */
  --color-tag: #d7ce5b; /* Tag */
}

SCSS variables

$color-theme: #313ded; // Theme
$color-btn: #313ded; // Button
$color-btnDisabled: #cbcef6; // Button disabled
$color-bg: #f9f9fa; // Page background
$color-card: #f4f4f6; // Card
$color-textMain: #232429; // Text main
$color-textSub: #6a6b7c; // Text sub
$color-divider: #e3e4e8; // Divider
$color-price: #e34829; // Price
$color-tag: #d7ce5b; // Tag

Tailwind config

// tailwind.config.js: Harbour Blue
module.exports = {
  theme: {
    extend: {
      colors: {
        'theme': '#313ded',
        'btn': '#313ded',
        'btnDisabled': '#cbcef6',
        'bg': '#f9f9fa',
        'card': '#f4f4f6',
        'textMain': '#232429',
        'textSub': '#6a6b7c',
        'divider': '#e3e4e8',
        'price': '#e34829',
        'tag': '#d7ce5b',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Harbour Blue",
  "platform": "miniapp",
  "tags": [
    "Business",
    "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": "Comfortable for interfaces people look at for long stretches — it is the easiest colour on the eye.",
    "avoid": "Cool blue feels reserved in promotions that need heat and momentum.",
    "pair": "White and pale grey are the safe pairing; a warm accent (orange or yellow) makes calls to action pop."
  },
  "roles": {
    "theme": "#313ded",
    "btn": "#313ded",
    "btnDisabled": "#cbcef6",
    "bg": "#f9f9fa",
    "card": "#f4f4f6",
    "textMain": "#232429",
    "textSub": "#6a6b7c",
    "divider": "#e3e4e8",
    "price": "#e34829",
    "tag": "#d7ce5b"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.72,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 6.61,
      "level": "AAA"
    },
    "textOnSurface": {
      "ratio": 14.1,
      "level": "AAA"
    }
  }
}

More palettes on this platform