What are the hex codes in the Neon Orange & Dusk Dream palette?

The Neon Orange & Dusk Dream color palette consists of Obsidian #0E0E14, Dusk #4A4E6A, Lavender Gray #C8CCE0, Neon Orange #FF6129.

How should I use the Neon Orange & Dusk Dream palette on a website?

Use Lavender Gray #C8CCE0 as the background, Obsidian #0E0E14 for text, Neon Orange #FF6129 for buttons and links, and Dusk #4A4E6A for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Obsidian on Lavender Gray at 12.06:1.

Which colors in Neon Orange & Dusk Dream have enough contrast for text?

The highest-contrast pair is #0E0E14 on #C8CCE0 with a ratio of 12.06:1, which passes WCAG AA for normal text.

#0E0E14Obsidian

#4A4E6ADusk

#C8CCE0Lavender Gray

#FF6129Neon Orange

Neon Orange & Dusk Dream color palette

Dark Minimal Black Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Obsidian	`#0E0E14`	`rgb(14, 14, 20)`	`hsl(240, 18%, 7%)`	`oklch(16.7% 0.012 285)`
Dusk	`#4A4E6A`	`rgb(74, 78, 106)`	`hsl(233, 18%, 35%)`	`oklch(43.2% 0.047 278)`
Lavender Gray	`#C8CCE0`	`rgb(200, 204, 224)`	`hsl(230, 28%, 83%)`	`oklch(84.8% 0.028 277)`
Neon Orange	`#FF6129`	`rgb(255, 97, 41)`	`hsl(16, 100%, 58%)`	`oklch(69.1% 0.203 38)`

Why it works and how to use it

Neon Orange & Dusk Dream is a complementary color palette tagged dark, minimal, black. Near-complementary hues (about 146° 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.

With 3 chromatic colors, Neon Orange takes the lead while the rest support. Lightness runs from 7% to 83%. Well suited to websites, presentations and branding.

Background: Lavender Gray (#C8CCE0) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#0E0E14) on #C8CCE0 gives 12.06:1, passing WCAG AAA.
Primary: Neon Orange (#FF6129) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#4A4E6A) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Neon Orange & Dusk Dream

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

#0E0E14

#4A4E6A

#C8CCE0

#FF6129

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
`#0E0E14` on `#C8CCE0`	Aa	12.06:1	AAA
`#0E0E14` on `#FF6129`	Aa	6.41:1	AA
`#4A4E6A` on `#C8CCE0`	Aa	5.09:1	AA
`#4A4E6A` on `#FF6129`	Aa	2.7:1	Fail
`#0E0E14` on `#4A4E6A`	Aa	2.37:1	Fail
`#C8CCE0` on `#FF6129`	Aa	1.88:1	Fail

:root {
  --obsidian: #0E0E14;
  --dusk: #4A4E6A;
  --lavender-gray: #C8CCE0;
  --neon-orange: #FF6129;
}

$obsidian: #0E0E14;
$dusk: #4A4E6A;
$lavender-gray: #C8CCE0;
$neon-orange: #FF6129;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'obsidian': '#0E0E14',
        'dusk': '#4A4E6A',
        'lavender-gray': '#C8CCE0',
        'neon-orange': '#FF6129',
      },
    },
  },
};

{
  "name": "Neon Orange & Dusk Dream",
  "colors": [
    "#0E0E14",
    "#4A4E6A",
    "#C8CCE0",
    "#FF6129"
  ]
}

background: linear-gradient(135deg, #0E0E14, #4A4E6A, #C8CCE0, #FF6129);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

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

Similar palettes 24 more in this mood