Ink Blue Night · App palette (10 colors, ready to copy)

10 color roles

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

Primary primary

Brand color for primary buttons, selected states and emphasis

#4c8df6rgb(76, 141, 246)hsl(217.1, 90.4%, 63.1%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#2f6bd4rgb(47, 107, 212)hsl(218.2, 65.7%, 50.8%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#1e3a63rgb(30, 58, 99)hsl(215.7, 53.5%, 25.3%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#8b7cf6rgb(139, 124, 246)hsl(247.4, 87.1%, 72.5%)

Accent accent

Spot color for badges and highlights

#f2b33drgb(242, 179, 61)hsl(39.1, 87.4%, 59.4%)

Success success

Success toasts and completed states

#3fbf7frgb(63, 191, 127)hsl(150, 50.4%, 49.8%)

Warning warning

Warnings and pending states

#e8b341rgb(232, 179, 65)hsl(41, 78.4%, 58.2%)

Danger danger

Errors, destructive actions and failure states

#f2685ergb(242, 104, 94)hsl(4.1, 85.1%, 65.9%)

Text text

Body text color

#e8ecf4rgb(232, 236, 244)hsl(220, 35.3%, 93.3%)

Page background bg

Page base color

#12161frgb(18, 22, 31)hsl(221.5, 26.5%, 9.6%)

How to use it

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

The lead color 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 color on the eye.

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

Pairs withWhite and pale gray 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

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	15.29:1	AAA	AAA
Brand color / page background	5.56: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-primary: #4c8df6; /* Primary */
  --color-primaryDark: #2f6bd4; /* Primary dark */
  --color-primaryLight: #1e3a63; /* Primary light */
  --color-secondary: #8b7cf6; /* Secondary */
  --color-accent: #f2b33d; /* Accent */
  --color-success: #3fbf7f; /* Success */
  --color-warning: #e8b341; /* Warning */
  --color-danger: #f2685e; /* Danger */
  --color-text: #e8ecf4; /* Text */
  --color-bg: #12161f; /* Page background */
}

SCSS variables

$color-primary: #4c8df6; // Primary
$color-primaryDark: #2f6bd4; // Primary dark
$color-primaryLight: #1e3a63; // Primary light
$color-secondary: #8b7cf6; // Secondary
$color-accent: #f2b33d; // Accent
$color-success: #3fbf7f; // Success
$color-warning: #e8b341; // Warning
$color-danger: #f2685e; // Danger
$color-text: #e8ecf4; // Text
$color-bg: #12161f; // Page background

Tailwind config

// tailwind.config.js: Ink Blue Night
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#4c8df6',
        'primaryDark': '#2f6bd4',
        'primaryLight': '#1e3a63',
        'secondary': '#8b7cf6',
        'accent': '#f2b33d',
        'success': '#3fbf7f',
        'warning': '#e8b341',
        'danger': '#f2685e',
        'text': '#e8ecf4',
        'bg': '#12161f',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Ink Blue Night",
  "platform": "app",
  "tags": [
    "Dark",
    "Business",
    "High contrast"
  ],
  "advice": {
    "family": "Blue",
    "depth": "The lead color 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 color on the eye.",
    "avoid": "Cool blue feels reserved in promotions that need heat and momentum.",
    "pair": "White and pale gray are the safe pairing; a warm accent (orange or yellow) makes calls to action pop."
  },
  "roles": {
    "primary": "#4c8df6",
    "primaryDark": "#2f6bd4",
    "primaryLight": "#1e3a63",
    "secondary": "#8b7cf6",
    "accent": "#f2b33d",
    "success": "#3fbf7f",
    "warning": "#e8b341",
    "danger": "#f2685e",
    "text": "#e8ecf4",
    "bg": "#12161f"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 15.29,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 5.56,
      "level": "AAA"
    }
  }
}

More palettes on this platform