Back to palettes

Palette

Quiet Ocean Floor

Muted, mysterious blues and deep greens, reflecting the serene yet unknown depths of the quiet ocean floor.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Ocean Floor 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 Quiet Ocean Floor.

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

Data visualization

#2F4F4F#4682B4#3CB371#6A5ACD#1E3030

Palette guide

How to use Quiet Ocean Floor

Overview

The Quiet Ocean Floor palette dives into the serene yet profound depths of the sea, offering a sophisticated blend of dark blues and greens. This collection, featuring #2F4F4F (Dark Slate Gray), #4682B4 (Steel Blue), #3CB371 (Medium Sea Green), #6A5ACD (Slate Blue), and #1E3030 (a very dark teal), is ideal for projects seeking a mysterious and tranquil atmosphere. Designers and developers can leverage these muted tones to create immersive digital experiences or luxurious branding, evoking a sense of calm and understated elegance. The palette's versatility allows for both subtle gradients and striking, deep contrasts.

Best used for

  • Luxury branding and packaging
  • Night mode UI/UX designs
  • Abstract art and digital illustrations
  • Sophisticated website themes
  • Deep sea or nature-themed projects
  • Contemplative and serene interior design

Suggested color roles

primary

Use #4682B4 (Steel Blue) as a primary anchor for its calming yet established presence, suitable for main sections or prominent UI elements.

secondary

Incorporate #3CB371 (Medium Sea Green) as a secondary color to introduce a subtle, natural contrast and a touch of organic energy without overpowering the palette.

accent

Apply #6A5ACD (Slate Blue) sparingly as an accent to provide a subdued pop of rich color, drawing attention to calls-to-action or key interactive elements.

background

Employ #1E3030 (a very dark teal) as a deep, immersive background color, perfect for creating a sense of depth and luxury in digital interfaces or large design areas.

text

For optimal readability against dark backgrounds like #1E3030, use a light grey or off-white. For headings on lighter palette colors, consider #2F4F4F for a sophisticated touch.

Accessibility notes

  • Ensure sufficient contrast when pairing #2F4F4F text with #1E3030 background; a lighter text color is often necessary.
  • Verify readability for smaller text sizes, especially when using #3CB371 on backgrounds like #4682B4.
  • The deep #1E3030 provides excellent contrast for light text, but monitor WCAG guidelines for all color combinations.
  • Avoid using #2F4F4F directly on #1E3030 for body text to prevent readability issues due to low contrast.

Recommended combinations

Deep Ocean Contrast

Ideal for creating strong visual hierarchy, where the deep background anchors the vibrant blue and green elements.

#1E3030 · #4682B4 · #3CB371

Muted Harmony

Excellent for a sophisticated, understated look, blending the dark slate with a richer blue accent.

#2F4F4F · #6A5ACD · #4682B4

Subtle Depths

Perfect for layering dark tones with a hint of natural green, creating a sense of quiet mystery and organic depth.

#1E3030 · #2F4F4F · #3CB371

CSS variables

:root {
  --quiet-ocean-floor-1: #2F4F4F;
  --quiet-ocean-floor-2: #4682B4;
  --quiet-ocean-floor-3: #3CB371;
  --quiet-ocean-floor-4: #6A5ACD;
  --quiet-ocean-floor-5: #1E3030;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-ocean-floor": {
        1: "#2F4F4F",
        2: "#4682B4",
        3: "#3CB371",
        4: "#6A5ACD",
        5: "#1E3030",
      }
    }
  }
}

Related searches

deep sea color palettedark blue green thememysterious color schemesophisticated web design colorstranquil branding palette

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4682B4
·
Color 3#3CB371
·
Color 4#6A5ACD
·
Color 5#1E3030
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.3:1AA18
1.7:1Fail
1.5:1Fail
2
2.2:1Fail
1.5:1Fail
1.3:1Fail
3.4:1AA18
3
3.3:1AA18
1.5:1Fail
2:1Fail
5.2:1AA
4
1.7:1Fail
1.3:1Fail
2:1Fail
2.6:1Fail
5
1.5:1Fail
3.4:1AA18
5.2:1AA
2.6:1Fail

Similar palettes

More like Quiet Ocean Floor

View all dark
Bioluminescent Deep Trench
Deep Ocean Caverns
Deep Sea Explorer
Ocean Trench Secrets
Submarine Abyss Light
Abyss Gaze