What are the hex codes in the Signal Persimmon & Lavender Gray palette?

The Signal Persimmon & Lavender Gray color palette consists of Onyx #313C3F, Persimmon #EA5300, Lavender Gray #BECFD5, Smoke #F1F8FA.

How should I use the Signal Persimmon & Lavender Gray palette on a website?

Use Smoke #F1F8FA as the background, Onyx #313C3F for text, Persimmon #EA5300 for buttons and links, and Lavender Gray #BECFD5 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Onyx on Smoke at 10.57:1.

Which colors in Signal Persimmon & Lavender Gray have enough contrast for text?

The highest-contrast pair is #313C3F on #F1F8FA with a ratio of 10.57:1, which passes WCAG AA for normal text.

#313C3FOnyx

#EA5300Persimmon

#BECFD5Lavender Gray

#F1F8FASmoke

Signal Persimmon & Lavender Gray color palette

Tech Minimal Gray Orange White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Onyx	`#313C3F`	`rgb(49, 60, 63)`	`hsl(193, 13%, 22%)`	`oklch(34.7% 0.015 216)`
Persimmon	`#EA5300`	`rgb(234, 83, 0)`	`hsl(21, 100%, 46%)`	`oklch(64.0% 0.199 40)`
Lavender Gray	`#BECFD5`	`rgb(190, 207, 213)`	`hsl(196, 21%, 79%)`	`oklch(84.3% 0.020 221)`
Smoke	`#F1F8FA`	`rgb(241, 248, 250)`	`hsl(193, 47%, 96%)`	`oklch(97.4% 0.008 217)`

Why it works and how to use it

Signal Persimmon & Lavender Gray is a complementary color palette tagged tech, minimal, gray. Near-complementary hues (about 175° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

Two of the four colors are near-neutral, which leaves room for Persimmon to lead. Lightness runs from 22% to 96%. Well suited to a SaaS landing page or dashboard.

Background: Smoke (#F1F8FA) is the lightest color, so it belongs on large surfaces.
Text: Onyx (#313C3F) on #F1F8FA gives 10.57:1, passing WCAG AAA.
Primary: Persimmon (#EA5300) is the most saturated mid-tone; use it for buttons and links (3.41:1 against the background, fine for UI elements).
Accent: Lavender Gray (#BECFD5) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Onyx on Smoke at 10.57:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Signal Persimmon & Lavender Gray

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#313C3F

#EA5300

#BECFD5

#F1F8FA

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#313C3F` on `#F1F8FA`	Aa	10.57:1	AAA
`#313C3F` on `#BECFD5`	Aa	7.07:1	AAA
`#EA5300` on `#F1F8FA`	Aa	3.41:1	AA large only
`#313C3F` on `#EA5300`	Aa	3.1:1	AA large only
`#EA5300` on `#BECFD5`	Aa	2.28:1	Fail
`#BECFD5` on `#F1F8FA`	Aa	1.49:1	Fail

:root {
  --onyx: #313C3F;
  --persimmon: #EA5300;
  --lavender-gray: #BECFD5;
  --smoke: #F1F8FA;
}

$onyx: #313C3F;
$persimmon: #EA5300;
$lavender-gray: #BECFD5;
$smoke: #F1F8FA;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'onyx': '#313C3F',
        'persimmon': '#EA5300',
        'lavender-gray': '#BECFD5',
        'smoke': '#F1F8FA',
      },
    },
  },
};

{
  "name": "Signal Persimmon & Lavender Gray",
  "colors": [
    "#313C3F",
    "#EA5300",
    "#BECFD5",
    "#F1F8FA"
  ]
}

background: linear-gradient(135deg, #313C3F, #EA5300, #BECFD5, #F1F8FA);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-03-01 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood