What are the hex codes in the Pumpkin & Periwinkle Breeze palette?

The Pumpkin & Periwinkle Breeze color palette consists of Ink #141734, Pumpkin #FF7E11, Periwinkle #BCBEFF, Periwinkle #D9D4FF.

How should I use the Pumpkin & Periwinkle Breeze palette on a website?

Use Periwinkle #D9D4FF as the background, Ink #141734 for text, Pumpkin #FF7E11 for buttons and links, and Periwinkle #BCBEFF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Periwinkle at 12.32:1.

Which colors in Pumpkin & Periwinkle Breeze have enough contrast for text?

The highest-contrast pair is #141734 on #D9D4FF with a ratio of 12.32:1, which passes WCAG AA for normal text.

#141734Ink

#FF7E11Pumpkin

#BCBEFFPeriwinkle

#D9D4FFPeriwinkle

Pumpkin & Periwinkle Breeze color palette

Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ink	`#141734`	`rgb(20, 23, 52)`	`hsl(234, 44%, 14%)`	`oklch(21.9% 0.056 276)`
Pumpkin	`#FF7E11`	`rgb(255, 126, 17)`	`hsl(27, 100%, 53%)`	`oklch(72.9% 0.185 51)`
Periwinkle	`#BCBEFF`	`rgb(188, 190, 255)`	`hsl(238, 100%, 87%)`	`oklch(82.3% 0.091 283)`
Periwinkle	`#D9D4FF`	`rgb(217, 212, 255)`	`hsl(247, 100%, 92%)`	`oklch(88.8% 0.059 290)`

Why it works and how to use it

Pumpkin & Periwinkle Breeze is a vivid complementary color palette tagged orange. Near-complementary hues (about 153° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Pumpkin takes the lead while the rest support. Lightness runs from 14% to 92%. Well suited to websites, presentations and branding.

Background: Periwinkle (#D9D4FF) is the lightest color, so it belongs on large surfaces.
Text: Ink (#141734) on #D9D4FF gives 12.32:1, passing WCAG AAA.
Primary: Pumpkin (#FF7E11) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Periwinkle (#BCBEFF) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Periwinkle at 12.32:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Pumpkin & Periwinkle Breeze

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

#141734

#FF7E11

#BCBEFF

#D9D4FF

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
`#141734` on `#D9D4FF`	Aa	12.32:1	AAA
`#141734` on `#BCBEFF`	Aa	9.94:1	AAA
`#141734` on `#FF7E11`	Aa	6.86:1	AA
`#FF7E11` on `#D9D4FF`	Aa	1.8:1	Fail
`#FF7E11` on `#BCBEFF`	Aa	1.45:1	Fail
`#BCBEFF` on `#D9D4FF`	Aa	1.24:1	Fail

:root {
  --ink: #141734;
  --pumpkin: #FF7E11;
  --periwinkle: #BCBEFF;
  --periwinkle-4: #D9D4FF;
}

$ink: #141734;
$pumpkin: #FF7E11;
$periwinkle: #BCBEFF;
$periwinkle-4: #D9D4FF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ink': '#141734',
        'pumpkin': '#FF7E11',
        'periwinkle': '#BCBEFF',
        'periwinkle-4': '#D9D4FF',
      },
    },
  },
};

{
  "name": "Pumpkin & Periwinkle Breeze",
  "colors": [
    "#141734",
    "#FF7E11",
    "#BCBEFF",
    "#D9D4FF"
  ]
}

background: linear-gradient(135deg, #141734, #FF7E11, #BCBEFF, #D9D4FF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-06-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood