Back to palettes

Palette

Lapis Tidepool

Deep, mystical blues inspired by lapis lazuli, reflecting the hidden treasures of a sunlit tidepool.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Lapis Tidepool 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 Lapis Tidepool.

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

Data visualization

#1A2E44#304D6B#4A6E94#77A1C7#223E59

Palette guide

How to use Lapis Tidepool

Overview

The Lapis Tidepool palette presents a captivating array of deep, mystical blues, drawing inspiration from lapis lazuli and the hidden depths of a sunlit tidepool. This sophisticated collection, featuring rich tones like the profound #1A2E44, the vibrant #4A6E94, and the illuminating #77A1C7, is perfect for designers and developers seeking to convey depth, elegance, and natural wonder. It offers a balanced spectrum from dark, grounding blues to lighter, shimmering aquas, providing versatility for both bold statements and subtle accents. This palette is excellent for projects requiring a sense of trust, luxury, and oceanic allure.

Best used for

  • Luxury brand identity
  • Marine and aquatic conservation sites
  • Technology and software interfaces
  • Educational platforms
  • High-end fashion or jewelry design
  • Data visualization dashboards

Suggested color roles

primary

Designate #1A2E44 as the primary color for strong branding, large headings, or dark mode interfaces.

secondary

Use #304D6B for supporting elements, sub-sections, or as a background for content blocks.

accent

Apply #77A1C7 for highlights, interactive elements, or key calls-to-action to draw immediate attention.

background

Employ #223E59 as a deep, sophisticated background, providing a strong foundation for lighter elements.

text

White or a very light grey, or #77A1C7, offers optimal readability for text against the darker blues like #1A2E44 or #223E59.

Accessibility notes

  • Ensure #77A1C7 has sufficient contrast when used as text on darker blues like #1A2E44 or #223E59.
  • Avoid using #304D6B for small text on #223E59, as contrast may be insufficient.
  • White text provides the highest contrast and readability for body copy on primary and background colors.
  • Use #4A6E94 for larger headings or accents on a darker background to maintain visual clarity.

Recommended combinations

Deep Ocean

Excellent for core branding, dark mode themes, and primary UI components, conveying depth and sophistication.

#1A2E44 · #223E59 · #77A1C7

Tidepool Shimmer

Ideal for interactive elements, data charts, or gradients that suggest movement and subtle illumination.

#304D6B · #4A6E94 · #77A1C7

Lapis Core

Creates a balanced, professional look for headers, important sections, or a refined corporate presence.

#1A2E44 · #4A6E94 · #223E59

CSS variables

:root {
  --lapis-tidepool-1: #1A2E44;
  --lapis-tidepool-2: #304D6B;
  --lapis-tidepool-3: #4A6E94;
  --lapis-tidepool-4: #77A1C7;
  --lapis-tidepool-5: #223E59;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "lapis-tidepool": {
        1: "#1A2E44",
        2: "#304D6B",
        3: "#4A6E94",
        4: "#77A1C7",
        5: "#223E59",
      }
    }
  }
}

Related searches

deep blue color schemeocean inspired palettelapis lazuli hex codescool tech branding colorselegant blue web design

Palette colors

Hex values

Color 1#1A2E44
·
Color 2#304D6B
·
Color 3#4A6E94
·
Color 4#77A1C7
·
Color 5#223E59
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
5.1:1AA
1.3:1Fail
2
1.6:1Fail
1.6:1Fail
3.2:1AA18
1.3:1Fail
3
2.6:1Fail
1.6:1Fail
2:1Fail
2.1:1Fail
4
5.1:1AA
3.2:1AA18
2:1Fail
4.1:1AA18
5
1.3:1Fail
1.3:1Fail
2.1:1Fail
4.1:1AA18

Similar palettes

More like Lapis Tidepool

View all cool
Celestial Ocean Mirror
Emerald Coast Dive
Ocean Salt Spray
Aqua Jewel
Azure Coast Relic
Azure Coastline