Deep Current · 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

#3d4076rgb(61, 64, 118)hsl(236.8, 31.8%, 35.1%)

Primary dark primaryDark

Pressed state, or primary on dark backgrounds

#232548rgb(35, 37, 72)hsl(236.8, 34.6%, 21%)

Primary light primaryLight

Tinted surfaces, tag backgrounds, subdued selected states

#9c9dbargb(156, 157, 186)hsl(238, 17.9%, 67.1%)

Secondary secondary

Companion to the primary for secondary buttons and icons

#7f6148rgb(127, 97, 72)hsl(27.3, 27.6%, 39%)

Accent accent

Spot colour for badges and highlights

#c78957rgb(199, 137, 87)hsl(26.8, 50%, 56.1%)

Success success

Success toasts and completed states

#2c9b5argb(44, 155, 90)hsl(144.9, 55.8%, 39%)

Warning warning

Warnings and pending states

#dd9913rgb(221, 153, 19)hsl(39.8, 84.2%, 47.1%)

Danger danger

Errors, destructive actions and failure states

#d33227rgb(211, 50, 39)hsl(3.8, 68.8%, 49%)

Text text

Body text colour

#232329rgb(35, 35, 41)hsl(240, 7.9%, 14.9%)

Page background bg

Page base colour

#f9f9fargb(249, 249, 250)hsl(240, 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.

This palette's lead colour is deep and carries weight — suited to dark themes, or interfaces that need to feel professional and steady.

Good forComfortable for interfaces people look at for long stretches — it is the easiest colour on the eye.

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.85:1	AAA	AAA
Brand colour / page background	9.1:1	AAA	AAA

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: #3d4076; /* Primary */
  --color-primaryDark: #232548; /* Primary dark */
  --color-primaryLight: #9c9dba; /* Primary light */
  --color-secondary: #7f6148; /* Secondary */
  --color-accent: #c78957; /* Accent */
  --color-success: #2c9b5a; /* Success */
  --color-warning: #dd9913; /* Warning */
  --color-danger: #d33227; /* Danger */
  --color-text: #232329; /* Text */
  --color-bg: #f9f9fa; /* Page background */
}

SCSS variables

$color-primary: #3d4076; // Primary
$color-primaryDark: #232548; // Primary dark
$color-primaryLight: #9c9dba; // Primary light
$color-secondary: #7f6148; // Secondary
$color-accent: #c78957; // Accent
$color-success: #2c9b5a; // Success
$color-warning: #dd9913; // Warning
$color-danger: #d33227; // Danger
$color-text: #232329; // Text
$color-bg: #f9f9fa; // Page background

Tailwind config

// tailwind.config.js: Deep Current
module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3d4076',
        'primaryDark': '#232548',
        'primaryLight': '#9c9dba',
        'secondary': '#7f6148',
        'accent': '#c78957',
        'success': '#2c9b5a',
        'warning': '#dd9913',
        'danger': '#d33227',
        'text': '#232329',
        'bg': '#f9f9fa',
      },
    },
  },
};

Machine-readable JSON

{
  "name": "Deep Current",
  "platform": "app",
  "tags": [
    "Forest",
    "Blue"
  ],
  "advice": {
    "family": "Blue",
    "depth": "This palette's lead colour is deep and carries weight — suited to dark themes, or interfaces that need to feel professional and steady.",
    "muted": null,
    "suit": "Comfortable for interfaces people look at for long stretches — it is the easiest colour on the eye.",
    "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": "#3d4076",
    "primaryDark": "#232548",
    "primaryLight": "#9c9dba",
    "secondary": "#7f6148",
    "accent": "#c78957",
    "success": "#2c9b5a",
    "warning": "#dd9913",
    "danger": "#d33227",
    "text": "#232329",
    "bg": "#f9f9fa"
  },
  "contrast": {
    "textOnBg": {
      "ratio": 14.85,
      "level": "AAA"
    },
    "primaryOnBg": {
      "ratio": 9.1,
      "level": "AAA"
    }
  }
}

More palettes on this platform