What are the hex codes in the Hot Pink & Apricot Vibe palette?

The Hot Pink & Apricot Vibe color palette consists of Obsidian #000B12, Peacock #004E6B, Apricot #FFCA85, Hot Pink #FF78BE.

How should I use the Hot Pink & Apricot Vibe palette on a website?

Use Apricot #FFCA85 as the background, Obsidian #000B12 for text, Peacock #004E6B for buttons and links, and Hot Pink #FF78BE for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Apricot at 13.29:1.

Which colors in Hot Pink & Apricot Vibe have enough contrast for text?

The highest-contrast pair is #000B12 on #FFCA85 with a ratio of 13.29:1, which passes WCAG AA for normal text.

#000B12Obsidian

#004E6BPeacock

#FFCA85Apricot

#FF78BEHot Pink

Hot Pink & Apricot Vibe color palette

Dark Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#000B12`	`rgb(0, 11, 18)`	`hsl(203, 100%, 4%)`	`oklch(14.0% 0.027 229)`
Peacock	`#004E6B`	`rgb(0, 78, 107)`	`hsl(196, 100%, 21%)`	`oklch(39.8% 0.081 232)`
Apricot	`#FFCA85`	`rgb(255, 202, 133)`	`hsl(34, 100%, 76%)`	`oklch(87.1% 0.105 73)`
Hot Pink	`#FF78BE`	`rgb(255, 120, 190)`	`hsl(329, 100%, 74%)`	`oklch(75.0% 0.180 350)`

Why it works and how to use it

Hot Pink & Apricot Vibe is a vivid complementary color palette tagged dark, black. Peacock and Hot Pink sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Peacock takes the lead while the rest support. Lightness runs from 4% to 76%. Well suited to websites, presentations and branding.

Background: Apricot (#FFCA85) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#000B12) on #FFCA85 gives 13.29:1, passing WCAG AAA.
Primary: Peacock (#004E6B) is the most saturated mid-tone; use it for buttons and links (6.1:1 against the background, fine for UI elements).
Accent: Hot Pink (#FF78BE) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Apricot at 13.29:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Hot Pink & Apricot Vibe

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

#000B12

#004E6B

#FFCA85

#FF78BE

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
`#000B12` on `#FFCA85`	Aa	13.29:1	AAA
`#000B12` on `#FF78BE`	Aa	8.22:1	AAA
`#004E6B` on `#FFCA85`	Aa	6.1:1	AA
`#004E6B` on `#FF78BE`	Aa	3.77:1	AA large only
`#000B12` on `#004E6B`	Aa	2.18:1	Fail
`#FFCA85` on `#FF78BE`	Aa	1.62:1	Fail

:root {
  --obsidian: #000B12;
  --peacock: #004E6B;
  --apricot: #FFCA85;
  --hot-pink: #FF78BE;
}

$obsidian: #000B12;
$peacock: #004E6B;
$apricot: #FFCA85;
$hot-pink: #FF78BE;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'obsidian': '#000B12',
        'peacock': '#004E6B',
        'apricot': '#FFCA85',
        'hot-pink': '#FF78BE',
      },
    },
  },
};

{
  "name": "Hot Pink & Apricot Vibe",
  "colors": [
    "#000B12",
    "#004E6B",
    "#FFCA85",
    "#FF78BE"
  ]
}

background: linear-gradient(135deg, #000B12, #004E6B, #FFCA85, #FF78BE);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood