Back to palettes

Palette

Moonlit Riverbed

Shades of cool blue and deep grey evoke the tranquil glow of moonlight on a shallow riverbed.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Moonlit Riverbed reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Moonlit Riverbed.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2F4F4F#4682B4#6A5ACD#A5C0D8#87CEEB

Palette guide

How to use Moonlit Riverbed

Overview

The Moonlit Riverbed palette combines cool blues and deep grey-greens to evoke the tranquil glow of moonlight on a shallow riverbed. This unique collection features the deep, grounding #2F4F4F, a steely blue #4682B4, and a surprising, rich lavender-blue #6A5ACD. Complementing these are the softer, ethereal #A5C0D8 and the bright sky blue #87CEEB, which adds a touch of vibrancy. This palette is excellent for projects aiming for a calm, introspective, and slightly mystical atmosphere. It's particularly effective in branding, digital art, or interfaces that benefit from a distinctive blend of cool, contemplative tones with subtle pops of unexpected color.

Best used for

  • Mystical or fantasy-themed game interfaces
  • Serene meditation or mindfulness apps
  • Boutique hotel branding
  • Art and photography portfolios
  • Elegant science fiction book covers
  • Environmental conservation initiatives

Suggested color roles

primary

#4682B4 - A strong, steel blue, ideal for main headings, key interactive elements, or brand logos to convey stability and depth.

secondary

#6A5ACD - This unique lavender-blue can be used for secondary navigation, important highlights, or distinctive graphic elements, offering a touch of unexpected elegance.

accent

#87CEEB - A bright, sky blue, perfect for calls-to-action, small interactive elements, or to add a refreshing pop of color.

background

#2F4F4F - A deep grey-green, excellent for creating a sophisticated and immersive background that grounds the design.

text

For light text, #A5C0D8 provides good contrast on darker backgrounds. Pure white is also effective for maximum readability.

Accessibility notes

  • Ensure all text on #2F4F4F, #4682B4, and #6A5ACD backgrounds uses sufficiently light colors (e.g., #A5C0D8 or white) to meet WCAG contrast guidelines.
  • The combination of #A5C0D8 and #87CEEB should be avoided for text or small elements due to low contrast.
  • Critical interactive elements should use colors with high contrast, such as #87CEEB on #2F4F4F.
  • For large text (18pt or 14pt bold and larger), a 3:1 contrast ratio is acceptable, but 4.5:1 is always safer for body text.

Recommended combinations

Mystical UI

Creates a deep, contemplative user interface, with the lightest color for text and the darkest for backgrounds.

#2F4F4F · #4682B4 · #A5C0D8

Ethereal Highlights

Uses the unique purple-blue and bright sky blue for striking accents against a lighter background.

#6A5ACD · #87CEEB · #A5C0D8

Grounded Harmony

Excellent for branding that balances deep, serious tones with a refreshing, clear blue.

#2F4F4F · #4682B4 · #87CEEB

CSS variables

:root {
  --moonlit-riverbed-1: #2F4F4F;
  --moonlit-riverbed-2: #4682B4;
  --moonlit-riverbed-3: #6A5ACD;
  --moonlit-riverbed-4: #A5C0D8;
  --moonlit-riverbed-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "moonlit-riverbed": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#6A5ACD",
        4: "#A5C0D8",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

tranquil blue grey palettemystical river colorscool lavender blue schemedeep aquatic web designserene nature branding

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#6A5ACD
·
Color 4#A5C0D8
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.7:1Fail
4.7:1AA
5.1:1AA
2
2.2:1Fail
1.3:1Fail
2.2:1Fail
2.4:1Fail
3
1.7:1Fail
1.3:1Fail
2.8:1Fail
3:1AA18
4
4.7:1AA
2.2:1Fail
2.8:1Fail
1.1:1Fail
5
5.1:1AA
2.4:1Fail
3:1AA18
1.1:1Fail

Similar palettes

More like Moonlit Riverbed

View all cool
Moonlit Cove
Moonlit Garden Path
Riverbed Pebble Smooth
Starlight Azure Veil
Starry Night Dream
Starry Night Horizon