#222831Raisin
#575D65Storm
#00ADB5Cadet
#EEEEEEFrost

Midnight Coral color palette

DarkTechModernMinimalGrayTealWhite
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Midnight Coral is a analogous color palette tagged dark, tech, modern. The hues stay within 33° of each other on the color wheel, which is why the palette feels cohesive rather than busy. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Raisin#222831rgb(34, 40, 49)hsl(216, 18%, 16%)oklch(27.5% 0.019 258)
Storm#575D65rgb(87, 93, 101)hsl(214, 7%, 37%)oklch(47.6% 0.015 256)
Cadet#00ADB5rgb(0, 173, 181)hsl(183, 100%, 35%)oklch(68.0% 0.116 201)
Frost#EEEEEErgb(238, 238, 238)hsl(0, 0%, 93%)oklch(94.9% 0.000 0)

Why it works and how to use it

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

  • Background: Frost (#EEEEEE) is the lightest color, so it belongs on large surfaces.
  • Text: Raisin (#222831) on #EEEEEE gives 12.78:1, passing WCAG AAA.
  • Primary: Cadet (#00ADB5) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
  • Accent: Storm (#575D65) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Frost at 12.78:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Midnight Coral

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
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#222831
#575D65
#00ADB5
#EEEEEE

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

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#222831 on #EEEEEEAa12.78:1AAA
#575D65 on #EEEEEEAa5.73:1AA
#222831 on #00ADB5Aa5.4:1AA
#575D65 on #00ADB5Aa2.42:1Fail
#00ADB5 on #EEEEEEAa2.37:1Fail
#222831 on #575D65Aa2.23:1Fail

Similar palettes 24 more in this mood

More dark palettes →More tech palettes →More modern palettes →More minimal palettes →More gray palettes →More teal palettes →More white palettes →