Back to palettes

Palette

Coastal Lighthouse Beam

A contrasting palette inspired by a lighthouse beam cutting through the dusky coastal air, guiding ships.

neutralnatural5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Lighthouse Beam 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 Coastal Lighthouse Beam.

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

Data visualization

#F5F5DC#DEB887#DDA0DD#87CEEB#8B0000

Palette guide

How to use Coastal Lighthouse Beam

Overview

The Coastal Lighthouse Beam palette presents a unique and contrasting collection, inspired by the dramatic interplay of a lighthouse beam cutting through coastal air. It features earthy tones like the creamy #F5F5DC and sandy #DEB887, juxtaposed with the striking #87CEEB (sky blue) and the bold #8B0000 (dark red), with a touch of muted purple in #DDA0DD. This palette is perfect for designs seeking a rustic, nautical, or vintage-inspired aesthetic with a hint of drama. Developers will find these colors excellent for crafting distinct branding, storytelling visuals, and engaging digital experiences that stand out.

Best used for

  • Nautical and maritime themed branding
  • Vintage or retro inspired designs
  • Holiday and travel promotions
  • Artisanal product packaging
  • Dramatic storytelling websites
  • Event and festival marketing

Suggested color roles

primary

Utilize #DEB887 as a warm, earthy base for large sections, card backgrounds, or a grounding element.

secondary

Employ #87CEEB as a refreshing secondary color for headers, navigation, or to introduce a cool, open feel.

accent

Apply #8B0000 for high-impact calls-to-action, critical alerts, or to create strong focal points and dramatic contrast.

background

The creamy #F5F5DC is ideal for expansive backgrounds, offering a soft, warm canvas that highlights other colors.

text

For optimal readability on light backgrounds, use #8B0000 or a deep charcoal like #222222 to ensure strong contrast.

Accessibility notes

  • Ensure #8B0000 text has excellent contrast against #F5F5DC or #DEB887 backgrounds.
  • Verify #87CEEB text contrast on #F5F5DC, as light blue on light cream can be problematic.
  • Avoid using #DEB887 or #DDA0DD for small text on #F5F5DC due to potential low contrast.
  • Always test all text and interactive elements with a WCAG contrast checker for compliance.

Recommended combinations

Dramatic Beacon

Create high-impact hero sections: a light background, a bold accent, and a refreshing secondary color for balance.

#F5F5DC · #8B0000 · #87CEEB

Rustic Charm

Ideal for layered content blocks or background patterns that evoke an aged, artisanal feel.

#DEB887 · #DDA0DD · #F5F5DC

Nautical Blend

Combine a clear sky blue with sandy tones and a bold red accent for a classic maritime aesthetic.

#87CEEB · #DEB887 · #8B0000

CSS variables

:root {
  --coastal-lighthouse-beam-1: #F5F5DC;
  --coastal-lighthouse-beam-2: #DEB887;
  --coastal-lighthouse-beam-3: #DDA0DD;
  --coastal-lighthouse-beam-4: #87CEEB;
  --coastal-lighthouse-beam-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-lighthouse-beam": {
        1: "#F5F5DC",
        2: "#DEB887",
        3: "#DDA0DD",
        4: "#87CEEB",
        5: "#8B0000",
      }
    }
  }
}

Related searches

nautical color paletterustic coastal schemelighthouse inspired colorsvintage seaside huescontrasting natural palette

Palette colors

Hex values

Color 1#F5F5DC
·
Color 2#DEB887
·
Color 3#DDA0DD
·
Color 4#87CEEB
·
Color 5#8B0000
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
1.9:1Fail
1.6:1Fail
9:1AAA
2
1.7:1Fail
1.1:1Fail
1.1:1Fail
5.4:1AA
3
1.9:1Fail
1.1:1Fail
1.2:1Fail
4.8:1AA
4
1.6:1Fail
1.1:1Fail
1.2:1Fail
5.7:1AA
5
9:1AAA
5.4:1AA
4.8:1AA
5.7:1AA

Similar palettes

More like Coastal Lighthouse Beam

View all neutral